Feat/914 add storybook for component documentation (#1138)

* chore: Add Storybook with Next.js Webpack preset (#914)

* chore: Configure Storybook preview with global styles (#914)

* feat: Add Button component stories for Storybook (#914)

* feat: Add form component stories and Tailwind CSS import (#914)

* feat: Add card component stories and emotion dep (#914)

* feat: Add modal component stories (#914)

* feat: Add navigation stories and organize sidebar (#914)

* fix: Update story titles for sidebar grouping (#914)

* feat: Add Spinner loading state story (#914)

* feat: Add Feedback component story for error states (#914)

* chore: Remove example Storybook stories (#914)

* feat: Add interaction testing for Input, Checkbox, and Modal (#914)

* chore: Add comment for Storybook gitignore entries

* fix: Exclude Storybook story files from production type-check

next build type-checks every file matched by the tsconfig include glob
(src/**/*.tsx), which swept in the new .stories.tsx files. They import
@storybook/react, whose types are only reachable via its package.json exports
map, unresolvable under the repo's moduleResolution: node. The build failed on
the first such file.

Exclude src/**/*.stories.* so the production build only type-checks shipped
code. Story type-safety will be restored separately via a dedicated
.storybook/tsconfig.json.

Refs: #914

* fix: Align Storybook test packages to v10

@storybook/test (8.6.15) and @storybook/addon-interactions (8.6.14) were
pinned to v8 while the rest of the Storybook stack is on 10.3.6. Mixing
majors risks resolution and type incompatibilities.

In Storybook 10 the test utilities ship from the core storybook/test
entrypoint and interaction instrumentation is built into core, so both
v8 packages are redundant.

Migrate expect/userEvent/within imports from @storybook/test to
storybook/test (input, checkbox, modal stories), drop the
@storybook/addon-interactions addon from .storybook/main.ts, and remove
both v8 packages. build-storybook and play functions verified passing.

Addresses a Copilot review comment on PR #1138.

* fix: Add Storybook tsconfig and drop preview @ts-ignore

The two // @ts-ignore comments on the CSS side-effect imports in
.storybook/preview.ts suppressed nothing useful: the *.css module is
already declared in src/@types/assets/index.d.ts. The real unresolved
import was @storybook/nextjs, failing only because .storybook/ sat
outside any tsconfig and fell back to node module resolution.

Add .storybook/tsconfig.json (extends root, moduleResolution: bundler,
with the ambient declarations in scope) so every .storybook/ import
resolves, and remove both @ts-ignore lines. tsc on the new config and
build-storybook both pass.

Addresses a Copilot review comment on PR #1138.

* Apply suggestions from Copilot code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: jinu2ID

.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-lock.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",

package.json

@@ -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/breadcrumb/breadcrumb.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/menu/main-menu/main-menu.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/program-card/program-card.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',
+  },
+};