fixes

Author: jonymusky

app/providers.tsx

@@ -5,9 +5,12 @@ import { DragDropContext } from "@hello-pangea/dnd"
 
 interface ProvidersProps {
   children: React.ReactNode
+  attribute?: string
+  defaultTheme?: string
+  enableSystem?: boolean
 }
 
-export function Providers({ children }: ProvidersProps) {
+export function Providers({ children, attribute, defaultTheme, enableSystem }: ProvidersProps) {
   const onDragEnd = (result: any) => {
     // Handle drag end logic here
     if (!result.destination) return
@@ -17,7 +20,7 @@ export function Providers({ children }: ProvidersProps) {
   }
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ThemeProvider attribute={attribute} defaultTheme={defaultTheme} enableSystem={enableSystem}>
       <DragDropContext onDragEnd={onDragEnd}>
         {children}
       </DragDropContext>

components/FormElementEditor.tsx

@@ -5,7 +5,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
 import { Plus, Trash2 } from 'lucide-react'
-import { FormElement } from '@/types'
+import { FormElement, FormElementOption } from '@/types'
 import { Checkbox } from '@radix-ui/react-checkbox'
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@radix-ui/react-select'
 import { Textarea } from './ui/textarea'

components/Playground.tsx

@@ -115,25 +115,52 @@ export function Playground() {
 
   const handleImportSchema = (jsonSchema: JsonSchema, uiSchema: Record<string, any>) => {
     // Convert imported schema back to form elements
-    const newFormElements: FormElement[] = Object.entries(jsonSchema.properties).map(([name, prop]) => ({
-      type: prop.type === 'number' ? 'number' : 'string',
-      label: prop.title || name,
-      name,
-      placeholder: prop.description,
-      options: prop.enum?.map(value => ({ label: value, value })),
-      validation: {
-        required: jsonSchema.required?.includes(name),
-        minLength: prop.minLength,
-        maxLength: prop.maxLength,
-        min: prop.minimum,
-        max: prop.maximum,
-        pattern: prop.pattern,
-      },
-    }))
-
-    setFormElements(newFormElements)
-    setState(newFormElements)
-  }
+    const newFormElements: FormElement[] = Object.entries(jsonSchema.properties).map(([name, prop]: [string, any]) => {
+      // Map the type correctly
+      let formElementType: FormElement["type"];
+      switch (prop.type) {
+        case "string":
+          formElementType = uiSchema[name]?.["ui:widget"] === "textarea" ? "textarea" : "text";
+          break;
+        case "number":
+          formElementType = "number";
+          break;
+        case "boolean":
+          formElementType = "checkbox";
+          break;
+        case "array":
+          formElementType = "select";
+          break;
+        case "object":
+          formElementType = "file"; // Default to file for complex types (adjust as needed)
+          break;
+        default:
+          throw new Error(`Unsupported type: ${prop.type}`);
+      }
+  
+      return {
+        type: formElementType,
+        label: prop.title || name,
+        name,
+        placeholder: uiSchema[name]?.["ui:placeholder"] || undefined,
+        options: prop.enum
+          ? prop.enum.map((value: string) => ({ label: value, value }))
+          : undefined,
+        validation: {
+          required: jsonSchema.required?.includes(name) || false,
+          minLength: prop.minLength || undefined,
+          maxLength: prop.maxLength || undefined,
+          min: prop.minimum || undefined,
+          max: prop.maximum || undefined,
+          pattern: prop.pattern || undefined,
+        },
+      };
+    });
+  
+    // Update state with new form elements
+    setFormElements(newFormElements);
+    setState(newFormElements);
+  };
 
   const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>, elementName: string) => {
     const file = event.target.files?.[0];
@@ -175,6 +202,7 @@ export function Playground() {
                     className="flex-1 p-4 bg-gray-50 overflow-y-auto"
                   >
                     <Canvas
+                      onDragEnd={handleDragEnd}
                       elements={formElements}
                       onElementUpdate={handleElementUpdate}
                       onElementDelete={handleElementDelete}

components/Preview.tsx

@@ -58,7 +58,7 @@ export function Preview({ elements, onFileUpload }: PreviewProps) {
             <div className="space-y-2">
               {element.options?.map((option, optionIndex) => (
                 <div key={optionIndex} className="flex items-center space-x-2">
-                  <Checkbox id={`${element.name}-${optionIndex}`} {...commonProps} value={option.value} />
+                  <Checkbox {...commonProps} value={option.value} />
                   <Label htmlFor={`${element.name}-${optionIndex}`}>{option.label}</Label>
                 </div>
               ))}