feat(storybook): introduce Storybook UI

[georg-schwarz]

Summary

• introduce Storybook with React/Vite config, addons, and preview defaults
• reorganize components into atoms/molecules/organisms/templates with stories and interaction tests
• update CI to run Storybook browser tests with Playwright

How to run Storybook

bun storybook

Screenshot

[Copilot]

Pull request overview

This PR introduces Storybook as the UI component development and testing environment for the project. It refactors all components from Astro-only implementations to React/TSX components organized using Atomic Design principles (atoms/molecules/organisms/templates), adds Storybook stories with interaction tests for each component, and integrates Playwright-based Storybook tests into CI.

Changes:

• Introduces Storybook with React/Vite configuration, accessibility addon, and global preview defaults; adds vitest.config.ts for running Storybook interaction and a11y tests in CI via Playwright
• Reorganizes all UI components from .astro files (ui/, features/) into atoms/, molecules/, organisms/, and templates/ as React TSX components, each with type definitions, stories, and ESLint boundary rules
• Moves withBase/withBaseIfRelative utilities from src/utils/ to src/components/utils/, adds a foundations layer with a BrandTokens design-token viewer, and extends BrandConfig with designTokens

Reviewed changes

Copilot reviewed 95 out of 99 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
vitest.config.ts	New vitest config for Storybook browser tests with Playwright
tsconfig.json	Adds JSX/React config and includes .storybook/**/*
src/pages/rss.xml.ts	Updated import path for withBase utility
src/pages/resources/index.astro	Updated import path for withBase utility
src/pages/resources/[...slug].astro	Updated import path for withBase utility
src/pages/index.astro	Replaced inline page markup with HomeTemplate React component
src/pages/blog/index.astro	Updated import path for withBase utility
src/pages/about.astro	Alphabetical re-order of destructured imports
src/layouts/BaseLayout.astro	Replaces inline Navbar/Footer HTML with React Navbar/Footer components
src/data/brand.ts	Adds designTokens field to BRAND_CONFIG
src/data-models/brand.ts	Adds BrandDesignTokens, BrandTokenScale, BrandColorStory, BrandTokenItem interfaces
src/components/utils/with-base.ts	New file: withBase utility relocated here from src/utils/
src/components/ui/Card.astro	Deleted – replaced by src/components/molecules/Card/Card.tsx
src/components/ui/Button.astro	Deleted – replaced by src/components/atoms/Button/Button.tsx
src/components/templates/*	New HomeTemplate page-level component with types, stories
src/components/organisms/*	New Navbar, Footer, HomeHero, FeaturesSection, CallToActionSection, Team, SocialLinks components with types and stories
src/components/molecules/*	New Card, FeatureGrid, HeroActions components with types and stories
src/components/atoms/*	New Button, HighlightedTitle, SectionDescription, SectionHeading components with types and stories
src/components/foundations/BrandTokens/*	New design-token viewer component for Storybook
src/components/index.ts	Replaces named Astro component exports with barrel re-exports from sub-layers
src/components/features/Team.astro	Deleted – replaced by organisms/Team/Team.tsx
src/components/features/SocialLinks.astro	Deleted – replaced by organisms/SocialLinks/SocialLinks.tsx
postcss.config.cjs	New PostCSS config required by Storybook/Vite for Tailwind
package.json	Adds React, Storybook, Playwright, and vitest devDependencies
eslint.config.mjs	Adds eslint-plugin-boundaries rules to enforce Atomic Design import direction
astro.config.mjs	Adds @astrojs/react integration
README.md	Documents new Storybook commands and story conventions
AGENTS.md	Updates component structure docs
.storybook/vitest.setup.ts	Storybook vitest project annotations setup
.storybook/preview.ts	Global Storybook parameters (a11y, backgrounds, sort order)
.storybook/preview-head.html	CSS custom properties for Tailwind colors in Storybook
.storybook/main.ts	Storybook framework/addons config with @ path alias
.gitignore	Adds PLAN.md to ignore list
.github/workflows/ci.yml	Adds Playwright install + Storybook test step to CI
.agents/skills/storybook/SKILL.md	New agent skill documentation for Storybook component work

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.