feat: placeholder param for text, textarea, number fields

apps/demo/config/blocks/Button/index.tsx

@@ -11,7 +11,7 @@ export type ButtonProps = {
 export const Button: ComponentConfig<ButtonProps> = {
   label: "Button",
   fields: {
-    label: { type: "text" },
+    label: { type: "text", placeholder: "Lorem ipsum..." },
     href: { type: "text" },
     variant: {
       type: "radio",

apps/docs/pages/docs/api-reference/fields/number.mdx

@@ -38,11 +38,12 @@ const config = {
 
 ## Params
 
-| Param           | Example          | Type     | Status   |
-| --------------- | ---------------- | -------- | -------- |
-| [`type`](#type) | `type: "number"` | "number" | Required |
-| [`max`](#max)   | `max: 10`        | number   | -        |
-| [`min`](#min)   | `min: 0`         | number   | -        |
+| Param                         | Example                         | Type     | Status   |
+| ----------------------------- | ------------------------------- | -------- | -------- |
+| [`type`](#type)               | `type: "number"`                | "number" | Required |
+| [`max`](#max)                 | `max: 10`                       | number   | -        |
+| [`min`](#min)                 | `min: 0`                        | number   | -        |
+| [`placeholder`](#placeholder) | `placeholder: "Lorem ipsum..."` | String   | -        |
 
 ## Required params
 
@@ -138,3 +139,38 @@ const config = {
     },
   }}
 />
+
+### Placeholder
+
+The placeholder text to display when the field is empty.
+
+```tsx {7} copy
+const config = {
+  components: {
+    Example: {
+      fields: {
+        myNumber: {
+          type: "number",
+          placeholder: "Lorem ipsum...",
+        },
+      },
+      // ...
+    },
+  },
+};
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      myNumber: {
+        type: "number",
+        placeholder: "Lorem ipsum...",
+      },
+    },
+    render: ({ myNumber }) => {
+      return <div>{myNumber}</div>;
+    },
+  }}
+/>

apps/docs/pages/docs/api-reference/fields/text.mdx

@@ -38,9 +38,10 @@ const config = {
 
 ## Params
 
-| Param           | Example        | Type   | Status   |
-| --------------- | -------------- | ------ | -------- |
-| [`type`](#type) | `type: "text"` | "text" | Required |
+| Param                         | Example                         | Type   | Status   |
+| ----------------------------- | ------------------------------- | ------ | -------- |
+| [`type`](#type)               | `type: "text"`                  | "text" | Required |
+| [`placeholder`](#placeholder) | `placeholder: "Lorem ipsum..."` | String | -        |
 
 ## Required params
 
@@ -62,3 +63,40 @@ const config = {
   },
 };
 ```
+
+## Optional params
+
+### Placeholder
+
+The placeholder text to display when the field is empty.
+
+```tsx {7} copy
+const config = {
+  components: {
+    Example: {
+      fields: {
+        title: {
+          type: "text",
+          placeholder: "Lorem ipsum...",
+        },
+      },
+      // ...
+    },
+  },
+};
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      title: {
+        type: "text",
+        placeholder: "Lorem ipsum...",
+      },
+    },
+    render: ({ title }) => {
+      return <div>{title}</div>;
+    },
+  }}
+/>

apps/docs/pages/docs/api-reference/fields/textarea.mdx

@@ -38,9 +38,10 @@ const config = {
 
 ## Params
 
-| Param           | Example            | Type       | Status   |
-| --------------- | ------------------ | ---------- | -------- |
-| [`type`](#type) | `type: "textarea"` | "textarea" | Required |
+| Param                         | Example                         | Type       | Status   |
+| ----------------------------- | ------------------------------- | ---------- | -------- |
+| [`type`](#type)               | `type: "textarea"`              | "textarea" | Required |
+| [`placeholder`](#placeholder) | `placeholder: "Lorem ipsum..."` | String     | -        |
 
 ## Required params
 
@@ -62,3 +63,40 @@ const config = {
   },
 };
 ```
+
+## Optional params
+
+### Placeholder
+
+The placeholder text to display when the field is empty.
+
+```tsx {7} copy
+const config = {
+  components: {
+    Example: {
+      fields: {
+        description: {
+          type: "textarea",
+          placeholder: "Lorem ipsum...",
+        },
+      },
+      // ...
+    },
+  },
+};
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      description: {
+        type: "textarea",
+        placeholder: "Lorem ipsum...",
+      },
+    },
+    render: ({ description }) => {
+      return <div>{description}</div>;
+    },
+  }}
+/>

packages/core/components/AutoField/fields/DefaultField/index.tsx

@@ -57,6 +57,11 @@ export const DefaultField = ({
         id={id}
         min={field.type === "number" ? field.min : undefined}
         max={field.type === "number" ? field.max : undefined}
+        placeholder={
+          field.type === "text" || field.type === "number"
+            ? field.placeholder
+            : undefined
+        }
       />
     </Label>
   );

packages/core/components/AutoField/fields/TextareaField/index.tsx

@@ -6,6 +6,7 @@ import { FieldPropsInternal } from "../..";
 const getClassName = getClassNameFactory("Input", styles);
 
 export const TextareaField = ({
+  field,
   onChange,
   readOnly,
   value,
@@ -26,6 +27,7 @@ export const TextareaField = ({
         readOnly={readOnly}
         tabIndex={readOnly ? -1 : undefined}
         rows={5}
+        placeholder={field.type === "textarea" ? field.placeholder : undefined}
       />
     </Label>
   );

packages/core/types/Fields.ts

@@ -14,15 +14,18 @@ export type BaseField = {
 
 export type TextField = BaseField & {
   type: "text";
+  placeholder?: string;
 };
 export type NumberField = BaseField & {
   type: "number";
+  placeholder?: string;
   min?: number;
   max?: number;
 };
 
 export type TextareaField = BaseField & {
   type: "textarea";
+  placeholder?: string;
 };
 
 export type SelectField = BaseField & {