diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d0e7ee6..cab77b7 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -18,13 +18,7 @@ import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"; import SettingsDialog from "./components/SettingsDialog"; -import { - AppState, - CodeGenerationParams, - EditorTheme, - GeneratedCodeConfig, - Settings, -} from "./types"; +import { AppState, CodeGenerationParams, EditorTheme, Settings } from "./types"; import { IS_RUNNING_ON_CLOUD } from "./config"; import { PicoBadge } from "./components/PicoBadge"; import { OnboardingNote } from "./components/OnboardingNote"; @@ -40,6 +34,7 @@ import HistoryDisplay from "./components/history/HistoryDisplay"; import { extractHistoryTree } from "./components/history/utils"; import toast from "react-hot-toast"; import ImportCodeSection from "./components/ImportCodeSection"; +import { Stack } from "./lib/stacks/types"; const IS_OPENAI_DOWN = false; @@ -60,7 +55,7 @@ function App() { screenshotOneApiKey: null, isImageGenerationEnabled: true, editorTheme: EditorTheme.COBALT, - generatedCodeConfig: GeneratedCodeConfig.HTML_TAILWIND, + generatedCodeConfig: Stack.HTML_TAILWIND, // Only relevant for hosted version isTermOfServiceAccepted: false, accessCode: null, @@ -85,7 +80,7 @@ function App() { if (!settings.generatedCodeConfig) { setSettings((prev) => ({ ...prev, - generatedCodeConfig: GeneratedCodeConfig.HTML_TAILWIND, + generatedCodeConfig: Stack.HTML_TAILWIND, })); } }, [settings.generatedCodeConfig, setSettings]); @@ -289,15 +284,14 @@ function App() { })); }; - // TODO: Rename everything to "stack" instead of "config" - function setStack(stack: GeneratedCodeConfig) { + function setStack(stack: Stack) { setSettings((prev) => ({ ...prev, generatedCodeConfig: stack, })); } - function importFromCode(code: string, stack: GeneratedCodeConfig) { + function importFromCode(code: string, stack: Stack) { setIsImportedFromCode(true); // Set up this project @@ -333,8 +327,8 @@ function App() { setStack(config)} + stack={settings.generatedCodeConfig} + setStack={(config) => setStack(config)} shouldDisableUpdates={ appState === AppState.CODING || appState === AppState.CODE_READY } diff --git a/frontend/src/components/ImportCodeSection.tsx b/frontend/src/components/ImportCodeSection.tsx index 04b2b5a..94d3cf1 100644 --- a/frontend/src/components/ImportCodeSection.tsx +++ b/frontend/src/components/ImportCodeSection.tsx @@ -11,18 +11,16 @@ import { } from "./ui/dialog"; import { Textarea } from "./ui/textarea"; import OutputSettingsSection from "./OutputSettingsSection"; -import { GeneratedCodeConfig } from "../types"; import toast from "react-hot-toast"; +import { Stack } from "../lib/stacks/types"; interface Props { - importFromCode: (code: string, stack: GeneratedCodeConfig) => void; + importFromCode: (code: string, stack: Stack) => void; } function ImportCodeSection({ importFromCode }: Props) { const [code, setCode] = useState(""); - const [stack, setStack] = useState( - undefined - ); + const [stack, setStack] = useState(undefined); const doImport = () => { if (code === "") { @@ -57,10 +55,8 @@ function ImportCodeSection({ importFromCode }: Props) { /> - setStack(config) - } + stack={stack} + setStack={(config: Stack) => setStack(config)} label="Stack:" shouldDisableUpdates={false} /> diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx index 99de309..6dc39d4 100644 --- a/frontend/src/components/OutputSettingsSection.tsx +++ b/frontend/src/components/OutputSettingsSection.tsx @@ -7,10 +7,10 @@ import { SelectTrigger, } from "./ui/select"; import { Badge } from "./ui/badge"; -import { GeneratedCodeConfig } from "../lib/stacks/types"; +import { Stack } from "../lib/stacks/types"; import { STACK_DESCRIPTIONS } from "../lib/stacks/descriptions"; -function generateDisplayComponent(stack: GeneratedCodeConfig) { +function generateDisplayComponent(stack: Stack) { const stackComponents = STACK_DESCRIPTIONS[stack].components; return ( @@ -26,15 +26,15 @@ function generateDisplayComponent(stack: GeneratedCodeConfig) { } interface Props { - generatedCodeConfig: GeneratedCodeConfig | undefined; - setGeneratedCodeConfig: (config: GeneratedCodeConfig) => void; + stack: Stack | undefined; + setStack: (config: Stack) => void; label?: string; shouldDisableUpdates?: boolean; } function OutputSettingsSection({ - generatedCodeConfig, - setGeneratedCodeConfig, + stack, + setStack, label = "Generating:", shouldDisableUpdates = false, }: Props) { @@ -43,20 +43,16 @@ function OutputSettingsSection({
{label}