Merge pull request #15 from grayhatdevelopers/demo

feat: Add context-aware job application form example with AI suggestions

Author: SaadBazaz

demo/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

demo/FEATURES.md

@@ -0,0 +1,183 @@
+# Demo Site Features
+
+## Pages
+
+### 1. Home Page (`/`)
+- **Hero Section**: Eye-catching gradient hero with animated elements
+- **Features Grid**: 6 feature cards highlighting key capabilities
+- **Code Example**: Syntax-highlighted quick start example
+- **CTA Section**: Call-to-action with links to get started
+- **Responsive Design**: Mobile-first, fully responsive layout
+
+### 2. Get Started Page (`/get-started`)
+- **Installation Guide**: Multiple package manager options (npm, pnpm, yarn)
+- **Basic Usage**: Copy-paste ready code examples
+- **Provider Configuration**: Multi-provider setup examples
+- **Chrome AI Setup**: Detailed requirements and setup instructions
+- **Next Steps**: Links to examples and documentation
+- **Copy to Clipboard**: One-click code copying functionality
+
+### 3. Examples Overview (`/examples`)
+- **Example Cards**: Grid of available examples with difficulty levels
+- **Quick Navigation**: Direct links to each example
+- **Categorization**: Beginner, Intermediate, and Advanced examples
+
+### 4. Example Pages
+
+#### Basic Autofill (`/examples/basic`)
+- **Live Form**: Interactive contact form with AI autofill
+- **Code Example**: Side-by-side implementation code
+- **How It Works**: Step-by-step explanation
+- **Form Validation**: React Hook Form validation in action
+
+#### Field Suggestions (`/examples/field-suggestions`)
+- **Individual Field AI**: Sparkle button for each field
+- **Accept/Dismiss UI**: User-controlled suggestion acceptance
+- **Context-Aware**: AI considers other field values
+- **Custom Debounce**: Faster suggestions (500ms)
+- **Visual Feedback**: Loading states and suggestion cards
+
+#### Multi-Provider Setup (`/examples/multi-provider`)
+- **Provider Configuration**: Chrome AI, OpenAI, Custom server
+- **Automatic Fallback**: Graceful degradation demo
+- **Error Handling**: User-friendly error messages
+- **Status Indicators**: Success/failure feedback
+- **Priority System**: Visual explanation of provider order
+
+#### Chrome AI Download (`/examples/chrome-ai`)
+- **Status Monitoring**: Real-time AI availability checking
+- **Progress Tracking**: Download progress bar
+- **Status Icons**: Visual indicators for each state
+- **Requirements Guide**: Detailed Chrome AI setup
+- **Polling System**: Automatic status refresh during download
+
+## UI Components (shadcn/ui)
+
+### Implemented Components
+- **Button**: Multiple variants (default, outline, ghost, link)
+- **Card**: Container with header, content, footer sections
+- **Input**: Styled text input with focus states
+- **Label**: Form labels with proper accessibility
+- **Textarea**: Multi-line text input
+- **Progress**: (Implicit in download tracking)
+
+### Component Features
+- **Accessibility**: ARIA labels, keyboard navigation
+- **Dark Mode Ready**: CSS variables for theming
+- **Responsive**: Mobile-first design
+- **Customizable**: Tailwind CSS classes
+- **Type Safe**: Full TypeScript support
+
+## Design System
+
+### Colors
+- **Primary**: Blue gradient (blue-600 to purple-600)
+- **Secondary**: Muted gray tones
+- **Accent**: Feature-specific colors (green, yellow, orange, pink)
+- **Semantic**: Success (green), Warning (yellow), Error (red)
+
+### Typography
+- **Headings**: Bold, tracking-tight
+- **Body**: Readable, muted-foreground for secondary text
+- **Code**: Monospace with muted background
+
+### Spacing
+- **Container**: Max-width with responsive padding
+- **Sections**: Consistent vertical rhythm (py-20, py-32)
+- **Components**: Tailwind spacing scale
+
+### Layout
+- **Header**: Sticky navigation with backdrop blur
+- **Footer**: Minimal with credits and license
+- **Grid**: Responsive grid layouts (1, 2, 3 columns)
+- **Cards**: Consistent padding and spacing
+
+## Interactive Features
+
+### AI Functionality
+- **Autofill Button**: One-click form population
+- **Field Suggestions**: Per-field AI assistance
+- **Loading States**: Visual feedback during AI operations
+- **Error Handling**: Graceful error messages
+- **Availability Checking**: Real-time AI status
+
+### User Experience
+- **Copy to Clipboard**: Code examples with copy button
+- **Visual Feedback**: Success/error states with icons
+- **Progress Indicators**: Download progress bars
+- **Responsive Navigation**: Mobile-friendly menu
+- **Smooth Transitions**: CSS transitions for interactions
+
+### Navigation
+- **React Router**: Client-side routing
+- **Active Links**: Visual indication of current page
+- **External Links**: Open in new tab with security
+- **Breadcrumbs**: (Implicit through page titles)
+
+## Technical Features
+
+### Performance
+- **Code Splitting**: Route-based splitting
+- **Tree Shaking**: Unused code removal
+- **Minification**: Production build optimization
+- **Asset Optimization**: Optimized images and fonts
+
+### SEO
+- **Meta Tags**: Title, description for each page
+- **Semantic HTML**: Proper heading hierarchy
+- **robots.txt**: Search engine instructions
+- **Sitemap**: (Can be added)
+
+### Accessibility
+- **ARIA Labels**: Screen reader support
+- **Keyboard Navigation**: Full keyboard support
+- **Focus States**: Visible focus indicators
+- **Color Contrast**: WCAG AA compliant
+
+### Developer Experience
+- **TypeScript**: Full type safety
+- **Hot Module Replacement**: Instant updates
+- **ESLint**: Code quality checks
+- **Prettier**: Code formatting
+- **VS Code Integration**: IntelliSense support
+
+## Links & Resources
+
+### Header Links
+- **NPM**: Link to package on npmjs.com
+- **GitHub**: Link to repository
+- **Discord**: Link to community (placeholder)
+
+### Footer Links
+- **Author Credits**: Links to contributors' GitHub profiles
+- **License**: MIT license information
+
+### Internal Navigation
+- **Get Started**: Installation and setup
+- **Examples**: Interactive demos
+- **Home**: Landing page
+
+## Responsive Breakpoints
+
+- **Mobile**: < 768px (1 column layouts)
+- **Tablet**: 768px - 1024px (2 column layouts)
+- **Desktop**: > 1024px (3 column layouts)
+- **Large Desktop**: > 1400px (max container width)
+
+## Browser Support
+
+- **Modern Browsers**: Chrome, Firefox, Safari, Edge (latest 2 versions)
+- **Chrome AI**: Chrome 139+ (Canary/Dev) for AI features
+- **Mobile Browsers**: iOS Safari, Chrome Mobile
+
+## Future Enhancements
+
+Potential additions:
+- **Search Functionality**: Search examples and docs
+- **Theme Switcher**: Light/dark mode toggle
+- **More Examples**: Advanced use cases
+- **Video Tutorials**: Embedded video guides
+- **Playground**: Interactive code editor
+- **API Reference**: Detailed API documentation
+- **Blog**: Articles and tutorials
+- **Changelog**: Version history

demo/README.md

@@ -0,0 +1,61 @@
+# React Hook Form AI - Demo Site
+
+Interactive demo and documentation site for [react-hook-form-ai](https://github.com/grayhatdevelopers/react-hook-form-ai).
+
+## Features
+
+- 🎨 Built with shadcn/ui components
+- 📱 Fully responsive design
+- 🚀 Multiple interactive examples
+- 📖 Comprehensive documentation
+- 🎯 Hosted on GitHub Pages
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## Deployment
+
+Deploy the site to GitHub Pages:
+
+```bash
+npm run deploy
+```
+
+This will:
+1. Build the production bundle
+2. Deploy to the `gh-pages` branch
+3. Make it available at: https://grayhatdevelopers.github.io/react-hook-form-ai/
+
+## Examples Included
+
+1. **Basic Autofill** - Simple form with AI autofill button
+2. **Field Suggestions** - Individual field AI suggestions with accept/dismiss UI
+3. **Multi-Provider Setup** - Multiple AI providers with automatic fallback
+4. **Chrome AI Download** - Handle Chrome AI model download with progress tracking
+
+## Tech Stack
+
+- React 18
+- TypeScript
+- Vite
+- Tailwind CSS
+- shadcn/ui
+- React Router
+- react-hook-form-ai
+
+## License
+
+MIT

demo/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

demo/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      http-equiv="origin-trial"
+      content="%VITE_ORIGIN_TRIAL_TOKEN%"
+    />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="React Hook Form AI - AI-powered form autofill and suggestions for React" />
+    <title>React Hook Form AI - AI-Powered Forms</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

demo/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-hook-form-ai-demo",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.441.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hook-form-ai": "^1.0.6",
+    "react-router-dom": "^6.26.0",
+    "shiki": "^3.15.0",
+    "tailwind-merge": "^2.5.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "gh-pages": "^6.3.0",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.3"
+  }
+}

demo/public/404.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script>
+      const pathname = location.pathname;
+      const hasExtension = /\.[^\/]+$/.test(pathname);
+
+      // Only redirect SPA routes (no extension)
+      if (!hasExtension) {
+        const redirectUrl = encodeURIComponent(pathname + location.search);
+
+        // Redirect exactly once into SPA entry
+        location.replace("/react-hook-form-ai/index.html?redirect=" + redirectUrl);
+      }
+    </script>
+    <title>404</title>
+  </head>
+  <body>
+    <h1>404</h1>
+  </body>
+</html>