feat: add real-time form validation system

.github/workflows/auto-assign.yml

@@ -20,7 +20,7 @@ jobs:
             const comment = context.payload.comment.body.toLowerCase().trim();
             const assignee = context.payload.comment.user.login;
             const issueNumber = context.issue.number;
-            
+
             const patterns = [
               'assign me',
               'i want to work on this',
@@ -31,9 +31,9 @@ jobs:
               'assign this to me',
               'i can work on this'
             ];
-            
+
             const shouldAssign = patterns.some(pattern => comment.includes(pattern));
-            
+
             if (shouldAssign) {
               try {
                 // Check if user is already assigned
@@ -42,9 +42,9 @@ jobs:
                   repo: context.repo.repo,
                   issue_number: issueNumber
                 });
-                
+
                 const currentAssignees = issue.data.assignees.map(a => a.login);
-                
+
                 if (currentAssignees.includes(assignee)) {
                   await github.rest.issues.createComment({
                     owner: context.repo.owner,
@@ -54,22 +54,22 @@ jobs:
                   });
                   return;
                 }
-                
+
                 // Add assignee
                 await github.rest.issues.addAssignees({
                   owner: context.repo.owner,
                   repo: context.repo.repo,
                   issue_number: issueNumber,
                   assignees: [assignee]
                 });
-                
+
                 await github.rest.issues.createComment({
                   owner: context.repo.owner,
                   repo: context.repo.repo,
                   issue_number: issueNumber,
                   body: `@${assignee} has been assigned to this issue! 🎉\n\nYou can now start working on it. Good luck!`
                 });
-                
+
                 console.log(`Successfully assigned @${assignee} to issue #${issueNumber}`);
               } catch (error) {
                 console.error(`Failed to assign user: ${error.message}`);

.github/workflows/auto-merge-pr.yml

@@ -18,7 +18,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
             const prNumber = context.payload.pull_request.number;
-            
+
             try {
               // Enable auto-merge with squash method
               await github.graphql(`
@@ -38,7 +38,7 @@ jobs:
                 pullRequestId: `PR_${context.repo.owner}_${context.repo.repo}_${prNumber}`,
                 mergeMethod: 'SQUASH'
               });
-              
+
               console.log(`Auto-merge enabled for PR #${prNumber}`);
             } catch (error) {
               // Try alternative method using REST API

.github/workflows/visual-regression.yml

@@ -23,7 +23,7 @@ jobs:
   visual-regression:
     name: Visual Regression Tests
     runs-on: ubuntu-latest
-    timeout-minutes: 20
+    timeout-minutes: 45
     steps:
       - uses: actions/checkout@v4
 

.gitignore

@@ -48,5 +48,8 @@ next-env.d.ts
 # Lighthouse CI local artifacts
 .lighthouseci/
 
+# Storybook
+/storybook-static/
+
 # performance regression
 /performance-results/

.storybook/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  staticDirs: ["../public"],
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from "@storybook/react-vite";
+import "../src/app/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    a11y: {
+      test: "error",
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: "centered",
+  },
+};
+
+export default preview;

eslint.config.mjs

@@ -1,15 +1,29 @@
 import nextPlugin from "@next/eslint-plugin-next";
+import reactHooks from "eslint-plugin-react-hooks";
 import tsEslint from "typescript-eslint";
 
 export default [
   {
-    ignores: [".next/**", "node_modules/**", "out/**", "dist/**", "test-results/**", "playwright-report/**"],
+    ignores: [
+      ".next/**",
+      "node_modules/**",
+      "out/**",
+      "dist/**",
+      "storybook-static/**",
+      "test-results/**",
+      "playwright-report/**",
+    ],
   },
   ...tsEslint.configs.recommended,
   {
-    plugins: { "@next/next": nextPlugin },
+    plugins: {
+      "@next/next": nextPlugin,
+      "react-hooks": reactHooks,
+    },
     rules: {
       ...nextPlugin.configs["core-web-vitals"].rules,
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
       "@typescript-eslint/no-unused-vars": [
         "error",
         { argsIgnorePattern: "^_" },