ed5fb707ad
═══════════════════════════════════════════════════════════════════════ TODO #6 — size-limit budgets in CI ═══════════════════════════════════════════════════════════════════════ Adds .size-limit.cjs with budgets for 6 pilot @bytelyst/* packages, plus a Gitea Actions workflow (.gitea/workflows/size-limit.yml) that fails the build on any regression. Current measurements vs budget (all comfortably under): @bytelyst/api-client 793 B / 8 KB @bytelyst/auth-client 1.97 KB / 8 KB @bytelyst/celebrations 236 B / 6 KB @bytelyst/quick-actions 122 B / 6 KB @bytelyst/react-auth 2.71 KB / 10 KB @bytelyst/dashboard-shell 3.96 KB / 30 KB Scripts: pnpm size — measure + assert against budgets pnpm size:why — explain top contributors Deps: size-limit@^12.1.0, @size-limit/preset-small-lib@^12.1.0. Pilot scope (this commit): 6 packages. Full @bytelyst/* rollout is incremental — each entry added separately. ═══════════════════════════════════════════════════════════════════════ TODO #5 — Storybook canonical pattern ═══════════════════════════════════════════════════════════════════════ Discovery: @bytelyst/ui already has Storybook 8 with the @bytelyst/ addon-a11y addon configured and 5 .stories.tsx files. This commit: - Documents that setup as the canonical template (docs/STORYBOOK_TEMPLATE.md) including the .storybook/main.ts, preview.ts, package.json scripts, and an example story. - Catalogs which of the 8 visual @bytelyst/* packages need Storybook added (1/8 done — @bytelyst/ui). - Per docs/ROADMAP_2026_DECISIONS.md §9, hosting target is self-hosted Gitea Pages (no Chromatic). Full rollout to the other 7 packages stays open as incremental work. ═══════════════════════════════════════════════════════════════════════ TODO #4 — DTCG v3 token migration RFC ═══════════════════════════════════════════════════════════════════════ This is too large to land in a single commit. Drafted RFC instead: docs/rfc/0001-dtcg-v3-token-migration.md The RFC proposes a 4-PR sequence: PR 1 — Add converter + dual-emit (byte-identical assertion) PR 2 — Flip source of truth to DTCG JSON PR 3 — Introduce the component tier PR 4 — Multi-theme via DTCG token sets Estimate: 2 person-weeks total. Backward compatibility: --ml-* and --bl-* names preserved through all 4 PRs. Status: Draft, awaiting reviewers. Refs: learning_ai_uxui_web/docs/ROADMAP_2026.md §10 TODOs #4, #5, #6
3.7 KiB
3.7 KiB
Storybook Template for @bytelyst/* Packages
ROADMAP TODO #5 — canonical pattern for adding Storybook 8 to each visual
@bytelyst/*package.
Status
| Package | Has Storybook | Stories | A11y addon |
|---|---|---|---|
@bytelyst/ui |
✅ | 5 (Button, Card, Controls, Input, OperationalPreview) |
✅ |
@bytelyst/auth-ui |
❌ | — | — |
@bytelyst/dashboard-components |
❌ | — | — |
@bytelyst/dashboard-shell |
❌ | — | — |
@bytelyst/celebrations |
❌ | — | — |
@bytelyst/gentle-notifications |
❌ | — | — |
@bytelyst/quick-actions |
❌ | — | — |
@bytelyst/react-auth |
❌ | — | — |
Rollout is incremental — each package added separately so failures are diagnosable.
Canonical setup (mirrors @bytelyst/ui)
1. Add devDependencies
pnpm --filter @bytelyst/<pkg> add -D \
storybook@^8.5.0 \
@storybook/react@^8.5.0 \
@storybook/react-vite@^8.5.0 \
@storybook/addon-essentials@^8.5.0 \
@storybook/addon-a11y@^8.5.0
2. Add scripts to package.json
{
"scripts": {
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
}
}
3. Create .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(ts|tsx)'],
addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
framework: { name: '@storybook/react-vite', options: {} },
};
export default config;
4. Create .storybook/preview.ts
import type { Preview } from '@storybook/react';
import '@bytelyst/design-tokens/css';
const preview: Preview = {
parameters: {
backgrounds: {
default: 'dark',
values: [
{ name: 'dark', value: '#06070A' },
{ name: 'elevated', value: '#0E1118' },
{ name: 'light', value: '#F8F9FC' },
],
},
},
};
export default preview;
5. Add at least one *.stories.tsx
Pattern — one story file per component, co-located in src/:
// src/components/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button.js';
const meta: Meta<typeof Button> = {
title: 'Components/Button',
component: Button,
parameters: { layout: 'centered' },
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Primary: Story = { args: { children: 'Click me' } };
export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
Hosting
Decision (docs/ROADMAP_2026_DECISIONS.md §9): self-hosted on
Gitea Pages.
A future Gitea Actions workflow at .gitea/workflows/storybook.yml
will build each package's Storybook on push to main and deploy the
combined output to storybook.bytelyst.com (or equivalent).
Until that workflow lands, developers run pnpm --filter @bytelyst/<pkg> run storybook locally on :6006.