feat: add Storybook design system

[Arata1202]

Summary

• add Storybook 10 with the recommended Next.js Vite framework
• add global Light/Dark theme controls using the existing Tailwind and CSS variables
• document design foundations without redefining Tailwind tokens
• add 29 story files covering 64 visual and interaction states
• cover reusable UI, article plugins, form states, navigation, layout, and content compositions
• add a11y checks and browser-based Story tests through Vitest and Playwright
• run Storybook build and tests in GitHub Actions

Story coverage

• Foundations: colors, typography, code, and focus
• Content: article cards, article lists, Markdown, rich text, code blocks, sitemap, sponsored and advertising disclosures
• Article plugins: image slider, speech bubble, tab boxes, related articles, and “want to read” cards
• Navigation: breadcrumb, page heading, pagination, table of contents, theme switch, and scroll to top
• Layout: header, sidebar, and footer
• Forms and feedback: contact input, modal, and alert
• Marketing and sharing: apps promotion and share sections

Accessibility fixes found through Storybook

• improve secondary-text contrast in the Light theme while preserving the Dark-theme value
• use valid list semantics around article cards in related-content sections
• keep image-slider state synchronized before transitions so live labels update reliably

Verification

• pnpm lint
• pnpm typecheck
• pnpm test:run (65 files, 226 tests)
• pnpm build-storybook
• pnpm test:storybook (29 files, 64 stories)

Notes

• component fixtures follow states that can occur in production
• external integrations and non-visual wrappers are intentionally excluded

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
api-next-blog-app	Ignored		Aug 29, 2026 3:36am

[cloudflare-workers-and-pages]

Deploying next-blog-app with    Cloudflare Pages

Latest commit:	14634e0
Status:	✅  Deploy successful!
Preview URL:	https://aaeb703c.next-blog-app-8ai.pages.dev
Branch Preview URL:	https://feat-storybook-design-system.next-blog-app-8ai.pages.dev

View logs