@pure-ds/storybook 0.3.19 → 0.4.1

package/.storybook/addons/pds-configurator/SearchTool.js

@@ -1,44 +1,44 @@
-import React, { useState, useCallback } from 'react';
-import { useChannel } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { EVENTS } from './constants.js';
-
-export const SearchTool = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const channel = useChannel({
-    [EVENTS.QUERY_EXECUTED + '_RESPONSE']: (data) => {
-      console.log('Query response received:', data);
-    }
-  });
-
-  const toggleSearch = useCallback(() => {
-    const newState = !isOpen;
-    console.log('Toggle search - current isOpen:', isOpen, 'newState:', newState);
-    
-    if (newState) {
-      // Emit event to open search in preview
-      const searchQuery = prompt('Enter search query (e.g., "primary color", "spacing", "button"):');
-      if (searchQuery) {
-        console.log('Executing search query:', searchQuery);
-        channel.emit(EVENTS.QUERY_EXECUTED, { query: searchQuery });
-      }
-    }
-    
-    setIsOpen(newState);
-  }, [isOpen, channel]);
-
-  return (
-    <IconButton
-      key="search-tool"
-      active={isOpen}
-      title="Quick Search PDS"
-      onClick={toggleSearch}
-    >
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-        <circle cx="11" cy="11" r="8" />
-        <path d="m21 21-4.35-4.35" />
-      </svg>
-    </IconButton>
-  );
-};
+import React, { useState, useCallback } from 'react';
+import { useChannel } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+import { EVENTS } from './constants.js';
+
+export const SearchTool = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const channel = useChannel({
+    [EVENTS.QUERY_EXECUTED + '_RESPONSE']: (data) => {
+      console.log('Query response received:', data);
+    }
+  });
+
+  const toggleSearch = useCallback(() => {
+    const newState = !isOpen;
+    console.log('Toggle search - current isOpen:', isOpen, 'newState:', newState);
+    
+    if (newState) {
+      // Emit event to open search in preview
+      const searchQuery = prompt('Enter search query (e.g., "primary color", "spacing", "button"):');
+      if (searchQuery) {
+        console.log('Executing search query:', searchQuery);
+        channel.emit(EVENTS.QUERY_EXECUTED, { query: searchQuery });
+      }
+    }
+    
+    setIsOpen(newState);
+  }, [isOpen, channel]);
+
+  return (
+    <IconButton
+      key="search-tool"
+      active={isOpen}
+      title="Quick Search PDS"
+      onClick={toggleSearch}
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="11" cy="11" r="8" />
+        <path d="m21 21-4.35-4.35" />
+      </svg>
+    </IconButton>
+  );
+};

package/.storybook/preview.js

@@ -1300,10 +1300,12 @@ const preview = {
             ['Colors', 'Typography', 'Icons', 'Spacing', 'Smart Surfaces'],
             'Primitives',
             ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Tables', 'Media', 'Accordion'],
+            'Layout',
+            ['Overview', 'System'],
             'Utilities',
             ['Grid System'],
             'Patterns',
-            ['Layout', 'Border Effects', 'Utilities'],
+            ['Border Effects', 'Utilities'],
             'Enhancements',
             ['Mesh Gradients', 'Interactive States', 'Toggles', 'Dropdowns', 'Range Sliders', 'Required Fields'],
             'Components',
@@ -1316,10 +1318,12 @@ const preview = {
           ['Colors', 'Typography', 'Icons', 'Spacing', 'Smart Surfaces'],
           'Primitives',
           ['Buttons', 'Forms', 'Form Groups', 'Alerts', 'Badges', 'Cards', 'Tables', 'Media', 'Accordion'],
+          'Layout',
+          ['Overview', 'System'],
           'Utilities',
           ['Grid System'],
           'Patterns',
-          ['Layout', 'Border Effects', 'Utilities'],
+          ['Border Effects', 'Utilities'],
           'Enhancements',
           ['Mesh Gradients', 'Interactive States', 'Toggles', 'Dropdowns', 'Range Sliders', 'Required Fields'],
           'Components',

package/dist/pds-reference.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2025-12-19T08:08:15.350Z",
+  "generatedAt": "2025-12-22T14:04:57.776Z",
   "sources": {
     "customElements": "custom-elements.json",
     "ontology": "src\\js\\pds-core\\pds-ontology.js",
@@ -16,7 +16,13 @@
       "description": null,
       "docsDescription": "A fully featured calendar component with month navigation, event display, and expandable day views",
       "pdsTags": [
-        "autodocs"
+        "autodocs",
+        "calendar",
+        "date",
+        "datepicker",
+        "event",
+        "pds-calendar",
+        "schedule"
       ],
       "ontology": null,
       "stories": [
@@ -121,10 +127,16 @@
       "docsDescription": "Slide-out panels from any edge",
       "pdsTags": [
         "autodocs",
+        "drawer",
         "grouping",
         "interaction",
         "layout",
-        "navigation"
+        "modal",
+        "navigation",
+        "overlay",
+        "panel",
+        "pds-drawer",
+        "sidebar"
       ],
       "ontology": {
         "id": "pds-drawer",
@@ -320,10 +332,14 @@
       "docsDescription": "SVG sprite icons with fallbacks",
       "pdsTags": [
         "autodocs",
-        "buttons",
+        "graphic",
+        "icon",
         "icons",
+        "pds-icon",
+        "phosphor",
         "sprite",
-        "svg"
+        "svg",
+        "symbol"
       ],
       "ontology": null,
       "stories": [
@@ -459,9 +475,14 @@
       "docsDescription": "**⭐ Recommended for modern applications** - Automatically generate complete forms from JSON Schema definitions.\n\n### Key Features\n- 🎯 **Zero boilerplate** - Define form structure in JSON, get a working form with validation\n- ✅ **Built-in validation** - Automatic validation based on schema rules (required, min/max, patterns, etc.)\n- 🔄 **Data binding** - Two-way data binding with form state management\n- 🎨 **PDS styled** - Uses all PDS design tokens automatically\n- 📱 **Responsive** - Mobile-friendly layouts out of the box\n- 🧩 **Conditional logic** - Show/hide fields based on other field values\n- 🌐 **Nested objects** - Support for complex nested data structures\n- 🔧 **Extensible** - Custom field types and validators\n\n### Why JSON Schema Forms?\nInstead of manually writing HTML for every form field, validation rule, and error message, you define your data schema once and get:\n- Form UI generation\n- Client-side validation\n- Server-side validation (same schema)\n- API documentation\n- Type definitions\n- Database schemas\n\nSee the examples below to get started, or check the [primitive forms](/story/primitives-forms--default) for manual form building.",
       "pdsTags": [
         "autodocs",
-        "buttons",
+        "form",
         "forms",
-        "interaction"
+        "input",
+        "interaction",
+        "json-schema",
+        "jsonform",
+        "pds-jsonform",
+        "validation"
       ],
       "ontology": null,
       "stories": [
@@ -935,9 +956,13 @@
       "docsDescription": "Rich text editor with markdown support and formatting toolbar. Provide a #showdown import-map entry for best performance; set format=\"markdown\" to keep submitted values as Markdown.",
       "pdsTags": [
         "autodocs",
+        "content",
         "editor",
         "forms",
-        "richtext"
+        "pds-richtext",
+        "richtext",
+        "text",
+        "wysiwyg"
       ],
       "ontology": null,
       "stories": [
@@ -1153,7 +1178,13 @@
       "docsDescription": "Horizontal scrolling container with navigation buttons",
       "pdsTags": [
         "autodocs",
-        "layout"
+        "carousel",
+        "horizontal",
+        "layout",
+        "overflow",
+        "pds-scrollrow",
+        "scroll",
+        "scrollrow"
       ],
       "ontology": null,
       "stories": [],
@@ -1240,7 +1271,12 @@
         "autodocs",
         "interaction",
         "layout",
-        "sizing"
+        "panel",
+        "pds-splitpanel",
+        "resizable",
+        "sizing",
+        "split",
+        "splitpanel"
       ],
       "ontology": null,
       "stories": [],
@@ -1441,7 +1477,12 @@
         "autodocs",
         "grouping",
         "layout",
-        "navigation"
+        "navigation",
+        "panels",
+        "pds-tabstrip",
+        "tab",
+        "tabs",
+        "tabstrip"
       ],
       "ontology": {
         "id": "pds-tabstrip",
@@ -1511,9 +1552,15 @@
       "description": null,
       "docsDescription": "Toast notification system with auto-dismiss and stacking. Toast notifications appear in the top-right corner and auto-dismiss after a few seconds based on message length.",
       "pdsTags": [
+        "alert",
         "autodocs",
+        "feedback",
         "interaction",
-        "notifications"
+        "message",
+        "notification",
+        "pds-toaster",
+        "toast",
+        "toaster"
       ],
       "ontology": null,
       "stories": [],
@@ -1699,7 +1746,12 @@
       "docsDescription": "File upload with preview and validation",
       "pdsTags": [
         "autodocs",
-        "forms"
+        "dropzone",
+        "file",
+        "forms",
+        "input",
+        "pds-upload",
+        "upload"
       ],
       "ontology": {
         "id": "pds-upload",

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@pure-ds/storybook",
-  "version": "0.3.19",
-  "description": "Storybook showcase for Pure Design System with live configuration",
-  "type": "module",
-  "private": false,
-  "bin": {
-    "pds-storybook": "./bin/index.js"
-  },
-   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "files": [
-    "bin",
-    ".storybook",
-    "scripts",
-    "src",
-    "public",
-    "stories",
-    "dist",
-    "pds.config.js",
-    "default-pds.config.js"
-  ],
-  "scripts": {
-    "generate-stories": "node scripts/generate-stories.js",
-    "build-reference": "node scripts/build-pds-reference.mjs",
-    "package-build": "node scripts/package-build.js",
-    "storybook": "npm run build-reference && storybook dev -p 6006",
-    "build-storybook": "npm run build-reference && storybook build --output-dir storybook-static",
-    "storybook:dev": "npm run storybook",
-    "storybook:build": "npm run build-storybook"
-  },
-  "peerDependencies": {
-    "@pure-ds/core": "^0.3.18"
-  },
-  "dependencies": {
-    "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@storybook/addon-docs": "^8.3.0",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-links": "^8.3.0",
-    "@storybook/blocks": "^8.3.0",
-    "@storybook/web-components": "^8.3.0",
-    "@storybook/web-components-vite": "^8.3.0",
-    "lit": "^3.3.1",
-    "showdown": "^2.1.0",
-    "storybook": "^8.3.0",
-    "vite": "^5.4.0"
-  }
-}
+{
+  "name": "@pure-ds/storybook",
+  "version": "0.4.1",
+  "description": "Storybook showcase for Pure Design System with live configuration",
+  "type": "module",
+  "private": false,
+  "bin": {
+    "pds-storybook": "./bin/index.js"
+  },
+   "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "bin",
+    ".storybook",
+    "scripts",
+    "src",
+    "public",
+    "stories",
+    "dist",
+    "pds.config.js",
+    "default-pds.config.js"
+  ],
+  "scripts": {
+    "generate-stories": "node scripts/generate-stories.js",
+    "build-reference": "node scripts/build-pds-reference.mjs",
+    "package-build": "node scripts/package-build.js",
+    "storybook": "npm run build-reference && storybook dev -p 6006",
+    "build-storybook": "npm run build-reference && storybook build --output-dir storybook-static",
+    "storybook:dev": "npm run storybook",
+    "storybook:build": "npm run build-storybook"
+  },
+  "peerDependencies": {
+    "@pure-ds/core": "^0.3.18"
+  },
+  "dependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@storybook/addon-docs": "^8.3.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-links": "^8.3.0",
+    "@storybook/blocks": "^8.3.0",
+    "@storybook/web-components": "^8.3.0",
+    "@storybook/web-components-vite": "^8.3.0",
+    "lit": "^3.3.1",
+    "showdown": "^2.1.0",
+    "storybook": "^8.3.0",
+    "vite": "^5.4.0"
+  }
+}