mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-07 11:21:29 +00:00
shankar0123
622c19cafe
Closes frontend-design-audit finding TEST-H3 (High):
Zero Storybook — 9 production components live without isolated
rendering or designer-handoff surface
Phase 8 originally shipped the scaffold (.storybook/main.ts +
preview.ts + 8 *.stories.tsx files) but couldn't land the deps:
• Storybook 8.6 peer-capped at Vite 6, project ships Vite 8
(Phase 4 manualChunks rewrite). Hotfix #9 ripped the deps.
• The .storybook/main.ts header speculated "Storybook 9 supports
Vite 7+8" — that was wrong. Verified at install time today:
Storybook 9.1.20's peer range is Vite 5/6/7. ERESOLVE'd again.
• Storybook 10.4.0 is the first release with explicit Vite 8 in
its peer range (^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0). Installed
cleanly via `npm install --save-dev`.
═══════════════════════════ CHANGES ═══════════════════════════════
package.json + package-lock.json:
• storybook ^10.4.0
• @storybook/react-vite ^10.4.0
• @storybook/addon-a11y ^10.4.0
All resolve without --legacy-peer-deps. 93 packages added.
Scripts: `npm run storybook` (dev server on :6006) and
`npm run storybook:build` (→ .storybook-static).
tsconfig.json:
Dropped the `src/**/*.stories.tsx` + `src/**/*.stories.ts`
exclusions. Storybook 10's @storybook/react types are stable;
the 8 committed story files typecheck cleanly inside the main
`npm run build` step. Phase 8's "stories excluded so build stays
green in the meantime" caveat is now retired.
web/src/components/Banner.stories.tsx:
Fixed stale prop name: stories used `severity: 'error'` but the
Banner primitive's prop is `type: 'error'` (BannerType union).
4-line edit, replace_all on `severity:` → `type:`. The Banner
component never had a `severity` prop — the story was authored
against a different draft of the API. Typecheck now passes.
web/.storybook/main.ts:
Replaced the "deps not installed" header block with a
version-selection history block documenting the 8 → 9 → 10
trail so the next operator who upgrades Vite doesn't re-walk
the same wall.
.gitignore:
Added `web/.storybook-static/` (Storybook build output, like
web/dist/).
═══════════════════════════ VERIFICATION ═══════════════════════════
• npm install — exit 0, 93 packages, no peer warnings, no
ERESOLVE.
• npx tsc --noEmit — exit 0 with stories included (was running
excluded; now they're in the typecheck graph).
• npx storybook build — built in 3.09s, 17 chunks emitted to
.storybook-static. All 8 stories rendered without errors.
• npx vitest run src/components — 16 files / 161 tests pass
(no regression from Storybook install / story-file fix).
• npx vite build — production build green in 3.35s.
• CI guards: no-raw-table 17/17, no-unbound-label 134/134,
no-raw-toLocaleString clean.
Operator follow-ups (none blocking):
• `npm run storybook` locally opens the dev server with hot-
reload + addon-a11y panel.
• `npm run storybook:build` for an immutable static deploy
(e.g. cert-ctl.io/storybook).
• New components SHOULD ship a sibling *.stories.tsx going
forward; can wire a CI guard if desired (fe-component-has-
story.sh — scaffold mentioned in the audit's executable
prompt for Phase 8 TEST-H3 but deferred).
Ground-truth: origin/master tip bc417fc (UX-M9 just pushed)
verified via GitHub API BEFORE commit.
60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
// Copyright 2026 certctl LLC. All rights reserved.
|
|
// SPDX-License-Identifier: BUSL-1.1
|
|
//
|
|
// Phase 8 TEST-H3 closure — Storybook configuration. Fully wired
|
|
// 2026-05-14 via Storybook 10.
|
|
//
|
|
// Version-selection history (recorded so the next operator who
|
|
// upgrades Vite doesn't re-walk the same wall):
|
|
// • Phase 8 first attempt: Storybook 8.6 — peer-capped at Vite 6,
|
|
// project shipped Vite 8 (Phase 4 manualChunks rewrite). CI's
|
|
// `npm ci` failed ERESOLVE; Hotfix #9 removed the deps.
|
|
// • This file's earlier header speculated "Storybook 9 supports
|
|
// Vite 7+8" — that was wrong. Verified at install time
|
|
// 2026-05-14: Storybook 9.1.20's peer range is Vite 5/6/7,
|
|
// ERESOLVE'd again.
|
|
// • Storybook 10.4.0 is the first version with explicit Vite 8
|
|
// in the peer range (^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0).
|
|
// Installed cleanly. All 8 *.stories.tsx files typecheck +
|
|
// `storybook build` succeeds (~3s, 17 chunks emitted).
|
|
//
|
|
// tsconfig.json no longer excludes *.stories.tsx — Storybook 10's
|
|
// @storybook/react types are correct and the existing story files
|
|
// validate against them. `npm run build` is unchanged (Vite still
|
|
// only emits the production bundle; stories live in a separate
|
|
// `npm run storybook:build` script).
|
|
//
|
|
// Reuses the existing Vite config from web/vite.config.ts
|
|
// (including the Phase 4 manualChunks, the Phase 0 fontsource
|
|
// imports, the test-block exclusions) so stories render against
|
|
// the same build pipeline production uses.
|
|
//
|
|
// Addon scope:
|
|
// • @storybook/addon-a11y — runs axe-core on every story render +
|
|
// surfaces violations in the Storybook UI. Phase 5 shipped axe
|
|
// coverage for primitives via Vitest (web/src/test/a11y.test.tsx);
|
|
// this addon extends that signal to every component variant
|
|
// showcased here, per-render. Catches contrast / label-binding /
|
|
// focus regressions that the per-component Vitest suite misses.
|
|
//
|
|
// Story discovery: `**/*.stories.{ts,tsx}` under src/ — stories live
|
|
// next to the component they document.
|
|
|
|
import type { StorybookConfig } from '@storybook/react-vite';
|
|
|
|
const config: StorybookConfig = {
|
|
stories: ['../src/**/*.stories.@(ts|tsx)'],
|
|
addons: [
|
|
'@storybook/addon-a11y',
|
|
],
|
|
framework: {
|
|
name: '@storybook/react-vite',
|
|
options: {},
|
|
},
|
|
docs: {
|
|
autodocs: 'tag',
|
|
},
|
|
};
|
|
|
|
export default config;
|