Update components

vantezzen · Jan 31, 2024 · a450415 · a450415
1 parent b105d61
commit a450415
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -360,7 +360,7 @@ const formSchema = z.object({
       z.object({
         name: z.string(),
         age: z.coerce.number(),
-      })
+      }),
     )
     // Optionally set a custom label - otherwise this will be inferred from the field name
     .describe("Guests invited to the party"),

diff --git a/src/components/ui/auto-form/common/label.tsx b/src/components/ui/auto-form/common/label.tsx
@@ -12,7 +12,7 @@ function AutoFormLabel({
 }) {
   return (
     <>
-      <FormLabel className={cn("w-[140px] space-y-0 mt-2", className)}>
+      <FormLabel className={cn(className)}>
         {label}
         {isRequired && <span className="text-destructive"> *</span>}
       </FormLabel>

diff --git a/src/components/ui/auto-form/common/tooltip.tsx b/src/components/ui/auto-form/common/tooltip.tsx
@@ -1,30 +1,10 @@
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { HelpCircle } from "lucide-react";
-
 function AutoFormTooltip({ fieldConfigItem }: { fieldConfigItem: any }) {
   return (
     <>
       {fieldConfigItem?.description && (
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger>
-              <HelpCircle
-                size={16}
-                className="ml-[1px] text-gray-500  dark:text-white"
-              />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="text-sm text-gray-500 dark:text-white">
-                {fieldConfigItem.description}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <p className="text-sm text-gray-500 dark:text-white">
+          {fieldConfigItem.description}
+        </p>
       )}
     </>
   );

diff --git a/src/components/ui/auto-form/fields/checkbox.tsx b/src/components/ui/auto-form/fields/checkbox.tsx
@@ -1,8 +1,8 @@
 import { Checkbox } from "@/components/ui/checkbox";
-import { FormControl, FormItem, FormLabel } from "@/components/ui/form";
-import { cn } from "@/lib/utils";
+import { FormControl, FormItem } from "@/components/ui/form";
 import AutoFormTooltip from "../common/tooltip";
 import { AutoFormInputComponentProps } from "../types";
+import AutoFormLabel from "../common/label";
 
 export default function AutoFormCheckbox({
   label,
@@ -13,23 +13,18 @@ export default function AutoFormCheckbox({
   className,
 }: AutoFormInputComponentProps) {
   return (
-    <div className="flex flex-row items-center space-x-2">
-      <FormItem className="flex w-full flex-row items-center justify-start">
-        <FormLabel className="mt-3 w-[117px]">
-          {label}
-          {isRequired && <span className="text-destructive"> *</span>}
-        </FormLabel>
-        <FormControl>
-          <Checkbox
-            className={cn(
-              "data-[state=checked]:bg-zinc-500 data-[state=checked]:text-white",
-              className,
-            )}
-            checked={field.value}
-            onCheckedChange={field.onChange}
-            {...fieldProps}
-          />
-        </FormControl>
+    <div>
+      <FormItem>
+        <div className="mb-3 flex items-center gap-3">
+          <FormControl>
+            <Checkbox
+              checked={field.value}
+              onCheckedChange={field.onChange}
+              {...fieldProps}
+            />
+          </FormControl>
+          <AutoFormLabel label={label} isRequired={isRequired} />
+        </div>
       </FormItem>
       <AutoFormTooltip fieldConfigItem={fieldConfigItem} />
     </div>

diff --git a/src/components/ui/auto-form/fields/date.tsx b/src/components/ui/auto-form/fields/date.tsx
@@ -12,21 +12,18 @@ export default function AutoFormDate({
   fieldProps,
 }: AutoFormInputComponentProps) {
   return (
-    <div className="flex flex-row  items-center space-x-2 ">
-      <FormItem className="flex w-full flex-col">
-        <div className=" flex flex-row items-center justify-between space-x-2">
-          <AutoFormLabel label={label} isRequired={isRequired} />
-          <FormControl>
-            <DatePicker
-              date={field.value}
-              setDate={field.onChange}
-              {...fieldProps}
-            />
-          </FormControl>
-          <AutoFormTooltip fieldConfigItem={fieldConfigItem} />
-        </div>
-        <FormMessage className="ml-[140px]" />
-      </FormItem>
-    </div>
+    <FormItem>
+      <AutoFormLabel label={label} isRequired={isRequired} />
+      <FormControl>
+        <DatePicker
+          date={field.value}
+          setDate={field.onChange}
+          {...fieldProps}
+        />
+      </FormControl>
+      <AutoFormTooltip fieldConfigItem={fieldConfigItem} />
+
+      <FormMessage />
+    </FormItem>
   );
 }
diff --git a/src/components/ui/auto-form/fields/enum.tsx b/src/components/ui/auto-form/fields/enum.tsx
@@ -35,7 +35,7 @@ export default function AutoFormEnum({
   }
 
   return (
-    <FormItem className="flex w-full flex-row items-center justify-start space-x-2">
+    <FormItem>
       <AutoFormLabel label={label} isRequired={isRequired} />
       <FormControl>
         <Select

diff --git a/src/components/ui/auto-form/fields/file.tsx b/src/components/ui/auto-form/fields/file.tsx
@@ -35,30 +35,28 @@ export default function AutoFormFile({
   };
 
   return (
-    <div className="flex flex-row  items-center space-x-2">
-      <FormItem className="flex w-full flex-row items-center justify-start space-x-2 ">
-        {showLabel && <AutoFormLabel label={label} isRequired={isRequired} />}
-        {!file && (
-          <FormControl>
-            <Input
-              type="file"
-              {...fieldPropsWithoutShowLabel}
-              onChange={handleFileChange}
-              value={""}
-            />
-          </FormControl>
-        )}
-        {file && (
-          <div className="flex h-[40px] w-full flex-row items-center justify-between space-x-2 rounded-sm border-0 bg-zinc-300/50 p-2 text-black focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0">
-            <p>{fileName}</p>
-            <button onClick={handleRemoveClick} aria-label="Remove image">
-              <Trash2 className="size-4" />
-            </button>
-          </div>
-        )}
-        <AutoFormTooltip fieldConfigItem={fieldConfigItem} />
-        <FormMessage />
-      </FormItem>
-    </div>
+    <FormItem>
+      {showLabel && <AutoFormLabel label={label} isRequired={isRequired} />}
+      {!file && (
+        <FormControl>
+          <Input
+            type="file"
+            {...fieldPropsWithoutShowLabel}
+            onChange={handleFileChange}
+            value={""}
+          />
+        </FormControl>
+      )}
+      {file && (
+        <div className="flex h-[40px] w-full flex-row items-center justify-between space-x-2 rounded-sm border p-2 text-black focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0">
+          <p>{fileName}</p>
+          <button onClick={handleRemoveClick} aria-label="Remove image">
+            <Trash2 size={16} />
+          </button>
+        </div>
+      )}
+      <AutoFormTooltip fieldConfigItem={fieldConfigItem} />
+      <FormMessage />
+    </FormItem>
   );
 }
diff --git a/src/components/ui/auto-form/fields/input.tsx b/src/components/ui/auto-form/fields/input.tsx
@@ -16,7 +16,7 @@ export default function AutoFormInput({
 
   return (
     <div className="flex flex-row  items-center space-x-2">
-      <FormItem className="flex w-full flex-row items-center justify-start space-x-2">
+      <FormItem className="flex w-full flex-col justify-start">
         {showLabel && <AutoFormLabel label={label} isRequired={isRequired} />}
         <FormControl>
           <Input type={type} {...fieldPropsWithoutShowLabel} />

diff --git a/src/components/ui/auto-form/fields/number.tsx b/src/components/ui/auto-form/fields/number.tsx
@@ -14,15 +14,13 @@ export default function AutoFormNumber({
   const showLabel = _showLabel === undefined ? true : _showLabel;
 
   return (
-    <div className="flex flex-row  items-center space-x-2 ">
-      <FormItem className="flex w-full flex-row items-center justify-between space-x-2">
-        {showLabel && <AutoFormLabel label={label} isRequired={isRequired} />}
-        <FormControl>
-          <Input type="number" {...fieldPropsWithoutShowLabel} />
-        </FormControl>
-        <AutoFormTooltip fieldConfigItem={fieldConfigItem} />
-        <FormMessage />
-      </FormItem>
-    </div>
+    <FormItem>
+      {showLabel && <AutoFormLabel label={label} isRequired={isRequired} />}
+      <FormControl>
+        <Input type="number" {...fieldPropsWithoutShowLabel} />
+      </FormControl>
+      <AutoFormTooltip fieldConfigItem={fieldConfigItem} />
+      <FormMessage />
+    </FormItem>
   );
 }
diff --git a/src/components/ui/auto-form/fields/radio-group.tsx b/src/components/ui/auto-form/fields/radio-group.tsx
@@ -30,20 +30,19 @@ export default function AutoFormRadioGroup({
   }
 
   return (
-    <div className="flex flex-row items-center space-x-2">
-      <FormItem className="flex w-full flex-row items-center justify-start">
+    <div>
+      <FormItem>
         <AutoFormLabel label={label} isRequired={isRequired} />
         <FormControl>
           <RadioGroup
             onValueChange={field.onChange}
             defaultValue={field.value}
-            className="flex h-10 w-full flex-row items-center space-x-1 rounded-md border p-2 text-black focus-visible:ring-0 focus-visible:ring-offset-0"
             {...fieldProps}
           >
             {values?.map((value: any) => (
               <FormItem
-                className="flex items-center space-x-3 space-y-0"
                 key={value}
+                className="mb-2 flex items-center gap-3 space-y-0"
               >
                 <FormControl>
                   <RadioGroupItem value={value} />

diff --git a/src/components/ui/auto-form/fields/switch.tsx b/src/components/ui/auto-form/fields/switch.tsx
@@ -12,17 +12,17 @@ export default function AutoFormSwitch({
   fieldProps,
 }: AutoFormInputComponentProps) {
   return (
-    <div className="flex flex-row  items-center space-x-2">
-      <FormItem className="flex w-full flex-row items-center justify-start">
-        <AutoFormLabel label={label} isRequired={isRequired} />
-        <div className="flex h-10 w-full flex-row items-center space-x-1 ">
+    <div>
+      <FormItem>
+        <div className="flex items-center gap-3">
           <FormControl>
             <Switch
               checked={field.value}
               onCheckedChange={field.onChange}
               {...fieldProps}
             />
           </FormControl>
+          <AutoFormLabel label={label} isRequired={isRequired} />
         </div>
       </FormItem>
       <AutoFormTooltip fieldConfigItem={fieldConfigItem} />

diff --git a/src/components/ui/auto-form/fields/textarea.tsx b/src/components/ui/auto-form/fields/textarea.tsx
@@ -13,13 +13,10 @@ export default function AutoFormTextarea({
   const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
   const showLabel = _showLabel === undefined ? true : _showLabel;
   return (
-    <FormItem className="flex w-full flex-row items-center justify-between space-x-2">
+    <FormItem>
       {showLabel && <AutoFormLabel label={label} isRequired={isRequired} />}
       <FormControl>
-        <Textarea
-          className="border-0 bg-zinc-300/50 text-black focus-visible:ring-0 focus-visible:ring-offset-0"
-          {...fieldPropsWithoutShowLabel}
-        />
+        <Textarea {...fieldPropsWithoutShowLabel} />
       </FormControl>
       <AutoFormTooltip fieldConfigItem={fieldConfigItem} />
       <FormMessage />

diff --git a/src/examples/Basics.tsx b/src/examples/Basics.tsx
@@ -81,6 +81,8 @@ const formSchema = z.object({
     .optional(),
 
   customParent: z.string().optional(),
+
+  file: z.string().optional().describe("Text file"),
 });
 
 function Basics() {
@@ -156,6 +158,10 @@ function Basics() {
                     </div>
                   ),
                 },
+
+                file: {
+                  fieldType: "file",
+                },
               }}
             >
               <AutoFormSubmit>Send now</AutoFormSubmit>