Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add select UI Component and check options

Browse Source
This commit is contained in:
dialmedu 2023-11-29 00:09:23 -05:00
parent 9d68505c98
commit 7e504ebbdd
3 changed files with 107 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

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

101
frontend/src/components/OutputSettingsSection.tsx
View File

@ -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>

6
frontend/src/types.ts
View File

@ -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 {