@nymbalhq/web-components 1.1.0 → 1.3.0

package/dist/chunk-4COVK727.js

@@ -0,0 +1,204 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/search-bar.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-search-bar",
+  reactName: "SearchBar",
+  attributes: [
+    { name: "placeholder", prop: "placeholder", type: "string" },
+    { name: "debounce-ms", prop: "debounceMs", type: "number" }
+  ],
+  events: [
+    { name: "nymbal:search:selected", prop: "onSearchSelect", detail: "{ product: unknown }" }
+  ],
+  parts: ["input", "results", "loading", "result", "result-name", "result-price"],
+  slots: ["loading"],
+  children: false
+};
+var NO_SEARCH = { query: "", loading: false, results: [] };
+function formatPrice(minor, currency) {
+  return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(minor / 100);
+}
+var NymbalSearchBar = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      [part~='input'] {
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        width: 100%;
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-md, 0.375rem);
+        outline: none;
+        transition: border-color var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='input']:focus {
+        border-color: var(--nymbal-color-accent, #2563eb);
+      }
+      [part~='results'] {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: var(--nymbal-color-surface, #ffffff);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-top: none;
+        border-radius: 0 0 var(--nymbal-radius-md, 0.375rem) var(--nymbal-radius-md, 0.375rem);
+        box-shadow: var(--nymbal-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+        z-index: var(--nymbal-z-dropdown, 100);
+        max-height: 300px;
+        overflow-y: auto;
+      }
+      [part~='result'] {
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+        cursor: pointer;
+        transition: background var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='result']:hover,
+      [part~='result'][aria-selected='true'] {
+        background: var(--nymbal-color-secondary, #f4f4f5);
+      }
+      [part~='result-name'] {
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='result-price'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='loading'] {
+        padding: var(--nymbal-spacing-md, 1rem);
+        text-align: center;
+        color: var(--nymbal-color-text-muted, #71717a);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+      }
+    `
+  ];
+  debounceTimer = null;
+  selectedIndex = -1;
+  stores() {
+    return [this.client.search];
+  }
+  render() {
+    const state = this.readsStores ? this.client.search.getState() : NO_SEARCH;
+    const placeholder = this.getAttribute("placeholder") ?? "Search products...";
+    let results = nothing;
+    if (state.query && document.querySelector("nymbal-search-results") === null) {
+      if (state.loading) {
+        results = html`<div part="results" data-testid="search-results">
+          <div part="loading"><slot name="loading">Searching...</slot></div>
+        </div>`;
+      } else if (state.results.length > 0) {
+        results = html`<div part="results" data-testid="search-results">
+          ${state.results.map(
+          (product, i) => html`
+              <div
+                part="result"
+                class="nymbal-search-result-item"
+                data-testid="search-result-${product.slug}"
+                data-slug=${product.slug}
+                aria-selected=${String(i === this.selectedIndex)}
+                @click=${() => this.select(product)}
+              >
+                <div part="result-name">${product.name}</div>
+                ${product.priceMinor !== null ? html`<div part="result-price">
+                      ${formatPrice(product.priceMinor, product.currency ?? "USD")}
+                    </div>` : nothing}
+              </div>
+            `
+        )}
+        </div>`;
+      }
+    }
+    return html`
+      <input
+        part="input"
+        data-testid="search-input"
+        type="search"
+        placeholder=${placeholder}
+        .value=${state.query}
+        autocomplete="off"
+        role="combobox"
+        aria-expanded=${String(results !== nothing && state.results.length > 0)}
+        aria-haspopup="listbox"
+        @input=${this.handleInput}
+        @keydown=${this.handleKeydown}
+      />
+      ${results}
+    `;
+  }
+  handleInput = (e) => {
+    const query = e.target.value;
+    const debounceMs = Number(this.getAttribute("debounce-ms")) || 300;
+    if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => {
+      this.selectedIndex = -1;
+      if (query.trim()) {
+        void this.client.search.search(query);
+      } else {
+        this.client.search.clearSearch();
+      }
+    }, debounceMs);
+  };
+  handleKeydown = (e) => {
+    const { results } = this.client.search.getState();
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.selectedIndex = Math.min(this.selectedIndex + 1, results.length - 1);
+      this.requestUpdate();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
+      this.requestUpdate();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const selected = this.selectedIndex >= 0 ? results[this.selectedIndex] : void 0;
+      if (selected) {
+        this.select(selected);
+      } else {
+        const query = e.target.value.trim();
+        if (query) {
+          window.location.href = `/search?q=${encodeURIComponent(query)}`;
+        }
+      }
+    } else if (e.key === "Escape") {
+      this.client.search.clearSearch();
+      this.selectedIndex = -1;
+    }
+  };
+  select(product) {
+    this.dispatchEvent(
+      new CustomEvent("nymbal:search:selected", {
+        bubbles: true,
+        composed: true,
+        detail: { product, query: product.name }
+      })
+    );
+    this.client.search.clearSearch();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.debounceTimer !== null) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+  }
+};
+
+export {
+  NymbalSearchBar
+};
+//# sourceMappingURL=chunk-4COVK727.js.map

package/dist/chunk-4COVK727.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/search-bar.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport type { DenormalisedProduct } from '@nymbalhq/sdk'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-search-bar',\n  reactName: 'SearchBar',\n  attributes: [\n    { name: 'placeholder', prop: 'placeholder', type: 'string' },\n    { name: 'debounce-ms', prop: 'debounceMs', type: 'number' },\n  ],\n  events: [\n    { name: 'nymbal:search:selected', prop: 'onSearchSelect', detail: '{ product: unknown }' },\n  ],\n  parts: ['input', 'results', 'loading', 'result', 'result-name', 'result-price'],\n  slots: ['loading'],\n  children: false,\n}\n\n/** What a search bar shows before any search, and on a server. */\nconst NO_SEARCH = { query: '', loading: false, results: [] as DenormalisedProduct[] }\n\nfunction formatPrice(minor: number, currency: string): string {\n  return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(minor / 100)\n}\n\nexport class NymbalSearchBar extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n        position: relative;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='input'] {\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        width: 100%;\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-md, 0.375rem);\n        outline: none;\n        transition: border-color var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='input']:focus {\n        border-color: var(--nymbal-color-accent, #2563eb);\n      }\n      [part~='results'] {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        background: var(--nymbal-color-surface, #ffffff);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-top: none;\n        border-radius: 0 0 var(--nymbal-radius-md, 0.375rem) var(--nymbal-radius-md, 0.375rem);\n        box-shadow: var(--nymbal-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));\n        z-index: var(--nymbal-z-dropdown, 100);\n        max-height: 300px;\n        overflow-y: auto;\n      }\n      [part~='result'] {\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n        cursor: pointer;\n        transition: background var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='result']:hover,\n      [part~='result'][aria-selected='true'] {\n        background: var(--nymbal-color-secondary, #f4f4f5);\n      }\n      [part~='result-name'] {\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='result-price'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='loading'] {\n        padding: var(--nymbal-spacing-md, 1rem);\n        text-align: center;\n        color: var(--nymbal-color-text-muted, #71717a);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n      }\n    `,\n  ]\n\n  private debounceTimer: ReturnType<typeof setTimeout> | null = null\n  private selectedIndex = -1\n\n  protected override stores() {\n    return [this.client.search]\n  }\n\n  protected override render() {\n    const state = this.readsStores ? this.client.search.getState() : NO_SEARCH\n    const placeholder = this.getAttribute('placeholder') ?? 'Search products...'\n\n    let results: unknown = nothing\n    // A page that shows the search itself (`nymbal-search-results`) is not covered by the same results as suggestions.\n    if (state.query && document.querySelector('nymbal-search-results') === null) {\n      if (state.loading) {\n        results = html`<div part=\"results\" data-testid=\"search-results\">\n          <div part=\"loading\"><slot name=\"loading\">Searching...</slot></div>\n        </div>`\n      } else if (state.results.length > 0) {\n        results = html`<div part=\"results\" data-testid=\"search-results\">\n          ${state.results.map(\n            (product, i) => html`\n              <div\n                part=\"result\"\n                class=\"nymbal-search-result-item\"\n                data-testid=\"search-result-${product.slug}\"\n                data-slug=${product.slug}\n                aria-selected=${String(i === this.selectedIndex)}\n                @click=${() => this.select(product)}\n              >\n                <div part=\"result-name\">${product.name}</div>\n                ${product.priceMinor !== null\n                  ? html`<div part=\"result-price\">\n                      ${formatPrice(product.priceMinor, product.currency ?? 'USD')}\n                    </div>`\n                  : nothing}\n              </div>\n            `,\n          )}\n        </div>`\n      }\n    }\n\n    return html`\n      <input\n        part=\"input\"\n        data-testid=\"search-input\"\n        type=\"search\"\n        placeholder=${placeholder}\n        .value=${state.query}\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-expanded=${String(results !== nothing && state.results.length > 0)}\n        aria-haspopup=\"listbox\"\n        @input=${this.handleInput}\n        @keydown=${this.handleKeydown}\n      />\n      ${results}\n    `\n  }\n\n  private handleInput = (e: Event): void => {\n    const query = (e.target as HTMLInputElement).value\n    const debounceMs = Number(this.getAttribute('debounce-ms')) || 300\n    if (this.debounceTimer !== null) clearTimeout(this.debounceTimer)\n    this.debounceTimer = setTimeout(() => {\n      this.selectedIndex = -1\n      if (query.trim()) {\n        void this.client.search.search(query)\n      } else {\n        this.client.search.clearSearch()\n      }\n    }, debounceMs)\n  }\n\n  private handleKeydown = (e: KeyboardEvent): void => {\n    const { results } = this.client.search.getState()\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      this.selectedIndex = Math.min(this.selectedIndex + 1, results.length - 1)\n      this.requestUpdate()\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      this.selectedIndex = Math.max(this.selectedIndex - 1, -1)\n      this.requestUpdate()\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      const selected = this.selectedIndex >= 0 ? results[this.selectedIndex] : undefined\n      if (selected) {\n        this.select(selected)\n      } else {\n        const query = (e.target as HTMLInputElement).value.trim()\n        if (query) {\n          window.location.href = `/search?q=${encodeURIComponent(query)}`\n        }\n      }\n    } else if (e.key === 'Escape') {\n      this.client.search.clearSearch()\n      this.selectedIndex = -1\n    }\n  }\n\n  private select(product: DenormalisedProduct): void {\n    this.dispatchEvent(\n      new CustomEvent('nymbal:search:selected', {\n        bubbles: true,\n        composed: true,\n        detail: { product, query: product.name },\n      }),\n    )\n    this.client.search.clearSearch()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.debounceTimer !== null) {\n      clearTimeout(this.debounceTimer)\n      this.debounceTimer = null\n    }\n  }\n}\n"],"mappings":"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","names":[]}