@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.
- package/.storybook/main.js +4 -9
- package/.storybook/preview.js +0 -1
- package/README.md +3 -45
- package/dist/pds-reference.json +15 -26
- package/package.json +2 -2
- package/public/assets/css/app.css +0 -1214
- package/public/assets/img/favicon.png +0 -0
- package/public/assets/img/icons/github-logo.svg +1 -0
- package/public/assets/img/og.webp +0 -0
- package/public/assets/img/pds-logo.svg +80 -0
- package/public/assets/js/app.js +106 -5636
- package/public/assets/js/pds-manager.js +163 -163
- package/public/assets/js/pds.js +7 -7
- package/public/assets/pds/components/pds-live-edit.js +1555 -0
- package/public/assets/pds/components/pds-omnibox.js +558 -369
- package/public/assets/pds/components/pds-richtext.js +57 -7
- package/public/assets/pds/components/pds-theme.js +59 -39
- package/public/assets/pds/core/pds-manager.js +163 -163
- package/scripts/generate-stories.js +1 -1
- package/scripts/package-build.js +1 -6
- package/src/js/app.js +114 -17
- package/src/js/pds-core/pds-config.js +709 -1
- package/src/js/pds-core/pds-enhancers.js +61 -4
- package/src/js/pds-core/pds-generator.js +87 -16
- package/src/js/pds-core/pds-live.js +545 -366
- package/src/js/pds-core/pds-ontology.js +8 -0
- package/src/js/pds-core/pds-start-helpers.js +15 -0
- package/src/js/pds-core/pds-theme-utils.js +33 -0
- package/src/js/pds.d.ts +3 -0
- package/src/js/pds.js +22 -0
- package/stories/WhatIsPDS.md +1 -1
- package/stories/components/PdsTheme/PdsTheme.stories.js +9 -20
- package/.storybook/addons/pds-configurator/SearchTool.js +0 -44
- package/.storybook/addons/pds-configurator/Tool.js +0 -30
- package/.storybook/addons/pds-configurator/constants.js +0 -9
- package/.storybook/addons/pds-configurator/preview.js +0 -160
- package/.storybook/addons/pds-configurator/register.js +0 -13
- package/public/assets/img/icon-512x512.png +0 -0
- package/public/assets/img/logo-trans.png +0 -0
- package/public/assets/img/logo.png +0 -0
- package/src/js/pds-configurator/figma-export.js +0 -153
- package/src/js/pds-configurator/pds-config-form.js +0 -1049
- package/src/js/pds-configurator/pds-configurator.js +0 -22
- package/src/js/pds-configurator/pds-demo.js +0 -3668
package/.storybook/main.js
CHANGED
|
@@ -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
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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;
|
package/.storybook/preview.js
CHANGED
|
@@ -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
|
|
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
|
-
- `
|
|
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
|
-
│
|
|
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/
|
package/dist/pds-reference.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-02-
|
|
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.
|
|
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.
|
|
41
|
+
"@pure-ds/core": "^0.6.2"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@custom-elements-manifest/analyzer": "^0.11.0",
|