major: v2

.github/workflows/main.yml

@@ -0,0 +1,53 @@
+name: Quality checks
+
+on:
+  push:
+    branches:
+      - main
+      - feature/**
+      - v2
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  quality_checks:
+    name: Quality checks
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.npm
+            ${{ github.workspace }}/dist/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install
+        run: npm ci --force
+
+      - name: Security Audit Checks
+        run: npm run audit
+
+      - name: Static testing
+        run: npm run lint
+
+      - name: Build Website
+        run: npm run build
+
+      - name: Build Storybook
+        run: npm run build-storybook

.storybook/components/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CodeBlock, shadesOfPurple } from 'react-code-blocks';
 
-export const Code = ({ children }) => (
+export const Code = ({ children }: { children: string }) => (
   <CodeBlock
     text={children}
     language="jsx"

.storybook/main.ts

@@ -1,5 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from 'vite';
+import remarkGfm from 'remark-gfm';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: [
@@ -10,7 +12,17 @@ const config: StorybookConfig = {
     '@storybook/addon-onboarding',
     '@storybook/addon-links',
     '@storybook/addon-interactions',
-    '@storybook/addon-essentials'
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm]
+          }
+        }
+      }
+    }
   ],
   framework: {
     name: '@storybook/react-vite',
@@ -27,7 +39,12 @@ const config: StorybookConfig = {
   },
   async viteFinal(baseConfig, { configType }) {
     return mergeConfig(baseConfig, {
-      ...(configType === 'PRODUCTION' ? { base: '/storybook/' } : {})
+      ...(configType === 'PRODUCTION' ? { base: '/storybook/' } : {}),
+      resolve: {
+        alias: {
+          '@shared': path.resolve(__dirname, '../src', 'shared')
+        }
+      }
     });
   }
 };

.storybook/manager.ts

@@ -9,38 +9,38 @@ const theme = create({
   fontCode: 'monospace',
 
   brandTitle: '⚛️ React Design Patterns',
-  brandUrl: 'https://example.com',
-  brandTarget: '_self',
-  //
-  colorPrimary: '#ffffff',
-  colorSecondary: '#A599E9',
-
-  // UI
-  appBg: '#1E1E3F',
-  appContentBg: '#2D2B55',
+  brandUrl:
+    'https://github.com/code-mattclaffey/react-design-patterns',
+  brandTarget: '_blank',
+  colorPrimary: '#3b82f6', // blue-500
+  colorSecondary: '#A599E9', // code-500 from tailwind config
+
+  // UI - matching main page blue-950 theme
+  appBg: '#172554', // blue-950
+  appContentBg: '#1e3a8a', // blue-900
   appPreviewBg: '#ffffff',
-  appBorderColor: '#2D2B55',
-  appBorderRadius: 4,
+  appBorderColor: '#1e40af', // blue-800
+  appBorderRadius: 8,
 
-  // Text colors
+  // Text colors - matching main page
   textColor: '#ffffff',
-  textInverseColor: '#ffffff',
+  textInverseColor: '#1e293b', // slate-800
 
-  // Toolbar default and active colors
-  barTextColor: '#ffffff',
+  // Toolbar colors - matching header
+  barTextColor: '#cbd5e1', // slate-300
   barSelectedColor: '#ffffff',
   barHoverColor: '#ffffff',
-  barBg: '#1E1E3F',
+  barBg: '#172554', // blue-950
 
   // Form colors
-  inputBg: '#ffffff',
-  inputBorder: '#35356b',
-  inputTextColor: '#1E1E3F',
-  inputBorderRadius: 2,
-
-  // Buttons
-  buttonBg: '#35356b',
-  buttonBorder: '#35356b',
+  inputBg: '#1e40af', // blue-800
+  inputBorder: '#3b82f6', // blue-500
+  inputTextColor: '#ffffff',
+  inputBorderRadius: 6,
+
+  // Buttons - matching CTA buttons
+  buttonBg: '#2563eb', // blue-600
+  buttonBorder: '#2563eb', // blue-600
   gridCellSize: 24
 });
 

.storybook/preview.tsx

@@ -12,7 +12,12 @@ const preview: Preview = {
         code: Code
       }
     },
-    storySort: ['Introduction', 'Lessons', 'Recipes'],
+    storySort: [
+      'Introduction',
+      'Lessons',
+      ['🥉 Bronze', '🥈 Silver', '🥇 Gold'],
+      'Recipes'
+    ],
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/styles/docs.styles.css

@@ -1,8 +1,10 @@
+/* Main content styling to match landing page */
 .sbdocs-content p,
 .sbdocs-content li,
 .sbdocs-content a {
   font-size: 1.125rem;
   line-height: 1.6;
+  font-weight: 500;
 }
 
 .sbdocs-content h1,
@@ -14,16 +16,67 @@
   font-weight: 700;
   font-style: normal;
   margin-top: 1.5rem !important;
+  line-height: 1.2;
 }
 
 .sbdocs-content h1 {
   font-size: 2.5rem;
+  color: #3b82f6; /* blue-500 accent */
 }
 
 .sbdocs-content h2 {
   font-size: 2rem;
+  color: #2563eb; /* blue-600 */
 }
 
 .sbdocs-content h3 {
   font-size: 1.75rem;
+  color: #1d4ed8; /* blue-700 */
+}
+
+.sbdocs-content ol {
+  list-style: decimal;
+}
+
+/* Code blocks styling */
+.sbdocs-content pre {
+  background-color: #172554 !important; /* blue-950 */
+  border: 1px solid #1e40af; /* blue-800 */
+  border-radius: 8px;
+}
+
+/* Links styling to match main page */
+.sbdocs-content a {
+  color: #3b82f6; /* blue-500 */
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.sbdocs-content a:hover {
+  color: #2563eb; /* blue-600 */
+  text-decoration: underline;
+}
+
+/* Badge/tag styling */
+.sbdocs-content .docblock-code-toggle {
+  background-color: #1e40af; /* blue-800 */
+  color: white;
+  border-radius: 6px;
+}
+
+/* Table styling */
+.sbdocs-content table {
+  border-collapse: collapse;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.sbdocs-content th {
+  background-color: #1e40af; /* blue-800 */
+  color: white;
+  font-weight: 600;
+}
+
+.sbdocs-content td {
+  border-color: #cbd5e1; /* slate-300 */
 }