chatbot-editor 1.0.0

package/src/Components/Question.tsx

@@ -0,0 +1,104 @@
+import {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import Bubble from "./Bubble";
+import Answers from "./Answers";
+import {useCurrentQuestion} from "../CurrentQuestionHook";
+import * as React from "react";
+import Arrow from "./Arrow";
+import type {SetState} from "../utils.ts";
+import type {TAction, TAnswers} from "../TQuestion.ts";
+import {CiWarning} from "react-icons/ci";
+
+interface QuestionProps {
+	id: string;
+	text: string | string[];
+	goto?: string;
+	answers?: TAnswers[];
+	action?: TAction;
+	reloadArrow: boolean;
+	setReloadArrow: SetState<boolean>;
+	position: {x: number, y: number};
+}
+
+export default function Question(props: QuestionProps) {
+	const container = useRef<HTMLDivElement>(null);
+	const [position, setPosition] = useState(props.position);
+	const [clicked, setClicked] = useState(false);
+	const [, setOpen] = useState(false);
+	const [, setQuestion] = useCurrentQuestion();
+	const onMouseDown = useCallback((e: React.MouseEvent) => {
+		if(e.button !== 0) return;
+		setClicked(true);
+		setOpen(true);
+	}, []);
+	const onMouseUp = useCallback((e: MouseEvent) => {
+		if(e.button !== 0) return;
+		if(e.target !== container.current && (container.current && !container.current.contains(e.target as Node))) return;
+		setClicked(false);
+		setOpen(prev => {
+			if(prev) {
+				setQuestion(props);
+			}
+			return true;
+		})
+	}, [props, setQuestion]);
+	const onMouseMove = useCallback((e: MouseEvent) => {
+		setOpen(false);
+		setPosition(prev => {
+			return {
+				x: prev.x + e.movementX,
+				y: prev.y + e.movementY
+			}
+		});
+		props.setReloadArrow(prev => !prev);
+	}, [setPosition, props]);
+	useEffect(() => {
+		if(clicked) {
+			document.addEventListener("mousemove", onMouseMove);
+		}
+		return () => {
+			document.removeEventListener("mousemove", onMouseMove)
+		}
+	}, [clicked, onMouseMove]);
+	useEffect(() => {
+		document.addEventListener("mouseup", onMouseUp);
+		return () => document.removeEventListener("mouseup", onMouseUp);
+	}, [onMouseUp]);
+	const gotoPosition = useMemo(() => {
+		let pos: {x: number, y: number} | undefined = undefined;
+		if(props.goto || props.action?.goto) {
+			const toElement = document.getElementById(props.goto ?? props.action?.goto ?? "");
+			if(toElement) {
+				pos = {x: toElement.offsetLeft, y: toElement.offsetTop};
+				pos.x -= (position.x - position.x % 20);
+				pos.y -= (position.y - position.y % 20);
+				pos.y += 18
+			} else {
+				pos = undefined;
+			}
+		}
+		return pos;
+	}, [props.goto, props.action?.goto, position, props.reloadArrow]);
+	return (
+		<div id={props.id} className={"w-50 h-64 bg-stone-900 border border-neutral-400/20 rounded z-10 absolute flex flex-col gap-1 pb-1"} style={{top: position.y - (position.y % 20), left: position.x - (position.x % 20)}} onMouseDown={onMouseDown} ref={container}>
+			<h2 title={props.id} className={"text-stone-100 m-1 min-h-8 bg-neutral-900 px-2 py-1 font-mono overflow-hidden text-ellipsis"}>{props.id}</h2>
+			<div className={"p-1 flex flex-col gap-1 max-h-32 overflow-x-hidden overflow-y-auto"}>
+				{ typeof props.text === "string" ? <Bubble text={props.text}/> : props.text.map((v, i) => <Bubble text={v} key={i}/>)}
+			</div>
+			<div className={"absolute -right-15 top-1 flex flex-col gap-1.5"}>
+				{props.answers?.map((v, i) => <Answers text={v.text} key={i} next={v.next} reloadArrows={props.reloadArrow}/>)}
+			</div>
+			{props.id === "start" && <div className={"absolute top-2 -left-4 w-6 h-6 rounded-full border-2 border-green-800 text-center flex items-center justify-center"}><div className={"bg-green-800 w-4 h-4 rounded-full"}/></div>}
+			{(props.goto || props.action?.goto) && <div>
+                <div className={"absolute top-2 -right-3 w-6 h-6 rounded-full border-2 border-violet-900 text-center flex justify-center items-center"}><div className={"bg-violet-900 w-4 h-4 rounded-full"}/></div>
+				{gotoPosition && <Arrow from={{x: 200, y: 20}} to={gotoPosition}/> || <CiWarning className={"text-orange-500 absolute top-3 -right-7"}/>}
+            </div>}
+			<div className={"grow"}/>
+			{ props.action && <div className={"font-mono text-stone-200 px-4 mx-1 rounded bg-neutral-800 overflow-hidden"}>
+				<p className={"font-sans"}>Action</p>
+				{props.action.action === "set" && <p><span>{props.action.property}</span> == {props.action.value}</p> }
+				{props.action.action === "ask" && <p><span>{props.action.property}</span> == user input</p> }
+				{props.action.action === "end" && <p>Chatbot end</p> }
+			</div>}
+		</div>
+	)
+}

package/src/Components/Select.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import {useMemo, useRef, useState} from "react";
+import {clsx} from "clsx";
+import {BsChevronDown} from "react-icons/bs";
+
+export interface Option {
+	value: string;
+	label: React.ReactNode;
+}
+
+interface SelectProps {
+	options: Option[];
+	id?: string;
+	value: string;
+	onChange: (v: string) => void;
+}
+
+export default function Select(props: SelectProps) {
+	const select = useRef<HTMLSelectElement | null>(null);
+	const id = useMemo(() => {
+		return props.id ?? (Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15));
+	}, [props.id]);
+	const [visible, setVisible] = useState(false);
+	return (
+		<label htmlFor={id}>
+			<div className={"relative bg-stone-800 rounded-lg h-8 flex justify-between items-center px-2"} onClick={() => setVisible(prev => !prev)}>
+				<p>{props.options.find(o => o.value == props.value)?.label ?? props.value}</p>
+				<button><BsChevronDown/></button>
+				<div className={clsx("absolute bg-stone-800 pt-2 -mt-2 z-0 w-full rounded-b-lg top-full left-0", visible || "hidden")}>
+					{props.options.map((v, i) =>
+						<p key={i} className={"p-1 hover:bg-stone-900"} onClick={() => {
+							if(select.current) {
+								select.current.value = v.value;
+								props.onChange(v.value);
+							}
+						}}>{v.label}</p>
+					)}
+				</div>
+			</div>
+			<select className={"hidden"} id={id} onChange={e => props.onChange(e.target.value)} value={props.value} ref={select}>
+				{props.options.map((v, i) => <option value={v.value} key={i}>{v.label}</option>)}
+			</select>
+		</label>
+	)
+}

package/src/Components/SideBar.tsx

@@ -0,0 +1,31 @@
+import {type ReactNode} from "react";
+import type {SetState} from "../utils.ts";
+import {clsx} from "clsx";
+import {BsCheck, BsX} from "react-icons/bs";
+import React from "react";
+
+interface SideBarProps {
+	display: boolean;
+	setDisplay: SetState<boolean>;
+	children: ReactNode;
+	onClose?: () => void;
+	onValidate?: () => void;
+}
+
+export default function SideBar(props: SideBarProps) {
+	return (
+		<div className={clsx("fixed transition w-1/3 h-screen top-0 left-0 bg-stone-900 z-50 flex flex-col", props.display && "translate-x-0" || "-translate-x-full")}>
+			<div className={"flex justify-end"}>
+				<button className={"mx-2 my-1 p-1 rounded cursor-pointer border border-stone-200/30 aspect-square w-8"} onClick={() => {
+					props.setDisplay(false);
+					if(props.onClose) {
+						props.onClose();
+				}}}>
+					<BsX className={"w-6 h-6"}/>
+				</button>
+				{props.onValidate && <button className={"mx-2 my-1 p-1 rounded cursor-pointer border border-stone-200/30 aspect-square w-8"} onClick={() => props.onValidate && props.onValidate()}><BsCheck className={"w-6 h-6"}/></button>}
+			</div>
+			<div className={"p-2 grow overflow-hidden"}>{props.children}</div>
+		</div>
+	)
+}

package/src/CurrentQuestionHook.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import {createContext, type ReactNode, useContext, useState} from "react";
+import type TQuestion from "./TQuestion.ts";
+import type {SetState} from "./utils.ts";
+
+const CurrentQuestionContext = createContext<[TQuestion | null, SetState<TQuestion | null>]>([null, () => {}]);
+
+interface CurrentQuestionProviderProps {
+	children: ReactNode;
+}
+
+export function CurrentQuestionProvider(props: CurrentQuestionProviderProps) {
+	const [question, setQuestion] = useState<TQuestion | null>(null);
+	return <CurrentQuestionContext.Provider value={[question, setQuestion]}>
+		{props.children}
+	</CurrentQuestionContext.Provider>
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useCurrentQuestion() {
+	return  useContext(CurrentQuestionContext);
+}

package/src/TQuestion.ts

@@ -0,0 +1,23 @@
+export default interface TQuestion {
+	id: string;
+	text: string | string[];
+	answers?: TAnswers[];
+	goto?: string;
+	action?: TAction;
+	position: {x: number, y: number};
+}
+
+export interface TAnswers {
+	text: string;
+	next: string;
+	action?: TAction
+}
+
+export interface TAction {
+	action: TActionValue
+	property?: string;
+	value?: any;
+	goto?: string;
+}
+
+export type TActionValue = "set" | "ask" | "end";

package/src/UI.tsx

@@ -0,0 +1,138 @@
+import SideBar from "./Components/SideBar";
+import {useEffect, useState} from "react";
+import {useCurrentQuestion} from "./CurrentQuestionHook";
+import type TQuestion from "./TQuestion.ts";
+import type { TAnswers, TAction } from "./TQuestion.ts";
+import type {SetState} from "./utils.ts";
+import Button from "./Components/Button";
+import Input from "./Components/Input";
+import {clsx} from "clsx";
+import Select from "./Components/Select";
+import {BsPlus} from "react-icons/bs";
+import {LuSave} from "react-icons/lu";
+import {MdOutlineFileOpen} from "react-icons/md";
+import {BiDownload, BiUpload} from "react-icons/bi";
+import React from "react";
+
+interface UIProps {
+	questions: TQuestion[];
+	setQuestions: SetState<TQuestion[]>;
+	addQuestion: (initPos: {x: number, y: number}) => void;
+	editQuestion: (id: string, data: TQuestion) => void;
+	deleteQuestion: (id: string) => void;
+	setReloadArrow: SetState<boolean>;
+	save?: (questions: TQuestion[]) => void;
+	load?: () => Promise<TQuestion[]>;
+	export?: (questions: TQuestion[]) => void;
+	import?: () => Promise<TQuestion[]>;
+}
+
+export default function UI(props: UIProps) {
+	const [question, setQuestion] = useCurrentQuestion();
+	const [id, setId] = useState("");
+	const [goto, setGoto] = useState<string>();
+	const [text, setText] = useState<string[]>([""]);
+	const [answers, setAnswers] = useState<TAnswers[]>([]);
+	const [action, setAction] = useState<TAction | undefined>(undefined);
+	useEffect(() => {
+		if(question) {
+			setId(question.id);
+			if(typeof question.text === "string") {
+				setText([question.text]);
+			} else {
+				setText(question.text);
+			}
+			setGoto(question.goto);
+			setAnswers(question.answers ?? []);
+			setAction(question.action);
+		}
+	}, [question]);
+	return (
+		<div className={"fixed top-0 left-0 w-0 h-0 overflow-visible text-white z-10"}>
+			<SideBar display={question !== null} setDisplay={(value) => { if(typeof value === "function") value = value(question !== null); if(!value) setQuestion(null) }} onClose={() => setQuestion(null)} onValidate={() => {
+				const t = text.length === 1 ? text[0] : text;
+				props.editQuestion(question?.id ?? "", {id: id, text: t, goto: goto, answers: answers, position: {x: 0, y: 0}, action: action});
+				setQuestion(null);
+			}}>
+				<div className={"flex flex-col gap-2 h-full pb-8 overflow-y-auto overflow-x-hidden"}>
+					<Input type={"text"} value={id} onChange={(e) => setId(e.target.value)} label={"ID"}/>
+					<div className={"bg-stone-950 p-2 rounded-lg flex flex-col gap-1"}>
+						<p className={"text-lg font-bold "}>Text</p>
+						{text.map((value, index) => <div className={"flex gap-1"} key={index}>
+							<Input type={"text"} value={value} onChange={(e) => setText(prev => prev.map((v, i) => i === index ? e.target.value : v))}/>
+							<Button onClick={() => setText(prev => prev.filter((_, i) => i !== index))}>-</Button>
+						</div>)}
+						<Button onClick={() => setText(prev => [...prev, ""])}>+</Button>
+					</div>
+					<div className={"bg-stone-950 p-2 rounded-lg flex flex-col gap-1"}>
+						<p className={"text-lg font-bold"}>Answers</p>
+						{answers.map((value, index) => <div className={"flex ga flex-col p-1"} key={index}>
+							<div className={"flex gap-1 items-end"}>
+								<Input type={"text"} value={value.text} onChange={(e) => setAnswers(prev => prev.map((v, i) => i === index ? {...v, text: e.target.value} : v))} label={"Text"}/>
+								<Input type={"text"} value={value.next} onChange={(e) => setAnswers(prev => prev.map((v, i) => i === index ? {...v, next: e.target.value} : v))} label={"Next"}/>
+								<Button onClick={() => setAnswers(prev => prev.filter((_, i) => i !== index))}>-</Button>
+							</div>
+							<div className={"flex flex-col gap-1"}>
+								<p>Action</p>
+								<Select options={[{value: "none", label: "None"}, {value: "set", label: "Set"}]} value={value.action?.action ?? "none"} onChange={ (v) => v === "none" ?
+									setAnswers(prev => prev.map((v, i) => i === index ? {...v, action: undefined} : v)) :
+									setAnswers(prev => prev.map((v, i) => i === index ? {...v, action: {action: "set"}} : v))
+								}/>
+								<Input className={clsx(value.action === undefined && "hidden")} label={"Property"} value={value.action?.property ?? ""} onChange={e => setAnswers(prev => prev.map((v, i) => i === index ? {...v, action: {action: value.action!.action, property: e.target.value, value: value.action?.value}} : v))}/>
+								<Input className={clsx(value.action === undefined && "hidden")} label={"Value"} value={value.action?.value ?? ""} onChange={e => setAnswers(prev => prev.map((v, i) => i === index ? {...v, action: {action: value.action!.action, value: e.target.value, property: value.action?.property}} : v))}/>
+							</div>
+						</div>)}
+						<Button disabled={goto !== undefined} onClick={() => setAnswers(prev => [...prev, {text: "", next: ""}])}>+</Button>
+					</div>
+					<div className={"bg-stone-950 p-2 rounded-lg flex flex-col gap-1"}>
+						<p className={"text-lg font-bold"}>Action</p>
+						<Select options={[{value: "ask", label: "Ask"}, {value: "set", label: "Set"}, {value: "end", label: "End"}, {value: "none", label: "None"}]} value={action?.action ?? "none"} onChange={(v) => {
+							switch (v) {
+								case "ask":
+									setAction(prev => ({action: "ask", property: prev?.property, value: undefined}));
+									break;
+								case "end":
+									setAction({action: "end", property: undefined, value: undefined});
+									break;
+								case "set":
+									setAction(prev => ({action: "set", property: prev?.property, value: prev?.value}));
+									break;
+								case "none":
+									setAction(undefined);
+									break;
+							}
+						}}/>
+						<Input className={clsx((action === undefined || action.action === "end") && "hidden")} type={"text"} label={"Property"} value={action?.property ?? ""} onChange={(e) => setAction(prev => prev ? ({...prev, property: e.target.value === "" ? undefined : e.target.value}) : undefined)}/>
+						<Input className={clsx((action === undefined || action.action !== "set") && "hidden")} type={"text"} label={"Value"} value={action?.value ?? ""} onChange={(e) => setAction(prev => prev ? ({...prev, value: e.target.value === "" ? undefined : e.target.value}) : undefined)}/>
+						<Input className={clsx((action === undefined || action.action !== "ask") && "hidden")} type={"text"} label={"Goto"} value={action?.goto ?? ""} onChange={(e) => setAction(prev => prev ? ({...prev, goto: e.target.value === "" ? undefined : e.target.value}) : undefined)}/>
+					</div>
+					<Input disabled={answers.length !== 0} type={"text"} label={"Goto"} value={goto ?? ""} onChange={(e) => setGoto(e.target.value === "" ? undefined : e.target.value)}/>
+					<div className={"grow"}/>
+					<Button onClick={() => {
+						props.deleteQuestion(question?.id ?? "")
+						setQuestion(null);
+					}}>Delete</Button>
+				</div>
+			</SideBar>
+			<div className={"p-2 fixed right-8 top-0 flex gap-2"}>
+				<Button onClick={() => props.addQuestion({x: 20, y: 20})}><BsPlus className={"w-6 h-6"}/></Button>
+				{props.save && <Button onClick={() => props.save && props.save(props.questions)}><LuSave className={"w-6 h-6"}/></Button>}
+				{props.load && <Button onClick={async () => {
+					if(props.load) {
+						const questions = await props.load();
+						props.setQuestions(questions);
+						props.setReloadArrow(prev => !prev);
+					}
+				}}><MdOutlineFileOpen className={"w-6 h-6"}/></Button>}
+				{props.export && <Button onClick={() => props.export && props.export(props.questions)}><BiDownload className={"w-6 h-6"}/></Button>}
+				{ props.import &&<Button onClick={async () => {
+					if(props.import) {
+						const questions = await props.import();
+						props.setQuestions(questions);
+						props.setReloadArrow(prev => !prev);
+					}
+				}}><BiUpload className={"w-6 h-6"}/></Button>}
+			</div>
+		</div>
+	)
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+import App from "./App";
+import type TQuestion from "./TQuestion.ts";
+
+export {
+	App,
+	type TQuestion
+}

package/src/main.tsx

@@ -0,0 +1,114 @@
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
+import './index.css'
+import App from "./App";
+import type TQuestion from "./TQuestion.ts";
+import type { TAction, TAnswers } from "./TQuestion.ts";
+import React from "react";
+
+const save = (questions: TQuestion[]) => {
+	const save = questions.map(q => {
+		const pos = document.getElementById(q.id)!.getBoundingClientRect();
+		q.position.x = pos.x;
+		q.position.y = pos.y;
+		return q;
+	});
+	const file = URL.createObjectURL(new Blob([JSON.stringify(save)], {type: "application/json"}));
+	const a = document.createElement("a");
+	a.href = file;
+	a.download = "questions.json";
+	a.click();
+	URL.revokeObjectURL(file);
+};
+
+const download = (questions: TQuestion[]) => {
+	const result = {} as Record<string, {question: string | string[], goto?: string, answers: TAnswers[] | undefined, action?: TAction}>;
+	questions.forEach(q => result[q.id] = {
+		question: q.text,
+		goto: q.goto,
+		action: q.action,
+		answers: q.answers
+	});
+	const file = URL.createObjectURL(new Blob([JSON.stringify(result)], {type: "application/json"}));
+	const a = document.createElement("a");
+	a.href = file;
+	a.download = "questions.json";
+	a.click();
+	URL.revokeObjectURL(file);
+};
+
+const load = async () => {
+	const fileLoader = document.createElement("input");
+	fileLoader.type = "file";
+	fileLoader.accept = ".json";
+	const p = new Promise<TQuestion[]>((resolve, reject) => {
+		fileLoader.addEventListener("change", () => {
+			if(fileLoader.files?.length === 1) {
+				fileLoader.files[0].text().then(v => {
+					const questions = JSON.parse(v);
+					if(typeof questions === "object" && questions instanceof Array) {
+						const validate = questions.filter(q => {
+							return typeof q["id"] === "string" && typeof q["text"] === "string" && typeof q["position"] === "object" && typeof q["position"]["x"] === "number" && typeof q["position"]["y"] === "number"
+						});
+						if(validate.length !== questions.length) {
+							console.error("Invalid file format");
+							return;
+						}
+						resolve(questions as TQuestion[]);
+					} else {
+						reject("Invalid file format");
+					}
+				}).catch(reject);
+			} else {
+				reject("You must select only one file");
+			}
+		});
+	});
+	fileLoader.click();
+	return p;
+}
+
+const importFile = async () => {
+	const fileLoader = document.createElement("input");
+	fileLoader.type = "file";
+	fileLoader.accept = ".json";
+	const p = new Promise<TQuestion[]>((resolve, reject) => {
+		fileLoader.addEventListener("change", () => {
+			if (fileLoader.files?.length === 1) {
+				fileLoader.files[0].text().then(v => {
+					const questions = JSON.parse(v);
+					if (typeof questions === "object") {
+						const validate = Object.values<any>(questions).filter(q => {
+							return typeof q["question"] === "string" || (typeof q["question"] === "object" && q["question"] instanceof Array)
+						});
+						if (validate.length !== Object.values(questions).length) {
+							reject("Invalid file format");
+							return;
+						}
+						const tmp = Object.keys(questions).map((id, index) => {
+							return {
+								id: id,
+								text: questions[id]["question"],
+								goto: questions[id]["goto"] ?? undefined,
+								answers: questions[id]["answers"] ?? [],
+								position: {x: index % 5 * 260 + 20, y: Math.floor(index / 5) * 300 + 20},
+								action: questions[id]["action"] ?? undefined
+							} as TQuestion;
+						});
+						resolve(tmp);
+					} else {
+						reject("Invalid file format");
+					}
+				}).catch(reject);
+			}
+		});
+	});
+	fileLoader.click();
+	return p;
+}
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<App save={save} load={load} export={download} import={importFile}/>
+	</StrictMode>,
+)

package/src/utils.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+
+export type SetState<T> = React.Dispatch<React.SetStateAction<T>>;

package/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "declaration": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "moduleResolution": "bundler"
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from "@tailwindcss/vite"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})