feat: publish Regex Tools 0.1.0

src/components/QuickReference.tsx

@@ -0,0 +1,94 @@
+import { useMemo, useState } from "react";
+import { ECMASCRIPT_REFERENCE } from "../regex/reference/token-reference";
+
+export function QuickReference({
+  onInsert,
+}: {
+  readonly onInsert: (syntax: string) => void;
+}) {
+  const [query, setQuery] = useState("");
+  const entries = useMemo(() => {
+    const needle = query.toLocaleLowerCase();
+    return needle
+      ? ECMASCRIPT_REFERENCE.filter((entry) =>
+          [
+            entry.construct,
+            entry.syntax,
+            entry.explanation,
+            entry.example,
+            entry.flags.join(" "),
+            entry.source,
+          ]
+            .join(" ")
+            .toLocaleLowerCase()
+            .includes(needle),
+        )
+      : ECMASCRIPT_REFERENCE;
+  }, [query]);
+  return (
+    <section
+      className="panel reference-panel"
+      aria-labelledby="reference-heading"
+    >
+      <header className="panel-heading">
+        <div>
+          <p className="eyebrow">Original ECMAScript reference</p>
+          <h2 id="reference-heading">Quick reference</h2>
+        </div>
+      </header>
+      <label className="stacked-control">
+        <span>Filter constructs</span>
+        <input
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+      </label>
+      <ul className="reference-list">
+        {entries.map((entry) => (
+          <li key={entry.id}>
+            <div>
+              <strong>{entry.construct}</strong>
+              <code>{entry.syntax}</code>
+            </div>
+            <p>{entry.explanation}</p>
+            <dl className="reference-meta">
+              <div>
+                <dt>Flavour</dt>
+                <dd>{entry.flavours.join(", ")}</dd>
+              </div>
+              <div>
+                <dt>Relevant flags</dt>
+                <dd>
+                  {entry.flags.length > 0 ? entry.flags.join(", ") : "None"}
+                </dd>
+              </div>
+              <div>
+                <dt>Example</dt>
+                <dd>
+                  <code>{entry.example}</code>
+                </dd>
+              </div>
+              <div>
+                <dt>Source</dt>
+                <dd>
+                  <a href={entry.sourceUrl} target="_blank" rel="noreferrer">
+                    {entry.source}
+                  </a>
+                </dd>
+              </div>
+            </dl>
+            {entry.caveat ? <small>{entry.caveat}</small> : null}
+            <button
+              type="button"
+              className="secondary-button"
+              onClick={() => onInsert(entry.example)}
+            >
+              Insert example
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}