@react-fabric/form 1.0.0-beta.4 → 1.0.0-beta.41

package/dist/types/types/schema.d.ts

@@ -1,59 +1,105 @@
-interface BaseSchemaDef {
+/// <reference types="react" />
+import { type Elements } from "@react-fabric/core/dist/types/types";
+import { type DateLike } from "@react-fabric/date";
+export declare enum DATA_TYPES {
+    TEXT = "text",
+    COLOR = "color",
+    BOOL = "bool",
+    DATE = "date",
+    STRING = "string",
+    NUMBER = "number",
+    RANGE = "range",
+    FILE = "file",
+    AVATAR = "avatar",
+    SCHEMA = "schema"
+}
+export declare const SCHEMA_CUSTOM_LIST = "--CUSTOM--";
+interface SingleValue {
+    multiple?: false;
+    minItems?: never;
+    maxItems?: never;
+}
+interface MultipleValue {
+    multiple: true;
+    minItems?: number;
+    maxItems?: number;
+}
+export type ValueType = SingleValue | MultipleValue;
+interface BaseSchema {
     id: string;
     label: string;
     datatype: string;
     required?: boolean;
-    multiple?: boolean;
-    defaultValue?: AnyObject;
 }
-interface SchemaDef extends BaseSchemaDef {
-    datatype: "text" | "color";
+export interface DefaultSchema extends BaseSchema {
+    datatype: DATA_TYPES.TEXT | DATA_TYPES.COLOR;
 }
-interface BooleanSchema extends BaseSchemaDef {
-    datatype: "boolean";
-    defaultValue?: boolean;
+export interface BooleanSchema extends BaseSchema {
+    datatype: DATA_TYPES.BOOL;
 }
-interface StringSchema extends BaseSchemaDef {
-    datatype: "string";
-    options?: string[];
+export interface StringSchema extends BaseSchema {
+    datatype: DATA_TYPES.STRING;
     regex?: string;
-    identifierType?: string;
+    options?: string[];
+    optionList?: string;
+    allowCustom?: boolean;
 }
-interface RangeSchema extends BaseSchemaDef {
-    datatype: "range";
+export interface RangeSchema extends BaseSchema {
+    datatype: DATA_TYPES.RANGE;
     min?: number;
     max?: number;
     step?: number;
-    defaultValue?: [number, number];
 }
-interface NumberSchema extends BaseSchemaDef {
-    datatype: "number";
-    min?: number;
-    max?: number;
-    step?: number;
-    defaultValue?: number;
+export interface DateSchema extends BaseSchema {
+    datatype: DATA_TYPES.DATE;
+    type?: "date" | "datetime";
+    min?: DateLike;
+    max?: DateLike;
 }
-interface DecimalSchema extends BaseSchemaDef {
-    datatype: "decimal";
+export interface NumberSchema extends BaseSchema {
+    datatype: DATA_TYPES.NUMBER;
     min?: number;
     max?: number;
     step?: number;
-    defaultValue?: number;
 }
-export interface FileSchema extends BaseSchemaDef {
-    datatype: "file";
+export interface FileSchema extends BaseSchema {
+    datatype: DATA_TYPES.FILE;
     accept?: string;
 }
-export interface AvatarSchema extends BaseSchemaDef {
-    datatype: "avatar";
+export interface AvatarSchema extends BaseSchema {
+    datatype: DATA_TYPES.AVATAR;
     multiple?: false;
 }
-export type SchemaType = SchemaDef | BooleanSchema | StringSchema | RangeSchema | NumberSchema | DecimalSchema | FileSchema | AvatarSchema;
-export interface ChildSchema extends BaseSchemaDef {
-    datatype: "schema";
+export type SchemaType = (DefaultSchema & ValueType) | (BooleanSchema & ValueType) | (StringSchema & ValueType) | (RangeSchema & ValueType) | (DateSchema & ValueType) | (NumberSchema & ValueType) | (FileSchema & ValueType) | (AvatarSchema & ValueType);
+export interface ChildSchema extends BaseSchema {
+    datatype: DATA_TYPES.SCHEMA;
     inline?: boolean;
     schema: SchemaType[];
-    defaultValue?: never;
 }
-export type FormSchema = SchemaType | ChildSchema;
+export type SchemaDef = SchemaType | (ChildSchema & ValueType);
+export type FormSchema = SchemaDef[];
+export interface SchemaEditorProps {
+    /**
+     * default form schema
+     */
+    schemaDef: FormSchema;
+    /**
+     * is dynamic schema (allow add/remove)
+     */
+    dynamic?: boolean;
+    /**
+     * acceptable list of data types
+     */
+    acceptableTypes?: DATA_TYPES[];
+    /**
+     * available option lists in application
+     */
+    optionLists?: string[];
+    /**
+     * footer actions
+     */
+    children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
+    onChange?: (schema: FormSchema) => void;
+    onSubmit?: (schema: FormSchema) => void;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.41",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -11,9 +11,11 @@
   "types": "dist/types/index.d.ts",
   "directories": {
     "src": "src",
+    "styles": "css",
     "test": "tests"
   },
   "files": [
+    "css",
     "src",
     "dist"
   ],
@@ -37,10 +39,11 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/react": "0.26.24",
+    "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.4",
-    "@react-fabric/utilities": "^1.0.0-beta.4",
+    "@react-fabric/core": "^1.0.0-beta.41",
+    "@react-fabric/date": "^1.0.0-beta.41",
+    "@react-fabric/utilities": "^1.0.0-beta.41",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -48,8 +51,8 @@
   },
   "peerDependencies": {
     "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-i18next": "^15.0.2"
   },
   "devDependencies": {
@@ -60,5 +63,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "47b0aede19252a3a3ef8df75c08a21caabde8100"
+  "gitHead": "bc737416d3c6a217a6b8c47291c3975a22722d80"
 }

package/src/builder/FileField.tsx

@@ -21,28 +21,35 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, Icon, ProgressBar } from "@react-fabric/core";
-import { FileUtil, Format } from "@react-fabric/utilities";
+import { Button, Icon, ProgressBar, Tooltip } from "@react-fabric/core";
+import { FileUtil, Format, isString } from "@react-fabric/utilities";
 import { Fragment } from "react";
-import { type UploadHandler, useFileUploader } from "../hooks/useFileUploader";
+import { useTranslation } from "react-i18next";
+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,
+  invalid,
+  error,
   ...rest
-}: Partial<FileSchema> & {
+}: Partial<FileSchema & ValueType> & {
   value?: AnyObject;
   inline?: boolean;
+  invalid?: boolean;
+  error?: AnyObject;
   fileUrl?: (path: string) => string;
   uploadHandler: UploadHandler;
 }) => {
+  const { t } = useTranslation();
   const { pending, files, list, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
     value,
@@ -51,29 +58,48 @@ export const FileField = ({
 
   return (
     <Fragment>
-      <Field plain inline={inline} label={label} className="inline-block">
+      <Field plain inline={inline} label={label}>
         <HiddenInput hiddenValue={multiple ? list : list?.[0]} {...rest} />
-        <span>
-          <Button
-            badge={pending > 0 ? `${pending}` : undefined}
-            data-ref="filebtn"
-          >
-            <Fragment>
-              <span>Add file</span>
-              <input
-                type="file"
-                accept={accept}
-                multiple={multiple}
-                className="absolute inset-0 opacity-0 z-5"
-                onChange={(e) => [
-                  upload(e.target.files),
-                  (e.target.value = ""),
-                ]}
-              />
-            </Fragment>
-          </Button>
-        </span>
       </Field>
+      <Tooltip
+        color="danger-200"
+        content={
+          isString(error)
+            ? `${error}`
+            : error &&
+              (t(
+                error?.key,
+                error.values
+                  ? {
+                      ...error?.values,
+                      label: t(
+                        error.values?.label ?? "form:badkey",
+                        error.values?.path,
+                      ),
+                    }
+                  : {},
+              ) as string)
+        }
+        disabled={!error}
+      >
+        <Button
+          badge={pending > 0 ? `${pending}` : undefined}
+          color={error ? "danger" : undefined}
+          variant={error ? "soft" : undefined}
+          data-ref="filebtn"
+        >
+          <Fragment>
+            <span>Add file</span>
+            <input
+              type="file"
+              accept={accept}
+              multiple={multiple}
+              className="absolute inset-0 opacity-0 z-5"
+              onChange={(e) => [upload(e.target.files), (e.target.value = "")]}
+            />
+          </Fragment>
+        </Button>
+      </Tooltip>
       <br />
       <div className="bg-alternate">
         {files.map((file, idx) => (

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)}
+      label={t(`fb.${id}`, label || id)}
       required={required}
-      onAdd={() => ""}
+      onAdd={() => String("")}
     >
       <Controller>
         <E {...props} />
@@ -151,8 +164,8 @@ export const FormField = ({
       <E
         {...props}
         autoFocus={autoFocus}
-        label={t(label, label)}
-        placeholder={t(label, label)}
+        label={t(`fb.${id}`, label || id)}
+        placeholder={t(`fb.${id}`, label || id)}
         required={required}
         inline={inline}
       />

package/src/builder/SchemaEditor.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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";
+
+export const 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);
+  }, []);
+
+  const handleSubmit = useCallback((model: { schema: FormSchema }) => {
+    onSubmit?.(model.schema);
+  }, []);
+
+  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-base px-6 py-2">
+          {children}
+        </Footer>
+      )}
+    </Form>
+  );
+};

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>
+  );
+};