Storybook and Testing
Storybook
Every component of the design system, with invented sample data, at context.abhyas.nishko.co/storybook. It is built from app.abhyas.design alone; it never needs the website's code.
npm ci npm run storybook # http://localhost:6006
Component inventory and page previews
Start with Inventory → All Components: 87 component and state entries across 12 categories. Search by name or action, filter by category, and expand or collapse all groups. Every entry links to its story and lists actions, source files and pages that use it.
The categories are Shell, Access, Dashboard, Navigation, Inputs, Insights, Concepts, Solving, Paper creation, Assessment, Catalogue and Feedback. Open Pages for 23 composed previews, including overview, concepts, question workspace, catalogue management, paper creation, confidence, reflection, results and progress.
Shared React components render directly from the design system. Inline frontend patterns use self-contained fixtures with invented content and local interactions. Concept, timeline, overview and loading renderers come from a recorded frontend snapshot. Preview saves, uploads and grading actions do not write to an account or database.
Storybook is built only in app.abhyas.design. The context deployment verifies a pinned compiled bundle and serves it at /storybook/. Its catalogue is checked against the generated story index before deployment.
Build and test UI in Storybook first. A new or changed component goes into the design system with its story, then the website uses it.
Foundations
Foundations documents colors, spacing, sizing, typography, borders, radii, shadows, motion, opacity, layers, layout, iconography and responsive thresholds. Search tokens, inspect visual samples, and use the local token playground. Edit tokens/foundations.json, run npm run tokens:build, then npm run tokens:check.
Checks
| Check | Where | Command |
|---|---|---|
| Design system tests | app.abhyas.design | npm test |
| Design system standards | app.abhyas.design | npm run check |
| Storybook build | app.abhyas.design | npm run build-storybook |
| Storybook inventory links | app.abhyas.design | npm run check-storybook-catalog after building; pass -- site/storybook for the docs output |
| Website tests | frontend.dev | cd web && npm test |
| Website standards | frontend.dev | cd web && npm run check (the design system's checks) |
| Types | frontend.dev | cd web && npx tsc --noEmit -p . |
| Build | frontend.dev | cd web && npm run build |
| Database migrations | database.dev | npm run check |
CI runs the design system's tests, checks and Storybook build on every app.abhyas.design pull request and design deploy. Context separately tests checksum verification and enforces documentation-only source ownership. Every frontend release runs the website's tests and the design system's checks. Database pull requests check migrations.