From 088a828e51a55a8cc1c3d08d93edaef70ad6e095 Mon Sep 17 00:00:00 2001
From: Ronel <ronel.kpossou@epitech.eu>
Date: Wed, 27 Sep 2023 12:06:14 +0100
Subject: [PATCH 1/5] feat: add showLabel property in inputProps

---
 src/components/ui/auto-form.tsx | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/auto-form.tsx b/src/components/ui/auto-form.tsx
index 65f2c48..c01a498 100644
--- a/src/components/ui/auto-form.tsx
+++ b/src/components/ui/auto-form.tsx
@@ -88,12 +88,12 @@ function getDefaultValueInZodStack(schema: z.ZodAny): any {
 
   if ("innerType" in typedSchema._def) {
     return getDefaultValueInZodStack(
-      typedSchema._def.innerType as unknown as z.ZodAny
+      typedSchema._def.innerType as unknown as z.ZodAny,
     );
   }
   if ("schema" in typedSchema._def) {
     return getDefaultValueInZodStack(
-      (typedSchema._def as any).schema as z.ZodAny
+      (typedSchema._def as any).schema as z.ZodAny,
     );
   }
   return undefined;
@@ -103,7 +103,7 @@ function getDefaultValueInZodStack(schema: z.ZodAny): any {
  * Get all default values from a Zod schema.
  */
 function getDefaultValues<Schema extends z.ZodObject<any, any>>(
-  schema: Schema
+  schema: Schema,
 ) {
   const { shape } = schema;
   type DefaultValuesType = DefaultValues<Partial<z.infer<Schema>>>;
@@ -114,7 +114,7 @@ function getDefaultValues<Schema extends z.ZodObject<any, any>>(
 
     if (getBaseType(item) === "ZodObject") {
       const defaultItems = getDefaultValues(
-        item as unknown as z.ZodObject<any, any>
+        item as unknown as z.ZodObject<any, any>,
       );
       for (const defaultItemKey of Object.keys(defaultItems)) {
         const pathKey = `${key}.${defaultItemKey}` as keyof DefaultValuesType;
@@ -132,7 +132,7 @@ function getDefaultValues<Schema extends z.ZodObject<any, any>>(
 }
 
 function getObjectFormSchema(
-  schema: ZodObjectOrWrapped
+  schema: ZodObjectOrWrapped,
 ): z.ZodObject<any, any> {
   if (schema._def.typeName === "ZodEffects") {
     const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>;
@@ -150,7 +150,7 @@ function zodToHtmlInputProps(
     | z.ZodNumber
     | z.ZodString
     | z.ZodOptional<z.ZodNumber | z.ZodString>
-    | any
+    | any,
 ): React.InputHTMLAttributes<HTMLInputElement> {
   if (["ZodOptional", "ZodNullable"].includes(schema._def.typeName)) {
     const typedSchema = schema as z.ZodOptional<z.ZodNumber | z.ZodString>;
@@ -192,7 +192,9 @@ function zodToHtmlInputProps(
 
 export type FieldConfigItem = {
   description?: React.ReactNode;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement> & {
+    showLabel?: boolean;
+  };
   fieldType?:
     | keyof typeof INPUT_COMPONENTS
     | React.FC<AutoFormInputComponentProps>;
@@ -228,12 +230,19 @@ function AutoFormInput({
   fieldConfigItem,
   fieldProps,
 }: AutoFormInputComponentProps) {
+  console.log(fieldConfigItem.inputProps?.showLabel);
+  const showLabel =
+    fieldConfigItem.inputProps?.showLabel === undefined
+      ? true
+      : fieldConfigItem.inputProps?.showLabel;
   return (
     <FormItem>
-      <FormLabel>
-        {label}
-        {isRequired && <span className="text-destructive"> *</span>}
-      </FormLabel>
+      {showLabel && (
+        <FormLabel>
+          {label}
+          {isRequired && <span className="text-destructive"> *</span>}
+        </FormLabel>
+      )}
       <FormControl>
         <Input type="text" {...fieldProps} />
       </FormControl>

From b996322304a290a91087b732fbee5bc38845cbd4 Mon Sep 17 00:00:00 2001
From: Ronel <ronel.kpossou@epitech.eu>
Date: Wed, 27 Sep 2023 12:07:41 +0100
Subject: [PATCH 2/5] Add InputWithoutLabel example

---
 src/App.tsx                        |  2 ++
 src/examples/InputWithoutLabel.tsx | 55 ++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/examples/InputWithoutLabel.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 358265a..1619485 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import Array from "./examples/Array";
 import Basics from "./examples/Basics";
 import ConfirmPassword from "./examples/ConfirmPassword";
 import Controlled from "./examples/Controlled";
+import InputWithoutLabel from "./examples/InputWithoutLabel";
 import SubObject from "./examples/SubObject";
 
 function App() {
@@ -10,6 +11,7 @@ function App() {
     <>
       <div className="mx-auto my-6 max-w-lg space-y-8">
         <Basics />
+        <InputWithoutLabel />
         <SubObject />
         <Controlled />
         <ConfirmPassword />
diff --git a/src/examples/InputWithoutLabel.tsx b/src/examples/InputWithoutLabel.tsx
new file mode 100644
index 0000000..9bd0844
--- /dev/null
+++ b/src/examples/InputWithoutLabel.tsx
@@ -0,0 +1,55 @@
+import * as z from "zod";
+import AutoForm from "../components/ui/auto-form";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../components/ui/card";
+import { Button } from "@/components/ui/button";
+
+const formSchema = z.object({
+  username: z.string(),
+});
+
+function InputWithoutLabel() {
+  return (
+    <>
+      <div className="mx-auto my-6 max-w-lg">
+        <Card>
+          <CardHeader>
+            <CardTitle>Input Without Label</CardTitle>
+            <CardDescription>
+              This example shows how to use AutoForm input without label.
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            <AutoForm
+              formSchema={formSchema}
+              fieldConfig={{
+                username: {
+                  inputProps: {
+                    showLabel: false,
+                    placeholder: "Username",
+                  },
+                  renderParent: ({ children }) => (
+                    <div className="flex items-end gap-3">
+                      <div className="flex-1">{children}</div>
+                      <div>
+                        <Button type="button">Update</Button>
+                      </div>
+                    </div>
+                  ),
+                },
+              }}
+            ></AutoForm>
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  );
+}
+
+export default InputWithoutLabel;

From df9dbf8be44f95fafecfcef5e9e119efb9f3071a Mon Sep 17 00:00:00 2001
From: Ronel <ronel.kpossou@epitech.eu>
Date: Wed, 27 Sep 2023 12:08:52 +0100
Subject: [PATCH 3/5] Update README.md

---
 README.md | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e0e9064..6b4697c 100644
--- a/README.md
+++ b/README.md
@@ -337,7 +337,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"),
@@ -381,6 +381,22 @@ You can use the `inputProps` property to pass props to the input component. You
 <input type="text" placeholder="Username" /* ... */ />
 ```
 
+Disabling the label of an input can be done by using the `showLabel` property in `inputProps`.
+
+```tsx
+<AutoForm
+  fieldConfig={{
+    username: {
+      inputProps: {
+        type: "text",
+        placeholder: "Username",
+        showLabel: false,
+      },
+    },
+  }}
+/>
+```
+
 #### Field type
 
 By default, AutoForm will use the Zod type to determine which input component to use. You can override this by using the `fieldType` property.

From b4704c9c253e6e34dce683a999259e4bc730940f Mon Sep 17 00:00:00 2001
From: Ronel <ronel.kpossou@epitech.eu>
Date: Wed, 27 Sep 2023 12:15:38 +0100
Subject: [PATCH 4/5] Remove console.log

---
 src/components/ui/auto-form.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/auto-form.tsx b/src/components/ui/auto-form.tsx
index c01a498..09a8322 100644
--- a/src/components/ui/auto-form.tsx
+++ b/src/components/ui/auto-form.tsx
@@ -230,7 +230,6 @@ function AutoFormInput({
   fieldConfigItem,
   fieldProps,
 }: AutoFormInputComponentProps) {
-  console.log(fieldConfigItem.inputProps?.showLabel);
   const showLabel =
     fieldConfigItem.inputProps?.showLabel === undefined
       ? true

From 8c128bd523bf855311f977ed9e586fc26f58b9e9 Mon Sep 17 00:00:00 2001
From: Ronel <ronel.kpossou@epitech.eu>
Date: Wed, 27 Sep 2023 23:23:41 +0100
Subject: [PATCH 5/5] fix: showLabel is not a valide input attributes

---
 src/components/ui/auto-form.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/auto-form.tsx b/src/components/ui/auto-form.tsx
index 09a8322..3bd1add 100644
--- a/src/components/ui/auto-form.tsx
+++ b/src/components/ui/auto-form.tsx
@@ -230,10 +230,8 @@ function AutoFormInput({
   fieldConfigItem,
   fieldProps,
 }: AutoFormInputComponentProps) {
-  const showLabel =
-    fieldConfigItem.inputProps?.showLabel === undefined
-      ? true
-      : fieldConfigItem.inputProps?.showLabel;
+  const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
+  const showLabel = _showLabel === undefined ? true : _showLabel;
   return (
     <FormItem>
       {showLabel && (
@@ -243,7 +241,7 @@ function AutoFormInput({
         </FormLabel>
       )}
       <FormControl>
-        <Input type="text" {...fieldProps} />
+        <Input type="text" {...fieldPropsWithoutShowLabel} />
       </FormControl>
       {fieldConfigItem.description && (
         <FormDescription>{fieldConfigItem.description}</FormDescription>