feat: Added unique names for toggles

Author: iduspara

src/app/page.tsx

@@ -283,13 +283,15 @@ export default function FormBuilderPage() {
               </Button>
             )}
             <ToggleGroupNav
+              name="viewport"
               items={viewportItems}
               defaultValue={viewport}
               onValueChange={(value) =>
                 updateViewport(value as "sm" | "md" | "lg")
               }
             />
             <ToggleGroupNav
+              name="mode"
               items={modeItems}
               defaultValue={mode}
               onValueChange={(value) => {
@@ -308,6 +310,7 @@ export default function FormBuilderPage() {
             className="w-full cursor-pointer"
             onClick={handleGenerateCode}
             disabled={components.length === 0}
+            id="export-code-button"
           >
             Generate Code
           </Button>

src/components/form-builder/sidebar/groups/grid-group.tsx

@@ -55,6 +55,7 @@ export function GridGroup() {
         </Label>
         <div className="flex flex-row items-center gap-2">
           <ToggleGroupNav
+            name="visible"
             items={[
               { value: "yes", label: "yes" },
               { value: "no", label: "no" },

src/components/form-builder/sidebar/groups/input-group.tsx

@@ -110,6 +110,7 @@ export function InputGroup({
           </Label>
           <div className="flex flex-row items-center gap-2">
             <ToggleGroupNav
+              name="asCard"
               items={[
                 { value: "yes", label: "yes" },
                 { value: "no", label: "no" },

src/components/form-builder/sidebar/groups/label-group.tsx

@@ -60,6 +60,7 @@ export function LabelGroup({ whitelist = ["label", "label_description", "labelPo
         </Label>
         <div className="flex flex-row items-center gap-2">
           <ToggleGroupNav
+            name="showLabel"
             items={[
               { value: "yes", label: "yes" },
               { value: "no", label: "no" },
@@ -132,6 +133,7 @@ export function LabelGroup({ whitelist = ["label", "label_description", "labelPo
           <Label className="text-xs text-gray-400 pl-2">Label Alignment</Label>
         <div className="flex flex-row items-center gap-2">
           <ToggleGroupNav
+            name="labelAlign"
             items={alignmentItems}
             defaultValue={defaultValueLabelAlign}
             onValueChange={(value) =>

src/components/form-builder/sidebar/groups/validation-group.tsx

@@ -44,6 +44,7 @@ export function ValidationGroup() {
         </Label>
         <div className="flex flex-row items-center gap-2">
           <ToggleGroupNav
+            name="required"
             items={[
               { value: "yes", label: "yes" },
               { value: "no", label: "no" },

src/components/form-builder/ui/toggle-group-nav.tsx

@@ -12,20 +12,23 @@ interface ToggleGroupNavProps {
   defaultValue: string;
   onValueChange: (value: string) => void;
   className?: string;
+  name?: string;
 }
 
 export function ToggleGroupNav({
   items,
   defaultValue,
   onValueChange,
   className,
+  name
 }: ToggleGroupNavProps) {
   const handleValueChange = (value: string) => {
     if (value && value !== defaultValue) {
       onValueChange(value);
     }
   };
 
+
   return (
     <ToggleGroup
       type="single"
@@ -34,17 +37,21 @@ export function ToggleGroupNav({
       className={cn("flex bg-muted rounded-md p-0.5 h-auto", className)}
       size="sm"
     >
-      {items.map((item) => (
+      {items.map((item) => {
+        const toggleName = name ? `toggle__${name}__${item.value}` : `toggle__${item.value}`;
+        return (
         <ToggleGroupItem
           key={item.value}
           value={item.value}
+          name={toggleName}
           className="h-auto p-1.5 flex-1 text-muted-foreground data-[state=on]:bg-white data-[state=on]:text-primary hover:bg-white hover:text-accent-foreground cursor-pointer"
         >
           {item.icon && <item.icon className="h-4 w-4" />}
 
           {item.label && <span className="text-xs select-none">{item.label}</span>}
         </ToggleGroupItem>
-      ))}
+        )
+      })}
     </ToggleGroup>
   );
 }