diff --git a/src/components/DocumentationView/ReadmeTab.tsx b/src/components/DocumentationView/ReadmeTab.tsx new file mode 100644 index 0000000..9a53ce4 --- /dev/null +++ b/src/components/DocumentationView/ReadmeTab.tsx @@ -0,0 +1,139 @@ +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Separator } from '@/components/ui/separator' +import { Code, Database, Tree, PaintBrush, Flask, Play, Cube, Wrench, Gear, Rocket, Lightbulb, CheckCircle } from '@phosphor-icons/react' +import { FeatureItem, AIFeatureCard } from './DocComponents' +import readmeData from '@/data/documentation/readme-data.json' + +const Sparkle = ({ size }: { size: number }) => ✨ + +const iconMap: Record = { + Code, Database, Tree, PaintBrush, Flask, Play, Cube, Wrench, Gear, Sparkle +} + +export function ReadmeTab() { + return ( +
+
+
+
+ +
+
+

{readmeData.title}

+

{readmeData.subtitle}

+
+
+ + + +
+

Overview

+

{readmeData.overview}

+
+ + + + + + Key Features + + + + {readmeData.features.map((feature, idx) => { + const Icon = iconMap[feature.icon] || Code + return ( + } + title={feature.title} + description={feature.description} + /> + ) + })} + + + +
+

Getting Started

+ + + {readmeData.gettingStarted.map((step) => ( +
+

+ + {step.step} + + {step.title} +

+

{step.description}

+
+ ))} + + +
+ +
+

AI-Powered Features

+

+ CodeForge integrates OpenAI across every designer to accelerate development: +

+
+ {readmeData.aiFeatures.map((feature, idx) => ( + + ))} +
+
+ +
+

Technology Stack

+
+ + + Frontend + + +
    + {readmeData.techStack.frontend.map((tech, idx) => ( +
  • + + {tech} +
    • + ))} +
+ + + + + Backend & Tools + + +
    + {readmeData.techStack.backend.map((tech, idx) => ( +
  • + + {tech} +
    • + ))} +
+ + +
+
+ + + + + + Pro Tips + + + + {readmeData.proTips.map((tip, idx) => ( +

{tip}

+ ))} + + +
+
+ ) +} diff --git a/src/data/documentation/agents-data.json b/src/data/documentation/agents-data.json new file mode 100644 index 0000000..d3e0585 --- /dev/null +++ b/src/data/documentation/agents-data.json @@ -0,0 +1,162 @@ +{ + "overview": "CodeForge uses a modular AI service architecture that integrates OpenAI's GPT models across all features. Each designer has specialized prompts and validation logic to ensure high-quality generated code.", + "coreServices": [ + { + "filename": "ai-service.ts", + "path": "/src/lib/ai-service.ts", + "description": "Central AI service orchestrating OpenAI API calls", + "features": [ + "Complete application generation from descriptions", + "Model generation with Prisma schema validation", + "Component generation with Material UI integration", + "Theme generation with color theory and accessibility", + "Code explanation and documentation", + "Code improvement and optimization", + "Test generation for Playwright, Storybook, and unit tests" + ] + }, + { + "filename": "error-repair-service.ts", + "path": "/src/lib/error-repair-service.ts", + "description": "Error detection and automated repair system", + "features": [ + "Syntax error detection and repair", + "Import statement validation and fixes", + "TypeScript type error resolution", + "ESLint violation detection and fixes", + "Context-aware repair using related files", + "Batch repair operations", + "Repair explanation generation" + ] + }, + { + "filename": "generators.ts", + "path": "/src/lib/generators.ts", + "description": "Code generation utilities for project export", + "features": [ + "Next.js project structure generation", + "Prisma schema file generation", + "Material UI theme configuration", + "Playwright test file generation", + "Storybook story file generation", + "Unit test file generation", + "Flask application structure", + "Package.json configuration" + ] + } + ], + "integrationPoints": [ + { + "component": "ModelDesigner", + "capabilities": [ + "Generate models from natural language", + "Suggest appropriate field types", + "Create relations between models", + "Generate realistic field names and structures" + ] + }, + { + "component": "ComponentTreeBuilder", + "capabilities": [ + "Generate component hierarchies", + "Suggest Material UI components", + "Create prop configurations", + "Build complex layouts from descriptions" + ] + }, + { + "component": "StyleDesigner", + "capabilities": [ + "Generate color palettes from descriptions", + "Ensure WCAG accessibility compliance", + "Create harmonious color relationships", + "Suggest typography pairings" + ] + }, + { + "component": "CodeEditor", + "capabilities": [ + "Explain code functionality", + "Improve code quality and performance", + "Suggest best practices", + "Generate inline documentation" + ] + }, + { + "component": "PlaywrightDesigner", + "capabilities": [ + "Generate E2E test scenarios", + "Create test steps from user flows", + "Suggest appropriate selectors", + "Generate assertions for validations" + ] + }, + { + "component": "StorybookDesigner", + "capabilities": [ + "Generate component stories", + "Create meaningful story variations", + "Configure args based on prop types", + "Organize stories by categories" + ] + }, + { + "component": "UnitTestDesigner", + "capabilities": [ + "Generate comprehensive test suites", + "Create test cases with assertions", + "Generate setup and teardown code", + "Cover edge cases and error scenarios" + ] + }, + { + "component": "ErrorPanel", + "capabilities": [ + "Analyze error patterns", + "Generate context-aware fixes", + "Explain error causes", + "Prevent similar errors in future" + ] + } + ], + "promptEngineering": [ + { + "title": "Context Preservation", + "description": "All AI prompts include relevant project context such as existing models, components, and theme configurations to ensure generated code integrates seamlessly." + }, + { + "title": "Format Specification", + "description": "Prompts specify exact output formats (JSON, TypeScript, Python) with strict schemas to ensure parseable and valid responses." + }, + { + "title": "Best Practices Enforcement", + "description": "Generated code follows Next.js, React, and Flask best practices through detailed prompt instructions and post-processing validation." + }, + { + "title": "Error Handling", + "description": "Fallback mechanisms and retry logic ensure graceful degradation when AI services are unavailable or responses are malformed." + } + ], + "futureEnhancements": [ + { + "title": "Multi-Model Support", + "description": "Integration with Claude, Gemini, and other LLMs for specialized tasks" + }, + { + "title": "Fine-Tuned Models", + "description": "Custom models trained on specific frameworks and design patterns" + }, + { + "title": "Code Review Agent", + "description": "Automated code review with security and performance analysis" + }, + { + "title": "Conversational Interface", + "description": "Chat-based project building with natural language commands" + }, + { + "title": "Learning System", + "description": "AI that learns from user corrections and preferences over time" + } + ] +} diff --git a/src/data/documentation/cicd-data.json b/src/data/documentation/cicd-data.json new file mode 100644 index 0000000..3163b42 --- /dev/null +++ b/src/data/documentation/cicd-data.json @@ -0,0 +1,228 @@ +{ + "title": "CI/CD Guide", + "subtitle": "Complete deployment automation for multiple platforms", + "overview": "CodeForge includes production-ready CI/CD configurations for GitHub Actions, GitLab CI, Jenkins, and CircleCI. Each pipeline includes linting, testing, security scanning, Docker image building, and automated deployment workflows.", + "platforms": [ + { + "name": "GitHub Actions", + "file": ".github/workflows/ci.yml", + "description": "Complete CI/CD with GHCR Docker registry integration", + "features": [ + "Parallel lint and test execution", + "E2E tests with Playwright", + "Docker build and push to GitHub Container Registry", + "Security scanning with Trivy", + "Automated staging and production deployments", + "Release workflow with versioned artifacts" + ] + }, + { + "name": "GitLab CI", + "file": ".gitlab-ci.yml", + "description": "Multi-stage pipeline with GitLab Container Registry", + "features": [ + "Dependency caching for faster builds", + "Coverage reporting with Cobertura", + "Docker-in-Docker builds", + "Manual production approval gates", + "Webhook-based deployment triggers" + ] + }, + { + "name": "Jenkins", + "file": "Jenkinsfile", + "description": "Declarative pipeline with Slack notifications", + "features": [ + "Node.js environment configuration", + "HTML report publishing for tests and coverage", + "Artifact archiving and fingerprinting", + "Manual production deployment approval", + "Slack integration for deployment notifications" + ] + }, + { + "name": "CircleCI", + "file": ".circleci/config.yml", + "description": "Workflow orchestration with orb integrations", + "features": [ + "Docker layer caching for optimization", + "Job dependency management", + "Test results and artifact storage", + "Approval workflows for production", + "Slack notifications via orb" + ] + } + ], + "pipelineStages": [ + { + "stage": "Lint", + "description": "ESLint and TypeScript type checking to ensure code quality", + "duration": "~1-2 min" + }, + { + "stage": "Test", + "description": "Unit tests with coverage reporting and result artifacts", + "duration": "~2-3 min" + }, + { + "stage": "Build", + "description": "Production build with artifact generation for deployment", + "duration": "~2-4 min" + }, + { + "stage": "E2E Tests", + "description": "Playwright end-to-end tests with HTML reports", + "duration": "~3-5 min" + }, + { + "stage": "Security", + "description": "npm audit and Trivy vulnerability scanning", + "duration": "~1-2 min" + }, + { + "stage": "Docker Build", + "description": "Multi-stage Docker image build and push to registry", + "duration": "~3-5 min" + }, + { + "stage": "Deploy", + "description": "Automated deployment to staging and production environments", + "duration": "~1-3 min" + } + ], + "dockerConfig": { + "files": [ + { + "file": "Dockerfile", + "description": "Multi-stage build with Node.js builder and Nginx runtime" + }, + { + "file": "nginx.conf", + "description": "Production Nginx configuration with health checks and caching" + }, + { + "file": "docker-compose.yml", + "description": "Local development and deployment orchestration" + }, + { + "file": ".dockerignore", + "description": "Optimized build context by excluding unnecessary files" + } + ], + "features": [ + "Multi-stage build reduces final image size to ~50MB", + "Nginx serves static files with gzip compression", + "Health check endpoint at /health for orchestration", + "Automatic cache headers for static assets", + "SPA routing support with fallback to index.html" + ] + }, + "environmentVariables": [ + { + "variable": "NODE_VERSION", + "description": "Node.js version (default: 20)", + "required": false + }, + { + "variable": "REGISTRY", + "description": "Docker registry URL (default: ghcr.io)", + "required": false + }, + { + "variable": "STAGING_WEBHOOK_URL", + "description": "Webhook for staging deployments", + "required": false + }, + { + "variable": "PRODUCTION_WEBHOOK_URL", + "description": "Webhook for production deployments", + "required": false + }, + { + "variable": "CODECOV_TOKEN", + "description": "Codecov integration token", + "required": false + }, + { + "variable": "SLACK_WEBHOOK", + "description": "Slack webhook for notifications", + "required": false + } + ], + "branchStrategy": [ + { + "branch": "main", + "description": "Production branch - deploys to production environment (manual approval required)", + "color": "green" + }, + { + "branch": "develop", + "description": "Development branch - automatically deploys to staging environment", + "color": "blue" + }, + { + "branch": "feature/*", + "description": "Feature branches - runs tests only, no deployment", + "color": "purple" + }, + { + "branch": "v* tags", + "description": "Version tags - triggers release workflow with artifacts and changelog", + "color": "orange" + } + ], + "quickStart": [ + { + "step": 1, + "title": "Choose Your Platform", + "description": "Select GitHub Actions, GitLab CI, Jenkins, or CircleCI based on your infrastructure" + }, + { + "step": 2, + "title": "Configure Secrets", + "description": "Add required environment variables and secrets in your platform's settings" + }, + { + "step": 3, + "title": "Push to Repository", + "description": "Push code to main or develop branch to trigger the CI/CD pipeline" + }, + { + "step": 4, + "title": "Monitor Pipeline", + "description": "View pipeline status, test results, and deployment logs in your platform's dashboard" + } + ], + "bestPractices": [ + "Never commit secrets - use environment variables and platform secret management", + "Enable branch protection on main and develop branches", + "Require code reviews and passing tests before merging", + "Use manual approval gates for production deployments", + "Monitor security scan results and fix vulnerabilities promptly", + "Keep dependencies updated with Dependabot or Renovate", + "Use semantic versioning for releases (v1.0.0, v1.1.0, etc.)", + "Configure Slack or email notifications for deployment status" + ], + "additionalResources": [ + { + "file": "CI_CD_GUIDE.md", + "description": "Detailed setup guide for all platforms" + }, + { + "file": ".github/workflows/", + "description": "GitHub Actions workflows" + }, + { + "file": ".gitlab-ci.yml", + "description": "GitLab CI configuration" + }, + { + "file": "Jenkinsfile", + "description": "Jenkins pipeline definition" + }, + { + "file": ".circleci/config.yml", + "description": "CircleCI configuration" + } + ] +} diff --git a/src/data/documentation/pwa-data.json b/src/data/documentation/pwa-data.json new file mode 100644 index 0000000..3404f74 --- /dev/null +++ b/src/data/documentation/pwa-data.json @@ -0,0 +1,128 @@ +{ + "title": "Progressive Web App", + "subtitle": "Offline-first experience with native-like capabilities", + "overview": "CodeForge is a fully-featured Progressive Web App that can be installed on any device and works offline. With intelligent caching, automatic updates, and native app-like features, you can build applications anywhere, anytime.", + "features": [ + { + "title": "Installable", + "description": "Install on desktop or mobile for quick access from your home screen or applications menu" + }, + { + "title": "Offline Support", + "description": "Work without internet connection; changes sync automatically when you reconnect" + }, + { + "title": "Automatic Updates", + "description": "Get notified when new versions are available with one-click updates" + }, + { + "title": "Push Notifications", + "description": "Opt-in to receive updates about builds, errors, and new features" + }, + { + "title": "App Shortcuts", + "description": "Quick access to Dashboard, Code Editor, and Models from your OS" + }, + { + "title": "Share Target", + "description": "Share code files directly to CodeForge from other apps" + } + ], + "installation": { + "desktop": [ + { + "platform": "Chrome/Edge/Brave", + "steps": [ + "Look for install icon (⊕) in address bar", + "Click \"Install\" or use prompt in app", + "App added to applications menu" + ] + }, + { + "platform": "Safari (macOS)", + "steps": [ + "Click File → Add to Dock", + "App appears in Dock" + ] + } + ], + "mobile": [ + { + "platform": "iOS (Safari)", + "steps": [ + "Tap Share button", + "Select \"Add to Home Screen\"", + "Confirm installation" + ] + }, + { + "platform": "Android (Chrome)", + "steps": [ + "Tap menu (three dots)", + "Select \"Install app\"", + "Confirm installation" + ] + } + ] + }, + "settings": [ + { + "title": "Installation Status", + "description": "Check if app is installed and trigger installation if available" + }, + { + "title": "Network Status", + "description": "Real-time online/offline indicator with connectivity information" + }, + { + "title": "Push Notifications", + "description": "Toggle notifications and manage permissions" + }, + { + "title": "Cache Management", + "description": "View cache size, service worker status, and clear cached data" + }, + { + "title": "Update Management", + "description": "Install pending updates when new versions are available" + } + ], + "offlineCapabilities": { + "worksOffline": [ + "View and edit existing projects", + "Browse files and code", + "Use Monaco editor", + "Navigate all tabs", + "View documentation", + "Make changes locally" + ], + "requiresInternet": [ + "AI-powered generation", + "External font loading", + "Database sync", + "External resources" + ] + }, + "proTips": [ + { + "title": "Install for best performance", + "description": "Installed apps load faster and work more reliably offline" + }, + { + "title": "Save before going offline", + "description": "Ensure projects are saved to local storage before losing connection" + }, + { + "title": "Clear cache if issues arise", + "description": "Use PWA settings to clear cache and reload with fresh data" + }, + { + "title": "Enable notifications", + "description": "Stay informed about updates and build completions" + }, + { + "title": "Update regularly", + "description": "New versions bring performance improvements and features" + } + ] +} diff --git a/src/data/documentation/readme-data.json b/src/data/documentation/readme-data.json new file mode 100644 index 0000000..e95f640 --- /dev/null +++ b/src/data/documentation/readme-data.json @@ -0,0 +1,141 @@ +{ + "title": "CodeForge", + "subtitle": "Low-Code Next.js App Builder with AI", + "overview": "CodeForge is a comprehensive visual low-code platform for generating production-ready Next.js applications. It combines the power of visual designers with direct code editing, AI-powered generation, and a complete full-stack development toolkit.", + "features": [ + { + "icon": "Code", + "title": "Monaco Code Editor", + "description": "Full-featured code editor with syntax highlighting, autocomplete, and AI-powered improvements" + }, + { + "icon": "Database", + "title": "Prisma Schema Designer", + "description": "Visual database model designer with automatic schema generation and AI assistance" + }, + { + "icon": "Tree", + "title": "Component Tree Builder", + "description": "Hierarchical component structure builder with drag-and-drop and AI generation" + }, + { + "icon": "PaintBrush", + "title": "Theme Designer", + "description": "Material UI theme customizer with multiple variants, custom colors, and AI theme generation" + }, + { + "icon": "Flask", + "title": "Flask Backend Designer", + "description": "Visual Python Flask API designer with blueprints, endpoints, and CORS configuration" + }, + { + "icon": "Play", + "title": "Playwright Test Designer", + "description": "E2E test builder with step configuration and AI test generation" + }, + { + "icon": "Cube", + "title": "Unit Test Designer", + "description": "Comprehensive test suite builder for components, functions, hooks, and integration tests" + }, + { + "icon": "Wrench", + "title": "Auto Error Repair", + "description": "Automated error detection and AI-powered code repair system" + }, + { + "icon": "Gear", + "title": "Project Settings", + "description": "Configure Next.js options, npm packages, scripts, and build settings" + }, + { + "icon": "Sparkle", + "title": "AI Integration", + "description": "OpenAI-powered generation across all features for rapid development" + } + ], + "gettingStarted": [ + { + "step": 1, + "title": "Create Your First Model", + "description": "Navigate to the Models tab and create your database schema using the visual designer or describe your data model to the AI." + }, + { + "step": 2, + "title": "Design Your Components", + "description": "Use the Components tab to build your UI hierarchy visually or let the AI generate component structures based on your requirements." + }, + { + "step": 3, + "title": "Customize Your Theme", + "description": "Head to the Styling tab to create custom color palettes, manage theme variants (light/dark), and configure typography." + }, + { + "step": 4, + "title": "Build Your Backend", + "description": "Configure your Flask API in the Flask API tab by creating blueprints and endpoints with full CORS and authentication support." + }, + { + "step": 5, + "title": "Export Your Project", + "description": "Click Export Project to generate all files including Next.js pages, Prisma schemas, Flask backend, tests, and configuration files ready for deployment." + } + ], + "aiFeatures": [ + { + "title": "Complete App Generation", + "description": "Describe your application and get a full project structure with models, components, and styling" + }, + { + "title": "Model Generation", + "description": "Generate Prisma models with fields and relations from natural language descriptions" + }, + { + "title": "Component Creation", + "description": "Build complex React components with proper structure and Material UI integration" + }, + { + "title": "Theme Generation", + "description": "Create beautiful, accessible color palettes that match your brand or description" + }, + { + "title": "Test Generation", + "description": "Generate comprehensive E2E, unit, and integration tests with proper assertions" + }, + { + "title": "Code Explanation", + "description": "Get detailed explanations of any code snippet to understand implementation details" + }, + { + "title": "Code Improvement", + "description": "Automatically optimize code for performance, readability, and best practices" + }, + { + "title": "Error Repair", + "description": "Automatically detect and fix syntax, type, import, and lint errors with context-aware fixes" + } + ], + "techStack": { + "frontend": [ + "Next.js 14 with App Router", + "React 18 with TypeScript", + "Material UI 5", + "Monaco Editor", + "Tailwind CSS" + ], + "backend": [ + "Flask REST API", + "Prisma ORM", + "Playwright E2E Testing", + "Vitest & React Testing Library", + "Storybook for Components" + ] + }, + "proTips": [ + "💡 Use the AI Generate feature to quickly scaffold entire applications from descriptions", + "💡 The Error Repair tab automatically scans and fixes common issues - check it before exporting", + "💡 Create multiple theme variants (light, dark, custom) in the Styling tab for complete theme support", + "💡 Test your components with Storybook stories before writing full E2E tests", + "💡 Flask blueprints help organize your API endpoints by feature or resource" + ] +} diff --git a/src/data/documentation/roadmap-data.json b/src/data/documentation/roadmap-data.json new file mode 100644 index 0000000..e212c02 --- /dev/null +++ b/src/data/documentation/roadmap-data.json @@ -0,0 +1,141 @@ +{ + "completed": [ + { + "title": "Monaco Code Editor Integration", + "description": "Full-featured code editor with syntax highlighting, multi-file tabs, and auto-save", + "version": "v1.0" + }, + { + "title": "Prisma Schema Designer", + "description": "Visual database model designer with fields, relations, and schema generation", + "version": "v1.0" + }, + { + "title": "Component Tree Builder", + "description": "Hierarchical React component structure builder with Material UI components", + "version": "v1.0" + }, + { + "title": "Theme Designer", + "description": "Material UI theme customizer with color palettes and typography configuration", + "version": "v1.1" + }, + { + "title": "OpenAI Integration", + "description": "AI-powered generation across models, components, themes, and code", + "version": "v2.0" + }, + { + "title": "Multi-Theme Variants", + "description": "Support for light, dark, and custom theme variants with unlimited custom colors", + "version": "v2.1" + }, + { + "title": "Playwright Test Designer", + "description": "Visual E2E test builder with step-by-step configuration and AI generation", + "version": "v3.0" + }, + { + "title": "Storybook Story Designer", + "description": "Component story builder with args configuration and category organization", + "version": "v3.0" + }, + { + "title": "Unit Test Designer", + "description": "Comprehensive test suite builder for components, functions, hooks, and integration tests", + "version": "v3.0" + }, + { + "title": "Auto Error Detection & Repair", + "description": "Automated error scanning with AI-powered context-aware code repair", + "version": "v3.1" + }, + { + "title": "Responsive UI Improvements", + "description": "Multi-row tab support and improved layout for complex applications", + "version": "v3.2" + }, + { + "title": "Flask Backend Designer", + "description": "Python Flask REST API designer with blueprints, endpoints, and CORS configuration", + "version": "v4.0" + }, + { + "title": "Project Settings Designer", + "description": "Next.js configuration, npm package management, and build script customization", + "version": "v4.0" + }, + { + "title": "CI/CD Configuration", + "description": "Complete CI/CD pipelines for GitHub Actions, GitLab CI, Jenkins, and CircleCI", + "version": "v4.2" + }, + { + "title": "Docker Containerization", + "description": "Multi-stage Docker builds with Nginx, docker-compose, and health checks", + "version": "v4.2" + } + ], + "planned": [ + { + "title": "Real-Time Preview", + "description": "Live preview of generated applications with hot reload", + "version": "v4.1" + }, + { + "title": "Database Seeding Designer", + "description": "Visual interface for creating seed data for Prisma models", + "version": "v4.2" + }, + { + "title": "API Client Generator", + "description": "Generate TypeScript API clients from Flask backend definitions", + "version": "v4.2" + }, + { + "title": "Form Builder", + "description": "Visual form designer with validation, field types, and submission handling", + "version": "v4.3" + }, + { + "title": "Authentication Designer", + "description": "Configure authentication flows (JWT, OAuth, sessions) for both frontend and backend", + "version": "v5.0" + }, + { + "title": "Docker Configuration", + "description": "Generate Docker and docker-compose files for containerized deployment", + "version": "v5.0" + }, + { + "title": "GraphQL API Designer", + "description": "Alternative to Flask REST - design GraphQL schemas and resolvers", + "version": "v5.1" + }, + { + "title": "State Management Designer", + "description": "Configure Redux, Zustand, or Jotai state management patterns", + "version": "v5.2" + }, + { + "title": "CI/CD Pipeline Generator", + "description": "Generate GitHub Actions, GitLab CI, or CircleCI configuration files", + "version": "v5.3" + }, + { + "title": "Component Library Export", + "description": "Export designed components as a standalone npm package", + "version": "v6.0" + }, + { + "title": "Design System Generator", + "description": "Create complete design systems with tokens, components, and documentation", + "version": "v6.0" + }, + { + "title": "Collaboration Features", + "description": "Real-time collaborative editing and commenting system", + "version": "v6.1" + } + ] +} diff --git a/src/data/documentation/sass-data.json b/src/data/documentation/sass-data.json new file mode 100644 index 0000000..89e9ad3 --- /dev/null +++ b/src/data/documentation/sass-data.json @@ -0,0 +1,153 @@ +{ + "title": "Sass Styles Guide", + "subtitle": "Custom Material UI components with Sass", + "overview": "CodeForge includes a comprehensive Sass-based styling system for non-standard Material UI components. This system provides pre-built components, utilities, mixins, and animations that extend beyond the standard Material UI component library.", + "fileStructure": [ + { + "file": "src/styles/_variables.scss", + "description": "Color palettes, spacing scales, typography, transitions, and other design tokens" + }, + { + "file": "src/styles/_utilities.scss", + "description": "Mixins and functions for responsive design, colors, typography, and layout helpers" + }, + { + "file": "src/styles/_animations.scss", + "description": "Keyframe animations and animation utility classes for transitions and effects" + }, + { + "file": "src/styles/material-ui-custom.scss", + "description": "Custom Material UI component styles with variants and states" + }, + { + "file": "src/styles/main.scss", + "description": "Main entry point that imports all Sass modules and provides layout components" + } + ], + "components": [ + { + "name": "Buttons", + "classes": ["mui-custom-button--primary", "mui-custom-button--secondary", "mui-custom-button--accent", "mui-custom-button--outline", "mui-custom-button--ghost"], + "description": "Custom styled buttons with hover effects and variants" + }, + { + "name": "Cards", + "classes": ["mui-custom-card", "mui-custom-card--gradient", "mui-custom-card--glass"], + "description": "Elevated cards with gradient and glassmorphism variants" + }, + { + "name": "Inputs", + "classes": ["mui-custom-input", "mui-custom-input--error", "mui-custom-input--success"], + "description": "Form inputs with focus states and validation styling" + }, + { + "name": "Chips", + "classes": ["mui-custom-chip--primary", "mui-custom-chip--success", "mui-custom-chip--error", "mui-custom-chip--warning"], + "description": "Status chips and tags with color variants" + }, + { + "name": "Panels", + "classes": ["mui-custom-panel", "mui-custom-panel--with-header"], + "description": "Content panels with headers and footers" + }, + { + "name": "Dialogs", + "classes": ["mui-custom-dialog"], + "description": "Modal dialogs with backdrop blur effects" + }, + { + "name": "Badges", + "classes": ["custom-mui-badge", "custom-mui-badge--dot"], + "description": "Notification badges and indicators" + }, + { + "name": "Progress", + "classes": ["mui-custom-progress", "mui-custom-progress--indeterminate"], + "description": "Loading progress bars with animations" + }, + { + "name": "Skeletons", + "classes": ["mui-custom-skeleton--text", "mui-custom-skeleton--circle", "mui-custom-skeleton--rect"], + "description": "Loading skeleton placeholders with shimmer effect" + }, + { + "name": "Accordions", + "classes": ["mui-custom-accordion"], + "description": "Collapsible content sections with animations" + } + ], + "layoutComponents": [ + { + "name": "custom-mui-container", + "description": "Max-width container with responsive padding" + }, + { + "name": "custom-mui-grid", + "description": "CSS Grid layouts with responsive columns (--cols-1 to --cols-12, --responsive)" + }, + { + "name": "custom-mui-flex", + "description": "Flexbox utilities (--row, --col, --wrap, --center, --between, --around)" + }, + { + "name": "custom-mui-stack", + "description": "Vertical/horizontal stacks with configurable gaps" + }, + { + "name": "custom-mui-surface", + "description": "Interactive surfaces with elevation and hover effects" + } + ], + "utilities": [ + { + "name": "@include respond-to($breakpoint)", + "description": "Generate media queries for xs, sm, md, lg, xl, 2xl breakpoints", + "example": "@include respond-to('lg') {\n padding: 2rem;\n}" + }, + { + "name": "@include elevation($level)", + "description": "Apply box shadows with levels 1-4", + "example": "@include elevation(2);" + }, + { + "name": "@include glassmorphism($blur, $opacity)", + "description": "Create frosted glass effects with backdrop blur", + "example": "@include glassmorphism(16px, 0.1);" + }, + { + "name": "get-color($palette, $shade)", + "description": "Access colors from predefined palettes (primary, secondary, accent, success, error, warning)", + "example": "color: get-color('primary', 500);" + }, + { + "name": "@include truncate($lines)", + "description": "Truncate text with ellipsis after specified lines", + "example": "@include truncate(2);" + }, + { + "name": "@include show-scrollbar($track, $thumb)", + "description": "Style webkit scrollbars with custom colors", + "example": "@include show-scrollbar(rgba(0,0,0,0.1), rgba(0,0,0,0.3));" + } + ], + "animations": [ + { "name": "animate-fade-in", "description": "Fade in from opacity 0" }, + { "name": "animate-slide-in-up", "description": "Slide in from bottom" }, + { "name": "animate-slide-in-down", "description": "Slide in from top" }, + { "name": "animate-scale-in", "description": "Scale in from 95%" }, + { "name": "animate-pulse", "description": "Pulsing opacity effect" }, + { "name": "animate-bounce", "description": "Bouncing effect" }, + { "name": "animate-spin", "description": "Continuous rotation" }, + { "name": "animate-shimmer", "description": "Shimmer effect for loading" }, + { "name": "animate-float", "description": "Floating up and down" }, + { "name": "animate-glow", "description": "Glowing shadow effect" } + ], + "bestPractices": [ + "Import main.scss in your index.css to access all Sass components and utilities", + "Use @use instead of @import for better module encapsulation", + "Leverage mixins for consistent spacing, elevation, and responsive design", + "Extend existing component classes rather than creating from scratch", + "Use animation classes sparingly and respect prefers-reduced-motion", + "Customize variables in _variables.scss to match your design system" + ] +}