feat: choice single multi toggle

src/components/survey-generator/create-survey.tsx

@@ -59,8 +59,13 @@ export const CreateSurvey = () => {
         case "choice":
           return {
             type: "choice",
+            variant: "single",
             question: "",
-            options: [] as ChoiceQuestion["options"],
+            options: [
+              {
+                id: generateId(),
+              },
+            ] as ChoiceQuestion["options"],
           } as ChoiceQuestion;
       }
     };

src/components/survey-generator/question-blocks/choice.tsx

@@ -1,14 +1,24 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { generateId } from "@/lib/utils";
 import { ChoiceQuestion, SurveyDefinition } from "@/types/survey";
-import { FormApi } from "@tanstack/react-form";
+import { FormApi, useField } from "@tanstack/react-form";
 import { valibotValidator } from "@tanstack/valibot-form-adapter";
-import { X } from "lucide-react";
+import { CheckSquare2, ChevronDown, CircleDot, X } from "lucide-react";
 import {
   QuestionCard,
   QuestionCardDeleteButton,
+  QuestionCardHeader,
   QuestionCardItem,
   QuestionCardTitle,
 } from "../question-card";
@@ -18,17 +28,49 @@ type Props = {
   form: FormApi<SurveyDefinition, typeof valibotValidator>;
 };
 
-/*
-[ ] Toggle Single/Multiple
-*/
+const variants: { [key in ChoiceQuestion["variant"]]: string } = {
+  single: "Single Choice",
+  multiple: "Multiple Choice",
+  dropdown: "Dropdown",
+};
+
+const iconClassName = "text-muted-foreground";
 
 export const ChoiceFormField = ({ questionIndex, form }: Props) => {
+  const variantField = useField({
+    name: `questions[${questionIndex}].variant`,
+    form,
+  });
+
+  const variantValue = variantField.getValue() as string;
+
   return (
     <QuestionCard key={questionIndex}>
       <QuestionCardDeleteButton
         onClick={() => form.removeFieldValue(`questions`, questionIndex)}
       />
-      <QuestionCardTitle>Choice Question</QuestionCardTitle>
+      <QuestionCardHeader>
+        <Select
+          onValueChange={(variant) => variantField.setValue(variant)}
+          defaultValue={variantValue}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select a variant" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Variants</SelectLabel>
+              {Object.entries(variants).map(([value, label]) => (
+                <SelectItem key={value} value={value}>
+                  {label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
+        <QuestionCardTitle>Choice Question</QuestionCardTitle>
+      </QuestionCardHeader>
       <form.Field
         name={`questions[${questionIndex}].question`}
         children={(field) => (
@@ -62,6 +104,15 @@ export const ChoiceFormField = ({ questionIndex, form }: Props) => {
                         children={(subField) => {
                           return (
                             <div className="flex gap-2 items-center">
+                              {variantValue === "single" && (
+                                <CircleDot className={iconClassName} />
+                              )}
+                              {variantValue === "multiple" && (
+                                <CheckSquare2 className={iconClassName} />
+                              )}
+                              {variantValue === "dropdown" && (
+                                <ChevronDown className={iconClassName} />
+                              )}
                               <Input
                                 type="text"
                                 placeholder="Option"

src/components/survey-generator/question-card.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { Card } from "../ui/card";
 import { cn } from "@/lib/utils";
 import { X } from "lucide-react";
+import React, { Children } from "react";
 import { Button } from "../ui/button";
+import { Card } from "../ui/card";
 
 const QuestionCard = React.forwardRef<
   HTMLDivElement,
@@ -23,6 +23,21 @@ const QuestionCardItem = React.forwardRef<
   <div ref={ref} className={cn("flex flex-col gap-2 ", className)} {...props} />
 ));
 
+const QuestionCardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "grid grid-flow-col justify-center items-center w-full",
+      Children.count(props.children) === 1 ? "grid-cols-1" : "grid-cols-3",
+      className
+    )}
+    {...props}
+  />
+));
+
 const QuestionCardTitle = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
@@ -54,7 +69,8 @@ const QuestionCardDeleteButton = React.forwardRef<
 
 export {
   QuestionCard,
+  QuestionCardDeleteButton,
+  QuestionCardHeader,
   QuestionCardItem,
   QuestionCardTitle,
-  QuestionCardDeleteButton,
 };

src/hooks/useStorage.ts

@@ -1,19 +1,20 @@
-import { SurveyDefinition, SurveyDefinitionWithId } from "@/types/survey";
+import { generateId } from "@/lib/utils";
+import { SurveyDefinition } from "@/types/survey";
 import { useEffect, useMemo, useState } from "react";
 
 const storageKey = "surveys";
 
 export const useStorage = () => {
   const [allSurveys, setAllSurveys] = useState<
-    Record<string, SurveyDefinitionWithId>
+    Record<string, SurveyDefinition>
   >({});
 
   useEffect(() => {
     setAllSurveys(getSurveys());
   }, []);
 
   const save = (surveyDefinition: SurveyDefinition) => {
-    const id = surveyDefinition.id || Math.random().toString(36).substring(7);
+    const id = surveyDefinition.id || generateId();
     const surveys = getSurveys();
     surveys[id] = { ...surveyDefinition, id };
     localStorage.setItem(storageKey, JSON.stringify(surveys));
@@ -23,7 +24,7 @@ export const useStorage = () => {
     return id;
   };
 
-  const getSurveys = (): Record<string, SurveyDefinitionWithId> => {
+  const getSurveys = (): Record<string, SurveyDefinition> => {
     const surveys = localStorage.getItem(storageKey) || "{}";
     return JSON.parse(surveys);
   };

src/types/survey.ts

@@ -20,6 +20,11 @@ export const ChoiceQuestion = v.merge([
   SurveyId,
   v.object({
     type: v.literal("choice"),
+    variant: v.union([
+      v.literal("single"),
+      v.literal("multiple"),
+      v.literal("dropdown"),
+    ]),
     question: v.string([
       v.minLength(3, "Question must be at least 3 characters"),
     ]),
@@ -29,7 +34,8 @@ export const ChoiceQuestion = v.merge([
         value: v.string([
           v.minLength(1, "Option must be at least 1 character"),
         ]),
-      })
+      }),
+      [v.minLength(2, "There must be at least 2 options")]
     ),
   }),
 ]);