@pure-ds/core 0.4.22 → 0.4.24
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/.github/copilot-instructions.md +45 -0
- package/dist/types/public/assets/js/pds.d.ts +2 -2
- package/dist/types/public/assets/js/pds.d.ts.map +1 -1
- package/dist/types/public/assets/pds/components/pds-form.d.ts.map +1 -1
- package/dist/types/src/js/pds-core/pds-config.d.ts +0 -1
- package/dist/types/src/js/pds-core/pds-config.d.ts.map +1 -1
- package/dist/types/src/js/pds-core/pds-generator.d.ts.map +1 -1
- package/package.json +4 -3
- package/packages/pds-cli/bin/pds-init-config.js +34 -0
- package/packages/pds-cli/bin/{postinstall.js → postinstall.mjs} +85 -1
- package/public/assets/js/app.js +59 -11
- package/public/assets/js/pds.js +60 -12
- package/public/assets/pds/components/pds-drawer.js +1 -1
- package/public/assets/pds/components/pds-form.js +29 -8
- package/readme.md +83 -3
- package/src/js/pds-core/pds-config.js +1 -2
- package/src/js/pds-core/pds-generator.js +46 -5
- package/src/js/pds.js +21 -4
|
@@ -67,6 +67,49 @@ prompt("name?"); // → await PDS.ask("name?", { type: "prompt" })
|
|
|
67
67
|
|
|
68
68
|
// ❌ NEVER: Manual dropdown/modal/tab implementations
|
|
69
69
|
// → Use <nav data-dropdown>, PDS.ask(), <pds-tabstrip>
|
|
70
|
+
|
|
71
|
+
// ❌ NEVER: Access lazy-loaded component APIs before they're defined
|
|
72
|
+
const form = document.querySelector('pds-form');
|
|
73
|
+
form.getFormData(); // May fail - component not loaded yet
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## ⚡ Lit Components & Import Maps
|
|
79
|
+
|
|
80
|
+
**Components that require Lit:** `pds-form`
|
|
81
|
+
|
|
82
|
+
This component uses `import { ... } from "#pds/lit"` and **requires** an import map:
|
|
83
|
+
|
|
84
|
+
```html
|
|
85
|
+
<!-- REQUIRED in HTML <head> for Lit components -->
|
|
86
|
+
<script type="importmap">
|
|
87
|
+
{
|
|
88
|
+
"imports": {
|
|
89
|
+
"#pds/lit": "/assets/js/lit.js"
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
</script>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
**When generating code with lazy-loaded components, ALWAYS wait for definition:**
|
|
96
|
+
|
|
97
|
+
```javascript
|
|
98
|
+
// ✅ CORRECT: Wait for component to load
|
|
99
|
+
await customElements.whenDefined('pds-form');
|
|
100
|
+
const form = document.querySelector('pds-form');
|
|
101
|
+
form.getFormData(); // Safe
|
|
102
|
+
|
|
103
|
+
// ✅ CORRECT: Alternative pattern
|
|
104
|
+
const FormClass = await customElements.get('pds-form');
|
|
105
|
+
if (FormClass) {
|
|
106
|
+
const form = document.createElement('pds-form');
|
|
107
|
+
// ...
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// ❌ WRONG: Direct access without waiting
|
|
111
|
+
const form = document.querySelector('pds-form');
|
|
112
|
+
form.getFormData(); // May throw error
|
|
70
113
|
```
|
|
71
114
|
|
|
72
115
|
---
|
|
@@ -166,3 +209,5 @@ Before generating code:
|
|
|
166
209
|
6. ✅ **Apply enhancements via data-* attributes** — See `pds-enhancer-metadata.js`
|
|
167
210
|
7. ✅ **Components as last resort** — Only when native HTML can't achieve it
|
|
168
211
|
8. ✅ **Prefer primitives** — `.card`, `.badge`, `.alert` over custom components
|
|
212
|
+
9. ✅ **Wait for lazy components** — Use `await customElements.whenDefined()` before accessing APIs
|
|
213
|
+
10. ✅ **Include import map** — When using `pds-form` or `pds-drawer`, ensure `#pds/lit` is mapped
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare var
|
|
1
|
+
declare var b: {
|
|
2
2
|
addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
|
|
3
3
|
dispatchEvent(event: Event): boolean;
|
|
4
4
|
removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
|
|
@@ -19,5 +19,5 @@ declare function Et(n?: {}, e?: {}): {
|
|
|
19
19
|
context?: undefined;
|
|
20
20
|
})[];
|
|
21
21
|
};
|
|
22
|
-
export {
|
|
22
|
+
export { b as PDS, Et as validateDesign };
|
|
23
23
|
//# sourceMappingURL=pds.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pds.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pds.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds.js"],"names":[],"mappings":"AAksG6nS;;;;EAAQ;AAAsnF;;;;;;;;;;;;;;;EAA8sE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pds-form.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-form.js"],"names":[],"mappings":"AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAGF,yBAEC;IAgBC,gBAA2B;IAC3B,cAAyB;IACzB,aAAwB;IACxB,YAAuB;IACvB,eAAoB;IACpB,qBAAwB;IACxB,oBAA2B;IAC3B,mBAAyB;IACzB,mBAAsB;IACtB,oBAAuB;IAiBzB,8CAEC;IACD,4BAEC;IAGD,oBAEC;IAkBD;;;MAIC;IAED,uBAEC;IAED,cAIC;IAED,0BAcC;IAGD,+BAyBC;
|
|
1
|
+
{"version":3,"file":"pds-form.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-form.js"],"names":[],"mappings":"AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAGF,yBAEC;IAgBC,gBAA2B;IAC3B,cAAyB;IACzB,aAAwB;IACxB,YAAuB;IACvB,eAAoB;IACpB,qBAAwB;IACxB,oBAA2B;IAC3B,mBAAyB;IACzB,mBAAsB;IACtB,oBAAuB;IAiBzB,8CAEC;IACD,4BAEC;IAGD,oBAEC;IAkBD;;;MAIC;IAED,uBAEC;IAED,cAIC;IAED,0BAcC;IAGD,+BAyBC;IA2eD,cA4CC;;CA6nDF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pds-config.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-config.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pds-config.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-config.js"],"names":[],"mappings":"AAsnCA;;;;;;GAMG;AACH,kCAJW,MAAM,WACN,MAAM,WACH,GAAG,EAAA,QAchB;AAvoCD;;;GAGG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoxBE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pds-generator.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-generator.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pds-generator.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-generator.js"],"names":[],"mappings":"AA29JA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,4CAjBW,UAAU,qBACV,aAAa,EAAE,GACb,OAAO,CAAC,IAAI,CAAC,CAqCzB;AAED;;;;;;;;GAQG;AACH,wCALW,UAAU,WACV,MAAM,EAAE,qBACR,aAAa,EAAE,GACb,OAAO,CAAC,IAAI,CAAC,CAmDzB;AAED;;;;;;GAMG;AACH,sCAHW,MAAM,GACJ,aAAa,CAMzB;AA7kKD;;;GAGG;AACH;IAEE,mCAAiB;IAEjB,2BAEC;IAi3JD;;;;OAIG;IACH,+BAFW,SAAS,QAgCnB;IAED;;;;OAIG;IACH,gDA6CC;IAj8JD,0BA6CC;IA5CC;;MAIC;IAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAmC;IA6BrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgBC;IAycD;;;;OAIG;IACH,kDAyBC;IA0ED;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6DC;IAorGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEC;IAGD,oBAEC;IA8vBD,qBAEC;IACD,yBAEC;IACD,yBAEC;IACD,wBAEC;IACD,yBAMC;IAED;;;;;;OAMG;IACH,oBA6JC;IAGD,4BAEC;IACD,gCAEC;IACD,gCAEC;IACD,+BAEC;IAmBD;;;OAGG;IACH;;;;;;MAoBC;;CA2GF"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pure-ds/core",
|
|
3
3
|
"shortname": "pds",
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.24",
|
|
5
5
|
"description": "Pure Design System - Why develop a Design System when you can generate one?",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -29,7 +29,8 @@
|
|
|
29
29
|
"pds-export": "packages/pds-cli/bin/pds-static.js",
|
|
30
30
|
"pds-sync-assets": "packages/pds-cli/bin/sync-assets.js",
|
|
31
31
|
"pds-build-icons": "packages/pds-cli/bin/pds-build-icons.js",
|
|
32
|
-
"pds-setup-copilot": "packages/pds-cli/bin/pds-setup-copilot.js"
|
|
32
|
+
"pds-setup-copilot": "packages/pds-cli/bin/pds-setup-copilot.js",
|
|
33
|
+
"pds-init-config": "packages/pds-cli/bin/pds-init-config.js"
|
|
33
34
|
},
|
|
34
35
|
"exports": {
|
|
35
36
|
".": {
|
|
@@ -73,7 +74,7 @@
|
|
|
73
74
|
"prebuild": "npm run types",
|
|
74
75
|
"build": "node esbuild-build.js",
|
|
75
76
|
"types": "tsc -p tsconfig.json && node scripts/sync-types.mjs",
|
|
76
|
-
"postinstall": "node packages/pds-cli/bin/postinstall.
|
|
77
|
+
"postinstall": "node packages/pds-cli/bin/postinstall.mjs",
|
|
77
78
|
"prepds:export": "npm run types",
|
|
78
79
|
"pds:export": "node packages/pds-cli/bin/pds-static.js",
|
|
79
80
|
"pds:build-icons": "node packages/pds-cli/bin/pds-build-icons.js",
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* PDS Init Config - Create a default pds.config.js file
|
|
5
|
+
* Usage: npx pds-init-config [--force]
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { ensurePdsConfig } from './postinstall.js';
|
|
9
|
+
import { resolve } from 'path';
|
|
10
|
+
|
|
11
|
+
const args = process.argv.slice(2);
|
|
12
|
+
const force = args.includes('--force') || args.includes('-f');
|
|
13
|
+
const targetDir = args.find(arg => !arg.startsWith('-')) || process.cwd();
|
|
14
|
+
|
|
15
|
+
async function main() {
|
|
16
|
+
console.log('🎨 PDS Config Initialization\n');
|
|
17
|
+
|
|
18
|
+
const targetPath = resolve(targetDir);
|
|
19
|
+
console.log(`📁 Target directory: ${targetPath}\n`);
|
|
20
|
+
|
|
21
|
+
if (force) {
|
|
22
|
+
console.log('⚠️ Force mode enabled - will overwrite existing config\n');
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
await ensurePdsConfig(targetPath, force);
|
|
26
|
+
|
|
27
|
+
console.log('\n✨ Done! Edit pds.config.js to customize your design system.');
|
|
28
|
+
console.log('📚 Learn more: https://github.com/pure-ds/core#configuration\n');
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
main().catch((error) => {
|
|
32
|
+
console.error('❌ Error:', error.message);
|
|
33
|
+
process.exit(1);
|
|
34
|
+
});
|
|
@@ -135,6 +135,87 @@ async function ensureExportScript(consumerRoot) {
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
+
/**
|
|
139
|
+
* Create default pds.config.js if it doesn't exist
|
|
140
|
+
* @param {string} consumerRoot - The root directory to create the config in
|
|
141
|
+
* @param {boolean} force - If true, overwrite existing config
|
|
142
|
+
*/
|
|
143
|
+
async function ensurePdsConfig(consumerRoot, force = false) {
|
|
144
|
+
try {
|
|
145
|
+
const configPath = path.join(consumerRoot, 'pds.config.js');
|
|
146
|
+
|
|
147
|
+
// Check if config already exists
|
|
148
|
+
try {
|
|
149
|
+
await access(configPath);
|
|
150
|
+
if (!force) {
|
|
151
|
+
console.log('📝 pds.config.js already exists, skipping...');
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
console.log('📝 Overwriting existing pds.config.js...');
|
|
155
|
+
} catch {
|
|
156
|
+
// File doesn't exist, create it
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
const defaultConfig = `export const config = {
|
|
160
|
+
mode: "live",
|
|
161
|
+
preset: "default",
|
|
162
|
+
|
|
163
|
+
// Uncomment to override preset design tokens:
|
|
164
|
+
// design: {
|
|
165
|
+
// colors: {
|
|
166
|
+
// primary: '#007acc',
|
|
167
|
+
// secondary: '#5c2d91',
|
|
168
|
+
// accent: '#ec4899'
|
|
169
|
+
// },
|
|
170
|
+
// typography: {
|
|
171
|
+
// fontFamilyHeadings: 'Inter, sans-serif',
|
|
172
|
+
// fontFamilyBody: 'Inter, sans-serif',
|
|
173
|
+
// baseFontSize: 16,
|
|
174
|
+
// fontScale: 1.25
|
|
175
|
+
// },
|
|
176
|
+
// spatialRhythm: {
|
|
177
|
+
// baseUnit: 8,
|
|
178
|
+
// scaleRatio: 1.5
|
|
179
|
+
// }
|
|
180
|
+
// },
|
|
181
|
+
|
|
182
|
+
// Uncomment to add custom progressive enhancers:
|
|
183
|
+
// enhancers: [
|
|
184
|
+
// {
|
|
185
|
+
// selector: '[data-tooltip]',
|
|
186
|
+
// description: 'Adds tooltip on hover',
|
|
187
|
+
// run: (element) => {
|
|
188
|
+
// const text = element.dataset.tooltip;
|
|
189
|
+
// element.addEventListener('mouseenter', () => {
|
|
190
|
+
// // Show tooltip implementation
|
|
191
|
+
// });
|
|
192
|
+
// }
|
|
193
|
+
// }
|
|
194
|
+
// ],
|
|
195
|
+
|
|
196
|
+
// Uncomment to customize lazy-loaded web components:
|
|
197
|
+
// autoDefine: {
|
|
198
|
+
// baseURL: '/pds/components/',
|
|
199
|
+
// predefine: ['pds-icon', 'pds-drawer', 'pds-toaster'],
|
|
200
|
+
//
|
|
201
|
+
// // Custom component paths
|
|
202
|
+
// mapper: (tag) => {
|
|
203
|
+
// if (tag.startsWith('my-')) {
|
|
204
|
+
// return \`/components/\${tag}.js\`;
|
|
205
|
+
// }
|
|
206
|
+
// // Return nothing to use PDS default mapping
|
|
207
|
+
// }
|
|
208
|
+
// }
|
|
209
|
+
};
|
|
210
|
+
`;
|
|
211
|
+
|
|
212
|
+
await writeFile(configPath, defaultConfig, 'utf8');
|
|
213
|
+
console.log('📝 Created default pds.config.js');
|
|
214
|
+
} catch (e) {
|
|
215
|
+
console.warn('⚠️ Could not create pds.config.js:', e.message);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
138
219
|
/**
|
|
139
220
|
* Copy PDS Copilot instructions to consumer's .github folder
|
|
140
221
|
*/
|
|
@@ -331,6 +412,9 @@ async function copyPdsAssets() {
|
|
|
331
412
|
|
|
332
413
|
console.log('📦 Proceeding with asset copying...');
|
|
333
414
|
|
|
415
|
+
// Create default pds.config.js if it doesn't exist
|
|
416
|
+
await ensurePdsConfig(consumerRoot);
|
|
417
|
+
|
|
334
418
|
// Copy Copilot instructions to consumer project
|
|
335
419
|
await copyCopilotInstructions(consumerRoot);
|
|
336
420
|
|
|
@@ -436,4 +520,4 @@ if (process.argv[1].endsWith('postinstall.js')) {
|
|
|
436
520
|
copyPdsAssets().catch(console.error);
|
|
437
521
|
}
|
|
438
522
|
|
|
439
|
-
export { copyPdsAssets, discoverWebRoot };
|
|
523
|
+
export { copyPdsAssets, discoverWebRoot, ensurePdsConfig };
|