Initial commit.

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2020
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+  "rules": {
+    "no-cond-assign": 0,
+    "no-constant-condition": 0,
+    "no-unexpected-multiline": 0,
+    "comma-dangle": ["error", "never"],
+    "semi": [2, "always"]
+  }
+}

.github/eslint.json

@@ -0,0 +1,18 @@
+{
+  "problemMatcher": [
+    {
+      "owner": "eslint-compact",
+      "pattern": [
+        {
+          "regexp": "^(.+):\\sline\\s(\\d+),\\scol\\s(\\d+),\\s(Error|Warning|Info)\\s-\\s(.+)\\s\\((.+)\\)$",
+          "file": 1,
+          "line": 2,
+          "column": 3,
+          "severity": 4,
+          "message": 5,
+          "code": 6
+        }
+      ]
+    }
+  ]
+}

.github/workflows/node.js.yml

@@ -0,0 +1,30 @@
+# https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: yarn --frozen-lockfile
+    - run: |
+        echo ::add-matcher::.github/eslint.json
+        yarn run eslint . --format=compact
+    - run: yarn test

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+dist/
+node_modules/

LICENSE

@@ -0,0 +1,13 @@
+Copyright 2021 Observable, Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+# Observable Inputs
+
+User interface components for Observable notebooks.

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@observablehq/inputs",
+  "description": "User interface components for Observable notebooks",
+  "version": "0.0.1",
+  "author": {
+    "name": "Observable, Inc.",
+    "url": "https://observablehq.com"
+  },
+  "license": "ISC",
+  "main": "dist/@observablehq/inputs.cjs.js",
+  "unpkg": "dist/@observablehq/inputs.umd.min.js",
+  "module": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/observablehq/inputs.git"
+  },
+  "files": [
+    "dist/**/*.js",
+    "src/**/*.js"
+  ],
+  "scripts": {
+    "test": "mkdir -p test/output && tape -r esm -r module-alias/register 'test/**/*-test.js' | tap-dot && eslint src test",
+    "prepublishOnly": "rm -rf dist && rollup -c",
+    "postpublish": "git push && git push --tags"
+  },
+  "_moduleAliases": {
+    "@observablehq/inputs": "./src/index.js"
+  },
+  "devDependencies": {
+    "eslint": "^7.12.1",
+    "esm": "^3.2.25",
+    "jsdom": "^16.4.0",
+    "module-alias": "^2.2.2",
+    "rollup": "^2.32.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "tap-dot": "^2.0.0",
+    "tape": "^4.13.3",
+    "tape-await": "^0.1.2"
+  },
+  "dependencies": {
+    "htl": "^0.2.3"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  }
+}

rollup.config.js

@@ -0,0 +1,51 @@
+import {terser} from "rollup-plugin-terser";
+import * as meta from "./package.json";
+
+const config = {
+  input: "src/index.js",
+  external: ["htl"],
+  output: {
+    indent: false,
+    banner: `// ${meta.name} v${meta.version} Copyright ${(new Date).getFullYear()} ${meta.author.name}`,
+    name: "observablehq",
+    extend: true,
+    globals: {"htl": "htl"},
+    paths: {"htl": `htl@${meta.dependencies.htl}`}
+  },
+  plugins: []
+};
+
+export default [
+  {
+    ...config,
+    output: {
+      ...config.output,
+      format: "cjs",
+      file: `dist/${meta.name}.cjs.js`
+    }
+  },
+  {
+    ...config,
+    output: {
+      ...config.output,
+      format: "umd",
+      file: `dist/${meta.name}.umd.js`
+    }
+  },
+  {
+    ...config,
+    output: {
+      ...config.output,
+      format: "umd",
+      file: `dist/${meta.name}.umd.min.js`
+    },
+    plugins: [
+      ...config.plugins,
+      terser({
+        output: {
+          preamble: config.output.banner
+        }
+      })
+    ]
+  }
+];

src/index.js

@@ -0,0 +1,4 @@
+export {Range} from "./range.js";
+export {Search} from "./search.js";
+export {Select} from "./select.js";
+export {Table} from "./table.js";

src/range.js

@@ -0,0 +1,17 @@
+import {html} from "htl";
+
+export function Range([min, max], {
+  format = d => d.toLocaleString("en"),
+  label = "",
+  width = 180,
+  value,
+  step
+} = {}) {
+  const form = html`<form style="font: 13px var(--sans-serif); display: flex; align-items: center; min-height: 33px;">${Object.assign(html`<input name=i type=range style="margin: 0 0.4em 0 0; width: ${+width}px;">`, {oninput() { this.form.o.value = `${format(this.form.value = this.valueAsNumber)}${label === undefined ? "" : ` ${label}`}`; }})}<output name=o>`;
+  form.i.min = min = +min;
+  form.i.max = max = +max;
+  form.i.step = step === undefined ? "any" : +step;
+  form.i.value = value === undefined ? (min + max) / 2 : +value;
+  form.i.oninput();
+  return form;
+}

src/search.js

@@ -0,0 +1,68 @@
+import {html} from "htl";
+
+export function Search(data, {
+  value = "", // initial search query
+  placeholder = "Search", // placeholder text to show when empty
+  filter = defaultFilter, // returns the filter function given query
+  width // the width of the search box
+} = {}) {
+  const columns = data.columns;
+  data = arrayof(data);
+
+  const form = html`<form style="font: 13px var(--sans-serif); display: flex; align-items: center; min-height: 33px;">${Object.assign(html`<input name=i type=search style="margin: 0 0.4em 0 0; ${width === undefined ? "" : `width: ${+width}px;`}">`, {placeholder, value, oninput})}<output name=o>`;
+
+  function oninput() {
+    const value = data.filter(filter(form.i.value));
+    if (columns !== undefined) value.columns = columns;
+    form.value = value;
+    form.o.value = form.i.value ? `${form.value.length.toLocaleString("en")} results` : "";
+  }
+
+  form.i.oninput();
+  form.onsubmit = event => event.preventDefault();
+  return form;
+}
+
+function defaultFilter(query) {
+  const filters = query.split(/\s+/g).filter(t => t).map(termFilter);
+  return d => {
+    if (d == null) return false;
+    if (typeof d === "object") {
+      out: for (const filter of filters) {
+        for (const value of valuesof(d)) {
+          if (filter.test(value)) {
+            continue out;
+          }
+        }
+        return false;
+      }
+    } else {
+      for (const filter of filters) {
+        if (!filter.test(d)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  };
+}
+
+function arrayof(x) {
+  return typeof x === "object" && "length" in x
+    ? x // Array, TypedArray, NodeList, array-like
+    : Array.from(x); // Map, Set, iterable, string, or anything else
+}
+
+function* valuesof(d) {
+  for (const key in d) {
+    yield d[key];
+  }
+}
+
+function termFilter(term) {
+  return new RegExp(`\\b${escapeRegExp(term)}`, "i");
+}
+
+function escapeRegExp(text) {
+  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+}

src/select.js

@@ -0,0 +1,27 @@
+import {html} from "htl";
+
+export function Select(data, {
+  format = data instanceof Map ? ([key]) => key : d => d,
+  value = data instanceof Map ? ([, value]) => value : d => d,
+  label = "",
+  font = "13px var(--sans-serif)",
+  color,
+  initialValue,
+  initialIndex
+} = {}) {
+  data = Array.from(data);
+  if (initialIndex === undefined) initialIndex = initialValue === undefined ? 0 : data.indexOf(initialValue);
+  const form = html`<form
+    onchange=${() => form.dispatchEvent(new CustomEvent("input"))}
+    oninput=${(event) => {
+      if (event && event.isTrusted) form.onchange = null;
+      const i = form.i.selectedIndex;
+      form.value = value(data[i], i, data);
+    }}
+    style=${{display: "flex", font, color, alignItems: "center", minHeight: 33}}>
+    <select style=${{margin: "0 0.4em 0 0"}} name="i">
+      ${data.map((d, i) => html`<option selected=${i === initialIndex}>${format(d, i, data)}`)}
+    </select>${label}`;
+  form.oninput();
+  return form;
+}