feat: add Storybook 10 with stories + a11y test runner#3
Merged
Conversation
… runner - storybook: scaffold @storybook/angular-vite (Vite builder) with zoneless mode for Angular 22; config in .storybook/main.ts + preview.ts - stories: 12 story files / 59 stories covering all UI atoms (button, input, badge, avatar, spinner), molecules (card, toast), and organisms (data-table, dialog, form-field, empty-state, error-state) - a11y: @storybook/addon-a11y for in-UI accessibility checks - test-runner: @storybook/test-runner with a11y rules config; CI builds storybook, serves it, and runs the test-runner for automated a11y scans - ci: add storybook job; fix branch trigger main->master (CI never ran); add .npmrc with legacy-peer-deps so npm ci works with the NgRx/Storybook peer conflicts - deps: @angular/animations (required by @angular/material + Vite bundling), @angular-devkit/build-angular + zone.js (Storybook builder needs them; app build stays on @angular/build:application) - chore: ignore storybook-static/ and debug-storybook.log
Avoids shadowing the global Error constructor (SonarQube S2814 / no-shadow-restricted-names) in badge and toast story files.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds Storybook 10 to the design system with stories for all 12 UI components and an automated accessibility test runner in CI.
Storybook setup
@storybook/angular-vite(Vite builder) with zoneless mode for Angular 22 — aligns with the app's zoneless + esbuild/vite setup..storybook/main.ts+.storybook/preview.ts(loads the app's tailwind + styles + design tokens so stories render with real styles).angular.json— run viang run saas-business-app:storybook/:build-storybook(the Storybook 10 Angular builder approach).Stories — 12 files / 59 stories
All UI design-system components, organized by atomic design:
Each story file covers the component's input variants (sizes, colors, states, loading/disabled, error/empty/loading states, sortable columns, etc.) with autodocs.
Testing
@storybook/addon-a11y— in-UI accessibility checks for every story.@storybook/test-runner— automated a11y scan of every story in CI (color-contrast, aria-valid-attr, aria-roles, button-name, image-alt, label rules). Config in.storybook/test-runner.ts.CI
storybookjob: installs chromium, builds storybook, serves the static build, and runs the test-runner for automated a11y tests.mainbut the repo default branch ismaster— CI never ran. Fixed tomaster..npmrcwithlegacy-peer-deps=truesonpm ciworks with the NgRx/Angular + Storybook peer conflicts.Dependency notes
Storybook's Angular builder requires
@angular-devkit/build-angularandzone.js, and Vite bundling requires@angular/animations(which@angular/materialneeds anyway). These are added as devDeps — the app's own build stays on@angular/build:application; only Storybook uses the devkit builder. Install requires--legacy-peer-deps(now automated via.npmrc).Verification
npm run lintnpm run buildnpm test -- --no-watchnpm run build-storybookScripts added
npm run storybooknpm run build-storybooknpm run test-storybook