@atelier-ui/create-workspace 0.2.42 → 0.2.43

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## 0.2.43 (2026-09-12)
+
+### 🚀 Features
+
+- **scaffold:** Prettier ships enforced, and a types script does not ship at all ([543dc719](https://github.com/DominikPieper/atelier-ui/commit/543dc719))
+- **scaffold:** a generated workspace gets the CSS-discipline rules on day one ([68b097c8](https://github.com/DominikPieper/atelier-ui/commit/68b097c8))
+- **lint:** the linter is a gate, where the invariant fits in one file ([e4e6a02f](https://github.com/DominikPieper/atelier-ui/commit/e4e6a02f))
+- **gates:** a gate that measured nothing is not a gate that found nothing ([a45a6852](https://github.com/DominikPieper/atelier-ui/commit/a45a6852))
+- **gates:** check:manifest-parity — the three manifests, diffed — ADR-0121 S6a ([fbd5fd31](https://github.com/DominikPieper/atelier-ui/commit/fbd5fd31))
+- **spec:** the contract on every Docs tab, imported by every story meta — ADR-0121 S5b ([30dd54c0](https://github.com/DominikPieper/atelier-ui/commit/30dd54c0))
+- **create-workspace:** the scaffold ships the contract loop — ADR-0121 S4 ([74aa6405](https://github.com/DominikPieper/atelier-ui/commit/74aa6405))
+- **create-workspace:** Storybook and the skills ship together — ADR-0123 ([79b60e91](https://github.com/DominikPieper/atelier-ui/commit/79b60e91))
+
+### 🩹 Fixes
+
+- **lint:** a broken allowlists module made the staleness check silent ([a41ff023](https://github.com/DominikPieper/atelier-ui/commit/a41ff023))
+- **gates:** check:contracts skips package-imported components before docgen ([caa76332](https://github.com/DominikPieper/atelier-ui/commit/caa76332))
+- **skill:** the Day-2 loop, walked as a participant — twenty findings, five blockers ([e1fe1409](https://github.com/DominikPieper/atelier-ui/commit/e1fe1409))
+
+### ❤️ Thank You
+
+- Claude Fable 5.1
+- Claude Opus 5 (1M context)
+- Dominik Pieper @DominikPieper
+
 ## 0.2.42 (2026-09-10)
 
 This was a version bump only for create-workspace to align it with other projects, there were no code changes.
@@ -286,11 +311,11 @@ This was a version bump only for create-workspace to align it with other project
 
 ### 🚀 Features
 
-- ⚠️  **docs:** rename Llm prefix to Atl across docs, generated artifacts, and tooling docs ([965787d](https://github.com/DominikPieper/atelier-ui/commit/965787d))
+- ⚠️ **docs:** rename Llm prefix to Atl across docs, generated artifacts, and tooling docs ([965787d](https://github.com/DominikPieper/atelier-ui/commit/965787d))
 
-### ⚠️  Breaking Changes
+### ⚠️ Breaking Changes
 
-- **docs:** rename Llm prefix to Atl across docs, generated artifacts, and tooling docs  ([965787d](https://github.com/DominikPieper/atelier-ui/commit/965787d))
+- **docs:** rename Llm prefix to Atl across docs, generated artifacts, and tooling docs ([965787d](https://github.com/DominikPieper/atelier-ui/commit/965787d))
 
 ### ❤️ Thank You
 
@@ -576,4 +601,4 @@ This was a version bump only for create-workspace to align it with other project
 ### ❤️ Thank You
 
 - Claude Opus 4.7 (1M context)
-- Dominik Pieper @DominikPieper
+- Dominik Pieper @DominikPieper

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atelier-ui/create-workspace",
-  "version": "0.2.42",
+  "version": "0.2.43",
   "description": "Nx preset for Atelier workshop workspaces",
   "keywords": [
     "nx",

package/src/generators/preset/files/contracts/README.md

@@ -0,0 +1,29 @@
+# Contracts
+
+A micro-contract (`types.ts`, ADR-0121 Decision 3) is the one hand-authored spec
+artefact per component: which Figma master it is, and where Figma and code differ on
+purpose (`figmaOnly`, `codeOnly`, `axisMap`, `probes`). Everything else — props,
+defaults, unions, variant matrices, descriptions, token lists — is forbidden here; it
+lives in the component's types/JSDoc, a story, or the master.
+
+The planned check reads each `<name>.contract.ts` statically with
+`tools/scripts/lib/ts-eval.js`'s `parseExportedVars`, so a contract must stay a plain
+object literal (no imports of values, no computed members).
+
+Every component story meta whose component has a contract must import it and set
+`contract` in its `parameters` (`docs-block.ts`'s `ContractBlock` reads
+`parameters.contract` to render the "Contract" section on the docs page); a story file
+that has a contract but doesn't wire it in is `[CONTRACT-IMPORT]` — an error where
+`docs-block.ts` ships beside the contracts (the Atelier monorepo does), a warning in a
+scaffolded workspace until it ships the block.
+
+To add one: create `<kebab-selector-without-atl-prefix>.contract.ts` in the contracts
+directory (`AtlButton` → `button.contract.ts`), `import type { ComponentContract } from
+'./types';`, and `export const contract = { ... } satisfies ComponentContract;` —
+`satisfies`, not a type annotation, so an extra key fails the build.
+
+This file is shared verbatim between two locations: `libs/spec/src/contracts/README.md`
+in this repo, and `<app>/src/contracts/README.md` in a scaffolded workspace
+(`create-workspace`'s preset, kept byte-identical by `tools/scripts/sync-preflight.mjs`).
+That is why it says "the contracts directory" above rather than naming a path — the
+directory itself is `libs/spec/src/contracts/` here and `<app>/src/contracts/` there.

package/src/generators/preset/files/contracts/button.contract.ts.template

@@ -0,0 +1,20 @@
+import type { ComponentContract } from './types';
+
+export const contract = {
+  component: 'AtlButton',
+  figmaNodeId: '129:20',
+  codeOnly: [
+    {
+      name: 'type',
+      reason:
+        "Native HTML button 'type' passthrough ('button'|'submit'|'reset') — a form-semantics attribute the button element always carries, not a Figma-drawn visual axis.",
+    },
+  ],
+  figmaOnly: [
+    {
+      name: 'hasIcon',
+      reason:
+        'Master description (2026-08-27, ADR-0058): a Figma-side slot toggle for placing an Icon instance (Instance Swap → Icon library), a legitimate authoring affordance but not part of the component contract — AtlButtonSpec has no hasIcon.',
+    },
+  ],
+} satisfies ComponentContract;

package/src/generators/preset/files/contracts/types.ts.template

@@ -0,0 +1,55 @@
+/**
+ * The micro-contract (ADR-0121, Decision 3): the ONLY hand-authored spec artefact per
+ * component. It records what no derived artefact can know — which Figma master this
+ * component is, and where Figma and code differ on purpose. Everything else about the
+ * component is derived: props, types, defaults and descriptions from the docgen manifest;
+ * variant coverage from the stories; geometry and paint from the rendered story and the
+ * Figma snapshot.
+ *
+ * Forbidden here, by design: props, defaults, unions, variant matrices, prose
+ * descriptions, token lists. If you want to write one of those, the place is the
+ * component's types and JSDoc, a story, or the master. A contract that regrows into a
+ * metadata file has failed.
+ *
+ * Contracts are plain object literals — no imports of values, no computed members — so
+ * `tools/scripts/lib/ts-eval.js` can read them statically, the way it reads the metadata
+ * registry.
+ */
+export interface ComponentContract {
+  /** Spec selector, e.g. `'AtlButton'`. Must equal the master's `selector` in `tools/figma/snapshot.json`. */
+  component: string;
+  /** The master's `COMPONENT_SET` (or lone `COMPONENT`) node id in the Atelier file, e.g. `'129:20'`. */
+  figmaNodeId: string;
+  /**
+   * Figma properties — variant axes, Booleans, Texts, instance swaps — that have no code
+   * prop on purpose, each with the reason. The `state` axis is NOT listed: interaction
+   * states are CSS pseudo-classes by repo-wide convention (ADR-0114) and the check knows it.
+   */
+  figmaOnly?: ReadonlyArray<{ name: string; reason: string }>;
+  /**
+   * Code props or events that have no Figma property on purpose, each with the reason
+   * (e.g. `open` — "false renders nothing", ADR-0056). Domain: only string-literal enum
+   * props — the code's own axes — ever need an entry here, for the same reason
+   * `[ENUM-UNDRAWN]` only ever reports enum props. Booleans, strings, numbers, callbacks
+   * and events with no Figma counterpart are normal (behaviour and content) and never
+   * need one.
+   */
+  codeOnly?: ReadonlyArray<{ name: string; reason: string }>;
+  /**
+   * A Figma axis that maps to a code prop under another name or value set, e.g. the
+   * `selection` axis (`checked` | `unchecked`) that is `checked: boolean` in code.
+   * Verbatim-equal axes need no entry. `codeProp` may be dotted (`Child.prop`, e.g.
+   * `AtlStep.completed`) when the prop lives on a CHILD component's own manifest rather
+   * than the story's primary component — the check resolves it there. Several entries
+   * may target the same `figmaAxis` (e.g. AtlStepper's `state` axis maps to three
+   * different `AtlStep` flags, one entry each).
+   */
+  axisMap?: ReadonlyArray<{
+    figmaAxis: string;
+    codeProp: string;
+    values?: Readonly<Record<string, string | number | boolean | null>>;
+    reason: string;
+  }>;
+  /** Only when the root frame is not the comparable layer: the part a parity probe measures instead. */
+  probes?: ReadonlyArray<{ part: string; selector: string; reason: string }>;
+}

package/src/generators/preset/files/figma/snapshot.json

@@ -0,0 +1,164 @@
+{
+  "meta": {
+    "fileKey": "QMnDD8uZQPldPrlCwZZ58T",
+    "figmaLastModified": "2026-09-10T04:18:29Z",
+    "projectedFrom": "tools/figma/snapshot.json"
+  },
+  "components": [
+    {
+      "selector": "AtlButton",
+      "nodeId": "129:20",
+      "name": "Inputs/AtlButton",
+      "description": "Action button. Maps to AtlButtonSpec in libs/spec.\n\nUse when: a user-initiated action — submit, save, delete, navigate. Pick the visual based on hierarchy: `primary` for the screen's main action (one per screen), `secondary` for supporting actions, `outline` for tertiary/inline, `danger` for destructive actions (delete, irreversible).\n\nDon't use when: the action is a navigation link (use a real `<a>` element, not a styled button), the choice is between two states (use Form/AtlToggle), or the user is filling a form field (use Form/AtlInput / Form/AtlSelect).\n\nAPI surface (Figma → spec):\n- Variant `variant`: primary | secondary | outline | danger — maps to AtlButtonSpec.variant\n- Variant `size`: sm | md | lg — maps to AtlButtonSpec.size\n- Variant `state`: default | hover | focus | active — interaction state\n- Boolean `disabled`: maps to AtlButtonSpec.disabled\n- Boolean `loading`: maps to AtlButtonSpec.loading — shows spinner, disables interaction\n- Boolean `hasIcon`: toggles the leading icon slot (Instance Swap → Icon library)\n\nA11y: native HTML <button>. When the button has no visible label (icon-only), supply `aria-label` — required by spec. Disabled state uses HTML `disabled` (not aria-disabled) for buttons since they're never expected to remain in the tab order.\n\nStatus: structural restructure 2026-04-27 — `state` enum slimmed to interaction (default/hover/focus/active); `loading` and `disabled` moved out as Booleans matching AtlButtonSpec; `hasIcon` Boolean added for icon-slot toggle.\n\nDeclared Boolean properties that reference no layer (2026-08-27, ADR-0058). check:figma reads these lines, so the reason is stated where a designer opening the master sees it:\n- Boolean `hasIcon`: declared but unbound — and it maps to nothing: `AtlButtonSpec` has no `hasIcon`. It is a Figma-side slot toggle for placing an Icon instance, which is a legitimate authoring affordance but not part of the component contract. Bind it to the icon slot layer when that slot exists, or drop it.",
+      "variantAxes": {
+        "variant": [
+          "primary",
+          "secondary",
+          "outline",
+          "danger"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "state": [
+          "default",
+          "focus",
+          "hover",
+          "active"
+        ]
+      },
+      "properties": {
+        "disabled#507:192": "BOOLEAN",
+        "loading#507:217": "BOOLEAN",
+        "hasIcon#507:242": "BOOLEAN",
+        "variant": "VARIANT",
+        "size": "VARIANT",
+        "state": "VARIANT"
+      },
+      "variants": [
+        {
+          "variant": "primary",
+          "size": "sm",
+          "state": "default"
+        },
+        {
+          "variant": "primary",
+          "size": "md",
+          "state": "default"
+        },
+        {
+          "variant": "primary",
+          "size": "lg",
+          "state": "default"
+        },
+        {
+          "variant": "secondary",
+          "size": "sm",
+          "state": "default"
+        },
+        {
+          "variant": "secondary",
+          "size": "md",
+          "state": "default"
+        },
+        {
+          "variant": "secondary",
+          "size": "lg",
+          "state": "default"
+        },
+        {
+          "variant": "outline",
+          "size": "sm",
+          "state": "default"
+        },
+        {
+          "variant": "outline",
+          "size": "md",
+          "state": "default"
+        },
+        {
+          "variant": "outline",
+          "size": "lg",
+          "state": "default"
+        },
+        {
+          "variant": "primary",
+          "size": "md",
+          "state": "focus"
+        },
+        {
+          "variant": "primary",
+          "size": "md",
+          "state": "hover"
+        },
+        {
+          "variant": "primary",
+          "size": "md",
+          "state": "active"
+        },
+        {
+          "variant": "danger",
+          "size": "sm",
+          "state": "default"
+        },
+        {
+          "variant": "danger",
+          "size": "md",
+          "state": "default"
+        },
+        {
+          "variant": "danger",
+          "size": "lg",
+          "state": "default"
+        },
+        {
+          "variant": "danger",
+          "size": "md",
+          "state": "hover"
+        },
+        {
+          "variant": "danger",
+          "size": "md",
+          "state": "active"
+        },
+        {
+          "variant": "danger",
+          "size": "md",
+          "state": "focus"
+        },
+        {
+          "variant": "secondary",
+          "size": "md",
+          "state": "hover"
+        },
+        {
+          "variant": "secondary",
+          "size": "md",
+          "state": "active"
+        },
+        {
+          "variant": "secondary",
+          "size": "md",
+          "state": "focus"
+        },
+        {
+          "variant": "outline",
+          "size": "md",
+          "state": "hover"
+        },
+        {
+          "variant": "outline",
+          "size": "md",
+          "state": "active"
+        },
+        {
+          "variant": "outline",
+          "size": "md",
+          "state": "focus"
+        }
+      ]
+    }
+  ]
+}

package/src/generators/preset/files/storybook/angular/atl-button.stories.ts.template

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { argsToTemplate } from '@storybook/angular-vite';
+import { AtlButton } from '@atelier-ui/angular';
+
+// A working pattern to copy: duplicate this file for another component from
+// @atelier-ui/angular, or add more `args`/`argTypes` below.
+const meta: Meta<AtlButton> = {
+  title: 'AtlButton',
+  component: AtlButton,
+  tags: ['autodocs'],
+  render: (args) => ({
+    props: args,
+    template: `<atl-button ${argsToTemplate(args)}>Button</atl-button>`,
+  }),
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'outline', 'danger'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+  },
+  args: {
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    loading: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<AtlButton>;
+
+export const Default: Story = {};

package/src/generators/preset/files/storybook/angular/main.ts.template

@@ -0,0 +1,39 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import type { StorybookConfig } from '@storybook/angular-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Emits manifests/{docs,components}.json, which is what lets the
+    // storybookjs/mcp skills' docs-list/docs-show tools and dev tools
+    // (stories-preview, get-storybook-story-instructions) work against this
+    // workspace's own components. addon-vitest below is what makes the
+    // skills' `test-run` tool work too, once a local Storybook is running —
+    // see vitest.config.ts and CLAUDE.md's "The contract loop".
+    '@storybook/addon-mcp',
+    getAbsolutePath('@storybook/addon-vitest'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-docs'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/angular-vite'),
+    options: {},
+  },
+  docs: {},
+  features: {
+    // Read by Storybook's core-server at build time and by addon-mcp's
+    // docs-toolset gate on a dev server.
+    componentsManifest: true,
+    // Angular's docgen server is opt-in until Storybook 11 for some adapters;
+    // explicit here so `components.json` carries real prop tables, not just
+    // id/name.
+    experimentalDocgenServer: true,
+  },
+};
+
+export default config;
+
+function getAbsolutePath(value: string): string {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}

package/src/generators/preset/files/storybook/angular/preview.ts.template

@@ -0,0 +1,30 @@
+import type { Preview } from '@storybook/angular-vite';
+
+// Side-effect import: Vite injects tokens.css globally into the page
+import '../src/styles/tokens.css';
+
+const preview: Preview = {
+  parameters: {
+    a11y: {
+      // 'error' - fail CI on a11y violations (chosen — ADR-0121 S0)
+      // 'todo' - show a11y violations in the test UI only
+      // 'off' - skip a11y checks entirely
+      test: 'error',
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      options: {
+        light: { name: 'light', value: '#ffffff' },
+        subtle: { name: 'subtle', value: '#f5f5f5' },
+        dark: { name: 'dark', value: '#1a1a2e' },
+      },
+    },
+  },
+};
+
+export default preview;

package/src/generators/preset/files/storybook/angular/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "",
+    "types": ["node"],
+    "ignoreDeprecations": "6.0"
+  },
+  "include": [
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.tsx",
+    "../src/**/*.mdx",
+    "./preview.ts",
+    "./main.ts"
+  ],
+  "exclude": ["../src/**/*.spec.ts", "../src/**/*.test.ts"]
+}

package/src/generators/preset/files/storybook/angular/vitest.config.ts.template

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vitest/config';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+// Same plugin libs/angular/vite.config.mts uses in the monorepo. Without it,
+// `@angular/common`'s partially-Ivy-compiled `PlatformLocation` factory has no
+// linker/JIT compiler wired up in this Vite pipeline, and merely importing
+// `@storybook/angular-vite` in vitest.setup.ts throws "The injectable
+// 'PlatformLocation' needs to be compiled using the JIT compiler, but
+// '@angular/compiler' is not available" before a single story loads.
+// React/Vue don't need an equivalent because their frameworks ship no such
+// partially-compiled npm packages.
+import angular from '@analogjs/vite-plugin-angular';
+import { playwright } from '@vitest/browser-playwright';
+
+// Named `vitest.config.ts` (not `vitest.storybook.config.ts`, the name the
+// monorepo's own libs/angular uses) so `@storybook/addon-vitest`'s `test-run`
+// tool finds it directly: its VitestManager walks up from a story's
+// `.storybook` directory looking for the nearest vitest/vite config, and
+// this is the standard filename it looks for first. The monorepo needs a
+// root `vitest.config.mjs` with an explicit `projects: [...]` list because
+// each library's own file has a non-standard name; a single-app scaffold
+// doesn't need that indirection.
+export default defineConfig({
+  plugins: [
+    angular(),
+    storybookTest({
+      configDir: new URL('./.storybook', import.meta.url).pathname,
+    }),
+  ],
+  test: {
+    name: 'storybook:angular',
+    globals: true,
+    browser: {
+      enabled: true,
+      headless: true,
+      provider: playwright(),
+      instances: [{ browser: 'chromium' }],
+    },
+    setupFiles: ['.storybook/vitest.setup.ts'],
+  },
+});

package/src/generators/preset/files/storybook/angular/vitest.setup.ts.template

@@ -0,0 +1,14 @@
+/// <reference types="vitest/globals" />
+// '@storybook/angular-vite', not '@storybook/angular' (which the monorepo's
+// own libs/angular/.storybook/vitest.setup.ts imports): this scaffold
+// deliberately never installs '@storybook/angular' — its peer on
+// @angular-devkit/build-angular collides with a freshly scaffolded Angular
+// app's own build tooling (see the STORYBOOK_FRAMEWORK_PACKAGE comment in
+// preset.ts). '@storybook/angular-vite' re-exports the same
+// setProjectAnnotations.
+import { setProjectAnnotations } from '@storybook/angular-vite';
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

package/src/generators/preset/files/storybook/react/atl-button.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AtlButton } from '@atelier-ui/react';
+
+// A working pattern to copy: duplicate this file for another component from
+// @atelier-ui/react, or add more `args`/`argTypes` below.
+const meta: Meta<typeof AtlButton> = {
+  title: 'AtlButton',
+  component: AtlButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'outline', 'danger'],
+    },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+  },
+  args: {
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    loading: false,
+    children: 'Button',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AtlButton>;
+
+export const Default: Story = {};

package/src/generators/preset/files/storybook/react/main.ts.template

@@ -0,0 +1,37 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Emits manifests/{docs,components}.json, which is what lets the
+    // storybookjs/mcp skills' docs-list/docs-show tools and dev tools
+    // (stories-preview, get-storybook-story-instructions) work against this
+    // workspace's own components. addon-vitest below is what makes the
+    // skills' `test-run` tool work too, once a local Storybook is running —
+    // see vitest.config.ts and CLAUDE.md's "The contract loop".
+    '@storybook/addon-mcp',
+    getAbsolutePath('@storybook/addon-vitest'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-docs'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  docs: {},
+  features: {
+    // Read by Storybook's core-server at build time and by addon-mcp's
+    // docs-toolset gate on a dev server. React defaults its own docgen server
+    // (react-docgen), unlike Angular and Vue — no experimentalDocgenServer
+    // flag needed here.
+    componentsManifest: true,
+  },
+};
+
+export default config;
+
+function getAbsolutePath(value: string): string {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}

package/src/generators/preset/files/storybook/react/preview.tsx

@@ -0,0 +1,29 @@
+import type { Preview } from '@storybook/react';
+
+import '../src/styles/tokens.css';
+
+const preview: Preview = {
+  parameters: {
+    a11y: {
+      // 'error' - fail CI on a11y violations (chosen — ADR-0121 S0)
+      // 'todo' - show a11y violations in the test UI only
+      // 'off' - skip a11y checks entirely
+      test: 'error',
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      options: {
+        light: { name: 'light', value: '#ffffff' },
+        subtle: { name: 'subtle', value: '#f5f5f5' },
+        dark: { name: 'dark', value: '#1a1a2e' },
+      },
+    },
+  },
+};
+
+export default preview;

package/src/generators/preset/files/storybook/react/vitest.config.ts.template

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vitest/config';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import react from '@vitejs/plugin-react';
+import { playwright } from '@vitest/browser-playwright';
+
+// Named `vitest.config.ts` (not `vitest.storybook.config.ts`, the name the
+// monorepo's own libs/react uses) so `@storybook/addon-vitest`'s `test-run`
+// tool finds it directly: its VitestManager walks up from a story's
+// `.storybook` directory looking for the nearest vitest/vite config, and
+// this is the standard filename it looks for first. The monorepo needs a
+// root `vitest.config.mjs` with an explicit `projects: [...]` list because
+// each library's own file has a non-standard name; a single-app scaffold
+// doesn't need that indirection.
+export default defineConfig({
+  plugins: [
+    react(),
+    storybookTest({
+      configDir: new URL('./.storybook', import.meta.url).pathname,
+    }),
+  ],
+  test: {
+    name: 'storybook:react',
+    globals: true,
+    browser: {
+      enabled: true,
+      headless: true,
+      provider: playwright(),
+      instances: [{ browser: 'chromium' }],
+    },
+    setupFiles: ['.storybook/vitest.setup.ts'],
+  },
+});

package/src/generators/preset/files/storybook/react/vitest.setup.ts.template

@@ -0,0 +1,8 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+/// <reference types="vitest/globals" />
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+
+beforeAll(project.beforeAll);