@react-fabric/form 1.0.0-beta.34 → 1.0.0-beta.36

package/src/builder/SchemaEditor.tsx

@@ -21,432 +21,47 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  Button,
-  Collapsable,
-  Content,
-  CoreIcons,
-  Footer,
-  Modal,
-  ToggleButtonGroup,
-  useOverlayService,
-} from "@react-fabric/core";
-import { type Elements } from "@react-fabric/core/dist/types/types";
+import { Footer } from "@react-fabric/core";
 import { EMPTY_ARRAY } from "@react-fabric/utilities";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
-import { Controller } from "../form/Controller";
+import { useCallback, useEffect, useRef } from "react";
 import { Form, type FormRef } from "../form/Form";
-import { ArrayInput } from "../input/ArrayInput";
-import { Checkbox } from "../input/Checkbox";
-import { DateInput } from "../input/DateInput";
-import { Field } from "../input/Field";
-import { HiddenInput } from "../input/Hidden";
-import { Input } from "../input/Input";
-import { Number } from "../input/Number";
-import { Select } from "../select/Select";
 import {
   DATA_TYPES,
-  type DateSchema,
-  type DefaultSchema,
   type FormSchema,
-  type NumberSchema,
-  type SchemaDef,
-  type StringSchema,
-  type ValueType,
+  type SchemaEditorProps,
 } from "../types/schema";
-
-interface Props {
-  schemaDef: FormSchema;
-  allowRemove?: boolean;
-  acceptableTypes?: DATA_TYPES[];
-
-  optionLists?: string[];
-
-  /**
-   * Footer actions
-   */
-  children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
-
-  onChange: (schema: FormSchema) => void;
-}
-
-const CUSTOM_LIST = "--CUSTOM--";
-
-const SchemaField = ({
-  field,
-  getModel,
-  onRemove,
-  optionLists = EMPTY_ARRAY,
-  allowRemove,
-  onTypeChange,
-  acceptableTypes,
-}: {
-  field: string;
-  onRemove: () => void;
-  getModel: () => KeyValue;
-  onTypeChange: (val: KeyValue) => void;
-} & Omit<Props, "schemaDef" | "onChange">) => {
-  const [type, setType] = useState<DATA_TYPES>();
-  const [multiple, setMultiple] = useState(false);
-  const [hasOptions, setHasOptions] = useState(false);
-  const [customOptions, setCustomOptions] = useState(false);
-
-  const [OptionModal, openOptionModal] = useOverlayService((props) => (
-    <Modal {...props}>
-      <Content>
-        <ArrayInput name={`${field}.options`} onAdd={() => String("")}>
-          <Controller>
-            <Input />
-          </Controller>
-        </ArrayInput>
-      </Content>
-      <Footer
-        flex
-        justify="end"
-        className="sticky bottom-0 border-t bg-base px-6 py-2"
-      >
-        <Button variant="link" onClick={props.onClose}>
-          Close
-        </Button>
-      </Footer>
-    </Modal>
-  ));
-
-  useEffect(() => {
-    setTimeout(() => {
-      const model = getModel();
-      setType(model.datatype);
-      setMultiple(model.multiple);
-      setHasOptions(!!model.optionList);
-      setCustomOptions(model.optionList === CUSTOM_LIST);
-    }, 10);
-  }, []);
-
-  const handleTypeChange = useCallback((type: DATA_TYPES) => {
-    if (type) {
-      const modelRef = getModel();
-      let reset = {
-        datatype: type,
-        id: field,
-        label: modelRef.label,
-        defaultValue: modelRef.defaultValue,
-        required: modelRef.required,
-        multiple: type === DATA_TYPES.AVATAR ? false : modelRef.multiple,
-        minItems: modelRef.minItems,
-        maxItems: modelRef.maxItems,
-      } as DefaultSchema & ValueType;
-      if (type === DATA_TYPES.STRING) {
-        reset = Object.assign(reset, {
-          optionList: modelRef.optionList,
-          options: modelRef.options,
-          regex: modelRef.regex,
-        } as StringSchema);
-      } else if (type === DATA_TYPES.DATE) {
-        reset = Object.assign(reset, {
-          type: "date",
-        } as DateSchema);
-      } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
-        reset = Object.assign(reset, {
-          min: modelRef.min,
-          max: modelRef.max,
-          step: modelRef.step,
-        } as NumberSchema);
-      }
-      if (type === DATA_TYPES.AVATAR) {
-        setMultiple(false);
-      }
-      onTypeChange(reset);
-      setType(type);
-    }
-  }, []);
-
-  return (
-    <Collapsable key={field} open>
-      <div className="flex flex-nowrap group/field">
-        <span className="flex-1 truncate">{field}</span>
-        {allowRemove && (
-          <Button
-            size="sm"
-            color="danger"
-            variant="link"
-            aria-label="Delete"
-            stopPropagation
-            icon={CoreIcons.trash}
-            onClick={onRemove}
-            className="invisible group-hover/field:visible"
-          />
-        )}
-      </div>
-      <div className="flex flex-col gap-1 pb-4">
-        <Controller name={`${field}.id`}>
-          <HiddenInput hiddenValue={field} />
-        </Controller>
-        <Controller name={`${field}.datatype`}>
-          <Select
-            inline
-            label="Type"
-            placeholder="Data type"
-            options={acceptableTypes}
-            onChange={(val) => handleTypeChange(val as unknown as DATA_TYPES)}
-          />
-        </Controller>
-        <Controller name={`${field}.label`}>
-          <Input
-            inline
-            label="Label"
-            allowClear
-            placeholder="Label..."
-            decorateEndShowWhenEmpty
-            decorateEnd={
-              <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-            }
-          />
-        </Controller>
-        {type === DATA_TYPES.STRING && (
-          <Fragment>
-            <Controller name={`${field}.regex`}>
-              <Input
-                inline
-                label="Regex validation"
-                allowClear
-                placeholder="Regex value..."
-                decorateEndShowWhenEmpty
-                decorateEnd={
-                  <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-                }
-              />
-            </Controller>
-            <Field inline label="Option list">
-              <Controller name={`${field}.optionList`}>
-                <Select
-                  allowClear
-                  options={[CUSTOM_LIST, ...optionLists]}
-                  onChange={(v) => setCustomOptions(v === CUSTOM_LIST)}
-                />
-              </Controller>
-              {customOptions && (
-                <Button
-                  icon={CoreIcons.list}
-                  aria-label="Custom options"
-                  onClick={() => {
-                    void openOptionModal();
-                  }}
-                />
-              )}
-            </Field>
-            {OptionModal}
-          </Fragment>
-        )}
-        {type === DATA_TYPES.FILE && (
-          <Fragment>
-            <Controller name={`${field}.accept`}>
-              <Input
-                inline
-                label="Accept types"
-                allowClear
-                placeholder="Accept value..."
-                decorateEndShowWhenEmpty
-                decorateEnd={
-                  <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-                }
-              />
-            </Controller>
-          </Fragment>
-        )}
-        {[DATA_TYPES.NUMBER, DATA_TYPES.RANGE].includes(
-          type as unknown as DATA_TYPES,
-        ) && (
-          <Fragment>
-            <Controller name={`${field}.min`}>
-              <Number
-                inline
-                label="Min value"
-                allowClear
-                placeholder="Minimum value..."
-                decorateEndShowWhenEmpty
-                decorateEnd={
-                  <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-                }
-              />
-            </Controller>
-            <Controller name={`${field}.max`}>
-              <Number
-                inline
-                label="Max value"
-                allowClear
-                placeholder="Maximum value..."
-                decorateEndShowWhenEmpty
-                decorateEnd={
-                  <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-                }
-              />
-            </Controller>
-            <Controller name={`${field}.step`}>
-              <Number
-                inline
-                label="Step value"
-                allowClear
-                placeholder="Step value..."
-                decorateEndShowWhenEmpty
-                decorateEnd={
-                  <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-                }
-              />
-            </Controller>
-          </Fragment>
-        )}
-        {type === DATA_TYPES.DATE && (
-          <Fragment>
-            <Field inline label="Type" plain>
-              <Controller name={`${field}.type`}>
-                <ToggleButtonGroup value="" fullWidth className="flex-1">
-                  <Button className="flex-1" value="date">
-                    Date
-                  </Button>
-                  <Button className="flex-1" value="datetime">
-                    Date Time
-                  </Button>
-                </ToggleButtonGroup>
-              </Controller>
-            </Field>
-            <Controller name={`${field}.min`}>
-              <DateInput
-                inline
-                label="Min value"
-                allowClear
-                placeholder="Minimum value..."
-                decorateEndShowWhenEmpty
-                decorateEnd={
-                  <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-                }
-              />
-            </Controller>
-            <Controller name={`${field}.max`}>
-              <DateInput
-                inline
-                label="Max value"
-                allowClear
-                placeholder="Maximum value..."
-                decorateEndShowWhenEmpty
-                decorateEnd={
-                  <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-                }
-              />
-            </Controller>
-          </Fragment>
-        )}
-        <Field label=" " inline plain>
-          <Controller name={`${field}.required`}>
-            <Checkbox label="Required" />
-          </Controller>
-          {type !== DATA_TYPES.AVATAR && (
-            <Controller name={`${field}.multiple`}>
-              <Checkbox label="Multiple" onChange={setMultiple} />
-            </Controller>
-          )}
-          {hasOptions && (
-            <Controller name={`${field}.allowCustom`}>
-              <Checkbox label="Allow custom value" />
-            </Controller>
-          )}
-        </Field>
-        {multiple && (
-          <Fragment>
-            <Controller name={`${field}.minItems`}>
-              <Number
-                inline
-                label="Min items"
-                allowClear
-                placeholder="Minimum items..."
-                decorateEndShowWhenEmpty
-                decorateEnd={
-                  <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-                }
-              />
-            </Controller>
-            <Controller name={`${field}.maxItems`}>
-              <Number
-                inline
-                label="Max items"
-                allowClear
-                placeholder="Maximum items..."
-                decorateEndShowWhenEmpty
-                decorateEnd={
-                  <span className="text-sm text-muted/50 px-1">OPTIONAL</span>
-                }
-              />
-            </Controller>
-          </Fragment>
-        )}
-      </div>
-    </Collapsable>
-  );
-};
+import { SchemaArrayForm } from "./components/SchemaArrayForm";
 
 export const SchemaEditor = ({
   schemaDef,
-  allowRemove,
+  dynamic,
   acceptableTypes,
   optionLists = EMPTY_ARRAY,
   children,
+  onSubmit,
   onChange,
-}: Props) => {
-  const formRef = useRef<FormRef<KeyValue>>(null);
-  const [schemaFields, setSchemaFields] = useState<string[]>([]);
-
-  useEffect(() => {
-    const schemaMap = Object.fromEntries(
-      schemaDef.map((schema) => [schema.id, schema]),
-    );
+}: SchemaEditorProps) => {
+  const formRef = useRef<FormRef<{ schema: FormSchema }>>(null);
 
-    const currentModel: KeyValue = formRef.current?.getValues() ?? {};
-
-    const schema = Object.fromEntries(
-      Object.keys(schemaMap).map((field) => [
-        field,
-        currentModel[field] ?? schemaMap[field],
-      ]),
-    );
-    formRef.current?.setValues(schema);
-    setTimeout(() => {
-      setSchemaFields(Object.keys(schema));
-    }, 100);
-  }, [schemaDef]);
-
-  const handleChange = useCallback((model: KeyValue<SchemaDef>) => {
-    onChange?.(Object.values(model));
+  const handleChange = useCallback((model: { schema: FormSchema }) => {
+    onChange?.(model.schema);
   }, []);
 
-  const handleTypeChange = useCallback((field: string, val: KeyValue) => {
-    formRef.current?.setValue(field, val);
+  const handleSubmit = useCallback((model: { schema: FormSchema }) => {
+    onSubmit?.(model.schema);
   }, []);
 
-  const handleRemove = useCallback((field: string) => {
-    const newSchema: KeyValue = formRef.current?.getValues() ?? {};
-    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-    delete newSchema[field];
-    formRef.current?.setValues(newSchema);
-    setTimeout(() => {
-      setSchemaFields(Object.keys(newSchema));
-    }, 100);
-  }, []);
+  useEffect(() => {
+    formRef.current?.setValues({ schema: schemaDef });
+  }, [schemaDef]);
 
   return (
-    <Form formRef={formRef} onSubmit={handleChange}>
-      <Content className="divide-y">
-        {schemaFields.map((field) => (
-          <SchemaField
-            key={field}
-            field={field}
-            allowRemove={allowRemove}
-            optionLists={optionLists}
-            onRemove={() => handleRemove(field)}
-            getModel={() => formRef.current?.getValues()[field]}
-            onTypeChange={(val: KeyValue) => handleTypeChange(field, val)}
-            acceptableTypes={acceptableTypes ?? Object.values(DATA_TYPES)}
-          />
-        ))}
-      </Content>
+    <Form formRef={formRef} onChange={handleChange} onSubmit={handleSubmit}>
+      <SchemaArrayForm
+        dynamic={dynamic}
+        optionLists={optionLists}
+        acceptableTypes={acceptableTypes ?? Object.values(DATA_TYPES)}
+      />
       {children && (
         <Footer flex className="border-t bg-base px-6 py-2">
           {children}

package/src/builder/components/AddSchemaFields.tsx

@@ -0,0 +1,74 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Button,
+  Content,
+  Footer,
+  Modal,
+  type ModalProps,
+} from "@react-fabric/core";
+import { yup } from "@react-fabric/utilities";
+import { useCallback } from "react";
+import { Controller } from "../../form/Controller";
+import { Form } from "../../form/Form";
+import { ArrayInput } from "../../input/ArrayInput";
+import { Input } from "../../input/Input";
+
+const fieldSchema = yup.object({
+  fields: yup.array(yup.string().trim().required()).required().min(1),
+});
+
+export const AddSchemaFields = (props: ModalProps) => {
+  const handleSubmit = useCallback((model: KeyValue) => {
+    props.onClose(
+      model.fields
+        .map((f: string) => f.split(",").map((ff) => ff.trim()))
+        .flat(2),
+    );
+  }, []);
+
+  return (
+    <Modal {...props}>
+      <Form
+        schema={fieldSchema}
+        defaultValues={{ fields: [" "] }}
+        onSubmit={handleSubmit}
+      >
+        <Content>
+          <ArrayInput minItems={1} name="fields" onAdd={() => String("")}>
+            <Controller>
+              <Input autoFocus />
+            </Controller>
+          </ArrayInput>
+          <p className="text-sm text-muted">
+            Provide list of fields or comma-separated value
+          </p>
+        </Content>
+        <Footer flex justify="end" className="px-2 py-1">
+          <Button type="submit">Add</Button>
+        </Footer>
+      </Form>
+    </Modal>
+  );
+};

package/src/builder/components/SchemaArrayForm.tsx

@@ -0,0 +1,158 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { DndContext, type DragEndEvent } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext } from "@dnd-kit/sortable";
+import {
+  Button,
+  Content,
+  CoreIcons,
+  Header,
+  useOverlayService,
+} from "@react-fabric/core";
+import { isArray } from "@react-fabric/utilities";
+import { type PropsWithChildren, useCallback, useState } from "react";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import { DATA_TYPES, type SchemaEditorProps } from "../../types/schema";
+import { AddSchemaFields } from "./AddSchemaFields";
+import { SchemaField } from "./SchemaField";
+
+export const SchemaArrayForm = ({
+  dynamic,
+  acceptableTypes,
+  optionLists,
+}: Partial<SchemaEditorProps>) => {
+  const form = useFormContext();
+  const [defaultOpen, setDefaultOpen] = useState(true);
+  const { fields, append, remove, move } = useFieldArray({
+    name: "schema",
+    control: form.control,
+  });
+
+  const handleTypeChange = useCallback((index: number, val: KeyValue) => {
+    form.setValue(`schema.${index}`, val);
+  }, []);
+
+  const handleRemove = useCallback((index: number) => {
+    remove(index);
+  }, []);
+
+  const [AddModal, openAddfields] = useOverlayService(AddSchemaFields);
+  const handleAdd = useCallback(() => {
+    void openAddfields().then((fields) => {
+      if (isArray(fields)) {
+        const existing = form
+          .getValues()
+          .schema.map((field: KeyValue) => field.id);
+        fields.forEach((field) => {
+          if (!existing.includes(field)) {
+            append({
+              id: field,
+              datatype: DATA_TYPES.STRING,
+              label: "",
+            });
+          }
+        });
+      }
+    });
+  }, []);
+
+  const Wrapper = useCallback(
+    ({ children }: PropsWithChildren) => {
+      if (dynamic) {
+        // pass id list to dnd context
+        const idMap = fields.map((item) => item.id);
+        const handleDragEnd = (e: DragEndEvent) => {
+          if (e.over && e.active.id !== e.over.id) {
+            // find index of item and drop over
+            const active = idMap.indexOf(`${e.active.id}`);
+            const end = idMap.indexOf(`${e.over.id}`);
+            move(active, end);
+          }
+        };
+        return (
+          <DndContext
+            onDragEnd={handleDragEnd}
+            modifiers={[restrictToVerticalAxis]}
+          >
+            <SortableContext items={idMap}>{children}</SortableContext>
+          </DndContext>
+        );
+      }
+
+      return children;
+    },
+    [dynamic, fields],
+  );
+  // @ts-expect-error ignore
+  Wrapper.displayName = "SortableWrapper";
+
+  return (
+    <Wrapper>
+      <Header flex justify="end" className="gap-1 px-2">
+        {dynamic && (
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.insert}
+            aria-label="add field"
+            onClick={handleAdd}
+          />
+        )}
+        <Button
+          size="sm"
+          variant="link"
+          icon={CoreIcons.colapseAllVar}
+          aria-label="collapse all"
+          onClick={() => setDefaultOpen(false)}
+        />
+        <Button
+          size="sm"
+          variant="link"
+          icon={CoreIcons.expandAllVar}
+          aria-label="expand all"
+          onClick={() => setDefaultOpen(true)}
+        />
+      </Header>
+      <Content className="divide-y">
+        {fields.map((field, index) => (
+          <SchemaField
+            key={index}
+            defaultOpen={defaultOpen}
+            id={form.getValues().schema[index].id}
+            fieldId={field.id}
+            field={`schema.${index}`}
+            dynamic={dynamic}
+            optionLists={optionLists}
+            onRemove={() => handleRemove(index)}
+            getModel={() => form.getValues().schema[index]}
+            onTypeChange={(val: KeyValue) => handleTypeChange(index, val)}
+            acceptableTypes={acceptableTypes ?? Object.values(DATA_TYPES)}
+          />
+        ))}
+      </Content>
+      {AddModal}
+    </Wrapper>
+  );
+};