@astryxdesign/cli 0.1.4-canary.efa3ea5 → 0.1.4-canary.f00b844
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/CHANGELOG.md +1 -2
- package/docs/getting-started.doc.mjs +0 -4
- package/docs/migration.doc.mjs +0 -134
- package/docs/styling.doc.mjs +0 -53
- package/package.json +9 -14
- package/src/api/doctor.mjs +2 -13
- package/src/codemods/__tests__/runner.test.mjs +0 -38
- package/src/codemods/runner.mjs +0 -2
- package/src/commands/agent-docs.mjs +5 -7
- package/src/commands/agent-docs.test.mjs +0 -33
- package/src/commands/build-theme.mjs +14 -118
- package/src/commands/doctor.test.mjs +0 -34
- package/src/commands/init.mjs +1 -1
- package/src/commands/swizzle.mjs +0 -34
- package/src/commands/swizzle.routing.test.mjs +0 -67
- package/templates/blocks/components/Collapsible/CollapsibleWithoutCard.tsx +23 -25
- package/templates/blocks/components/CommandPaletteGroup/CommandPaletteGroupShowcase.tsx +48 -27
- package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemShowcase.tsx +54 -31
- package/templates/pages/classic-gallery/page.tsx +1 -1
- package/templates/pages/dashboard/page.tsx +1 -1
- package/templates/pages/documentation/page.tsx +1 -1
- package/templates/pages/mixed-gallery/page.tsx +1 -1
- package/templates/pages/payment-form/page.tsx +6 -2
- package/templates/pages/product-detail/page.tsx +11 -3
- package/templates/pages/product-gallery/page.tsx +1 -1
- package/templates/pages/settings/page.tsx +1 -1
- package/templates/pages/side-gallery/page.tsx +1 -1
- package/templates/pages/table-page/page.tsx +1 -1
- package/templates/pages/table-page-chart/page.tsx +14 -4
- package/templates/pages/table-page-heatmap-status/page.tsx +1 -1
- package/templates/pages/table-page-shoe-store-heatmap/page.tsx +19 -5
- package/src/commands/build-theme.color-scheme.test.mjs +0 -153
- package/src/commands/build-theme.variants.test.mjs +0 -204
- package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.doc.mjs +0 -14
- package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.tsx +0 -58
- package/templates/blocks/components/CodeBlock/CodeBlockTerminal.doc.mjs +0 -14
- package/templates/blocks/components/CodeBlock/CodeBlockTerminal.tsx +0 -24
- package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.doc.mjs +0 -13
- package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.tsx +0 -33
- package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.doc.mjs +0 -15
- package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.tsx +0 -39
- package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.doc.mjs +0 -15
- package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.tsx +0 -39
- package/templates/blocks/components/CommandPaletteList/CommandPaletteListBasic.doc.mjs +0 -15
- package/templates/blocks/components/CommandPaletteList/CommandPaletteListBasic.tsx +0 -27
- package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.doc.mjs +0 -15
- package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.tsx +0 -38
- package/templates/blocks/components/ContextMenuItem/ContextMenuItemBasic.doc.mjs +0 -14
- package/templates/blocks/components/ContextMenuItem/ContextMenuItemBasic.tsx +0 -44
- package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.doc.mjs +0 -15
- package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.tsx +0 -107
- package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.doc.mjs +0 -15
- package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.tsx +0 -47
- package/templates/pages/incident-console/page.tsx +0 -580
- package/templates/pages/incident-console/template.doc.mjs +0 -12
- package/templates/pages/messaging-shell/page.tsx +0 -676
- package/templates/pages/messaging-shell/template.doc.mjs +0 -12
package/CHANGELOG.md
CHANGED
|
@@ -36,7 +36,7 @@ Thanks to everyone who contributed to this release:
|
|
|
36
36
|
- Strict config + integration v1 schema (integrations, issuesUrl, hooks.postCodemod) and new @astryxdesign/cli/integration export.
|
|
37
37
|
- File-based codemod API (createCodemod/createConfigCodemod) with the @astryxdesign/cli/codemod export and integration codemod discovery in upgrade.
|
|
38
38
|
- component, template, and upgrade now print a one-line non-blocking warning when a configured integration has validation issues, pointing to validate-integration.
|
|
39
|
-
- Add a Kanban Board page template: color-coded status columns, draggable task cards with priority tags, and board toolbar.
|
|
39
|
+
- Add a Kanban Board page template: color-coded status columns, draggable task cards with priority tags, and board toolbar.
|
|
40
40
|
- Add frame-first layout guidance: new `astryx docs layout` topic (shell choice, region budgets, app archetypes, cards-vs-rows policy, responsive contracts), layout rules in the generated agent cheat sheet, and layout anti-patterns in `docs principles`.
|
|
41
41
|
- Add a v0.1.3 config codemod that migrates astryx.config layout.components to experimental.xle.components.
|
|
42
42
|
- Add v0.1.0 codemods for migrating `declare module "@xds/core/..."` type augmentations and `.xds-*` / `[data-xds-theme]` / `@layer xds-theme` CSS surfaces to their `@astryxdesign`/`astryx-*` equivalents.
|
|
@@ -80,7 +80,6 @@ Thanks to everyone who contributed to this release:
|
|
|
80
80
|
Thanks to everyone who contributed to this release:
|
|
81
81
|
|
|
82
82
|
- @AKnassa
|
|
83
|
-
- @cg-hub18
|
|
84
83
|
- @ejhammond
|
|
85
84
|
- @ernestt
|
|
86
85
|
- @harshavardhan194
|
|
@@ -69,10 +69,6 @@ export const docs = {
|
|
|
69
69
|
type: 'prose',
|
|
70
70
|
text: 'Available themes: @astryxdesign/theme-neutral (muted minimal, a good starting point), @astryxdesign/theme-butter, @astryxdesign/theme-chocolate, @astryxdesign/theme-gothic (dark-only), @astryxdesign/theme-matcha, @astryxdesign/theme-stone, and @astryxdesign/theme-y2k. See `npx astryx docs theme` for the full theming guide.',
|
|
71
71
|
},
|
|
72
|
-
{
|
|
73
|
-
type: 'prose',
|
|
74
|
-
text: 'These stylesheets are cascade-layered: the reset loads in @layer reset and component styles in @layer astryx-base. If your project has existing global CSS, a legacy reset, or Tailwind, declare the layer order explicitly and assign every stylesheet to a layer deliberately: unlayered styles and later layers both override astryx-base regardless of specificity. See the Cascade Layer Safety section in `npx astryx docs migration` before building screens.',
|
|
75
|
-
},
|
|
76
72
|
],
|
|
77
73
|
},
|
|
78
74
|
{
|
package/docs/migration.doc.mjs
CHANGED
|
@@ -33,7 +33,6 @@ export const docs = {
|
|
|
33
33
|
'Install the design system and run init so the project has package scripts, theme CSS, and agent docs.',
|
|
34
34
|
'Wrap the app root with Theme and choose the initial light, dark, or system mode behavior.',
|
|
35
35
|
'Make Tailwind and design system CSS layer order explicit before replacing components.',
|
|
36
|
-
'Render the foundation smoke test page and confirm primitives keep their padding before migrating any surface.',
|
|
37
36
|
'Move the persistent frame first: AppShell, TopNav, SideNav, page content, and mobile navigation.',
|
|
38
37
|
'Replace shared primitives: Button, IconButton, TextInput, NumberInput, Switch, CheckboxInput, RadioList, Selector, Tabs, Dialog, AlertDialog, Banner, Toast, Badge, Card, Table, and ListItem.',
|
|
39
38
|
'Replace global workflows: command palette, settings popover, theme toggle, search, filters, create flows, and destructive confirmation dialogs.',
|
|
@@ -126,139 +125,6 @@ export function AppRoot({children}: {children: React.ReactNode}) {
|
|
|
126
125
|
@import "@astryxdesign/core/tailwind-theme.css";
|
|
127
126
|
@import "tailwindcss/utilities.css" layer(utilities);`,
|
|
128
127
|
},
|
|
129
|
-
{
|
|
130
|
-
type: 'prose',
|
|
131
|
-
text: 'On Tailwind v3 there is no preflight.css to import, so wrap the @tailwind base directive in a named layer instead. Keep utilities unlayered so existing app utility classes still win everywhere.',
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
type: 'code',
|
|
135
|
-
lang: 'css',
|
|
136
|
-
label: 'Tailwind v3 coexistence',
|
|
137
|
-
code: `@layer reset, tw-preflight, astryx-base, astryx-theme;
|
|
138
|
-
|
|
139
|
-
@import "@astryxdesign/core/reset.css";
|
|
140
|
-
@import "@astryxdesign/core/astryx.css";
|
|
141
|
-
@import "@astryxdesign/theme-neutral/theme.css";
|
|
142
|
-
|
|
143
|
-
@layer tw-preflight {
|
|
144
|
-
@tailwind base; /* layered: astryx-theme now wins over preflight */
|
|
145
|
-
}
|
|
146
|
-
@tailwind components;
|
|
147
|
-
@tailwind utilities; /* unlayered: legacy utility classes keep winning */`,
|
|
148
|
-
},
|
|
149
|
-
],
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
title: 'Cascade Layer Safety',
|
|
153
|
-
content: [
|
|
154
|
-
{
|
|
155
|
-
type: 'prose',
|
|
156
|
-
text: 'In a stylesheet with no layers at all, a zero-specificity reset like `* { padding: 0 }` loses to any class selector, so most developers treat resets as harmless. Layers change the rules twice: unlayered styles beat every named layer, and a later layer beats an earlier one, both regardless of specificity. The same reset therefore wins against every component style either by staying unlayered or by landing in a layer declared after astryx-base. Same CSS, opposite outcome, and no error or warning when it happens.',
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
type: 'prose',
|
|
160
|
-
text: 'This is the most common way an adoption breaks, through one of two @import mechanisms. A top-level @import without the layer() keyword keeps the legacy reset unlayered, where it overrides every design system layer. And an @import nested inside a file that was itself imported into a layer inherits that surrounding layer, so a reset can silently land in a consumer layer above astryx-base. Either way the fix is the same: import the legacy reset into the lowest layer explicitly.',
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
type: 'code',
|
|
164
|
-
lang: 'css',
|
|
165
|
-
label: 'Legacy reset, explicitly layered',
|
|
166
|
-
code: `/* was: @import "./legacy-reset.css"; (unlayered: beats every layer) */
|
|
167
|
-
@import "./legacy-reset.css" layer(reset);`,
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
type: 'prose',
|
|
171
|
-
text: 'Audit the layers around the design system with this checklist before building screens.',
|
|
172
|
-
},
|
|
173
|
-
{
|
|
174
|
-
type: 'list',
|
|
175
|
-
style: 'unordered',
|
|
176
|
-
items: [
|
|
177
|
-
'Declare the canonical @layer order once, before any @import. With webpack-based bundlers (including Next.js) the order declaration must live in its own CSS file imported first, such as layers.css, because webpack hoists @import content above the inline CSS that follows it.',
|
|
178
|
-
'Audit every pre-existing global or reset stylesheet and assign each one to a layer deliberately. Top-level imports without layer() stay unlayered and beat every layer; imports nested inside a layered file inherit that layer.',
|
|
179
|
-
'Remove or demote the app legacy reset. The design system ships its own :where() reset in the lowest layer, so any app reset belongs in that same reset layer and never in a layer above astryx-base.',
|
|
180
|
-
'Layer Tailwind preflight. On Tailwind v4, import preflight.css with layer(base). On Tailwind v3, wrap the @tailwind base directive in a named layer (see the snippet in Theme and CSS Setup). Unlayered preflight overrides theme CSS silently.',
|
|
181
|
-
'Set moduleResolution to bundler or node16 and newer so subpath imports like @astryxdesign/core/reset.css resolve.',
|
|
182
|
-
'Theme with defineTheme and the accent family API instead of hand-writing individual color tokens. Derived tokens like --color-on-accent are generated from the accent scale automatically; hand-writing only --color-accent leaves --color-on-accent at its stale white default with no contrast guarantee against the new accent.',
|
|
183
|
-
'Run the foundation smoke test below and view a few components in both light and dark mode before migrating any route.',
|
|
184
|
-
],
|
|
185
|
-
},
|
|
186
|
-
{
|
|
187
|
-
type: 'prose',
|
|
188
|
-
text: 'One more mental model shift: a className or utility class you write on a component still reaches the DOM either way, but whether it overrides the component is a layer question, not a source order question. Keep app utilities in the utilities layer so they keep winning.',
|
|
189
|
-
},
|
|
190
|
-
],
|
|
191
|
-
},
|
|
192
|
-
{
|
|
193
|
-
title: 'Foundation Smoke Test',
|
|
194
|
-
content: [
|
|
195
|
-
{
|
|
196
|
-
type: 'prose',
|
|
197
|
-
text: 'A broken layer order fails silently and identically on every page, so catch it before feature work instead of after N migrated screens. Render one throwaway page with a few primitives as the first migration step.',
|
|
198
|
-
},
|
|
199
|
-
{
|
|
200
|
-
type: 'code',
|
|
201
|
-
lang: 'tsx',
|
|
202
|
-
label: 'Foundation check page',
|
|
203
|
-
code: `import {useState} from 'react';
|
|
204
|
-
import {Button} from '@astryxdesign/core/Button';
|
|
205
|
-
import {Card} from '@astryxdesign/core/Card';
|
|
206
|
-
import {Table} from '@astryxdesign/core/Table';
|
|
207
|
-
import {TextInput} from '@astryxdesign/core/TextInput';
|
|
208
|
-
import {VStack} from '@astryxdesign/core/VStack';
|
|
209
|
-
|
|
210
|
-
export default function FoundationCheck() {
|
|
211
|
-
const [email, setEmail] = useState('');
|
|
212
|
-
|
|
213
|
-
return (
|
|
214
|
-
<div data-foundation-check>
|
|
215
|
-
<VStack gap={4}>
|
|
216
|
-
<Button label="Primary action" variant="primary" />
|
|
217
|
-
<TextInput
|
|
218
|
-
label="Email"
|
|
219
|
-
placeholder="you@example.com"
|
|
220
|
-
value={email}
|
|
221
|
-
onChange={setEmail}
|
|
222
|
-
/>
|
|
223
|
-
<Card>One card with default padding</Card>
|
|
224
|
-
<Table
|
|
225
|
-
data={[{name: 'Foundation', status: 'ok'}]}
|
|
226
|
-
columns={[
|
|
227
|
-
{key: 'name', header: 'Name'},
|
|
228
|
-
{key: 'status', header: 'Status'},
|
|
229
|
-
]}
|
|
230
|
-
/>
|
|
231
|
-
</VStack>
|
|
232
|
-
</div>
|
|
233
|
-
);
|
|
234
|
-
}`,
|
|
235
|
-
},
|
|
236
|
-
{
|
|
237
|
-
type: 'prose',
|
|
238
|
-
text: 'If the button renders with visible padding, a filled primary background, and the input and card have borders and internal spacing, the foundation is sound. For an assertion that can run in any test runner or a dev-only effect, check that a primitive keeps non-zero padding:',
|
|
239
|
-
},
|
|
240
|
-
{
|
|
241
|
-
type: 'code',
|
|
242
|
-
lang: 'ts',
|
|
243
|
-
label: 'Foundation assertion',
|
|
244
|
-
code: `const button = document.querySelector<HTMLButtonElement>(
|
|
245
|
-
'[data-foundation-check] button',
|
|
246
|
-
);
|
|
247
|
-
if (!button) {
|
|
248
|
-
throw new Error('Foundation check page did not render a button.');
|
|
249
|
-
}
|
|
250
|
-
if (getComputedStyle(button).paddingInline === '0px') {
|
|
251
|
-
throw new Error(
|
|
252
|
-
'Foundation broken: an unlayered reset or a later cascade layer is ' +
|
|
253
|
-
'overriding component styles. Check that no app reset sits outside ' +
|
|
254
|
-
'the reset layer.',
|
|
255
|
-
);
|
|
256
|
-
}`,
|
|
257
|
-
},
|
|
258
|
-
{
|
|
259
|
-
type: 'prose',
|
|
260
|
-
text: 'When this fails, the fix is almost always in the layer order: find the stylesheet that zeroes padding, and move it into the reset layer or delete it.',
|
|
261
|
-
},
|
|
262
128
|
],
|
|
263
129
|
},
|
|
264
130
|
{
|
package/docs/styling.doc.mjs
CHANGED
|
@@ -338,59 +338,6 @@ const styles = stylex.create({
|
|
|
338
338
|
},
|
|
339
339
|
],
|
|
340
340
|
},
|
|
341
|
-
{
|
|
342
|
-
title: 'StyleX Build Setup (required for swizzled components)',
|
|
343
|
-
category: 'guide',
|
|
344
|
-
content: [
|
|
345
|
-
{
|
|
346
|
-
type: 'prose',
|
|
347
|
-
text: 'Astryx components ship pre-compiled, so consuming the published package needs no StyleX setup. But `astryx swizzle <Component>` copies the raw StyleX *source* into your app, and StyleX source requires a build-time StyleX compiler to produce atomic CSS. Without one the component compiles but renders completely unstyled: no error, no warning. If a swizzled component looks unstyled, a missing StyleX compiler is almost always why. The same applies if you author your own StyleX with `stylex.create()`.',
|
|
348
|
-
},
|
|
349
|
-
{
|
|
350
|
-
type: 'table',
|
|
351
|
-
headers: ['Bundler', 'StyleX plugin'],
|
|
352
|
-
rows: [
|
|
353
|
-
['Webpack', '@stylexjs/webpack-plugin'],
|
|
354
|
-
['Vite / Rollup', '@stylexjs/rollup-plugin (or a community Vite plugin)'],
|
|
355
|
-
['Babel (any bundler)', '@stylexjs/babel-plugin + @stylexjs/postcss-plugin'],
|
|
356
|
-
['Next.js (App Router, SWC)', 'An SWC-based transform; see the Next.js note below'],
|
|
357
|
-
],
|
|
358
|
-
},
|
|
359
|
-
{
|
|
360
|
-
type: 'prose',
|
|
361
|
-
text: 'Next.js (App Router) is the sharp edge. StyleX\'s canonical compiler is a Babel plugin, but introducing a Babel config in Next.js disables the SWC compiler, which in turn breaks SWC-dependent features like `next/font`. So the "obvious" Babel setup is actively incompatible with a standard Next 15 App Router app.',
|
|
362
|
-
},
|
|
363
|
-
{
|
|
364
|
-
type: 'prose',
|
|
365
|
-
text: 'The working path on Next.js is an SWC-based StyleX transform (e.g. the community `@stylexswc/nextjs-plugin`) wired into `next.config`, which keeps SWC and `next/font` intact. See the example app `apps/example-nextjs-stylex` in the repo for a complete, working Next.js + StyleX + SWC configuration.',
|
|
366
|
-
},
|
|
367
|
-
{
|
|
368
|
-
type: 'code',
|
|
369
|
-
lang: 'js',
|
|
370
|
-
label: 'next.config.mjs: SWC-based StyleX transform (keeps next/font working)',
|
|
371
|
-
code: `import stylexPlugin from '@stylexswc/nextjs-plugin';
|
|
372
|
-
|
|
373
|
-
export default stylexPlugin({
|
|
374
|
-
rsOptions: {
|
|
375
|
-
// Resolve @astryxdesign/core's StyleX so swizzled component source compiles.
|
|
376
|
-
aliases: {'@/*': ['./src/*']},
|
|
377
|
-
unstable_moduleResolution: {type: 'commonJS'},
|
|
378
|
-
},
|
|
379
|
-
})({
|
|
380
|
-
// your existing Next.js config
|
|
381
|
-
});`,
|
|
382
|
-
},
|
|
383
|
-
{
|
|
384
|
-
type: 'list',
|
|
385
|
-
style: 'unordered',
|
|
386
|
-
items: [
|
|
387
|
-
'Symptom of a missing compiler: swizzled component renders with no styles, but no build or runtime error.',
|
|
388
|
-
'Do NOT add @stylexjs/babel-plugin to a Next.js App Router app; it disables SWC and breaks next/font.',
|
|
389
|
-
'Pure theming (defineTheme + astryx theme build) needs NO StyleX compiler; only swizzled/authored StyleX source does.',
|
|
390
|
-
],
|
|
391
|
-
},
|
|
392
|
-
],
|
|
393
|
-
},
|
|
394
341
|
{
|
|
395
342
|
title: 'What NOT to Do',
|
|
396
343
|
category: 'guide',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/cli",
|
|
3
|
-
"version": "0.1.4-canary.
|
|
3
|
+
"version": "0.1.4-canary.f00b844",
|
|
4
4
|
"displayName": "CLI",
|
|
5
5
|
"description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -75,16 +75,12 @@
|
|
|
75
75
|
"zod": "^4.4.3"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
|
-
"@astryxdesign/
|
|
79
|
-
"@astryxdesign/
|
|
80
|
-
"@astryxdesign/
|
|
81
|
-
"
|
|
82
|
-
"gpt-tokenizer": "^3.4.0"
|
|
78
|
+
"@astryxdesign/core": "0.1.4-canary.f00b844",
|
|
79
|
+
"@astryxdesign/lab": "0.1.4-canary.f00b844",
|
|
80
|
+
"@astryxdesign/theme-neutral": "0.1.4-canary.f00b844",
|
|
81
|
+
"gpt-tokenizer": "^2.0.0"
|
|
83
82
|
},
|
|
84
83
|
"peerDependenciesMeta": {
|
|
85
|
-
"@astryxdesign/charts": {
|
|
86
|
-
"optional": true
|
|
87
|
-
},
|
|
88
84
|
"@astryxdesign/core": {
|
|
89
85
|
"optional": true
|
|
90
86
|
},
|
|
@@ -96,11 +92,10 @@
|
|
|
96
92
|
}
|
|
97
93
|
},
|
|
98
94
|
"devDependencies": {
|
|
99
|
-
"@astryxdesign/
|
|
100
|
-
"@astryxdesign/
|
|
101
|
-
"@astryxdesign/
|
|
102
|
-
"
|
|
103
|
-
"gpt-tokenizer": "^3.4.0"
|
|
95
|
+
"@astryxdesign/core": "0.1.4-canary.f00b844",
|
|
96
|
+
"@astryxdesign/lab": "0.1.4-canary.f00b844",
|
|
97
|
+
"@astryxdesign/theme-neutral": "0.1.4-canary.f00b844",
|
|
98
|
+
"gpt-tokenizer": "^2.0.0"
|
|
104
99
|
},
|
|
105
100
|
"scripts": {
|
|
106
101
|
"astryx": "node bin/astryx.mjs",
|
package/src/api/doctor.mjs
CHANGED
|
@@ -115,21 +115,10 @@ function findThemePackages(cwd) {
|
|
|
115
115
|
return found;
|
|
116
116
|
}
|
|
117
117
|
for (const entry of entries) {
|
|
118
|
+
if (!entry.isDirectory()) continue;
|
|
118
119
|
if (!entry.name.startsWith('theme-')) continue;
|
|
119
|
-
const dir = path.join(scopeDir, entry.name);
|
|
120
|
-
// pnpm installs packages as symlinks into node_modules/.pnpm, and a
|
|
121
|
-
// symlink dirent reports isDirectory() as false — stat the target instead.
|
|
122
|
-
let isDir = entry.isDirectory();
|
|
123
|
-
if (!isDir && entry.isSymbolicLink()) {
|
|
124
|
-
try {
|
|
125
|
-
isDir = fs.statSync(dir).isDirectory();
|
|
126
|
-
} catch {
|
|
127
|
-
isDir = false;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
if (!isDir) continue;
|
|
131
120
|
const name = `@astryxdesign/${entry.name}`;
|
|
132
|
-
found.push({name, version: pkgVersion(
|
|
121
|
+
found.push({name, version: pkgVersion(path.join(scopeDir, entry.name))});
|
|
133
122
|
}
|
|
134
123
|
return found;
|
|
135
124
|
}
|
|
@@ -99,43 +99,5 @@ describe('runCodemods — unified config codemod path', () => {
|
|
|
99
99
|
expect(fs.readFileSync(path.join(srcDir, 'a.ts'), 'utf-8')).toContain(
|
|
100
100
|
'const bar = 1',
|
|
101
101
|
);
|
|
102
|
-
// writtenFiles must be returned (consumed by upgrade.mjs to run the
|
|
103
|
-
// post-codemod formatting/lint hooks). Regression guard: it was previously
|
|
104
|
-
// built internally but omitted from the return object, so hooks received an
|
|
105
|
-
// empty file list and silently skipped, leaving codemod output unformatted.
|
|
106
|
-
expect(result.writtenFiles).toEqual([path.join(srcDir, 'a.ts')]);
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
it('returns writtenFiles for every changed file (post-codemod hook input)', async () => {
|
|
110
|
-
const srcDir = path.join(tmpDir, 'src');
|
|
111
|
-
fs.mkdirSync(srcDir);
|
|
112
|
-
fs.writeFileSync(path.join(srcDir, 'a.ts'), 'const foo = 1;\n');
|
|
113
|
-
fs.writeFileSync(path.join(srcDir, 'b.ts'), 'const foo = 2;\n');
|
|
114
|
-
fs.writeFileSync(path.join(srcDir, 'c.ts'), 'const untouched = 3;\n');
|
|
115
|
-
|
|
116
|
-
const versionManifests = [
|
|
117
|
-
{
|
|
118
|
-
version: '0.1.3',
|
|
119
|
-
transforms: [
|
|
120
|
-
{
|
|
121
|
-
name: 'synthetic-code-codemod',
|
|
122
|
-
meta: {title: 'Synthetic code codemod'},
|
|
123
|
-
transform: file => file.source.replace(/foo/g, 'bar'),
|
|
124
|
-
},
|
|
125
|
-
],
|
|
126
|
-
},
|
|
127
|
-
];
|
|
128
|
-
|
|
129
|
-
const result = await runCodemods(versionManifests, {
|
|
130
|
-
apply: true,
|
|
131
|
-
path: './src',
|
|
132
|
-
silent: true,
|
|
133
|
-
});
|
|
134
|
-
|
|
135
|
-
expect(result.totalFilesChanged).toBe(2);
|
|
136
|
-
// Only the two files that actually changed are reported (not c.ts).
|
|
137
|
-
expect([...result.writtenFiles].sort()).toEqual(
|
|
138
|
-
[path.join(srcDir, 'a.ts'), path.join(srcDir, 'b.ts')].sort(),
|
|
139
|
-
);
|
|
140
102
|
});
|
|
141
103
|
});
|
package/src/codemods/runner.mjs
CHANGED
|
@@ -178,7 +178,6 @@ function toUnifiedEntry(transformEntry, version) {
|
|
|
178
178
|
* @param {string|undefined} options.codemod - Run only this specific transform
|
|
179
179
|
* @param {Set<string>} [options.skipCodemods] - Transform names to exclude
|
|
180
180
|
* @param {boolean} [options.silent] - Suppress all human-facing output (for --json)
|
|
181
|
-
* @returns {{totalFilesChanged: number, totalTransformsApplied: number, totalValidationBlocked: number, writtenFiles: string[], errors: Array, skippedOptional: Array}}
|
|
182
181
|
*/
|
|
183
182
|
export async function runCodemods(
|
|
184
183
|
versionManifests,
|
|
@@ -406,7 +405,6 @@ export async function runCodemods(
|
|
|
406
405
|
totalFilesChanged,
|
|
407
406
|
totalTransformsApplied,
|
|
408
407
|
totalValidationBlocked,
|
|
409
|
-
writtenFiles,
|
|
410
408
|
errors,
|
|
411
409
|
skippedOptional,
|
|
412
410
|
};
|
|
@@ -9,12 +9,11 @@
|
|
|
9
9
|
* - Claude Code: CLAUDE.md (root) or .claude/CLAUDE.md
|
|
10
10
|
* - Cursor: .cursorrules
|
|
11
11
|
* - Codex/generic: AGENTS.md
|
|
12
|
-
* - Hermes Agent: .hermes.md or HERMES.md (existing), else AGENTS.md
|
|
13
12
|
*
|
|
14
13
|
* Auto-detect: discovers existing files and updates them in place.
|
|
15
14
|
* Default (no existing files): creates .claude/CLAUDE.md.
|
|
16
15
|
*
|
|
17
|
-
* --agent <tool>: target a specific tool preset (claude, cursor, codex,
|
|
16
|
+
* --agent <tool>: target a specific tool preset (claude, cursor, codex, all)
|
|
18
17
|
* --agent-docs-path <path>: explicit file path(s)
|
|
19
18
|
*/
|
|
20
19
|
|
|
@@ -47,7 +46,6 @@ const AGENT_PRESETS = {
|
|
|
47
46
|
claude: [CLAUDE_MD, CLAUDE_DIR_MD],
|
|
48
47
|
cursor: ['.cursorrules', AGENTS_MD],
|
|
49
48
|
codex: [AGENTS_MD],
|
|
50
|
-
hermes: ['.hermes.md', 'HERMES.md', AGENTS_MD],
|
|
51
49
|
};
|
|
52
50
|
|
|
53
51
|
/**
|
|
@@ -66,7 +64,7 @@ export function discoverAgentDocs(targetDir) {
|
|
|
66
64
|
* Searches for existing files first, falls back to default creation path.
|
|
67
65
|
*
|
|
68
66
|
* @param {string} targetDir
|
|
69
|
-
* @param {string} agent - Preset name: 'claude', 'cursor', 'codex', '
|
|
67
|
+
* @param {string} agent - Preset name: 'claude', 'cursor', 'codex', 'all'
|
|
70
68
|
* @returns {{inject: string[], create: string[]}} Files to inject into vs create fresh
|
|
71
69
|
*/
|
|
72
70
|
export function resolveAgentPaths(targetDir, agent) {
|
|
@@ -388,7 +386,7 @@ export function removeAgentDocs(targetDir) {
|
|
|
388
386
|
* @param {object} [options]
|
|
389
387
|
* @param {boolean} [options.zh]
|
|
390
388
|
* @param {string} [options.lang]
|
|
391
|
-
* @param {string} [options.agent] - Tool preset: 'claude', 'cursor', 'codex', '
|
|
389
|
+
* @param {string} [options.agent] - Tool preset: 'claude', 'cursor', 'codex', 'all'
|
|
392
390
|
* @param {string[]} [options.paths] - Explicit paths (overrides agent/auto-detect)
|
|
393
391
|
* @param {boolean} [options.onlyReplace] - Only update files that already have Astryx markers (for upgrades)
|
|
394
392
|
* @returns {string[]} List of files written
|
|
@@ -470,14 +468,14 @@ export function installAgentDocs(targetDir, {zh = false, lang, agent, paths, onl
|
|
|
470
468
|
return written;
|
|
471
469
|
}
|
|
472
470
|
|
|
473
|
-
const VALID_AGENTS = ['claude', 'cursor', 'codex', '
|
|
471
|
+
const VALID_AGENTS = ['claude', 'cursor', 'codex', 'all'];
|
|
474
472
|
|
|
475
473
|
export function registerAgentDocs(program) {
|
|
476
474
|
program
|
|
477
475
|
.command('agent-docs')
|
|
478
476
|
.description('Install/update the component index for AI coding agents')
|
|
479
477
|
.option('--remove', 'Remove the design system section from all agent doc files')
|
|
480
|
-
.option('--agent <tool>', 'Target tool: claude, cursor, codex,
|
|
478
|
+
.option('--agent <tool>', 'Target tool: claude, cursor, codex, all')
|
|
481
479
|
.option('--agent-docs-path <path...>', 'Explicit file path(s) to write to')
|
|
482
480
|
.action(options => {
|
|
483
481
|
const targetDir = process.cwd();
|
|
@@ -449,17 +449,6 @@ describe('installAgentDocs', () => {
|
|
|
449
449
|
expect(fs.existsSync(path.join(tmpDir, 'AGENTS.md'))).toBe(true);
|
|
450
450
|
});
|
|
451
451
|
|
|
452
|
-
it('respects --agent hermes preset: creates AGENTS.md', () => {
|
|
453
|
-
setupCorePackage(tmpDir);
|
|
454
|
-
|
|
455
|
-
const written = installAgentDocs(tmpDir, {agent: 'hermes'});
|
|
456
|
-
|
|
457
|
-
expect(written).toEqual(['AGENTS.md']);
|
|
458
|
-
const content = fs.readFileSync(path.join(tmpDir, 'AGENTS.md'), 'utf-8');
|
|
459
|
-
expect(content).toContain('<!-- ASTRYX:START -->');
|
|
460
|
-
expect(fs.existsSync(path.join(tmpDir, '.claude'))).toBe(false);
|
|
461
|
-
});
|
|
462
|
-
|
|
463
452
|
it('respects explicit --paths', () => {
|
|
464
453
|
setupCorePackage(tmpDir);
|
|
465
454
|
|
|
@@ -559,26 +548,4 @@ describe('resolveAgentPaths', () => {
|
|
|
559
548
|
expect(result.create).toContain('AGENTS.md');
|
|
560
549
|
expect(result.create).toContain('.claude/CLAUDE.md');
|
|
561
550
|
});
|
|
562
|
-
|
|
563
|
-
it('hermes preset creates AGENTS.md when nothing exists', () => {
|
|
564
|
-
const result = resolveAgentPaths(tmpDir, 'hermes');
|
|
565
|
-
expect(result).toEqual({inject: [], create: ['AGENTS.md']});
|
|
566
|
-
});
|
|
567
|
-
|
|
568
|
-
it('hermes preset finds existing .hermes.md', () => {
|
|
569
|
-
fs.writeFileSync(path.join(tmpDir, '.hermes.md'), '');
|
|
570
|
-
const result = resolveAgentPaths(tmpDir, 'hermes');
|
|
571
|
-
expect(result).toEqual({inject: ['.hermes.md'], create: []});
|
|
572
|
-
});
|
|
573
|
-
|
|
574
|
-
it('hermes preset finds existing HERMES.md when no .hermes.md', () => {
|
|
575
|
-
fs.writeFileSync(path.join(tmpDir, 'HERMES.md'), '');
|
|
576
|
-
const result = resolveAgentPaths(tmpDir, 'hermes');
|
|
577
|
-
expect(result).toEqual({inject: ['HERMES.md'], create: []});
|
|
578
|
-
});
|
|
579
|
-
|
|
580
|
-
it('claude preset still creates .claude/CLAUDE.md when nothing exists (hermes is additive)', () => {
|
|
581
|
-
const result = resolveAgentPaths(tmpDir, 'claude');
|
|
582
|
-
expect(result).toEqual({inject: [], create: ['.claude/CLAUDE.md']});
|
|
583
|
-
});
|
|
584
551
|
});
|
|
@@ -175,85 +175,14 @@ async function getKnownValues(componentName) {
|
|
|
175
175
|
return _knownValuesCache.get(componentName);
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
/**
|
|
179
|
-
* Resolve `@astryxdesign/core`'s package root relative to the CLI package. Core
|
|
180
|
-
* and the CLI ship as siblings (`@astryxdesign/core`, `@astryxdesign/cli`), so
|
|
181
|
-
* `../../../core` from `src/commands/` reaches core whether installed from npm
|
|
182
|
-
* or run inside the monorepo. Returns null if it can't be found.
|
|
183
|
-
*/
|
|
184
|
-
function resolveCoreRoot() {
|
|
185
|
-
const cliDir = path.dirname(fileURLToPath(import.meta.url));
|
|
186
|
-
const coreRoot = path.resolve(cliDir, '../../../core');
|
|
187
|
-
return fs.existsSync(coreRoot) ? coreRoot : null;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* Read the type declarations `@astryxdesign/core/<Component>` exposes so we can
|
|
192
|
-
* check whether a given augmentation-target interface actually exists before
|
|
193
|
-
* generating a module augmentation against it.
|
|
194
|
-
*
|
|
195
|
-
* Reads the shipped `dist/<Component>/index.d.ts` (what a consumer's TypeScript
|
|
196
|
-
* actually sees), falling back to the `src/<Component>/index.ts` in the
|
|
197
|
-
* monorepo. Returns the file contents, or '' if nothing is found.
|
|
198
|
-
*/
|
|
199
|
-
const _componentDeclCache = new Map();
|
|
200
|
-
function readComponentDeclarations(pascalName) {
|
|
201
|
-
if (_componentDeclCache.has(pascalName)) {
|
|
202
|
-
return _componentDeclCache.get(pascalName);
|
|
203
|
-
}
|
|
204
|
-
let contents = '';
|
|
205
|
-
const coreRoot = resolveCoreRoot();
|
|
206
|
-
if (coreRoot) {
|
|
207
|
-
const candidates = [
|
|
208
|
-
path.join(coreRoot, 'dist', pascalName, 'index.d.ts'),
|
|
209
|
-
path.join(coreRoot, 'src', pascalName, 'index.ts'),
|
|
210
|
-
];
|
|
211
|
-
for (const file of candidates) {
|
|
212
|
-
try {
|
|
213
|
-
if (fs.existsSync(file)) {
|
|
214
|
-
contents = fs.readFileSync(file, 'utf-8');
|
|
215
|
-
break;
|
|
216
|
-
}
|
|
217
|
-
} catch {
|
|
218
|
-
// ignore and try the next candidate
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
_componentDeclCache.set(pascalName, contents);
|
|
223
|
-
return contents;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
/**
|
|
227
|
-
* Determine whether `@astryxdesign/core/<Component>` exports an interface named
|
|
228
|
-
* `interfaceName` that can be augmented via module augmentation.
|
|
229
|
-
*
|
|
230
|
-
* Only interfaces are extension points — closed literal-union types (e.g.
|
|
231
|
-
* `HeadingType`, `ButtonSize`) are NOT augmentable, so a generated augmentation
|
|
232
|
-
* against them is dead code. We check that the name is exported (directly or
|
|
233
|
-
* re-exported) as a type/interface.
|
|
234
|
-
*/
|
|
235
|
-
function componentHasAugmentableInterface(pascalName, interfaceName) {
|
|
236
|
-
const decl = readComponentDeclarations(pascalName);
|
|
237
|
-
if (!decl) return false;
|
|
238
|
-
// Word-boundary match so `ButtonVariantMap` doesn't match `XButtonVariantMap`.
|
|
239
|
-
const re = new RegExp(`\\b${interfaceName}\\b`);
|
|
240
|
-
return re.test(decl);
|
|
241
|
-
}
|
|
242
|
-
|
|
243
178
|
/**
|
|
244
179
|
* Generate TypeScript declaration content with module augmentation for custom
|
|
245
180
|
* component prop values found in the theme's `components` keys. Reads known
|
|
246
181
|
* values from doc files to filter out base prop values.
|
|
247
182
|
*
|
|
248
|
-
* Interface naming convention: PascalCase(component) + PascalCase(prop) + Map
|
|
249
|
-
* banner + status →
|
|
250
|
-
* button + variant →
|
|
251
|
-
*
|
|
252
|
-
* An augmentation is only emitted when `@astryxdesign/core/<Component>` actually
|
|
253
|
-
* exports a matching interface. Props backed by closed literal-union types
|
|
254
|
-
* (e.g. Button `size`, Heading `type`/`level`) have no augmentation point, so
|
|
255
|
-
* generating a `declare module` block for them would be dead code — those are
|
|
256
|
-
* skipped.
|
|
183
|
+
* Interface naming convention: Astryx + PascalCase(component) + PascalCase(prop) + Map
|
|
184
|
+
* banner + status → XDSBannerStatusMap
|
|
185
|
+
* button + variant → XDSButtonVariantMap
|
|
257
186
|
*
|
|
258
187
|
* @param {object} themeDef - Theme definition (resolved by defineTheme)
|
|
259
188
|
* @returns {Promise<string|null>} TypeScript declaration content, or null if no augmentations needed
|
|
@@ -305,14 +234,7 @@ async function generateVariantDeclarationsAsync(themeDef) {
|
|
|
305
234
|
const pascal = toPascalCase(component);
|
|
306
235
|
const propPascal = prop.charAt(0).toUpperCase() + prop.slice(1);
|
|
307
236
|
const modulePath = `@astryxdesign/core/${pascal}`;
|
|
308
|
-
const interfaceName =
|
|
309
|
-
|
|
310
|
-
// Only augment interfaces that actually exist as an extension point in
|
|
311
|
-
// core. Props backed by closed literal-union types (e.g. Button `size`,
|
|
312
|
-
// Heading `type`/`level`) have no `*Map` interface — a `declare module`
|
|
313
|
-
// block against a non-existent interface just creates a new, unused
|
|
314
|
-
// interface and never extends the component's prop union, so skip it.
|
|
315
|
-
if (!componentHasAugmentableInterface(pascal, interfaceName)) continue;
|
|
237
|
+
const interfaceName = `XDS${pascal}${propPascal}Map`;
|
|
316
238
|
|
|
317
239
|
sections.push(`declare module '${modulePath}' {`);
|
|
318
240
|
sections.push(` interface ${interfaceName} {`);
|
|
@@ -325,13 +247,6 @@ async function generateVariantDeclarationsAsync(themeDef) {
|
|
|
325
247
|
}
|
|
326
248
|
}
|
|
327
249
|
|
|
328
|
-
// If every custom value targeted a non-augmentable prop, there's nothing to
|
|
329
|
-
// emit beyond the header — return null so no `.variants.d.ts` is written.
|
|
330
|
-
const hasEmittedAugmentation = sections.some(line =>
|
|
331
|
-
line.startsWith('declare module'),
|
|
332
|
-
);
|
|
333
|
-
if (!hasEmittedAugmentation) return null;
|
|
334
|
-
|
|
335
250
|
return sections.join('\n');
|
|
336
251
|
}
|
|
337
252
|
|
|
@@ -518,21 +433,13 @@ ${iconReExport}`;
|
|
|
518
433
|
/**
|
|
519
434
|
* Generate TypeScript declarations for a built theme module.
|
|
520
435
|
*/
|
|
521
|
-
function generateBuiltTypes(themeDef, iconInfo
|
|
436
|
+
function generateBuiltTypes(themeDef, iconInfo) {
|
|
522
437
|
const iconType = iconInfo
|
|
523
438
|
? `import type { IconRegistry } from '@astryxdesign/core/Icon';
|
|
524
439
|
export declare const ${iconInfo.exportName}: IconRegistry;
|
|
525
440
|
`
|
|
526
441
|
: '';
|
|
527
|
-
|
|
528
|
-
// theme's types also loads the module augmentations (otherwise the
|
|
529
|
-
// `.variants.d.ts` is emitted but never referenced, and the custom variants
|
|
530
|
-
// never widen the component prop unions for consumers).
|
|
531
|
-
const variantsRef = variantsFileName
|
|
532
|
-
? `/// <reference path="./${variantsFileName}" />
|
|
533
|
-
`
|
|
534
|
-
: '';
|
|
535
|
-
return `${variantsRef}import type { DefinedTheme } from '@astryxdesign/core/theme';
|
|
442
|
+
return `import type { DefinedTheme } from '@astryxdesign/core/theme';
|
|
536
443
|
${iconType}export declare const ${toIdentifier(themeDef.name)}Theme: DefinedTheme;
|
|
537
444
|
`;
|
|
538
445
|
}
|
|
@@ -939,15 +846,8 @@ export function registerTheme(program) {
|
|
|
939
846
|
if (component.length > 0) {
|
|
940
847
|
const componentInner = component.join('\n\n');
|
|
941
848
|
const componentScope = `@scope (${scopeSelector}) to (${scopeTo}) {\n${componentInner}\n}`;
|
|
942
|
-
// light-dark() needs a color-scheme declaration in this bundle, but a
|
|
943
|
-
// bare `:root { color-scheme: light dark }` outranks reset.css's
|
|
944
|
-
// `html[data-theme]` mapping (astryx-theme layer comes after reset),
|
|
945
|
-
// silently defeating `<Theme mode>` forcing on <html>. Mirror the
|
|
946
|
-
// attribute-keyed mapping so the declaration follows the active mode.
|
|
947
849
|
const colorSchemeDecl = componentScope.includes('light-dark(')
|
|
948
|
-
? ' :root { color-scheme: light dark; }\n'
|
|
949
|
-
' html[data-theme="light"] { color-scheme: light; }\n' +
|
|
950
|
-
' html[data-theme="dark"] { color-scheme: dark; }\n\n'
|
|
850
|
+
? ' :root { color-scheme: light dark; }\n\n'
|
|
951
851
|
: '';
|
|
952
852
|
cssParts.push(
|
|
953
853
|
`@layer astryx-theme {\n${colorSchemeDecl}${componentScope}\n}`,
|
|
@@ -994,23 +894,19 @@ export function registerTheme(program) {
|
|
|
994
894
|
|
|
995
895
|
const iconInfo = extractIconInfo(filePath);
|
|
996
896
|
|
|
997
|
-
//
|
|
998
|
-
|
|
897
|
+
// Generate all file contents in memory first.
|
|
898
|
+
const cssContent = generatedHeader(sourceRelative, 'css', buildCommand) + css;
|
|
899
|
+
const jsContent = generatedHeader(sourceRelative, 'js', buildCommand) + generateBuiltModule(resolvedTheme || themeDef, iconInfo);
|
|
900
|
+
const dtsContent = generatedHeader(sourceRelative, 'ts', buildCommand) + generateBuiltTypes(themeDef, iconInfo);
|
|
901
|
+
|
|
902
|
+
// Type augmentation .d.ts if theme has custom prop values
|
|
999
903
|
const augmentationSource = resolvedTheme || themeDef;
|
|
1000
904
|
const variantDecl = await generateVariantDeclarationsAsync(augmentationSource);
|
|
1001
|
-
const
|
|
1002
|
-
const variantDtsPath = variantDecl ? path.join(outDir, variantsFileName) : null;
|
|
905
|
+
const variantDtsPath = variantDecl ? path.join(outDir, `${baseName}.variants.d.ts`) : null;
|
|
1003
906
|
const variantContent = variantDecl
|
|
1004
907
|
? generatedHeader(sourceRelative, 'ts', buildCommand) + variantDecl
|
|
1005
908
|
: null;
|
|
1006
909
|
|
|
1007
|
-
// Generate all file contents in memory first. The main .d.ts references
|
|
1008
|
-
// the variants file (when present) via a triple-slash directive so
|
|
1009
|
-
// importing the theme also loads the custom-variant augmentations.
|
|
1010
|
-
const cssContent = generatedHeader(sourceRelative, 'css', buildCommand) + css;
|
|
1011
|
-
const jsContent = generatedHeader(sourceRelative, 'js', buildCommand) + generateBuiltModule(resolvedTheme || themeDef, iconInfo);
|
|
1012
|
-
const dtsContent = generatedHeader(sourceRelative, 'ts', buildCommand) + generateBuiltTypes(themeDef, iconInfo, variantsFileName);
|
|
1013
|
-
|
|
1014
910
|
// Atomic-ish write: stage every file as `<dest>.tmp`, then rename
|
|
1015
911
|
// each into place. If any stage step fails we clean up partials and
|
|
1016
912
|
// exit; if a rename fails mid-way we still have the originals (or
|