@pure-ds/storybook 0.7.26 → 0.7.29

package/src/js/pds.d.ts

@@ -160,6 +160,60 @@ export interface PDSEventMap {
   'pds:docs:view': CustomEvent<{ file: string }>;
 }
 
+export type AskActionKind = 'ok' | 'cancel' | 'dismiss' | 'custom';
+
+export interface AskButtonOption {
+  name: string;
+  primary?: boolean;
+  cancel?: boolean;
+  formNoValidate?: boolean;
+  [key: string]: any;
+}
+
+export interface AskBeforeCloseContext {
+  actionCode: string;
+  actionKind: AskActionKind;
+  dialog: HTMLDialogElement;
+  form: HTMLFormElement | null;
+  formData: FormData | null;
+  submitter?: HTMLElement | null;
+  originalEvent?: Event;
+  options: AskOptions;
+  button: AskButtonOption | null;
+  defaultResult: any;
+}
+
+export interface AskBeforeCloseResult {
+  allow?: boolean;
+  result?: any;
+  value?: any;
+  reason?: string;
+}
+
+export type AskBeforeCloseHandler = (
+  context: AskBeforeCloseContext
+) => Promise<boolean | AskBeforeCloseResult | void> | boolean | AskBeforeCloseResult | void;
+
+export type AskMessage =
+  | string
+  | Node
+  | Array<any>
+  | { strings: any[]; values: any[] };
+
+export interface AskOptions {
+  title?: string;
+  type?: string;
+  buttons?: Record<string, AskButtonOption>;
+  useForm?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | string;
+  class?: string | string[];
+  maxHeight?: string;
+  liquidGlassEffects?: boolean;
+  rendered?: (dialog: HTMLDialogElement) => void;
+  beforeClose?: AskBeforeCloseHandler;
+  [key: string]: any;
+}
+
 export class PDS extends EventTarget {
   // Static surface
   static registry: PDSRegistry;
@@ -273,7 +327,7 @@ export class PDS extends EventTarget {
    * @example
    * const name = await PDS.ask('Enter your name:', { type: 'prompt' });
    */
-  static ask(message: string, options?: any): Promise<any>;
+  static ask(message: AskMessage, options?: AskOptions): Promise<any>;
   
   /** 
    * Current configuration after PDS.start() completes - read-only, frozen after initialization.

package/stories/components/PdsTags.stories.js

@@ -1,6 +1,6 @@
 import { html, lazyProps } from "#pds/lit";
 
-const languageOptions = [
+const languageItems = [
   { id: "et", text: "Amhaars", description: "ET · Ethiopia", category: "Languages" },
   { id: "bd", text: "Bengaals", description: "BD · Bangladesh", category: "Languages" },
   { id: "nl", text: "Nederlands", description: "NL · Netherlands", category: "Languages" },
@@ -13,7 +13,7 @@ const languageOptions = [
   { id: "en", text: "Engels", description: "US · United Kingdom", category: "Languages" },
 ];
 
-const groupedOptions = [
+const groupedItems = [
   { id: "et", text: "Amhaars", description: "ET · Ethiopia", category: "Languages" },
   { id: "nl", text: "Nederlands", description: "NL · Netherlands", category: "Languages" },
   { id: "react", text: "React", description: "Frontend", category: "Skills" },
@@ -22,7 +22,7 @@ const groupedOptions = [
   { id: "storybook", text: "Storybook", description: "Component docs", category: "Tools" },
 ];
 
-const createSettingsFromItems = (items) => {
+const createOmniboxOptionsFromItems = (items) => {
   const byCategory = items.reduce((map, item) => {
     const key = item.category || "Options";
     if (!map.has(key)) map.set(key, []);
@@ -34,8 +34,8 @@ const createSettingsFromItems = (items) => {
   for (const [categoryName, entries] of byCategory.entries()) {
     categories[categoryName] = {
       trigger: () => true,
-      getItems: async (options) => {
-        const query = (options?.search || "").trim().toLowerCase();
+      getItems: async ({ search = "" } = {}) => {
+        const query = String(search).trim().toLowerCase();
         return entries.filter((item) => {
           if (!query) return true;
           return (
@@ -48,33 +48,221 @@ const createSettingsFromItems = (items) => {
     };
   }
 
-  return {
-    hideCategory: false,
-    categories,
-  };
+  return { categories };
 };
 
-const languageSettings = createSettingsFromItems(languageOptions);
-const groupedSettings = createSettingsFromItems(groupedOptions);
+const languageOptions = createOmniboxOptionsFromItems(languageItems);
+const groupedOptions = createOmniboxOptionsFromItems(groupedItems);
 
-const sourceCode = `<pds-tags
+const languageOptionsSource = `const options = {
+  categories: {
+    Languages: {
+      trigger: () => true,
+      getItems: async ({ search = "" } = {}) => {
+        const query = search.trim().toLowerCase();
+        const items = [
+          { id: "et", text: "Amhaars", description: "ET · Ethiopia", category: "Languages" },
+          { id: "bd", text: "Bengaals", description: "BD · Bangladesh", category: "Languages" },
+          { id: "nl", text: "Nederlands", description: "NL · Netherlands", category: "Languages" },
+          { id: "fr", text: "Frans", description: "FR · France", category: "Languages" },
+          { id: "de", text: "Duits", description: "DE · Germany", category: "Languages" },
+        ];
+        return items.filter((item) => !query || item.text.toLowerCase().includes(query));
+      },
+    },
+  },
+};
+
+<pds-tags
   name="languages"
   placeholder="Zoek taal..."
   value="et,bd,nl"
-  ${"${lazyProps({ settings: languageSettings })}"}
+  ${"${lazyProps({ options })}"}
 ></pds-tags>`;
 
-const defaultDocs = {
+const groupedOptionsSource = `const options = {
+  categories: {
+    Languages: {
+      trigger: () => true,
+      getItems: async ({ search = "" } = {}) => {
+        const query = search.trim().toLowerCase();
+        const items = [
+          { id: "et", text: "Amhaars", description: "ET · Ethiopia", category: "Languages" },
+          { id: "nl", text: "Nederlands", description: "NL · Netherlands", category: "Languages" },
+        ];
+        return items.filter((item) => !query || item.text.toLowerCase().includes(query));
+      },
+    },
+    Skills: {
+      trigger: () => true,
+      getItems: async ({ search = "" } = {}) => {
+        const query = search.trim().toLowerCase();
+        const items = [
+          { id: "react", text: "React", description: "Frontend", category: "Skills" },
+          { id: "wc", text: "Web Components", description: "Frontend", category: "Skills" },
+        ];
+        return items.filter((item) => !query || item.text.toLowerCase().includes(query));
+      },
+    },
+    Tools: {
+      trigger: () => true,
+      getItems: async ({ search = "" } = {}) => {
+        const query = search.trim().toLowerCase();
+        const items = [
+          { id: "figma", text: "Figma", description: "Design tooling", category: "Tools" },
+          { id: "storybook", text: "Storybook", description: "Component docs", category: "Tools" },
+        ];
+        return items.filter((item) => !query || item.text.toLowerCase().includes(query));
+      },
+    },
+  },
+};
+
+<pds-tags
+  name="selections"
+  placeholder="Search languages, skills, or tools..."
+  value="nl,wc,figma"
+  ${"${lazyProps({ options })}"}
+></pds-tags>`;
+
+const formOptionsSource = `const options = {
+  categories: {
+    Languages: {
+      trigger: () => true,
+      getItems: async ({ search = "" } = {}) => {
+        const query = search.trim().toLowerCase();
+        const items = [
+          { id: "et", text: "Amhaars", description: "ET · Ethiopia", category: "Languages" },
+          { id: "bd", text: "Bengaals", description: "BD · Bangladesh", category: "Languages" },
+          { id: "nl", text: "Nederlands", description: "NL · Netherlands", category: "Languages" },
+        ];
+        return items.filter((item) => !query || item.text.toLowerCase().includes(query));
+      },
+    },
+  },
+};
+
+<form class="stack-md">
+  <pds-tags
+    name="languages"
+    required
+    placeholder="Select one or more languages..."
+    ${"${lazyProps({ options })}"}
+  ></pds-tags>
+
+  <button class="btn-primary" type="submit">Submit</button>
+</form>`;
+
+const tvMazeOptions = {
+  categories: {
+    "TV Shows": {
+      trigger: () => true,
+      getItems: async ({ search = "" } = {}) => {
+        const query = String(search).trim();
+        const fallbackQuery = "star";
+        const url = `https://api.tvmaze.com/search/shows?q=${encodeURIComponent(query || fallbackQuery)}`;
+
+        try {
+          const response = await fetch(url);
+          if (!response.ok) return [];
+
+          const payload = await response.json();
+          if (!Array.isArray(payload)) return [];
+
+          return payload
+            .map((entry) => entry?.show)
+            .filter(Boolean)
+            .slice(0, 20)
+            .map((show) => {
+              const year = show.premiered ? String(show.premiered).slice(0, 4) : "";
+              const genres = Array.isArray(show.genres)
+                ? show.genres.slice(0, 2).join(", ")
+                : "";
+              const channel = show.network?.name || show.webChannel?.name || "";
+              const description = [year, genres, channel].filter(Boolean).join(" · ");
+
+              return {
+                id: String(show.id),
+                text: show.name || `Show ${show.id}`,
+                description,
+                category: "TV Shows",
+              };
+            });
+        } catch {
+          return [];
+        }
+      },
+    },
+  },
+};
+
+const tvMazeOptionsSource = `const options = {
+  categories: {
+    "TV Shows": {
+      trigger: () => true,
+      getItems: async ({ search = "" } = {}) => {
+        const query = search.trim();
+        const fallbackQuery = "star";
+        const url = "https://api.tvmaze.com/search/shows?q=" + encodeURIComponent(query || fallbackQuery);
+
+        const response = await fetch(url);
+        if (!response.ok) return [];
+
+        const payload = await response.json();
+        if (!Array.isArray(payload)) return [];
+
+        return payload
+          .map((entry) => entry?.show)
+          .filter(Boolean)
+          .slice(0, 20)
+          .map((show) => ({
+            id: String(show.id),
+            text: show.name,
+            description: [
+              show.premiered?.slice(0, 4),
+              Array.isArray(show.genres) ? show.genres.slice(0, 2).join(", ") : "",
+              show.network?.name || show.webChannel?.name || "",
+            ].filter(Boolean).join(" · "),
+            category: "TV Shows",
+          }));
+      },
+    },
+  },
+};
+
+<pds-tags
+  name="favoriteShows"
+  placeholder="Search TV shows (e.g. office, star trek, dark)..."
+  ${"${lazyProps({ options })}"}
+></pds-tags>`;
+
+const docsParameters = {
   description: {
     component: "Compound multi-select built with pds-omnibox. Select/unselect values from suggestions and manage them as tags.",
   },
 };
 
+if (typeof window !== "undefined") {
+  import("../reference/reference-docs.js")
+    .then(({ createComponentDocsPage }) => {
+      docsParameters.page = createComponentDocsPage("pds-tags");
+    })
+    .catch((error) => {
+      console.warn(
+        "storybook: docs page failed to load for pds-tags",
+        error,
+      );
+    });
+}
+
 export default {
   title: "Components/pds-tags",
   tags: ["autodocs", "forms", "autocomplete", "multiselect", "pds-tags"],
   parameters: {
-    docs: defaultDocs,
+    pds: {
+      tags: ["forms", "autocomplete", "multiselect", "pds-tags"],
+    },
+    docs: docsParameters,
   },
   argTypes: {
     name: { control: "text" },
@@ -93,7 +281,8 @@ const Template = ({ name, placeholder, value, required, disabled }) => html`
       value=${value}
       ?required=${required}
       ?disabled=${disabled}
-      ${lazyProps({ settings: languageSettings })}
+      data-options-source=${languageOptionsSource}
+      ${lazyProps({ options: languageOptions })}
     ></pds-tags>
   </div>
 `;
@@ -131,7 +320,8 @@ const FormTemplate = ({ required }) => {
           name="languages"
           placeholder="Select one or more languages..."
           ?required=${required}
-          ${lazyProps({ settings: languageSettings })}
+          data-options-source=${languageOptionsSource}
+          ${lazyProps({ options: languageOptions })}
         ></pds-tags>
         <div class="flex gap-sm">
           <button class="btn-primary" type="submit">Submit</button>
@@ -155,7 +345,8 @@ export const Default = {
   parameters: {
     docs: {
       source: {
-        code: sourceCode,
+        type: "code",
+        code: languageOptionsSource,
       },
     },
   },
@@ -170,6 +361,14 @@ export const Empty = {
     disabled: false,
   },
   render: Template,
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+        code: languageOptionsSource,
+      },
+    },
+  },
 };
 
 export const Required = {
@@ -181,6 +380,14 @@ export const Required = {
     disabled: false,
   },
   render: Template,
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+        code: languageOptionsSource,
+      },
+    },
+  },
 };
 
 export const Disabled = {
@@ -192,6 +399,14 @@ export const Disabled = {
     disabled: true,
   },
   render: Template,
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+        code: languageOptionsSource,
+      },
+    },
+  },
 };
 
 export const GroupedOptions = {
@@ -210,10 +425,19 @@ export const GroupedOptions = {
         value=${value}
         ?required=${required}
         ?disabled=${disabled}
-        ${lazyProps({ settings: groupedSettings })}
+        data-options-source=${groupedOptionsSource}
+        ${lazyProps({ options: groupedOptions })}
       ></pds-tags>
     </div>
   `,
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+        code: groupedOptionsSource,
+      },
+    },
+  },
 };
 
 export const FormSubmission = {
@@ -221,4 +445,44 @@ export const FormSubmission = {
     required: true,
   },
   render: FormTemplate,
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+        code: formOptionsSource,
+      },
+    },
+  },
+};
+
+export const PublicApiTvShows = {
+  args: {
+    name: "favoriteShows",
+    placeholder: "Search TV shows (e.g. office, star trek, dark)...",
+    value: "",
+    required: false,
+    disabled: false,
+  },
+  render: ({ name, placeholder, value, required, disabled }) => html`
+    <div class="stack-md">
+      <p class="text-muted">Results are fetched live from the public TVMaze API (no API key required).</p>
+      <pds-tags
+        name=${name}
+        placeholder=${placeholder}
+        value=${value}
+        ?required=${required}
+        ?disabled=${disabled}
+        data-options-source=${tvMazeOptionsSource}
+        ${lazyProps({ options: tvMazeOptions })}
+      ></pds-tags>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+        code: tvMazeOptionsSource,
+      },
+    },
+  },
 };

package/stories/primitives/Buttons.stories.js

@@ -38,9 +38,10 @@ export const ButtonSizes = () => html`
   <div class="card">
     <header>
       <h3>Button Sizes</h3>
-      <small class="text-muted">Scale actions with <code>.btn-sm</code> and <code>.btn-lg</code> size utilities.</small>
+      <small class="text-muted">Scale actions with <code>.btn-xs</code>, <code>.btn-sm</code>, and <code>.btn-lg</code> size utilities.</small>
     </header>
     <div class="flex gap-sm flex-wrap items-center">
+      <button class="btn-primary btn-xs">Extra Small</button>
       <button class="btn-primary btn-sm">Small</button>
       <button class="btn-primary">Default</button>
       <button class="btn-primary btn-lg">Large</button>
@@ -126,6 +127,9 @@ export const IconOnlyButtons = () => html`
     <section class="stack-md">
       <h3>Icon-Only Sizes</h3>
       <div class="flex gap-sm flex-wrap items-center">
+        <button class="icon-only btn-primary btn-xs">
+          <pds-icon icon="plus" size="xs" label="Add"></pds-icon>
+        </button>
         <button class="icon-only btn-primary btn-sm">
           <pds-icon icon="plus" size="sm" label="Add"></pds-icon>
         </button>
@@ -185,11 +189,26 @@ export const AllSizesCombinations = () => html`
   <div class="card gap-lg">
     <header>
       <h3>All Sizes & Combinations</h3>
-      <small class="text-muted">Compare all button variants across small, default, and large sizes.</small>
+      <small class="text-muted">Compare all button variants across extra-small, small, default, and large sizes.</small>
     </header>
+    <section class="stack-md">
+      <h4>Extra Small Buttons</h4>
+      <div class="flex gap-sm flex-wrap items-center">
+        <button class="btn-primary btn-xs">Primary</button>
+        <button class="btn-secondary btn-xs">Secondary</button>
+        <button class="btn-outline btn-xs">Outline</button>
+        <button class="btn-primary btn-xs">
+          <pds-icon icon="heart" size="xs"></pds-icon>
+          With Icon
+        </button>
+        <button class="icon-only btn-primary btn-xs">
+          <pds-icon icon="gear" size="xs" label="Settings"></pds-icon>
+        </button>
+      </div>
+    </section>
     <section class="stack-md">
       <h4>Small Buttons</h4>
-      <div class="flex gap-sm flex-wrap">
+      <div class="flex gap-sm flex-wrap items-center">
         <button class="btn-primary btn-sm">Primary</button>
         <button class="btn-secondary btn-sm">Secondary</button>
         <button class="btn-outline btn-sm">Outline</button>
@@ -205,7 +224,7 @@ export const AllSizesCombinations = () => html`
 
     <section class="stack-md">
       <h4>Default Buttons</h4>
-      <div class="flex gap-sm flex-wrap">
+      <div class="flex gap-sm flex-wrap items-center">
         <button class="btn-primary">Primary</button>
         <button class="btn-secondary">Secondary</button>
         <button class="btn-outline">Outline</button>
@@ -221,7 +240,7 @@ export const AllSizesCombinations = () => html`
 
     <section class="stack-md">
       <h4>Large Buttons</h4>
-      <div class="flex gap-sm flex-wrap">
+      <div class="flex gap-sm flex-wrap items-center">
         <button class="btn-primary btn-lg">Primary</button>
         <button class="btn-secondary btn-lg">Secondary</button>
         <button class="btn-outline btn-lg">Outline</button>