Merge branch 'main' into hosted

2023-11-29 04:50:29 -05:00 · 2023-11-29 04:50:29 -05:00 · 8d3643a2c3
commit 8d3643a2c3
parent 0222cd06a0 56e6f1f608
6 changed files with 187 additions and 65 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -19,6 +19,7 @@
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -56,7 +56,7 @@ function App() {
  );
  const [outputSettings, setOutputSettings] = useState<OutputSettings>({
    css: CSSOption.TAILWIND,
-    js: JSFrameworkOption.VANILLA,
+    js: JSFrameworkOption.NO_FRAMEWORK,
  });
  const [shouldIncludeResultImage, setShouldIncludeResultImage] =
    useState<boolean>(false);
@ -181,22 +181,18 @@ function App() {

      <div className="lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-96 lg:flex-col">
        <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">
-          <div className="flex items-center justify-between mt-10">
+          <div className="flex items-center justify-between mt-10 mb-2">
            <h1 className="text-2xl ">Screenshot to Code</h1>
            <SettingsDialog settings={settings} setSettings={setSettings} />
          </div>
-          {appState === AppState.INITIAL && (
-            <h2 className="text-sm text-gray-500 mb-2">
-              Drag & drop a screenshot to get started.
-            </h2>
-          )}

-          {appState === AppState.INITIAL && (
-            <OutputSettingsSection
-              outputSettings={outputSettings}
-              setOutputSettings={setOutputSettings}
-            />
-          )}
+          <OutputSettingsSection
+            outputSettings={outputSettings}
+            setOutputSettings={setOutputSettings}
+            shouldDisableUpdates={
+              appState === AppState.CODING || appState === AppState.CODE_READY
+            }
+          />

          {IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}

--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@ -6,14 +6,10 @@ import {
  SelectTrigger,
 } from "./ui/select";
 import { CSSOption, JSFrameworkOption, OutputSettings } from "../types";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "./ui/accordion";
-import { capitalize } from "../lib/utils";
 import toast from "react-hot-toast";
+import { Label } from "@radix-ui/react-label";
+import { Button } from "./ui/button";
+import { Popover, PopoverTrigger, PopoverContent } from "./ui/popover";

 function displayCSSOption(option: CSSOption) {
  switch (option) {
@ -26,6 +22,17 @@ function displayCSSOption(option: CSSOption) {
  }
 }

+function displayJSOption(option: JSFrameworkOption) {
+  switch (option) {
+    case JSFrameworkOption.REACT:
+      return "React";
+    case JSFrameworkOption.NO_FRAMEWORK:
+      return "No Framework";
+    default:
+      return option;
+  }
+}
+
 function convertStringToCSSOption(option: string) {
  switch (option) {
    case "tailwind":
@ -37,12 +44,51 @@ function convertStringToCSSOption(option: string) {
  }
 }

+function generateDisplayString(settings: OutputSettings) {
+  if (
+    settings.js === JSFrameworkOption.REACT &&
+    settings.css === CSSOption.TAILWIND
+  ) {
+    return (
+      <div>
+        Generating <span className="font-bold">React</span> +{" "}
+        <span className="font-bold">Tailwind</span> code
+      </div>
+    );
+  } else if (
+    settings.js === JSFrameworkOption.NO_FRAMEWORK &&
+    settings.css === CSSOption.TAILWIND
+  ) {
+    return (
+      <div className="text-gray-800">
+        Generating <span className="font-bold">HTML</span> +{" "}
+        <span className="font-bold">Tailwind</span> code
+      </div>
+    );
+  } else if (
+    settings.js === JSFrameworkOption.NO_FRAMEWORK &&
+    settings.css === CSSOption.BOOTSTRAP
+  ) {
+    return (
+      <div>
+        Generating <span className="font-bold">HTML</span> +{" "}
+        <span className="font-bold">Bootstrap</span> code
+      </div>
+    );
+  }
+}
+
 interface Props {
  outputSettings: OutputSettings;
  setOutputSettings: React.Dispatch<React.SetStateAction<OutputSettings>>;
+  shouldDisableUpdates?: boolean;
 }

-function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
+function OutputSettingsSection({
+  outputSettings,
+  setOutputSettings,
+  shouldDisableUpdates = false,
+}: Props) {
  const onCSSValueChange = (value: string) => {
    window.plausible("OutputSettings", {
      props: { framework: "CSS", value: value },
@ -51,7 +97,7 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
      if (prev.js === JSFrameworkOption.REACT) {
        if (value !== CSSOption.TAILWIND) {
          toast.error(
-            "React only supports Tailwind CSS. Change JS framework to Vanilla to use Bootstrap."
+            'React only supports Tailwind CSS. Change JS framework to "No Framework" to use Bootstrap.'
          );
        }
        return {
@ -85,48 +131,76 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
  };

  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>
-          <div className="flex gap-x-2">Output Settings </div>
-        </AccordionTrigger>
-        <AccordionContent className="gap-y-2 flex flex-col pt-2">
-          <div className="flex justify-between items-center pr-2">
-            <span className="text-sm">CSS</span>
-            <Select value={outputSettings.css} onValueChange={onCSSValueChange}>
-              <SelectTrigger className="w-[180px]">
-                {displayCSSOption(outputSettings.css)}
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value={CSSOption.TAILWIND}>Tailwind</SelectItem>
-                  <SelectItem value={CSSOption.BOOTSTRAP}>Bootstrap</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex justify-between items-center pr-2">
-            <span className="text-sm">JS Framework</span>
-            <Select
-              value={outputSettings.js}
-              onValueChange={onJsFrameworkChange}
-            >
-              <SelectTrigger className="w-[180px]">
-                {capitalize(outputSettings.js)}
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value={JSFrameworkOption.VANILLA}>
-                    Vanilla
-                  </SelectItem>
-                  <SelectItem value={JSFrameworkOption.REACT}>React</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
+    <div className="flex flex-col gap-y-2 justify-between text-sm">
+      {generateDisplayString(outputSettings)}{" "}
+      {!shouldDisableUpdates && (
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline">Customize</Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80 text-sm">
+            <div className="grid gap-4">
+              <div className="space-y-2">
+                <h4 className="font-medium leading-none">Code Settings</h4>
+                <p className="text-muted-foreground">
+                  Customize your code output
+                </p>
+              </div>
+              <div className="grid gap-2">
+                <div className="grid grid-cols-3 items-center gap-4">
+                  <Label htmlFor="output-settings-js">JS</Label>
+                  <Select
+                    value={outputSettings.js}
+                    onValueChange={onJsFrameworkChange}
+                  >
+                    <SelectTrigger
+                      className="col-span-2 h-8"
+                      id="output-settings-js"
+                    >
+                      {displayJSOption(outputSettings.js)}
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value={JSFrameworkOption.NO_FRAMEWORK}>
+                          No Framework
+                        </SelectItem>
+                        <SelectItem value={JSFrameworkOption.REACT}>
+                          React
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="grid grid-cols-3 items-center gap-4">
+                  <Label htmlFor="output-settings-css">CSS</Label>
+                  <Select
+                    value={outputSettings.css}
+                    onValueChange={onCSSValueChange}
+                  >
+                    <SelectTrigger
+                      className="col-span-2 h-8"
+                      id="output-settings-css"
+                    >
+                      {displayCSSOption(outputSettings.css)}
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value={CSSOption.TAILWIND}>
+                          Tailwind
+                        </SelectItem>
+                        <SelectItem value={CSSOption.BOOTSTRAP}>
+                          Bootstrap
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
  );
 }

--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@ -9,7 +9,7 @@ export enum CSSOption {
 }

 export enum JSFrameworkOption {
-  VANILLA = "vanilla",
+  NO_FRAMEWORK = "vanilla",
  REACT = "react",
  VUE = "vue",
 }
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -805,6 +805,28 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-primitive" "1.0.3"

+"@radix-ui/react-popover@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
+  integrity sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-popper@1.1.3":
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"