feat: add form builder to storybook

src/stories/FormBuilderDemo.stories.tsx

@@ -0,0 +1,270 @@
+import { Meta, StoryObj } from "@storybook/react";
+import FormBuilderDemo from "./demo/FormBuilderDemo";
+import { BaseField } from "../components/formBuilder/types";
+
+const meta = {
+  title: "Components/BuildForm",
+  component: FormBuilderDemo,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof FormBuilderDemo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// render componente
+export const BuildFormTextInputFields: Story = {
+  args: {
+    title: "Demo",
+    description: "Demo with simple inputs",
+    fields: [
+      {
+        type: "input",
+        name: "input_normal",
+        label: "Simple text input",
+        required: true,
+      },
+      {
+        type: "input",
+        mode: "number",
+        name: "number",
+        label: "Number input",
+        description: "This is a number input",
+      },
+      {
+        type: "textarea",
+        name: "text",
+        label: "Text input",
+        description: "This is a text input",
+      },
+      {
+        type: "wysiwyg",
+        name: "wysiwyg",
+        label: "Wysiwyg / Rich Text input",
+        description: "This is a wysiwyg where you can write rich text",
+        required: true,
+      },
+    ] as BaseField[],
+  },
+};
+
+export const BuildFormWithCheckFields: Story = {
+  args: {
+    title: "Demo with toggable fields",
+    description: "This is a demo with toggable fields",
+    fields: [
+      {
+        type: "checkbox",
+        name: "checkbox",
+        label: "Checkbox input",
+        description: "This is a checkbox input",
+      },
+      {
+        type: "radio_item",
+        name: "radio_item",
+        label: "Radio Item",
+        options: [
+          {
+            label: "Option 1",
+            value: "op1",
+          },
+          {
+            label: "Option 2",
+            value: "op2",
+          },
+        ],
+      },
+      {
+        type: "switch",
+        name: "switch",
+        label: "Switch input",
+        description: "This is a switch input",
+      },
+    ] as BaseField[],
+  },
+};
+
+export const BuildFormSelectableFields: Story = {
+  args: {
+    title: "Demo with selectable fields",
+    description: "This is a demo with selectable fields",
+    fields: [
+      {
+        type: "select",
+        label: "Select input type",
+        description: "This is a select input where you can choose an option",
+        name: "select_fields",
+        options: [
+          {
+            label: "Option 1",
+            value: "op1",
+          },
+          {
+            label: "Option 2",
+            value: "op2",
+          },
+        ],
+      },
+      {
+        type: "multi_select",
+        label: "Multi Select input type",
+        description: "This is a select input where you can choose an option",
+        name: "select_fields_multi",
+        options: [
+          {
+            label: "Option 1",
+            value: "op1",
+          },
+          {
+            label: "Option 2",
+            value: "op2",
+          },
+          {
+            label: "Option 3",
+            value: "op3",
+          },
+        ],
+      },
+      {
+        type: "searchable_select",
+        label: "Searchable Select input type",
+        description:
+          "This is a searchable select input where you can choose an option",
+        name: "select_fields_searchable",
+        options: [
+          {
+            label: "Option 1",
+            value: "op1",
+          },
+          {
+            label: "Option 2",
+            value: "op2",
+          },
+          {
+            label: "Option 3",
+            value: "op3",
+          },
+        ],
+      },
+    ] as BaseField[],
+  },
+};
+
+export const BuildFormDateFields: Story = {
+  args: {
+    title: "Demo with date fields",
+    description: "This is a demo with date fields",
+    fields: [
+      {
+        type: "date",
+        label: "Date input type",
+        description: "This is a date input",
+        name: "date",
+      },
+      {
+        type: "datetime",
+        label: "Datetime input type",
+        description: "This is a datetime input",
+        name: "datetime",
+      },
+    ] as BaseField[],
+  },
+};
+
+export const BuildFormColorPicker: Story = {
+  args: {
+    title: "Demo with color picker",
+    description: "This is a demo with color picker",
+    fields: [
+      {
+        type: "color_picker",
+        label: "Color Picker",
+        description: "This is a color picker",
+        name: "color_picker",
+      },
+    ] as BaseField[],
+  },
+};
+
+export const BuildFormFileInput: Story = {
+  args: {
+    title: "Demo with file input",
+    description: "This is a demo with file input",
+    fields: [
+      {
+        type: "file",
+        label: "File input",
+        description: "This is a file input",
+        name: "file",
+        accept: ".png",
+        download: true,
+        mode: "file",
+      },
+    ] as BaseField[],
+  },
+};
+
+export const BuildFormFieldArray: Story = {
+  args: {
+    title: "Demo with field array",
+    description: "This is a demo with field array",
+    fields: [
+      {
+        type: "field_array",
+        label: "Field Array",
+        description: "This is a field array",
+        name: "field_array",
+        fields: [
+          {
+            type: "input",
+            name: "field_array.RESOURCE_ID.name",
+            label: "Field Array Input",
+            required: true,
+          },
+        ] as BaseField[],
+      },
+    ] as BaseField[],
+  },
+};
+
+export const BuildFormHiddenField: Story = {
+  args: {
+    title: "Demo with hidden field",
+    description: "This is a demo with hidden field",
+    fields: [
+      {
+        type: "hidden",
+        name: "hidden",
+        value: "hidden",
+      },
+    ] as BaseField[],
+  },
+};
+
+// export const BuildFormDelegateField: Story = {
+//   args: {
+//     title: "Demo with delegate field",
+//     description: "This is a demo with delegate field",
+//     fields: [
+//       {
+//         type: "delegate",
+//         name: "delegate",
+//         label: "Delegate Field",
+//         description: "This is a delegate field",
+//         delegateKey: "delegateKey",
+//         options: [
+//           {
+//             delegateValue: "delegateValue1",
+//             value: "value1",
+//           },
+//           {
+//             delegateValue: "delegateValue2",
+//             value: "value2",
+//           },
+//         ],
+//       },
+//     ] as BaseField[],
+//   },
+// };

src/stories/demo/FormBuilderDemo.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { Form } from "../../components/ui/Form";
+import { buildForm } from "../../components/FormBuilder/buildForm";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "../../components/ui/Card";
+import { BaseField } from "../../components/formBuilder/types";
+import { Button } from "../../components/ui/Button";
+
+const FIELDS = [
+  {
+    type: "input",
+    name: "title",
+    label: "Informe um nome para identificação do cliente analisado:",
+    required: true,
+  },
+] as BaseField[];
+
+export default function FormBuilderDemo({
+  title,
+  description,
+  fields = FIELDS,
+}) {
+  const form = useForm();
+  // const handleSubmit = () => async () => {
+  //   const isValid = await form.trigger();
+  //   if (!isValid) {
+  //     toast({
+  //       title: "Erro",
+  //       description: "Por favor, preencha todos os campos obrigatórios.",
+  //       variant: "destructive",
+  //     });
+  //   }
+  // };
+
+  return (
+    <Card className="max-w-full min-w-[30rem] border dark:border-2 shadow-sm bg-">
+      <Form {...form} onSubmit={() => {}}>
+        <CardHeader className="pt-6 px-6">
+          <CardTitle className="mt-0 p-0 text-xl font-semibold text-foreground mb-2">
+            {title}
+          </CardTitle>
+          <CardDescription className="py-0 pl-0 text-sm">
+            {description}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="p-6">
+          <div className="flex flex-wrap gap-4">
+            {buildForm(fields, form, undefined)}
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-end border-t px-6 py-3 text-sm">
+          <Button
+            // isSubmitting={isSubmitting}
+            className="h-8"
+            type="button"
+            // onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+        </CardFooter>
+      </Form>
+    </Card>
+  );
+}