rename vanilla to "no framework"

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);

frontend/src/components/OutputSettingsSection.tsx

@@ -6,7 +6,6 @@ import {
   SelectTrigger,
 } from "./ui/select";
 import { CSSOption, JSFrameworkOption, OutputSettings } from "../types";
-import { capitalize } from "../lib/utils";
 import toast from "react-hot-toast";
 import { Label } from "@radix-ui/react-label";
 import { Button } from "./ui/button";
@@ -23,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":
@@ -46,7 +56,7 @@ function generateDisplayString(settings: OutputSettings) {
       </div>
     );
   } else if (
-    settings.js === JSFrameworkOption.VANILLA &&
+    settings.js === JSFrameworkOption.NO_FRAMEWORK &&
     settings.css === CSSOption.TAILWIND
   ) {
     return (
@@ -56,7 +66,7 @@ function generateDisplayString(settings: OutputSettings) {
       </div>
     );
   } else if (
-    settings.js === JSFrameworkOption.VANILLA &&
+    settings.js === JSFrameworkOption.NO_FRAMEWORK &&
     settings.css === CSSOption.BOOTSTRAP
   ) {
     return (
@@ -135,12 +145,12 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
                     className="col-span-2 h-8"
                     id="output-settings-js"
                   >
-                    {capitalize(outputSettings.js)}
+                    {displayJSOption(outputSettings.js)}
                   </SelectTrigger>
                   <SelectContent>
                     <SelectGroup>
-                      <SelectItem value={JSFrameworkOption.VANILLA}>
-                        Vanilla
+                      <SelectItem value={JSFrameworkOption.NO_FRAMEWORK}>
+                        No Framework
                       </SelectItem>
                       <SelectItem value={JSFrameworkOption.REACT}>
                         React

frontend/src/types.ts

@@ -9,7 +9,7 @@ export enum CSSOption {
 }
 
 export enum JSFrameworkOption {
-  VANILLA = "vanilla",
+  NO_FRAMEWORK = "vanilla",
   REACT = "react",
   VUE = "vue",
 }