@react-fabric/form 1.0.0-beta.8 → 1.0.1

package/src/builder/FormField.tsx

@@ -21,6 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+/* eslint-disable @eslint-react/static-components */
+
+import { isEmpty } from "@react-fabric/utilities";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Controller } from "../form/Controller";
@@ -28,23 +31,38 @@ import { type UploadHandler } from "../hooks/useFileUploader";
 import { ArrayInput } from "../input/ArrayInput";
 import { AvatarInput } from "../input/AvatarInput";
 import { ColorInput } from "../input/ColorInput";
+import { DateInput } from "../input/DateInput";
 import { Input } from "../input/Input";
 import { Number } from "../input/Number";
-import { Range } from "../input/Range";
+import { RangeSlider } from "../input/RangeSlider";
 import { Switch } from "../input/Switch";
 import { Textarea } from "../input/Textarea";
 import { Select } from "../select/Select";
-import { type SchemaType } from "../types/schema";
+import { type BaseSelectProps } from "../types";
+import { DATA_TYPES, type SchemaType } from "../types/schema";
 import { FileField } from "./FileField";
 
-export const FormField = ({
+const getField = (datatype: DATA_TYPES, hasOptions: boolean) => {
+  if (datatype === DATA_TYPES.NUMBER) return Number;
+  if (datatype === DATA_TYPES.RANGE) return RangeSlider;
+  if (datatype === DATA_TYPES.BOOL) return Switch;
+  if (datatype === DATA_TYPES.TEXT) return Textarea;
+  if (datatype === DATA_TYPES.DATE) return DateInput;
+  if (datatype === DATA_TYPES.DATETIME) return DateInput;
+  if (datatype === DATA_TYPES.COLOR) return ColorInput;
+  if (hasOptions) return Select;
+
+  return Input;
+};
+
+export function FormField<T extends AnyObject = string>({
   id,
   label,
   required,
   inline,
   prefix,
   autoFocus,
-  defaultValue,
+  optionLists,
   fileUrl,
   uploadHandler,
   ...rest
@@ -52,41 +70,28 @@ export const FormField = ({
   inline?: boolean;
   prefix?: string;
   autoFocus?: boolean;
+  optionLists?: KeyValue<BaseSelectProps<T>>;
   fileUrl?: (path: string) => string;
   uploadHandler?: UploadHandler;
-}) => {
+}) {
   const { t } = useTranslation();
-  const fieldName = useMemo(
-    () => [prefix, id].filter(Boolean).join("."),
-    [id, prefix],
-  );
-
-  const E = useMemo(() => {
-    if (rest.datatype === "number" || rest.datatype === "decimal")
-      return Number;
-    if (rest.datatype === "range") return Range;
-    if (rest.datatype === "boolean") return Switch;
-    if (rest.datatype === "text") return Textarea;
-    if (rest.datatype === "color") return ColorInput;
-    if (rest.datatype === "string" && rest.options) return Select;
+  const fieldName = useMemo(() => [prefix, id].filter(Boolean).join("."), [id, prefix]);
 
-    return Input;
-  }, [rest.datatype]);
+  const hasOptions = useMemo(
+    () =>
+      rest.datatype === DATA_TYPES.STRING &&
+      ((rest.optionList === "--CUSTOM--" && !isEmpty(rest.options)) || !isEmpty(optionLists?.[rest.optionList ?? ""])),
+    [rest, optionLists],
+  );
 
   const props = useMemo(() => {
-    if (rest.datatype === "number")
+    if (rest.datatype === DATA_TYPES.NUMBER)
       return {
         min: rest.min,
         max: rest.max,
         step: rest.step ?? 1,
       };
-    if (rest.datatype === "decimal")
-      return {
-        min: rest.min,
-        max: rest.max,
-        step: rest.step ?? 0.1,
-      };
-    if (rest.datatype === "range")
+    if (rest.datatype === DATA_TYPES.RANGE)
       return {
         min: rest.min ?? 1,
         max: rest.max ?? 99,
@@ -94,54 +99,57 @@ export const FormField = ({
         showValue: true,
         showLabels: true,
       };
-    if (rest.datatype === "text") return { rows: 3 };
-    if (rest.datatype === "color") return { showPicker: true };
+    if (rest.datatype === DATA_TYPES.DATE)
+      return {
+        min: rest.min,
+        max: rest.max,
+        type: "date",
+      };
+    if (rest.datatype === DATA_TYPES.DATETIME)
+      return {
+        min: rest.min,
+        max: rest.max,
+        type: "datetime",
+      };
+    if (rest.datatype === DATA_TYPES.TEXT) return { rows: 3 };
+    if (rest.datatype === DATA_TYPES.COLOR) return { showPicker: true };
 
-    if (rest.datatype === "string" && rest.options)
+    if (rest.datatype === DATA_TYPES.STRING && hasOptions)
       return {
-        options: rest.options,
         multiple: rest.multiple,
+        allowCreate: rest.allowCustom,
         searchable: true,
+        ...(optionLists?.[rest.optionList ?? ""] ?? { options: rest.options }),
       };
 
     return {};
-  }, [rest]);
+  }, [rest, hasOptions, optionLists]);
 
-  if (rest.datatype === "avatar")
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const E = useMemo<AnyObject>(() => {
+    return getField(rest.datatype, hasOptions);
+  }, [rest.datatype, hasOptions]);
+
+  if (rest.datatype === DATA_TYPES.AVATAR)
     return (
       uploadHandler && (
         <Controller name={fieldName}>
-          <AvatarInput
-            uploadHandler={uploadHandler}
-            fileUrl={fileUrl}
-            name={fieldName}
-          />
+          <AvatarInput uploadHandler={uploadHandler} fileUrl={fileUrl} name={fieldName} />
         </Controller>
       )
     );
 
-  if (rest.datatype === "file")
+  if (rest.datatype === DATA_TYPES.FILE)
     return (
       uploadHandler && (
         <Controller name={fieldName}>
-          <FileField
-            uploadHandler={uploadHandler}
-            inline={inline}
-            label={label}
-            id={id}
-            {...rest}
-          />
+          <FileField uploadHandler={uploadHandler} inline={inline} label={label} id={id} {...rest} />
         </Controller>
       )
     );
 
-  return rest.multiple && !("options" in rest) ? (
-    <ArrayInput
-      name={fieldName}
-      label={t(label, label)}
-      required={required}
-      onAdd={() => ""}
-    >
+  return rest.multiple && !hasOptions ? (
+    <ArrayInput name={fieldName} label={t(`fb.${id}`, label || id)} required={required} onAdd={() => String("")}>
       <Controller>
         <E {...props} />
       </Controller>
@@ -150,12 +158,12 @@ export const FormField = ({
     <Controller name={fieldName}>
       <E
         {...props}
-        autoFocus={autoFocus}
-        label={t(label, label)}
-        placeholder={t(label, label)}
+        {...{ autoFocus }}
+        label={t(`fb.${id}`, label || id)}
+        placeholder={t(`fb.${id}`, label || id)}
         required={required}
         inline={inline}
       />
     </Controller>
   );
-};
+}

package/src/builder/SchemaEditor.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 { Footer } from "@react-fabric/core";
+import { EMPTY_ARRAY } from "@react-fabric/utilities";
+import { useCallback, useEffect, useRef } from "react";
+import { Form, type FormRef } from "../form/Form";
+import { DATA_TYPES, type FormSchema, type SchemaEditorProps } from "../types/schema";
+import { SchemaArrayForm } from "./components/SchemaArrayForm";
+
+/**
+ * SchemaEditor component allows users to edit a schema definition.
+ * It provides a form interface to modify schema properties dynamically.
+ */
+export function SchemaEditor({
+  schemaDef,
+  dynamic,
+  acceptableTypes,
+  optionLists = EMPTY_ARRAY,
+  children,
+  onSubmit,
+  onChange,
+}: SchemaEditorProps) {
+  const formRef = useRef<FormRef<{ schema: FormSchema }>>(null);
+
+  const handleChange = useCallback(
+    (model: { schema: FormSchema }) => {
+      onChange?.(model.schema);
+    },
+    [onChange],
+  );
+
+  const handleSubmit = useCallback(
+    (model: { schema: FormSchema }) => {
+      onSubmit?.(model.schema);
+    },
+    [onSubmit],
+  );
+
+  useEffect(() => {
+    formRef.current?.setValues({ schema: schemaDef });
+  }, [schemaDef]);
+
+  return (
+    <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-default px-6 py-2">
+          {children}
+        </Footer>
+      )}
+    </Form>
+  );
+}

package/src/builder/components/AddSchemaFields.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 { yupResolver } from "@hookform/resolvers/yup";
+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),
+});
+
+type FieldSchemaType = yup.InferType<typeof fieldSchema>;
+
+export function AddSchemaFields(props: ModalProps) {
+  const handleSubmit = useCallback(
+    (model: FieldSchemaType) => {
+      props.onClose?.(model.fields.map((f: string) => f.split(",").map((ff) => ff.trim())).flat(2));
+    },
+    [props],
+  );
+
+  return (
+    <Modal {...props}>
+      <Form resolver={yupResolver(fieldSchema)} defaultValues={{ fields: [" "] }} onSubmit={handleSubmit}>
+        <Content>
+          <ArrayInput minItems={1} name="fields" onAdd={() => String("")}>
+            <Controller>
+              <Input {...{ autoFocus: true }} />
+            </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,146 @@
+/*
+ * 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 { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
+import { DragDropProvider, type DragEndEvent } from "@dnd-kit/react";
+import { Button, Content, Header, useOverlayService } from "@react-fabric/core";
+import { isArray } from "@react-fabric/utilities";
+import { useCallback, useState } from "react";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import type { FormSchema, SchemaDef } from "../../types/schema";
+import { DATA_TYPES, type SchemaEditorProps } from "../../types/schema";
+import { AddSchemaFields } from "./AddSchemaFields";
+import { SchemaField } from "./SchemaField";
+
+function Wrapper({
+  children,
+  fields,
+  onMove,
+}: {
+  children: React.ReactNode;
+  fields: KeyValue[];
+  onMove: (active: number, end: number) => void;
+}) {
+  // pass id list to dnd context
+  const idMap = fields.map((item) => item.__ID__ as string);
+  const handleDragEnd = (e: DragEndEvent) => {
+    if (e.operation.source?.id !== e.operation.target?.id) {
+      // find index of item and drop over
+      const active = idMap.indexOf(`${e.operation.source?.id}`);
+      const end = idMap.indexOf(`${e.operation.target?.id}`);
+      onMove(active, end);
+    }
+  };
+  return (
+    <DragDropProvider onDragEnd={handleDragEnd} modifiers={[RestrictToVerticalAxis]}>
+      {children}
+    </DragDropProvider>
+  );
+}
+
+// Need to disable prop-types lint due to uknown lint error
+export function SchemaArrayForm({ dynamic, acceptableTypes, optionLists }: Partial<SchemaEditorProps>) {
+  const form = useFormContext<{ schema: FormSchema }>();
+  const [defaultOpen, setDefaultOpen] = useState(true);
+  const { fields, append, remove, move } = useFieldArray({
+    name: "schema",
+    control: form.control,
+  });
+
+  const handleTypeChange = useCallback(
+    (index: number, val: SchemaDef) => {
+      form.setValue(`schema.${index}`, val);
+    },
+    [form],
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      remove(index);
+    },
+    [remove],
+  );
+
+  const [renderModal, openAddfields] = useOverlayService<unknown, string[]>(AddSchemaFields);
+  const handleAdd = useCallback(() => {
+    void openAddfields().then((fields) => {
+      if (isArray(fields)) {
+        const existing = form.getValues().schema.map((field) => field.id);
+        fields.forEach((field) => {
+          if (!existing.includes(field)) {
+            append({
+              id: field,
+              datatype: DATA_TYPES.STRING,
+              label: "",
+            });
+          }
+        });
+      }
+    });
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, []);
+
+  return (
+    <Wrapper onMove={move} fields={fields}>
+      <Header flex justify="end" className="gap-1 px-2">
+        {dynamic && (
+          <Button size="sm" variant="link" icon="icon-[mdi--plus-circle-outline]" aria-label="add field" onClick={handleAdd} />
+        )}
+        <Button
+          size="sm"
+          variant="link"
+          icon="icon-[mdi--arrow-collapse-vertical]"
+          aria-label="collapse all"
+          onClick={() => setDefaultOpen(false)}
+        />
+        <Button
+          size="sm"
+          variant="link"
+          icon="icon-[mdi--arrow-expand-vertical]"
+          aria-label="expand all"
+          onClick={() => setDefaultOpen(true)}
+        />
+      </Header>
+      <Content className="divide-y">
+        {fields.map((field, index) => (
+          <SchemaField
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            key={index}
+            index={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: SchemaDef) => handleTypeChange(index, val)}
+            acceptableTypes={acceptableTypes ?? Object.values(DATA_TYPES)}
+          />
+        ))}
+      </Content>
+      {renderModal()}
+    </Wrapper>
+  );
+}