{"_id":"@effinrich/nx-storybook","name":"@effinrich/nx-storybook","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@effinrich/nx-storybook","version":"0.1.0","description":"Nx companion plugin that auto-generates Storybook stories, interaction tests, Playwright component tests, and accessibility audits from React component analysis","main":"./src/index.js","generators":"./generators.json","executors":"./executors.json","keywords":["nx","nx-plugin","storybook","react","testing","code-generation","interaction-tests","playwright","accessibility","a11y","story-generation"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/effinrich/nx-storybook.git"},"author":{"name":"Rich Tillman"},"publishConfig":{"access":"public"},"peerDependencies":{"@nx/devkit":">=19.0.0","@nx/storybook":">=19.0.0","nx":">=19.0.0","storybook":">=8.0.0","typescript":">=5.0.0"},"dependencies":{"tslib":"^2.3.0"},"types":"./src/index.d.ts","type":"commonjs","_id":"@effinrich/nx-storybook@0.1.0","gitHead":"119ef878a4c9364dcd5a135baa20b0133e82ecf6","bugs":{"url":"https://github.com/effinrich/nx-storybook/issues"},"homepage":"https://github.com/effinrich/nx-storybook#readme","_nodeVersion":"20.9.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-IH4mFYaw+BQ0H3cc3bMZBI/rxm1GUmUEzwIH+iLKLCqLKot+O3jEuVGnTNOzofTIkN1X8YjaSCZtXFIhKjFGJw==","shasum":"6bee1da9a33ac8c80ae7c426bebaff1a032ea8b8","tarball":"https://registry.npmjs.org/@effinrich/nx-storybook/-/nx-storybook-0.1.0.tgz","fileCount":36,"unpackedSize":93525,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCkWrzPnT079GxWNDBleBMELKJaZ3sugy+vxdSaxU/CigIge7+3A6/VC90wVJ/tfs76o4zyHyM3s64PUTSOOoV9u7c="}]},"_npmUser":{"name":"effinsnafu","email":"richtillman@gmail.com"},"directories":{},"maintainers":[{"name":"effinsnafu","email":"richtillman@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nx-storybook_0.1.0_1774088923223_0.8940646202644069"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-21T10:28:43.153Z","0.1.0":"2026-03-21T10:28:43.382Z","modified":"2026-03-21T10:28:43.617Z"},"maintainers":[{"name":"effinsnafu","email":"richtillman@gmail.com"}],"description":"Nx companion plugin that auto-generates Storybook stories, interaction tests, Playwright component tests, and accessibility audits from React component analysis","homepage":"https://github.com/effinrich/nx-storybook#readme","keywords":["nx","nx-plugin","storybook","react","testing","code-generation","interaction-tests","playwright","accessibility","a11y","story-generation"],"repository":{"type":"git","url":"git+https://github.com/effinrich/nx-storybook.git"},"author":{"name":"Rich Tillman"},"bugs":{"url":"https://github.com/effinrich/nx-storybook/issues"},"license":"MIT","readme":"# @effinrich/nx-storybook\n\nA companion plugin for [`@nx/storybook`](https://nx.dev/nx-api/storybook) that auto-generates Storybook stories, interaction tests, Playwright component tests, and accessibility audits from React component analysis.\n\n## How it works with @nx/storybook\n\n`@nx/storybook` handles the **infrastructure** — scaffolding `.storybook/main.ts` and `preview.ts`, serving/building Storybook, running the test runner, and managing Storybook version migrations. It does not generate individual story files.\n\n`@effinrich/nx-storybook` handles the **content** — analyzing your React components and generating ready-to-use `.stories.tsx` and `.ct.tsx` files with controls, variants, interaction tests, and accessibility checks.\n\n**Use both together.** This plugin requires `@nx/storybook` as a peer dependency and delegates all config scaffolding to it.\n\n| Concern | @nx/storybook | @effinrich/nx-storybook |\n|---|:---:|:---:|\n| Scaffold `.storybook/` config | Yes | Delegates to @nx/storybook |\n| Serve / build Storybook | Yes | -- |\n| Storybook test runner | Yes | -- |\n| Version migrations (v8→v9→v10) | Yes | -- |\n| Auto-generate `.stories.tsx` from components | -- | Yes |\n| ArgTypes, controls, default args from props | -- | Yes |\n| Variant / size / colorPalette stories | -- | Yes |\n| Interaction tests (play functions) | -- | Yes |\n| Accessibility audit stories (axe-core) | -- | Yes |\n| Keyboard navigation tests | -- | Yes |\n| Co-located Playwright component tests (`.ct.tsx`) | -- | Yes |\n| Visual regression snapshots | -- | Yes |\n| Bulk generation with coverage scoring (A–F) | -- | Yes |\n| File watcher for auto-updates | -- | Yes |\n| Framework detection (Router, Chakra, React Query) | -- | Yes |\n\n## Prerequisites\n\n- **@nx/storybook** >= 19.0.0 (install first, configure at least one project)\n- **Nx** >= 19.0.0\n- **Storybook** >= 8.0.0\n- **TypeScript** >= 5.0.0\n- **Node.js** >= 18.17.1\n\n### Quick setup\n\n```bash\n# 1. Install @nx/storybook and configure a project (if not already done)\nnpm install --save-dev @nx/storybook --legacy-peer-deps\nnpx nx g @nx/storybook:configuration --project=<your-ui-library>\n\n# 2. Install this plugin\nnpx nx add @effinrich/nx-storybook\n```\n\nThe `init` generator runs automatically on `nx add` and will verify `@nx/storybook` is present, ensure Storybook core dependencies are installed, and display available commands.\n\n### For Playwright component tests\n\n```bash\nnpm install --save-dev @playwright/experimental-ct-react @axe-core/playwright --legacy-peer-deps\n```\n\n## Generators\n\n### `story` — Generate a story for one component\n\n```bash\nnpx nx g @effinrich/nx-storybook:story --componentPath=libs/shared/ui/src/lib/button/button.tsx\n```\n\nProduces a `.stories.tsx` file with:\n- `Meta` with autodocs, argTypes, default args\n- `Default` story\n- `Sizes` / `Variants` / `ColorPalettes` / `Disabled` stories (when matching props detected)\n- `ClickInteraction` / `KeyboardNavigation` / `RendersCorrectly` interaction tests\n- `AccessibilityAudit` story (tagged `a11y`, works with `@storybook/addon-a11y`)\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `--componentPath` | `string` | **(required)** | Path to the component file |\n| `--project` | `string` | auto-detected | Nx project |\n| `--storyTitle` | `string` | auto-generated | Custom Storybook title |\n| `--skipInteractionTests` | `boolean` | `false` | Skip play functions |\n| `--overwrite` | `boolean` | `false` | Overwrite existing story |\n| `--dryRun` | `boolean` | `false` | Preview without writing |\n\n### `stories` — Bulk generate for an entire project\n\n```bash\nnpx nx g @effinrich/nx-storybook:stories --project=shared-ui\n```\n\nScans every component in the project, skips those that already have stories, generates for the rest, and reports a **coverage score**:\n\n```\n  ✔ Story Coverage: 85% (140/166) — Grade: B\n\n  ℹ Generated: 70\n  ℹ Already covered: 70\n  ℹ Total components: 166\n```\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `--project` | `string` | **(required)** | Nx project to scan |\n| `--skipInteractionTests` | `boolean` | `false` | Skip play functions |\n| `--overwrite` | `boolean` | `false` | Overwrite all existing stories |\n| `--dryRun` | `boolean` | `false` | Preview without writing |\n| `--includeA11y` | `boolean` | `true` | Include a11y audit stories |\n| `--includeComponentTests` | `boolean` | `false` | Also generate Playwright `.ct.tsx` files |\n\n### `component-test` — Generate a Playwright component test\n\n```bash\nnpx nx g @effinrich/nx-storybook:component-test --componentPath=libs/shared/ui/src/lib/button/button.tsx\n```\n\nProduces a co-located `.ct.tsx` file with:\n- **Mount & render** — verifies the component mounts without crashing\n- **Visual regression** — `toHaveScreenshot()` for default state and every variant/size/colorPalette value\n- **Interaction** — click handlers, value change handlers\n- **Disabled state** — screenshot + verifies click handler isn't triggered\n- **Accessibility** — axe-core full-page audit via `@axe-core/playwright`\n- **Story-driven** — imports existing stories and renders them (if `.stories.tsx` exists)\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `--componentPath` | `string` | **(required)** | Path to the component file |\n| `--project` | `string` | auto-detected | Nx project |\n| `--overwrite` | `boolean` | `false` | Overwrite existing test |\n| `--dryRun` | `boolean` | `false` | Preview without writing |\n\n### `init` — Initialize the plugin\n\n```bash\nnpx nx g @effinrich/nx-storybook:init\n```\n\nInteractive setup that checks prerequisites and installs missing dependencies.\n\n## Executor\n\n### `watch` — Auto-generate stories on file changes\n\nAdd to any project's `project.json`:\n\n```json\n{\n  \"targets\": {\n    \"watch-stories\": {\n      \"executor\": \"@effinrich/nx-storybook:watch\",\n      \"options\": {\n        \"watchPaths\": [\"libs/shared/ui/src/lib\"],\n        \"debounceMs\": 300\n      }\n    }\n  }\n}\n```\n\n```bash\nnpx nx run shared-ui:watch-stories\n```\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `watchPaths` | `string[]` | **(required)** | Directories to watch |\n| `ignore` | `string[]` | `[\"*.spec.*\", \"*.test.*\", \"*.stories.*\", ...]` | Patterns to ignore |\n| `debounceMs` | `number` | `300` | Debounce interval |\n| `skipInteractionTests` | `boolean` | `false` | Skip interaction tests |\n\n## Auto-detected features\n\nThe `story` generator analyzes component source code and adapts output based on what it finds:\n\n| Feature | Detection | Effect |\n|---|---|---|\n| **React Router** | Imports from `react-router-dom` / `react-router` | Adds `withRouter` decorator |\n| **Chakra UI** | Imports from `@chakra-ui/react` | Flagged in report |\n| **React Query** | Imports from `@tanstack/react-query` | Flagged in report |\n| **Union props** | `'a' \\| 'b' \\| 'c'` type literals | `select` control + variant stories + screenshot tests |\n| **Callback props** | `on*` naming or arrow function types | `action` argType + interaction tests |\n| **Children prop** | `children` in props interface | Content in Default story |\n| **Disabled prop** | `disabled` / `isDisabled` | Disabled story + disabled screenshot |\n\n## Programmatic API\n\nAll generators and utilities are exported for programmatic use:\n\n```typescript\nimport {\n  storyGenerator,\n  storiesGenerator,\n  componentTestGenerator,\n  analyzeComponent,\n  generateStoryContent,\n  generateInteractionTests,\n  generatePlaywrightTest,\n} from '@effinrich/nx-storybook'\n\nimport type {\n  ComponentAnalysis,\n  PropInfo,\n  ImportInfo,\n} from '@effinrich/nx-storybook'\n```\n\n## Development\n\n```bash\nnpx nx build effinrich-nx-storybook    # Build\nnpx nx test effinrich-nx-storybook     # Run tests (9 suites, 85+ tests)\nnpx nx g ./tools/forgekit-nx-storybook:story --componentPath=<path> --dryRun\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-a2643dc7e749dd1ff442815054ceb80f"}