@react-fabric/form 1.0.0-beta.33 → 1.0.0-beta.35

package/src/builder/components/SchemaField.tsx

@@ -0,0 +1,432 @@
+/*
+ * 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 { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  Button,
+  Collapsable,
+  Content,
+  CoreIcons,
+  Footer,
+  Modal,
+  type ModalProps,
+  ToggleButtonGroup,
+  useOverlayService,
+} from "@react-fabric/core";
+import { EMPTY_ARRAY } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Fragment,
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { Controller } from "../../form/Controller";
+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 NumberSchema,
+  SCHEMA_CUSTOM_LIST,
+  type SchemaEditorProps,
+  type StringSchema,
+  type ValueType,
+} from "../../types/schema";
+
+export const SchemaField = ({
+  id,
+  field,
+  fieldId,
+  getModel,
+  onRemove,
+  defaultOpen = true,
+  optionLists = EMPTY_ARRAY,
+  dynamic,
+  onTypeChange,
+  acceptableTypes,
+}: {
+  id: string;
+  field: string;
+  fieldId: string;
+  defaultOpen?: boolean;
+  onRemove: () => void;
+  getModel: () => KeyValue;
+  onTypeChange: (val: KeyValue) => void;
+} & Omit<SchemaEditorProps, "schemaDef" | "onChange">) => {
+  const [type, setType] = useState<DATA_TYPES>();
+  const [multiple, setMultiple] = useState(false);
+  const [hasOptions, setHasOptions] = useState(false);
+  const [customOptions, setCustomOptions] = useState(false);
+
+  const SortableItem = useCallback(
+    ({
+      id,
+      children,
+      className,
+    }: PropsWithChildren<{ id: AnyObject; className: string }>) => {
+      if (dynamic) {
+        const {
+          attributes,
+          listeners,
+          setNodeRef,
+          transform,
+          transition,
+          isDragging,
+        } = useSortable({ id });
+        return (
+          <div
+            className={className}
+            ref={setNodeRef}
+            style={{
+              transform: CSS.Transform.toString(transform),
+              transition,
+            }}
+          >
+            <div
+              className={classNames(
+                "invisible group-hover/field:visible my-2 w-4",
+                isDragging ? "cursor-grabbing" : "cursor-grab",
+              )}
+              {...attributes}
+              {...listeners}
+              style={{
+                backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='4' width='4'%3E%3Ccircle cx='2' cy='2' r='1' fill='%238888' /%3E%3C/svg%3E ")`,
+              }}
+            />
+            {children}
+          </div>
+        );
+      }
+
+      return <div className={className}>{children}</div>;
+    },
+    [dynamic],
+  );
+  // @ts-expect-error ignore
+  SortableItem.displayName = "SortableItem";
+
+  const [OptionModal, openOptionModal] = useOverlayService(
+    (props: ModalProps) => (
+      <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 === SCHEMA_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 (
+    <SortableItem id={fieldId} className="flex flex-nowrap gap-1 group/field">
+      <Collapsable key={fieldId} open={defaultOpen} className="flex-1">
+        <div className="flex flex-nowrap items-center">
+          <span className="flex-1 truncate">{id}</span>
+          {dynamic && (
+            <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={id} />
+          </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={[SCHEMA_CUSTOM_LIST, ...optionLists]}
+                    onChange={(v) => setCustomOptions(v === SCHEMA_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>
+    </SortableItem>
+  );
+};

package/src/form/Form.tsx

@@ -23,7 +23,7 @@
 
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useDebounce } from "@react-fabric/core";
-import { type yup } from "@react-fabric/utilities";
+import { EMPTY_OBJECT, type yup } from "@react-fabric/utilities";
 import {
   useCallback,
   useEffect,
@@ -57,10 +57,6 @@ export interface FormProps<K extends KeyValue = KeyValue> {
    * form data schema
    */
   schema?: yup.ObjectSchema<K>;
-  /**
-   * current form model
-   */
-  values?: K;
   /**
    * default data values
    */
@@ -81,15 +77,13 @@ export const Form = <K extends KeyValue>({
   formRef,
   schema,
   children,
-  values,
-  defaultValues,
+  defaultValues = EMPTY_OBJECT as K,
   onSubmit = DEFAULT_SUBMIT,
   onChange,
   ...rest
 }: PropsWithChildren<FormProps<K>>) => {
   const ref = useRef<HTMLFormElement>(null);
   const form = useForm<K>({
-    values,
     shouldFocusError: true,
     resolver: schema && (yupResolver(schema) as AnyObject),
     defaultValues: defaultValues as DefaultValues<K>,
@@ -156,7 +150,10 @@ export const Form = <K extends KeyValue>({
       <form
         ref={ref}
         onReset={() => handleReset(defaultValues)}
-        onSubmit={form.handleSubmit(onSubmit, onInvalid) as AnyObject}
+        onSubmit={(e) => {
+          e.stopPropagation();
+          void form.handleSubmit(onSubmit, onInvalid)(e);
+        }}
         data-loading={form.formState.isSubmitting}
         className="contents"
         autoComplete="off"

package/src/index.ts

@@ -31,7 +31,12 @@ export { SchemaEditor } from "./builder/SchemaEditor";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
 
-export { DATA_TYPES, type FormSchema, type SchemaDef } from "./types/schema";
+export {
+  DATA_TYPES,
+  SCHEMA_CUSTOM_LIST,
+  type FormSchema,
+  type SchemaDef,
+} from "./types/schema";
 
 export { ArrayInput } from "./input/ArrayInput";
 export { Checkbox } from "./input/Checkbox";

package/src/input/ArrayInput.tsx

@@ -48,6 +48,7 @@ import classes from "./ArrayInput.module.css";
 
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
+
 export interface ArrayInputProps {
   /**
    * input label

package/src/input/ColorInput.tsx

@@ -48,7 +48,10 @@ import {
 import { type InputProps } from "../types";
 import { ColorPicker, type ColorProps } from "./ColorPicker";
 
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps
+  extends InputProps,
+    Omit<ColorProps, "onChange">,
+    RefProp {
   /**
    * show eydrop picker
    */
@@ -82,7 +85,7 @@ export const ColorInput = ({
   const handleChange = useCallback(
     (e?: string) => {
       setActualValue(e ?? defaultColor);
-      onChange != null && startTransition(() => onChange(e));
+      onChange != null && startTransition(() => onChange(e ?? null));
     },
     [onChange],
   );

package/src/input/DateInput.tsx

@@ -120,7 +120,7 @@ export const DateInput = ({
       } else {
         setActualValue("");
         setInputValue("");
-        onChange != null && startTransition(() => onChange(""));
+        onChange != null && startTransition(() => onChange(null));
       }
     },
     [onChange, inputFormat],
@@ -137,7 +137,7 @@ export const DateInput = ({
       } else {
         setActualValue("");
         setInputValue("");
-        onChange != null && startTransition(() => onChange(""));
+        onChange != null && startTransition(() => onChange(null));
       }
     },
     [onChange, inputFormat],

package/src/input/File.tsx

@@ -134,7 +134,7 @@ export const FileInput = ({
         }
       } else {
         setActualValue(e?.target.files?.item(0));
-        onChange?.(e?.target.files?.item(0) ?? undefined);
+        onChange?.(e?.target.files?.item(0) ?? null);
         if (!e && inputRef.current) inputRef.current.value = "";
       }
     },

package/src/input/Hidden.tsx

@@ -54,9 +54,10 @@ export const HiddenInput = ({
   name,
 }: Props) => {
   useEffect(() => {
-    setTimeout(() => {
-      onChange?.(hiddenValue);
-    }, 50);
+    hiddenValue &&
+      setTimeout(() => {
+        onChange?.(hiddenValue);
+      }, 50);
   }, [hiddenValue]);
   return (
     <Fragment>

package/src/input/Input.tsx

@@ -73,7 +73,7 @@ export const Input = ({
     (e?: ChangeEvent<HTMLInputElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onchange],
   );

package/src/input/Number.tsx

@@ -84,7 +84,7 @@ export const Number = ({
     (e?: ChangeEvent<HTMLInputElement>) => {
       const number = e?.target.valueAsNumber;
       setActualValue(number ?? "");
-      onChange?.(number ?? undefined);
+      onChange?.(number ?? null);
     },
     [onChange],
   );

package/src/input/Password.tsx

@@ -83,7 +83,7 @@ export const Password = ({
     (e?: ChangeEvent<HTMLInputElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onChange],
   );

package/src/input/RangeSlider.tsx

@@ -141,7 +141,7 @@ export const RangeSlider = ({
   const handleChange = useCallback(
     (val: [number, number]) => {
       setActualValue(val ?? [min, max]);
-      onChange?.(val ?? undefined);
+      onChange?.(val ?? null);
     },
     [onChange, min, max],
   );

package/src/input/Search.tsx

@@ -96,7 +96,7 @@ export const Search = ({
       const value = e?.target.value;
       refValue.current = value ?? "";
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
 
       // value was cleared so force fire onSearch
       if (searchOnChange) {

package/src/input/Slider.tsx

@@ -146,7 +146,7 @@ export const Slider = ({
     (value: number) => {
       const val = useInfinity && value === max ? Infinity : value;
       setActualValue(val ?? 0);
-      onChange?.(val ?? undefined);
+      onChange?.(val ?? null);
     },
     [onChange, max, useInfinity],
   );

package/src/input/Textarea.tsx

@@ -86,7 +86,7 @@ export const Textarea = ({
     (e?: ChangeEvent<HTMLTextAreaElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onChange],
   );

package/src/types/index.ts

@@ -34,7 +34,7 @@ export interface InputProps<V = string> extends TestProps {
   /**
    * change handler
    */
-  onChange?: (value?: V) => void;
+  onChange?: (value?: V | null) => void;
   /**
    * on focus event handler
    */