add select UI Component and check options

frontend/src/App.tsx

@@ -25,6 +25,7 @@ import {
   CSSOption,
   OutputSettings,
   JSFrameworkOption,
+  UIComponentOption,
 } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
@@ -57,6 +58,7 @@ function App() {
   const [outputSettings, setOutputSettings] = useState<OutputSettings>({
     css: CSSOption.TAILWIND,
     js: JSFrameworkOption.VANILLA,
+    components: UIComponentOption.HTML,
   });
   const [shouldIncludeResultImage, setShouldIncludeResultImage] =
     useState<boolean>(false);

frontend/src/components/OutputSettingsSection.tsx

@@ -5,7 +5,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from "./ui/select";
-import { CSSOption, JSFrameworkOption, OutputSettings } from "../types";
+import { CSSOption, UIComponentOption, JSFrameworkOption, OutputSettings } from "../types";
 import {
   Accordion,
   AccordionContent,
@@ -14,6 +14,7 @@ import {
 } from "./ui/accordion";
 import { capitalize } from "../lib/utils";
 import toast from "react-hot-toast";
+import { useEffect } from "react";
 
 function displayCSSOption(option: CSSOption) {
   switch (option) {
@@ -54,6 +55,7 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
         return {
           css: CSSOption.TAILWIND,
           js: JSFrameworkOption.REACT,
+          components: UIComponentOption.HTML
         };
       } else {
         return {
@@ -69,6 +71,7 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
       setOutputSettings(() => ({
         css: CSSOption.TAILWIND,
         js: value as JSFrameworkOption,
+        components: UIComponentOption.HTML
       }));
     } else {
       setOutputSettings((prev) => ({
@@ -78,6 +81,80 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
     }
   };
 
+  const onUIComponentOptionChange = (value: string) => {
+    if (value === UIComponentOption.IONIC) {
+      setOutputSettings(() => ({
+        css: CSSOption.TAILWIND,
+        js: JSFrameworkOption.VANILLA,
+        components: value as UIComponentOption
+      }));
+    } else {
+      setOutputSettings((prev) => ({
+        ...prev,
+        components: value as UIComponentOption,
+      }));
+    }
+  };
+
+
+  const checkUIComponentOptionOrDefault = (valueItem: UIComponentOption  ) :  UIComponentOption  => {
+    switch (valueItem) {
+      case UIComponentOption.IONIC:
+        if (outputSettings.js != JSFrameworkOption.VANILLA || outputSettings.css != CSSOption.TAILWIND) {
+          return UIComponentOption.HTML
+        }
+    }
+    return valueItem;
+  }
+
+  const checkCSSOptionOrDefault = (valueItem: CSSOption  ) :  CSSOption  => {
+    switch (valueItem) {
+      default:
+        return valueItem;
+    }
+  }
+
+  const checkJSFrameworkOptionOrDefault = (valueItem: JSFrameworkOption  ) :  JSFrameworkOption  => {
+    switch (valueItem) {
+      case JSFrameworkOption.REACT:
+        if(outputSettings.css != CSSOption.TAILWIND) {
+          return JSFrameworkOption.VANILLA
+        }
+        break;
+    }
+    return valueItem;
+  }
+
+  useEffect(() => {
+    checkOutputSettingsOptions();
+  }, [outputSettings]);
+
+  const checkOutputSettingsOptions = () => {
+    if ( isHiddenOption(outputSettings.css) || isHiddenOption(outputSettings.js) || isHiddenOption(outputSettings.components))
+      {
+        setOutputSettings((prev) => {
+          return {
+            css: checkCSSOptionOrDefault(prev.css),
+            js: checkJSFrameworkOptionOrDefault(prev.js),
+            components: checkUIComponentOptionOrDefault(prev.components),
+          };
+        })
+      }
+  };
+
+  const isHiddenOption = ( option : CSSOption| JSFrameworkOption | UIComponentOption ) : boolean => {
+    if (Object.values(CSSOption).includes(option as CSSOption)){
+      return checkCSSOptionOrDefault(option as CSSOption) != option
+    }
+    if (Object.values(JSFrameworkOption).includes(option as JSFrameworkOption)){
+      return checkJSFrameworkOptionOrDefault(option as JSFrameworkOption) != option
+    }
+    if (Object.values(UIComponentOption).includes(option as UIComponentOption)){
+      return checkUIComponentOptionOrDefault(option as UIComponentOption) != option
+    }
+    return true
+  }
+
   return (
     <Accordion type="single" collapsible className="w-full">
       <AccordionItem value="item-1">
@@ -113,11 +190,31 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
                   <SelectItem value={JSFrameworkOption.VANILLA}>
                     Vanilla
                   </SelectItem>
-                  <SelectItem value={JSFrameworkOption.REACT}>React</SelectItem>
+                  <SelectItem value={JSFrameworkOption.REACT} disabled={isHiddenOption(JSFrameworkOption.REACT)}>React</SelectItem>
                 </SelectGroup>
               </SelectContent>
             </Select>
           </div>
+          <div className="flex justify-between items-center pr-2">
+            <span className="text-sm">Component Library</span>
+            <Select
+              value={outputSettings.components}
+              onValueChange={onUIComponentOptionChange}
+            >
+              <SelectTrigger className="w-[180px]">
+                {capitalize(outputSettings.components)}
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value={UIComponentOption.HTML}>HTML</SelectItem>
+                  <SelectItem value={UIComponentOption.IONIC} disabled={isHiddenOption(UIComponentOption.IONIC)}>Ionic</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex justify-between pr-2 mt-2"> 
+            <span className="text-sm text-gray-500">Output: {outputSettings.js} + {outputSettings.css} + {outputSettings.components}</span>
+          </div>
         </AccordionContent>
       </AccordionItem>
     </Accordion>

frontend/src/types.ts

@@ -14,9 +14,15 @@ export enum JSFrameworkOption {
   VUE = "vue",
 }
 
+export enum UIComponentOption {
+  HTML = 'HTML',
+  IONIC = 'ionic'
+}
+
 export interface OutputSettings {
   css: CSSOption;
   js: JSFrameworkOption;
+  components: UIComponentOption;
 }
 
 export interface Settings {