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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.33",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,8 +39,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.32",
-    "@react-fabric/utilities": "^1.0.0-beta.32",
+    "@react-fabric/core": "^1.0.0-beta.33",
+    "@react-fabric/date": "^1.0.0-beta.33",
+    "@react-fabric/utilities": "^1.0.0-beta.33",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -60,5 +61,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "e8ba7088116f5ae253ed989854d6fdaef2ad7507"
+  "gitHead": "3b7ffc99aac7b8fdc72c7122c39db55d1104297f"
 }

package/src/builder/FileField.tsx

@@ -24,20 +24,21 @@
 import { Button, Icon, ProgressBar } from "@react-fabric/core";
 import { FileUtil, Format } from "@react-fabric/utilities";
 import { Fragment } from "react";
-import { type UploadHandler, useFileUploader } from "../hooks/useFileUploader";
+import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
 import { Field } from "../input/Field";
 import { HiddenInput } from "../input/Hidden";
-import { type FileSchema } from "../types/schema";
+import { type FileSchema, type ValueType } from "../types/schema";
 
 export const FileField = ({
   uploadHandler,
   inline,
   label,
   accept,
-  multiple = false,
   value,
+  fileUrl,
+  multiple,
   ...rest
-}: Partial<FileSchema> & {
+}: Partial<FileSchema & ValueType> & {
   value?: AnyObject;
   inline?: boolean;
   fileUrl?: (path: string) => string;

package/src/builder/FormField.tsx

@@ -21,6 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { isEmpty } from "@react-fabric/utilities";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Controller } from "../form/Controller";
@@ -28,13 +29,15 @@ 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 = ({
@@ -44,7 +47,7 @@ export const FormField = ({
   inline,
   prefix,
   autoFocus,
-  defaultValue,
+  optionLists,
   fileUrl,
   uploadHandler,
   ...rest
@@ -52,6 +55,7 @@ export const FormField = ({
   inline?: boolean;
   prefix?: string;
   autoFocus?: boolean;
+  optionLists?: KeyValue<BaseSelectProps<any>>;
   fileUrl?: (path: string) => string;
   uploadHandler?: UploadHandler;
 }) => {
@@ -61,32 +65,34 @@ export const FormField = ({
     [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 hasOptions = useMemo(
+    () =>
+      rest.datatype === DATA_TYPES.STRING &&
+      ((rest.optionList === "--CUSTOM--" && !isEmpty(rest.options)) ||
+        !isEmpty(optionLists?.[rest.optionList ?? ""])),
+    [rest],
+  );
+
+  const E = useMemo<AnyObject>(() => {
+    if (rest.datatype === DATA_TYPES.NUMBER) return Number;
+    if (rest.datatype === DATA_TYPES.RANGE) return RangeSlider;
+    if (rest.datatype === DATA_TYPES.BOOL) return Switch;
+    if (rest.datatype === DATA_TYPES.TEXT) return Textarea;
+    if (rest.datatype === DATA_TYPES.DATE) return DateInput;
+    if (rest.datatype === DATA_TYPES.COLOR) return ColorInput;
+    if (hasOptions) return Select;
 
     return Input;
-  }, [rest.datatype]);
+  }, [rest.datatype, hasOptions]);
 
   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,20 +100,27 @@ 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: rest.type,
+      };
+    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")
+  if (rest.datatype === DATA_TYPES.AVATAR)
     return (
       uploadHandler && (
         <Controller name={fieldName}>
@@ -120,7 +133,7 @@ export const FormField = ({
       )
     );
 
-  if (rest.datatype === "file")
+  if (rest.datatype === DATA_TYPES.FILE)
     return (
       uploadHandler && (
         <Controller name={fieldName}>
@@ -135,12 +148,12 @@ export const FormField = ({
       )
     );
 
-  return rest.multiple && !("options" in rest) ? (
+  return rest.multiple && !hasOptions ? (
     <ArrayInput
       name={fieldName}
       label={t(label, label)}
       required={required}
-      onAdd={() => ""}
+      onAdd={() => String("")}
     >
       <Controller>
         <E {...props} />

package/src/builder/SchemaEditor.tsx

@@ -0,0 +1,441 @@
+/*
+ * 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,
+  Collapsable,
+  Content,
+  CoreIcons,
+  Footer,
+  Modal,
+  ToggleButtonGroup,
+  useOverlayService,
+} 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 { 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 { 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,
+} from "../types/schema";
+
+interface Props {
+  schemaDef: FormSchema;
+  allowRemove?: boolean;
+  acceptableTypes?: DATA_TYPES[];
+
+  optionLists?: string[];
+
+  onChange: (schema: FormSchema) => void;
+}
+
+const CUSTOM_LIST = "--CUSTOM--";
+
+const SchemaField = ({
+  field,
+  getModel,
+  optionLists = EMPTY_ARRAY,
+  allowRemove,
+  onTypeChange,
+  acceptableTypes,
+}: {
+  field: string;
+  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);
+  }, []);
+
+  useEffect(() => {
+    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);
+    }
+  }, [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}
+            className="invisible group-hover/field:visible"
+          />
+        )}
+      </div>
+      <div className="flex flex-col gap-1 pb-4">
+        <Controller name={`${field}.datatype`}>
+          <Select
+            inline
+            label="Type"
+            placeholder="Data type"
+            options={acceptableTypes}
+            onChange={(val) => setType(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>
+  );
+};
+
+export const SchemaEditor = ({
+  schemaDef,
+  allowRemove,
+  acceptableTypes,
+  optionLists = EMPTY_ARRAY,
+  onChange,
+}: Props) => {
+  const formRef = useRef<FormRef<KeyValue>>(null);
+  const schemaRef = useRef<KeyValue>({});
+  const [schema, setSchema] = useState<KeyValue<SchemaDef>>({});
+  const [schemaFields, setSchemaFields] = useState<string[]>([]);
+
+  useEffect(() => {
+    const schemaMap = Object.fromEntries(
+      schemaDef.map((schema) => [schema.id, schema]),
+    );
+
+    const schema = Object.fromEntries(
+      Object.keys(schemaMap).map((field) => [
+        field,
+        schemaRef.current[field] ?? schemaMap[field],
+      ]),
+    );
+    setSchema(schema);
+    setSchemaFields(Object.keys(schema));
+  }, [schemaDef]);
+
+  const handleChange = useCallback((model: KeyValue<SchemaDef>) => {
+    onChange?.(Object.values(model));
+  }, []);
+
+  const handleTypeChange = useCallback((field: string, val: KeyValue) => {
+    formRef.current?.setValue(field, val);
+  }, []);
+
+  return (
+    <Form
+      formRef={formRef}
+      values={schema}
+      defaultValues={schema}
+      onSubmit={handleChange}
+    >
+      <Content className="divide-y">
+        {schemaFields.map((field) => (
+          <SchemaField
+            key={field}
+            field={field}
+            allowRemove={allowRemove}
+            optionLists={optionLists}
+            getModel={() => formRef.current?.getValues()[field]}
+            onTypeChange={(val: KeyValue) => handleTypeChange(field, val)}
+            acceptableTypes={acceptableTypes ?? Object.values(DATA_TYPES)}
+          />
+        ))}
+      </Content>
+      <Footer
+        flex
+        justify="end"
+        className="sticky bottom-0 border-t bg-base px-6 py-2"
+      >
+        <Button type="reset" variant="link">
+          Reset
+        </Button>
+        <Button type="submit" variant="solid">
+          Submit
+        </Button>
+      </Footer>
+    </Form>
+  );
+};

package/src/form/Controller.tsx

@@ -46,7 +46,7 @@ export interface ControllerProps {
         disabled?: boolean;
         onBlur: () => void;
         onChange: (value: AnyObject) => void;
-        inputRef?: React.Ref<HTMLInputElement>;
+        ref?: React.Ref<HTMLInputElement>;
       }) => ReactElement);
 }
 
@@ -86,7 +86,7 @@ export const Controller = ({ name, children, ...rest }: ControllerProps) => {
           : children({
               ...field,
               ...rest,
-              inputRef: (el: AnyObject) => {
+              ref: (el: AnyObject) => {
                 el && ref(el);
               },
               readOnly: isSubmitting,

package/src/form/Form.tsx

@@ -57,6 +57,10 @@ export interface FormProps<K extends KeyValue = KeyValue> {
    * form data schema
    */
   schema?: yup.ObjectSchema<K>;
+  /**
+   * current form model
+   */
+  values?: K;
   /**
    * default data values
    */
@@ -77,6 +81,7 @@ export const Form = <K extends KeyValue>({
   formRef,
   schema,
   children,
+  values,
   defaultValues,
   onSubmit = DEFAULT_SUBMIT,
   onChange,
@@ -84,15 +89,12 @@ export const Form = <K extends KeyValue>({
 }: 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>,
   });
 
-  useEffect(() => {
-    form.reset();
-  }, []);
-
   const [, startTransition] = useTransition();
   const changeHandler = useDebounce(onChange, [onChange]);
   useEffect(() => {