feat(theme): finalize design token system with WCAG AA compliance

- Fix gold text contrast in light theme from 3.30:1 to 6.38:1 (AA compliant) - Separate ThemeContext into definition and provider files for ESLint compliance - Update contrast report with final validation results (100% passing tests) - Ensure all accent colors meet WCAG AA standards across light/dark themes - Complete design token system with proper semantic color roles 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-16 02:21:19 -06:00
parent a049472a13
commit 6d879d0685
35 changed files with 12075 additions and 0 deletions
--- a/reactrebuild0825/REBUILD_PLAN.md
+++ b/reactrebuild0825/REBUILD_PLAN.md
@@ -0,0 +1,357 @@
+# React Rebuild Plan for BCT Whitelabel (reactrebuild0825)
+
+## Project Overview
+
+This is a frontend-only React rebuild of the Black Canyon Tickets platform for learning purposes.
+The goal is to recreate the UI/UX without any database connections or live APIs - using mock data
+instead.
+
+## Project Structure
+
+```
+reactrebuild0825/
+├── package.json                    # Vite + React + TypeScript + Tailwind
+├── vite.config.ts                  # Vite configuration
+├── tailwind.config.js              # Glassmorphism design system
+├── tsconfig.json                   # TypeScript config
+├── .env.example                    # All current env vars (no live values)
+├── .gitignore                      # Standard React/Node gitignore
+├── README.md                       # Project overview and setup
+├── CLAUDE.md                       # Instructions for future Claude sessions
+├── src/
+│   ├── main.tsx                    # React app entry point
+│   ├── App.tsx                     # Main app component with routing
+│   ├── index.css                   # Global styles + Tailwind imports
+│   ├── components/
+│   │   ├── layout/
+│   │   │   ├── Navigation.tsx      # Main navigation
+│   │   │   ├── Layout.tsx          # Base layout wrapper
+│   │   │   └── SecureLayout.tsx    # Authenticated layout
+│   │   ├── ui/                     # Reusable UI components
+│   │   │   ├── Button.tsx
+│   │   │   ├── Modal.tsx
+│   │   │   ├── Input.tsx
+│   │   │   └── Card.tsx
+│   │   ├── calendar/               # Calendar components
+│   │   │   ├── CalendarGrid.tsx
+│   │   │   ├── EventCard.tsx
+│   │   │   └── CalendarHeader.tsx
+│   │   ├── ticketing/              # Ticketing components
+│   │   │   ├── TicketCheckout.tsx
+│   │   │   ├── TicketTypeModal.tsx
+│   │   │   └── QuickTicketPurchase.tsx
+│   │   └── admin/                  # Admin dashboard components
+│   │       ├── SuperAdminDashboard.tsx
+│   │       └── EventManagement.tsx
+│   ├── pages/
+│   │   ├── Home.tsx                # Landing page
+│   │   ├── Dashboard.tsx           # Main dashboard
+│   │   ├── Calendar.tsx            # Public calendar
+│   │   ├── Login.tsx               # Authentication
+│   │   └── admin/
+│   │       └── AdminDashboard.tsx
+│   ├── hooks/                      # Custom React hooks
+│   │   ├── useAuth.tsx
+│   │   ├── useEvents.tsx
+│   │   └── useTickets.tsx
+│   ├── lib/                        # Utility libraries
+│   │   ├── types.ts                # TypeScript type definitions
+│   │   ├── constants.ts            # App constants
+│   │   ├── utils.ts                # Helper functions
+│   │   └── mock-data.ts            # Static mock data (no DB)
+│   └── styles/
+│       ├── globals.css             # Global styles
+│       └── glassmorphism.css       # Design system utilities
+└── public/                         # Static assets
+    └── assets/
+```
+
+## Environment Variables (Static/Mock)
+
+Based on current project `.env.example`:
+
+```bash
+# Mock Supabase Configuration (no real connection)
+VITE_SUPABASE_URL=https://mock-project-id.supabase.co
+VITE_SUPABASE_ANON_KEY=mock-anon-key-here
+
+# Mock Stripe Configuration (no real connection)
+VITE_STRIPE_PUBLISHABLE_KEY=pk_test_mock-publishable-key
+VITE_STRIPE_SECRET_KEY=sk_test_mock-secret-key
+
+# Application Configuration
+VITE_NODE_ENV=development
+VITE_APP_URL=http://localhost:5173
+
+# Mock Email Configuration
+VITE_RESEND_API_KEY=re_mock-resend-api-key
+
+# Mock Error Monitoring
+VITE_SENTRY_DSN=https://mock-sentry-dsn@sentry.io/project-id
+
+# Mock AI Features
+VITE_OPENAI_API_KEY=sk-mock-openai-api-key
+```
+
+## Key Features to Port (Frontend Only)
+
+### 1. Glassmorphism Design System
+
+- **Dark gradients** with blue/purple themes
+- **Backdrop blur** and transparency effects
+- **Premium gold** accent colors (#d99e34)
+- **Glass effects**: rgba(255, 255, 255, 0.1) backgrounds
+- **Animations**: fadeInUp, float, pulse-slow
+- **Responsive design** with mobile-first approach
+
+### 2. Core Components to Recreate
+
+#### Layout Components
+
+- **Navigation.tsx**: Main nav with glassmorphism styling, auth state
+- **Layout.tsx**: Base layout with SEO and meta
+- **SecureLayout.tsx**: Authenticated layout with backdrop blur
+
+#### Calendar System
+
+- **CalendarGrid.tsx**: Monthly/weekly grid views
+- **EventCard.tsx**: Event display cards with hover effects
+- **CalendarHeader.tsx**: Navigation and view controls
+- **EventList.tsx**: List view of events
+- **TrendingEvents.tsx**: Popular events section
+
+#### Ticketing Interface
+
+- **TicketCheckout.tsx**: Main ticket purchasing UI
+- **TicketTypeModal.tsx**: Ticket type selection modal
+- **QuickTicketPurchase.tsx**: Simplified purchase flow
+
+#### Event Management
+
+- **EventManagement.tsx**: Multi-tab event administration
+- **TabNavigation.tsx**: Tab interface for manage pages
+- **Various tabs**: Tickets, Venue, Orders, Attendees, Analytics
+
+#### Admin Dashboard
+
+- **SuperAdminDashboard.tsx**: Platform administration
+- **Analytics components**: Revenue, events, user stats
+
+### 3. Mock Data Structure
+
+#### Events
+
+```typescript
+interface Event {
+  id: string;
+  title: string;
+  description: string;
+  date: string;
+  venue: string;
+  slug: string;
+  image_url?: string;
+  ticket_types: TicketType[];
+  organization: Organization;
+}
+```
+
+#### Ticket Types
+
+```typescript
+interface TicketType {
+  id: string;
+  name: string;
+  description?: string;
+  price: number;
+  quantity_available?: number;
+  is_active: boolean;
+  presale_start_time?: string;
+  general_sale_start_time?: string;
+}
+```
+
+#### Organizations
+
+```typescript
+interface Organization {
+  id: string;
+  name: string;
+  platform_fee_type?: string;
+  platform_fee_percentage?: number;
+  stripe_account_id?: string;
+}
+```
+
+## Tech Stack
+
+### Core Dependencies
+
+- **React 18** with TypeScript
+- **Vite** for fast development and building
+- **React Router v6** for client-side routing
+- **Tailwind CSS 4** with custom glassmorphism config
+- **Lucide React** for consistent icons
+- **Date-fns** for date manipulation
+- **Zustand** for lightweight state management
+
+### UI/Animation Libraries
+
+- **Framer Motion** for smooth animations
+- **React Hook Form** for form handling
+- **Zod** for form validation
+- **React Query/TanStack Query** for mock API state
+
+### Development Tools
+
+- **TypeScript** with strict configuration
+- **ESLint** with React/TypeScript rules
+- **Prettier** for code formatting
+- **Vitest** for unit testing
+
+## Development Commands
+
+```bash
+# Development
+npm run dev          # Start development server at localhost:5173
+npm run build        # Build for production
+npm run preview      # Preview production build
+
+# Code Quality
+npm run lint         # Run ESLint
+npm run lint:fix     # Fix ESLint issues
+npm run typecheck    # TypeScript type checking
+
+# Testing
+npm run test         # Run unit tests
+npm run test:ui      # Run tests with UI
+```
+
+## Key Design Patterns
+
+### Glassmorphism Theme System
+
+```css
+.glass-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+}
+
+.glass-navigation {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
+  backdrop-filter: blur(20px);
+}
+```
+
+### Component Architecture
+
+- **Atomic Design**: Atoms (Button, Input) → Molecules (Form, Card) → Organisms (Navigation,
+  EventGrid)
+- **Composition over inheritance**
+- **Custom hooks** for shared logic
+- **Context providers** for global state
+
+### State Management
+
+- **Zustand stores** for different domains (auth, events, tickets)
+- **React Query** for server state simulation
+- **Local state** with useState/useReducer for component state
+
+## CLAUDE.md Instructions for Future Sessions
+
+```markdown
+# React Rebuild Project - Frontend Only
+
+## Important Notes
+
+- This is a LEARNING PROJECT - frontend only, no live APIs
+- Uses MOCK DATA instead of real database connections
+- Focuses on recreating UI/UX from original BCT Whitelabel project
+- Glassmorphism design system with dark themes and blur effects
+
+## Project Goals
+
+- Learn React patterns and modern frontend architecture
+- Practice component composition and state management
+- Implement responsive design with Tailwind CSS
+- Create smooth animations and interactions
+
+## Key Commands
+
+- `npm run dev` - Development server
+- `npm run build` - Production build
+- `npm run lint` - Code quality checks
+
+## Architecture
+
+- React 18 + TypeScript + Vite
+- React Router for navigation
+- Zustand for state management
+- Tailwind CSS with custom glassmorphism theme
+- Mock data services (no real APIs)
+
+## Do NOT
+
+- Set up real database connections
+- Use live API keys or services
+- Create actual payment processing
+- Implement real authentication
+
+## DO
+
+- Focus on UI/UX recreation
+- Use mock data and simulated API calls
+- Implement responsive design
+- Create smooth animations
+- Follow component composition patterns
+```
+
+## Implementation Priority
+
+### Phase 1: Foundation
+
+1. ✅ Project structure setup
+2. ✅ Environment configuration
+3. ⬜ Vite + React + TypeScript scaffold
+4. ⬜ Tailwind CSS with glassmorphism config
+5. ⬜ Basic routing setup
+
+### Phase 2: Core Layout
+
+1. ⬜ Layout components (Navigation, Layout, SecureLayout)
+2. ⬜ Base UI components (Button, Input, Modal, Card)
+3. ⬜ Theme system implementation
+4. ⬜ Mock data structure
+
+### Phase 3: Main Features
+
+1. ⬜ Calendar interface with event cards
+2. ⬜ Ticket checkout UI (no real payments)
+3. ⬜ Event management dashboard
+4. ⬜ Admin interface recreation
+
+### Phase 4: Polish
+
+1. ⬜ Animations and micro-interactions
+2. ⬜ Mobile responsiveness
+3. ⬜ Accessibility improvements
+4. ⬜ Performance optimization
+
+## Next Steps
+
+1. Run `npm create vite@latest . --template react-ts` in this directory
+2. Install dependencies (React Router, Tailwind, Zustand, etc.)
+3. Set up Tailwind config with glassmorphism utilities
+4. Create basic project structure
+5. Implement mock data services
+6. Start with layout components
+
+## Success Criteria
+
+- ✅ Beautiful glassmorphism UI matching original design
+- ✅ Responsive design working on all devices
+- ✅ Smooth animations and interactions
+- ✅ All major components recreated in React
+- ✅ Clean, maintainable code architecture
+- ✅ No database dependencies - pure frontend learning project