Feat/914 add storybook for component documentation

.gitignore

@@ -71,6 +71,10 @@ eslint-report.json
 biome-report.json
 score-output.md
 
+# Storybook
+*storybook.log
+storybook-static
+
 # Design handoff source assets (kept out of repo)
 /design_handoff_*/
 /*.zip

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": "@storybook/nextjs",
+  "staticDirs": [
+    "../public"
+  ],
+  core: {
+    disableTelemetry: true,
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/nextjs";
+import "../src/assets/css/globals.css";
+import "../src/assets/css/tailwind.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  },
+  "include": ["../src/@types/**/*", "**/*.ts"]
+}

package.json

@@ -31,12 +31,15 @@
     "generate:military-systems": "tsx -r dotenv/config scripts/generate-military-systems.ts",
     "generate:career-pathways": "tsx -r dotenv/config scripts/generate-career-pathways.ts",
     "generate:tech-pathways": "tsx -r dotenv/config scripts/generate-tech-pathways.ts",
-    "generate:curriculum-gap-report": "tsx -r dotenv/config scripts/generate-curriculum-gap-report.ts"
+    "generate:curriculum-gap-report": "tsx -r dotenv/config scripts/generate-curriculum-gap-report.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@ai-sdk/azure": "^2.0.69",
     "@ai-sdk/google": "^2.0.32",
     "@ai-sdk/openai": "^2.0.67",
+    "@emotion/is-prop-valid": "^1.4.0",
     "@google-cloud/text-to-speech": "^6.4.0",
     "@google/genai": "1.40.0",
     "@googlemaps/react-wrapper": "^1.1.35",
@@ -117,6 +120,10 @@
     "@commitlint/config-conventional": "^20.4.0",
     "@fullhuman/postcss-purgecss": "^4.1.3",
     "@playwright/test": "^1.49.0",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-onboarding": "^10.3.6",
+    "@storybook/nextjs": "^10.3.6",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/typography": "^0.5.2",
     "@testing-library/dom": "^10.4.0",
@@ -144,6 +151,7 @@
     "postcss": "^8.4.12",
     "prisma": "^6.10.1",
     "rimraf": "^3.0.2",
+    "storybook": "^10.3.6",
     "tailwindcss": "^3.0.23",
     "ts-complex": "^1.0.0",
     "ts-node": "^10.9.2",

src/components/breadcrumb/breadcrumb.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Breadcrumb from './index';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'UI/Navigation/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+  argTypes: {
+    showTitle: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+  args: {
+    pages: [
+      { path: '/', label: 'Home' },
+      { path: '/programs', label: 'Programs' },
+    ],
+    currentPage: 'Web Development',
+    showTitle: true,
+  },
+};
+
+export const WithoutTitle: Story = {
+  args: {
+    pages: [
+      { path: '/', label: 'Home' },
+      { path: '/programs', label: 'Programs' },
+    ],
+    currentPage: 'Web Development',
+    showTitle: false,
+  },
+};
+
+export const DeepNesting: Story = {
+  args: {
+    pages: [
+      { path: '/', label: 'Home' },
+      { path: '/programs', label: 'Programs' },
+      { path: '/programs/web-development', label: 'Web Development' },
+    ],
+    currentPage: 'Module 1',
+    showTitle: true,
+    title: 'JavaScript Fundamentals',
+  },
+};

src/components/menu/main-menu/main-menu.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MainMenu from './index';
+
+const sampleMenu = [
+  { id: 1, label: 'Home', path: '/' },
+  { id: 2, label: 'About', path: '/about' },
+  { id: 3, label: 'Programs', path: '/programs', submenu: [
+    { id: 31, label: 'Web Development', path: '/programs/web-development' },
+    { id: 32, label: 'Cybersecurity', path: '/programs/cybersecurity' },
+  ]},
+  { id: 4, label: 'Projects', path: '/projects' },
+  { id: 5, label: 'Contact', path: '/contact' },
+];
+
+const meta: Meta<typeof MainMenu> = {
+  title: 'UI/Navigation/MainMenu',
+  component: MainMenu,
+  tags: ['autodocs'],
+  argTypes: {
+    hoverStyle: {
+      control: 'select',
+      options: ['A', 'B'],
+    },
+    color: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'right', 'center'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MainMenu>;
+
+export const Dark: Story = {
+  args: {
+    menu: sampleMenu,
+    color: 'dark',
+    hoverStyle: 'A',
+    align: 'left',
+  },
+};
+
+export const Light: Story = {
+  args: {
+    menu: sampleMenu,
+    color: 'light',
+    hoverStyle: 'A',
+    align: 'left',
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ backgroundColor: '#1a1a2e', padding: '1rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithHoverStyleB: Story = {
+  args: {
+    menu: sampleMenu,
+    color: 'dark',
+    hoverStyle: 'B',
+    align: 'center',
+  },
+};

src/components/program-card/program-card.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ProgramCard from './index';
+
+const meta: Meta<typeof ProgramCard> = {
+  title: 'UI/Cards/ProgramCard',
+  component: ProgramCard,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProgramCard>;
+
+export const Default: Story = {
+  args: {
+    program: {
+      slug: 'web-development',
+      title: 'Web Development',
+      description: 'Learn full-stack web development with modern tools and frameworks.',
+    },
+  },
+};
+
+export const LongDescription: Story = {
+  args: {
+    program: {
+      slug: 'cybersecurity',
+      title: 'Cybersecurity Operations',
+      description: 'Master the fundamentals of cybersecurity including network defense, threat analysis, incident response, and security operations for enterprise environments.',
+    },
+  },
+};

src/components/ui/button/button.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './index';
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['contained', 'outlined', 'texted'],
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'light'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+    },
+    fullwidth: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    active: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Get Started',
+    variant: 'contained',
+    color: 'primary',
+    size: 'md',
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    children: 'Learn More',
+    variant: 'outlined',
+    color: 'primary',
+    size: 'md',
+  },
+};
+
+export const Light: Story = {
+  args: {
+    children: 'Sign Up',
+    variant: 'contained',
+    color: 'light',
+    size: 'md',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: 'Details',
+    variant: 'contained',
+    color: 'primary',
+    size: 'sm',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Unavailable',
+    variant: 'contained',
+    color: 'primary',
+    size: 'md',
+    disabled: true,
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    children: 'Submit Application',
+    variant: 'contained',
+    color: 'primary',
+    size: 'md',
+    fullwidth: true,
+  },
+};
+
+export const AsLink: Story = {
+  args: {
+    children: 'Visit Page',
+    variant: 'outlined',
+    color: 'primary',
+    size: 'md',
+    path: '/about',
+  },
+};

src/components/ui/engagement-modal/engagement-modal.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EngagementModal } from './EngagementModal';
+
+const meta: Meta<typeof EngagementModal> = {
+  title: 'UI/Modals/EngagementModal',
+  component: EngagementModal,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof EngagementModal>;
+
+export const Default: Story = {
+  args: {
+    headline: 'Join the Mission',
+    body: 'We help veterans transition into tech careers through mentorship and hands-on training.',
+    cta1: { label: 'Donate', href: 'https://vetswhocode.io/donate' },
+    cta2: { label: 'Apply Now', href: '#apply' },
+    forceShow: true,
+  },
+};