@pure-ds/storybook 0.5.58 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/.storybook/main.js +4 -9
  2. package/.storybook/preview.js +0 -1
  3. package/README.md +3 -45
  4. package/dist/pds-reference.json +15 -26
  5. package/package.json +2 -2
  6. package/public/assets/css/app.css +0 -1214
  7. package/public/assets/img/favicon.png +0 -0
  8. package/public/assets/img/icons/github-logo.svg +1 -0
  9. package/public/assets/img/og.webp +0 -0
  10. package/public/assets/img/pds-logo.svg +80 -0
  11. package/public/assets/js/app.js +106 -5636
  12. package/public/assets/js/pds-manager.js +163 -163
  13. package/public/assets/js/pds.js +7 -7
  14. package/public/assets/pds/components/pds-live-edit.js +1555 -0
  15. package/public/assets/pds/components/pds-omnibox.js +558 -369
  16. package/public/assets/pds/components/pds-richtext.js +57 -7
  17. package/public/assets/pds/components/pds-theme.js +59 -39
  18. package/public/assets/pds/core/pds-manager.js +163 -163
  19. package/scripts/generate-stories.js +1 -1
  20. package/scripts/package-build.js +1 -6
  21. package/src/js/app.js +114 -17
  22. package/src/js/pds-core/pds-config.js +709 -1
  23. package/src/js/pds-core/pds-enhancers.js +61 -4
  24. package/src/js/pds-core/pds-generator.js +87 -16
  25. package/src/js/pds-core/pds-live.js +545 -366
  26. package/src/js/pds-core/pds-ontology.js +8 -0
  27. package/src/js/pds-core/pds-start-helpers.js +15 -0
  28. package/src/js/pds-core/pds-theme-utils.js +33 -0
  29. package/src/js/pds.d.ts +3 -0
  30. package/src/js/pds.js +22 -0
  31. package/stories/WhatIsPDS.md +1 -1
  32. package/stories/components/PdsTheme/PdsTheme.stories.js +9 -20
  33. package/.storybook/addons/pds-configurator/SearchTool.js +0 -44
  34. package/.storybook/addons/pds-configurator/Tool.js +0 -30
  35. package/.storybook/addons/pds-configurator/constants.js +0 -9
  36. package/.storybook/addons/pds-configurator/preview.js +0 -160
  37. package/.storybook/addons/pds-configurator/register.js +0 -13
  38. package/public/assets/img/icon-512x512.png +0 -0
  39. package/public/assets/img/logo-trans.png +0 -0
  40. package/public/assets/img/logo.png +0 -0
  41. package/src/js/pds-configurator/figma-export.js +0 -153
  42. package/src/js/pds-configurator/pds-config-form.js +0 -1049
  43. package/src/js/pds-configurator/pds-configurator.js +0 -22
  44. package/src/js/pds-configurator/pds-demo.js +0 -3668
@@ -29,7 +29,6 @@ const config = {
29
29
  addons: [
30
30
  '@storybook/addon-links',
31
31
  '@storybook/addon-essentials',
32
- './addons/pds-configurator/register.js',
33
32
  './addons/html-preview/register.js',
34
33
  './addons/description/register.js'
35
34
  ],
@@ -74,15 +73,11 @@ const config = {
74
73
  '#pds/lit': resolve(pdsSrcPath, 'js/lit.js'),
75
74
  };
76
75
 
77
- // In monorepo, pds-configurator is in a separate package, not in src/js
78
- // This must be defined BEFORE @pds-src to take precedence
79
- if (!isPackage) {
80
- aliases['@pds-src/js/pds-configurator'] = resolve(currentDirname, '../../../packages/pds-configurator/src');
81
-
82
- // Map the local src folder to the monorepo root src folder
83
- // This eliminates the need for a copied src folder during development
76
+ // In monorepo, map the local src folder to the monorepo root src folder
77
+ // This eliminates the need for a copied src folder during development
78
+ if (!isPackage) {
84
79
  aliases[resolve(currentDirname, '../src')] = pdsSrcPath;
85
- }
80
+ }
86
81
 
87
82
  aliases['@pds-src'] = pdsSrcPath;
88
83
  config.resolve.alias = aliases;
@@ -7,7 +7,6 @@ import { presets } from '@pds-src/js/pds-core/pds-config.js';
7
7
  import { Generator } from '@pds-src/js/pds-core/pds-generator.js';
8
8
  import { applyStyles } from '@pds-src/js/pds-core/pds-runtime.js';
9
9
  import { config as userConfig } from '@user/pds-config';
10
- import './addons/pds-configurator/preview.js';
11
10
  import { withHTMLExtractor } from './addons/html-preview/preview.js';
12
11
  import { withDescription } from './addons/description/preview.js';
13
12
  import './htmlPreview.css';
package/README.md CHANGED
@@ -1,36 +1,14 @@
1
1
  # PDS Storybook
2
2
 
3
- **Pure Design System** Storybook showcase with live configuration capabilities.
3
+ **Pure Design System** Storybook showcase for the core runtime and UI surfaces.
4
4
 
5
5
  This is the reference Storybook implementation demonstrating all features of the Pure Design System, including:
6
6
 
7
- - 🎨 **Live Configuration** - Real-time design system updates via embedded configurator
8
- - 🔍 **Smart Search** - Natural language queries for tokens and components
9
7
  - 📚 **Comprehensive Stories** - All tokens, primitives, components, patterns, and enhancements
10
8
  - 🎯 **Best Practices** - Organized by design system standards
11
9
 
12
10
  ## Features
13
11
 
14
- ### Live Configurator
15
-
16
- Click the **PDS Configurator** button in the Storybook toolbar to open a configuration panel (via `pds-drawer[position=bottom]`) that includes:
17
-
18
- - Full `pds-config-form` with simple/advanced modes
19
- - Real-time preset switching
20
- - Color, typography, spacing customization
21
- - Export configuration as JSON
22
- - Instant application to all visible stories
23
-
24
- ### Quick Search / Omnibox
25
-
26
- Click the search icon in the toolbar to query the design system using natural language:
27
-
28
- - "what is the focus border color on inputs?"
29
- - "button hover states"
30
- - "how to create a card layout?"
31
-
32
- Powered by the PDS query system from `pds-query.js`.
33
-
34
12
  ### Story Organization
35
13
 
36
14
  Stories are organized following design system best practices:
@@ -93,7 +71,7 @@ npm run generate-stories
93
71
 
94
72
  This reads:
95
73
  - `src/js/pds-core/pds-ontology.js` - Component metadata
96
- - `src/js/pds-configurator/pds-demo.js` - Demo HTML sections
74
+ - `packages/pds-storybook/src/pds-demo.js` - Demo HTML sections
97
75
 
98
76
  And outputs to `stories/` organized by groups.
99
77
 
@@ -158,20 +136,6 @@ await PDS.start({
158
136
  >
159
137
  > Components in the `predefine` array (`pds-icon`, `pds-drawer`) are available immediately after `PDS.start()` completes.
160
138
 
161
- ### Configurator Addon
162
-
163
- Custom Storybook addon at `.storybook/addons/pds-configurator/`:
164
-
165
- **Manager Side** (`Tool.js`):
166
- - Toolbar button to open configurator
167
- - Search/omnibox for queries
168
- - Event bus communication
169
-
170
- **Preview Side** (`preview.js`):
171
- - Creates `<pds-drawer>` with `<pds-config-form>`
172
- - Listens to `pds:design:updated` events
173
- - Calls `PDS.applyDesign()` and forces remount
174
-
175
139
  ### Story Generator
176
140
 
177
141
  `scripts/generate-stories.js` automatically creates stories by:
@@ -224,13 +188,7 @@ Modify `.storybook/preview.js` to change:
224
188
  packages/pds-storybook/
225
189
  ├── .storybook/
226
190
  │ ├── main.js # Storybook configuration
227
- ├── preview.js # PDS initialization
228
- │ └── addons/
229
- │ └── pds-configurator/ # Custom addon
230
- │ ├── register.js # Manager registration
231
- │ ├── Tool.js # Toolbar UI
232
- │ ├── preview.js # Preview logic
233
- │ └── constants.js # Event constants
191
+ └── preview.js # PDS initialization
234
192
  ├── scripts/
235
193
  │ └── generate-stories.js # Story generator
236
194
  ├── stories/
@@ -1,5 +1,5 @@
1
1
  {
2
- "generatedAt": "2026-02-04T14:38:49.323Z",
2
+ "generatedAt": "2026-02-16T13:03:40.803Z",
3
3
  "sources": {
4
4
  "customElements": "custom-elements.json",
5
5
  "ontology": "src\\js\\pds-core\\pds-ontology.js",
@@ -2418,31 +2418,6 @@
2418
2418
  }
2419
2419
  ],
2420
2420
  "methods": [
2421
- {
2422
- "name": "attributeChangedCallback",
2423
- "description": null,
2424
- "parameters": [
2425
- {
2426
- "name": "name",
2427
- "type": "any",
2428
- "description": null,
2429
- "optional": false
2430
- },
2431
- {
2432
- "name": "oldValue",
2433
- "type": "any",
2434
- "description": null,
2435
- "optional": false
2436
- },
2437
- {
2438
- "name": "newValue",
2439
- "type": "any",
2440
- "description": null,
2441
- "optional": false
2442
- }
2443
- ],
2444
- "return": "void"
2445
- },
2446
2421
  {
2447
2422
  "name": "connectedCallback",
2448
2423
  "description": null,
@@ -3867,6 +3842,20 @@
3867
3842
  "pds-form"
3868
3843
  ]
3869
3844
  },
3845
+ {
3846
+ "id": "pds-live-edit",
3847
+ "name": "Live Edit",
3848
+ "tags": [
3849
+ "editor",
3850
+ "live",
3851
+ "config",
3852
+ "tooling"
3853
+ ],
3854
+ "category": "tooling",
3855
+ "selectors": [
3856
+ "pds-live-edit"
3857
+ ]
3858
+ },
3870
3859
  {
3871
3860
  "id": "pds-splitpanel",
3872
3861
  "name": "Split Panel",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pure-ds/storybook",
3
- "version": "0.5.58",
3
+ "version": "0.6.2",
4
4
  "description": "Storybook showcase for Pure Design System with live configuration",
5
5
  "type": "module",
6
6
  "private": false,
@@ -38,7 +38,7 @@
38
38
  "pds:build-icons": "pds-build-icons"
39
39
  },
40
40
  "peerDependencies": {
41
- "@pure-ds/core": "^0.5.58"
41
+ "@pure-ds/core": "^0.6.2"
42
42
  },
43
43
  "dependencies": {
44
44
  "@custom-elements-manifest/analyzer": "^0.11.0",