From 7de782ec6247b027ef592d1ce9a950d8a3033cf1 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Fri, 16 Jan 2026 02:19:06 +0000 Subject: [PATCH] Generated by Spark: User might not want every designer feature, make it so we can turn them on and off --- src/App.tsx | 411 ++++++++++++++--------- src/components/FeatureToggleSettings.tsx | 148 ++++++++ src/types/project.ts | 18 + 3 files changed, 422 insertions(+), 155 deletions(-) create mode 100644 src/components/FeatureToggleSettings.tsx diff --git a/src/App.tsx b/src/App.tsx index 44c220c..95da508 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,8 +6,8 @@ import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { Card } from '@/components/ui/card' import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable' -import { Code, Database, Tree, PaintBrush, Download, Sparkle, Flask, BookOpen, Play, Wrench, Gear, Cube, FileText, ChartBar, Keyboard, FlowArrow } from '@phosphor-icons/react' -import { ProjectFile, PrismaModel, ComponentNode, ComponentTree, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest, FlaskConfig, NextJsConfig, NpmSettings, Workflow, Lambda } from '@/types/project' +import { Code, Database, Tree, PaintBrush, Download, Sparkle, Flask, BookOpen, Play, Wrench, Gear, Cube, FileText, ChartBar, Keyboard, FlowArrow, Faders } from '@phosphor-icons/react' +import { ProjectFile, PrismaModel, ComponentNode, ComponentTree, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest, FlaskConfig, NextJsConfig, NpmSettings, Workflow, Lambda, FeatureToggles } from '@/types/project' import { CodeEditor } from '@/components/CodeEditor' import { ModelDesigner } from '@/components/ModelDesigner' import { ComponentTreeBuilder } from '@/components/ComponentTreeBuilder' @@ -26,6 +26,7 @@ import { DocumentationView } from '@/components/DocumentationView' import { SassStylesShowcase } from '@/components/SassStylesShowcase' import { ProjectDashboard } from '@/components/ProjectDashboard' import { KeyboardShortcutsDialog } from '@/components/KeyboardShortcutsDialog' +import { FeatureToggleSettings } from '@/components/FeatureToggleSettings' import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts' import { generateNextJSProject, generatePrismaSchema, generateMUITheme, generatePlaywrightTests, generateStorybookStories, generateUnitTests, generateFlaskApp } from '@/lib/generators' import { AIService } from '@/lib/ai-service' @@ -78,6 +79,23 @@ const DEFAULT_NPM_SETTINGS: NpmSettings = { packageManager: 'npm', } +const DEFAULT_FEATURE_TOGGLES: FeatureToggles = { + codeEditor: true, + models: true, + components: true, + componentTrees: true, + workflows: true, + lambdas: true, + styling: true, + flaskApi: true, + playwright: true, + storybook: true, + unitTests: true, + errorRepair: true, + documentation: true, + sassStyles: true, +} + const DEFAULT_THEME: ThemeConfig = { variants: [ { @@ -162,6 +180,7 @@ function App() { const [flaskConfig, setFlaskConfig] = useKV('project-flask-config', DEFAULT_FLASK_CONFIG) const [nextjsConfig, setNextjsConfig] = useKV('project-nextjs-config', DEFAULT_NEXTJS_CONFIG) const [npmSettings, setNpmSettings] = useKV('project-npm-settings', DEFAULT_NPM_SETTINGS) + const [featureToggles, setFeatureToggles] = useKV('project-feature-toggles', DEFAULT_FEATURE_TOGGLES) const [activeFileId, setActiveFileId] = useState((files || [])[0]?.id || null) const [activeTab, setActiveTab] = useState('dashboard') const [exportDialogOpen, setExportDialogOpen] = useState(false) @@ -181,6 +200,7 @@ function App() { const safeFlaskConfig = flaskConfig || DEFAULT_FLASK_CONFIG const safeNextjsConfig = nextjsConfig || DEFAULT_NEXTJS_CONFIG const safeNpmSettings = npmSettings || DEFAULT_NPM_SETTINGS + const safeFeatureToggles = featureToggles || DEFAULT_FEATURE_TOGGLES useEffect(() => { if (!theme || !theme.variants || theme.variants.length === 0) { @@ -188,6 +208,12 @@ function App() { } }, [theme, setTheme]) + useEffect(() => { + if (!featureToggles) { + setFeatureToggles(DEFAULT_FEATURE_TOGGLES) + } + }, [featureToggles, setFeatureToggles]) + const { errors: autoDetectedErrors } = useAutoRepair(safeFiles, false) useKeyboardShortcuts([ @@ -197,48 +223,48 @@ function App() { description: 'Go to Dashboard', action: () => setActiveTab('dashboard'), }, - { + ...(safeFeatureToggles.codeEditor ? [{ key: '2', ctrl: true, description: 'Go to Code Editor', action: () => setActiveTab('code'), - }, - { + }] : []), + ...(safeFeatureToggles.models ? [{ key: '3', ctrl: true, description: 'Go to Models', action: () => setActiveTab('models'), - }, - { + }] : []), + ...(safeFeatureToggles.components ? [{ key: '4', ctrl: true, description: 'Go to Components', action: () => setActiveTab('components'), - }, - { + }] : []), + ...(safeFeatureToggles.componentTrees ? [{ key: '5', ctrl: true, description: 'Go to Component Trees', action: () => setActiveTab('component-trees'), - }, - { + }] : []), + ...(safeFeatureToggles.workflows ? [{ key: '6', ctrl: true, description: 'Go to Workflows', action: () => setActiveTab('workflows'), - }, - { + }] : []), + ...(safeFeatureToggles.lambdas ? [{ key: '7', ctrl: true, description: 'Go to Lambdas', action: () => setActiveTab('lambdas'), - }, - { + }] : []), + ...(safeFeatureToggles.styling ? [{ key: '8', ctrl: true, description: 'Go to Styling', action: () => setActiveTab('styling'), - }, + }] : []), { key: 'e', ctrl: true, @@ -444,7 +470,7 @@ Navigate to the backend directory and follow the setup instructions.
- {autoDetectedErrors.length > 0 && ( + {safeFeatureToggles.errorRepair && autoDetectedErrors.length > 0 && ( )} +
@@ -563,68 +629,84 @@ Navigate to the backend directory and follow the setup instructions. /> - - - - - - - - - - - + {safeFeatureToggles.codeEditor && ( + + + + + + + + + + + + )} - - - + {safeFeatureToggles.models && ( + + + + )} - - - + {safeFeatureToggles.components && ( + + + + )} - - - + {safeFeatureToggles.componentTrees && ( + + + + )} - - - + {safeFeatureToggles.workflows && ( + + + + )} - - - + {safeFeatureToggles.lambdas && ( + + + + )} - - - + {safeFeatureToggles.styling && ( + + + + )} - - - + {safeFeatureToggles.flaskApi && ( + + + + )} - - - - - - - - - - - - - - + - - - + {safeFeatureToggles.playwright && ( + + + + )} - - - + {safeFeatureToggles.storybook && ( + + + + )} + + {safeFeatureToggles.unitTests && ( + + + + )} + + {safeFeatureToggles.errorRepair && ( + + + + )} + + {safeFeatureToggles.documentation && ( + + + + )} + + {safeFeatureToggles.sassStyles && ( + + + + )} diff --git a/src/components/FeatureToggleSettings.tsx b/src/components/FeatureToggleSettings.tsx new file mode 100644 index 0000000..4d3c2e1 --- /dev/null +++ b/src/components/FeatureToggleSettings.tsx @@ -0,0 +1,148 @@ +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Label } from '@/components/ui/label' +import { Switch } from '@/components/ui/switch' +import { FeatureToggles } from '@/types/project' +import { Code, Database, Tree, PaintBrush, Flask, Play, BookOpen, Cube, Wrench, FileText, FlowArrow } from '@phosphor-icons/react' +import { ScrollArea } from '@/components/ui/scroll-area' + +interface FeatureToggleSettingsProps { + features: FeatureToggles + onFeaturesChange: (features: FeatureToggles) => void +} + +const featuresList = [ + { + key: 'codeEditor' as keyof FeatureToggles, + label: 'Code Editor', + description: 'Monaco-based code editor with syntax highlighting', + icon: Code + }, + { + key: 'models' as keyof FeatureToggles, + label: 'Database Models', + description: 'Prisma schema designer for database models', + icon: Database + }, + { + key: 'components' as keyof FeatureToggles, + label: 'Component Builder', + description: 'Visual component tree builder for React components', + icon: Tree + }, + { + key: 'componentTrees' as keyof FeatureToggles, + label: 'Component Trees Manager', + description: 'Manage multiple component tree configurations', + icon: Tree + }, + { + key: 'workflows' as keyof FeatureToggles, + label: 'Workflow Designer', + description: 'n8n-style visual workflow automation builder', + icon: FlowArrow + }, + { + key: 'lambdas' as keyof FeatureToggles, + label: 'Lambda Functions', + description: 'Serverless function editor with multiple runtimes', + icon: Code + }, + { + key: 'styling' as keyof FeatureToggles, + label: 'Theme Designer', + description: 'Material UI theme customization and styling', + icon: PaintBrush + }, + { + key: 'flaskApi' as keyof FeatureToggles, + label: 'Flask API Designer', + description: 'Python Flask backend API endpoint designer', + icon: Flask + }, + { + key: 'playwright' as keyof FeatureToggles, + label: 'Playwright Tests', + description: 'E2E testing with Playwright configuration', + icon: Play + }, + { + key: 'storybook' as keyof FeatureToggles, + label: 'Storybook Stories', + description: 'Component documentation and development', + icon: BookOpen + }, + { + key: 'unitTests' as keyof FeatureToggles, + label: 'Unit Tests', + description: 'Component and function unit test designer', + icon: Cube + }, + { + key: 'errorRepair' as keyof FeatureToggles, + label: 'Error Repair', + description: 'Auto-detect and fix code errors', + icon: Wrench + }, + { + key: 'documentation' as keyof FeatureToggles, + label: 'Documentation', + description: 'Project documentation, roadmap, and guides', + icon: FileText + }, + { + key: 'sassStyles' as keyof FeatureToggles, + label: 'Sass Styles', + description: 'Custom Sass/SCSS styling showcase', + icon: PaintBrush + }, +] + +export function FeatureToggleSettings({ features, onFeaturesChange }: FeatureToggleSettingsProps) { + const handleToggle = (key: keyof FeatureToggles, value: boolean) => { + onFeaturesChange({ + ...features, + [key]: value, + }) + } + + const enabledCount = Object.values(features).filter(Boolean).length + const totalCount = Object.keys(features).length + + return ( +
+
+

Feature Toggles

+

+ Enable or disable features to customize your workspace. {enabledCount} of {totalCount} features enabled. +

+
+ + +
+ {featuresList.map(({ key, label, description, icon: Icon }) => ( + + +
+
+
+ +
+
+ {label} + {description} +
+
+ handleToggle(key, checked)} + /> +
+ + + ))} +
+ +
+ ) +} diff --git a/src/types/project.ts b/src/types/project.ts index 285977e..f2e8a82 100644 --- a/src/types/project.ts +++ b/src/types/project.ts @@ -259,6 +259,23 @@ export interface LambdaTrigger { config: Record } +export interface FeatureToggles { + codeEditor: boolean + models: boolean + components: boolean + componentTrees: boolean + workflows: boolean + lambdas: boolean + styling: boolean + flaskApi: boolean + playwright: boolean + storybook: boolean + unitTests: boolean + errorRepair: boolean + documentation: boolean + sassStyles: boolean +} + export interface Project { name: string files: ProjectFile[] @@ -274,4 +291,5 @@ export interface Project { flaskConfig?: FlaskConfig nextjsConfig?: NextJsConfig npmSettings?: NpmSettings + featureToggles?: FeatureToggles }