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

package/dist/types/index.d.ts

@@ -1,13 +1,15 @@
 import "./i18n";
 export { Controller } from "./form/Controller";
 export { Form, type FormRef } from "./form/Form";
+export { SchemaEditor } from "./builder/SchemaEditor";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
-export { type FormSchema } from "./types/schema";
+export { DATA_TYPES, type FormSchema, type SchemaDef } from "./types/schema";
 export { ArrayInput } from "./input/ArrayInput";
 export { Checkbox } from "./input/Checkbox";
 export { ColorInput } from "./input/ColorInput";
 export { ColorPicker } from "./input/ColorPicker";
+export { DateInput } from "./input/DateInput";
 export { Field } from "./input/Field";
 export { FileInput } from "./input/File";
 export { HiddenInput } from "./input/Hidden";
@@ -16,7 +18,7 @@ export { Number } from "./input/Number";
 export { Password } from "./input/Password";
 export { Radio } from "./input/Radio";
 export { RadioGroup } from "./input/RadioGroup";
-export { Range } from "./input/Range";
+export { RangeSlider } from "./input/RangeSlider";
 export { Search } from "./input/Search";
 export { Slider } from "./input/Slider";
 export { Switch } from "./input/Switch";

package/dist/types/input/Checkbox.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type RefProp } from "@react-fabric/core/dist/types/types";
-export interface CheckboxProps extends RefProp<HTMLInputElement> {
+interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * checkbox label
      */
@@ -16,7 +16,7 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * on checked change
      */
-    onChange?: (checked: boolean | string | number) => void;
+    onChange?: (checked: boolean) => void;
     /**
      * disabled input
      */
@@ -43,4 +43,5 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
     iconChecked?: string;
     name?: string;
 }
-export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, required, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/input/ColorInput.d.ts

@@ -1,7 +1,7 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type InputProps } from "../types";
 import { type ColorProps } from "./ColorPicker";
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange">, RefProp {
     /**
      * show eydrop picker
      */

package/dist/types/input/DateInput.d.ts

@@ -0,0 +1,19 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type DateLike } from "@react-fabric/date";
+import { type InputProps } from "../types";
+export interface DateProps extends InputProps<string>, RefProp<HTMLInputElement> {
+    type?: "date" | "datetime";
+    /**
+     * date format
+     */
+    format?: string;
+    /**
+     * minimum value
+     */
+    min?: DateLike;
+    /**
+     * maximum value
+     */
+    max?: DateLike;
+}
+export declare const DateInput: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onChange, onEnterPressed, format, min, max, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/{Range.d.ts → RangeSlider.d.ts}

@@ -56,4 +56,4 @@ export interface RangeProps extends Omit<InputProps<[number, number]>, "placehol
 /**
  * Number Range input
  */
-export declare const Range: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeSlider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Switch.d.ts

@@ -43,4 +43,4 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
     offLabel?: string;
     offLabelColor?: string | ColorType;
 }
-export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, required, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/internal/InputWrapper.d.ts

@@ -1 +1 @@
-export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, children, onClear, noOutline, noBorder, textarea, textareaExpandable, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, decorateEndShowWhenEmpty, decorateEndHideWhenEmpty, children, onClear, noOutline, noBorder, textarea, textareaExpandable, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/index.d.ts

@@ -8,7 +8,7 @@ export interface InputProps<V = string> extends TestProps {
     /**
      * change handler
      */
-    onChange?: (value?: V) => void;
+    onChange?: (value?: V | null) => void;
     /**
      * on focus event handler
      */
@@ -45,6 +45,8 @@ export interface InputProps<V = string> extends TestProps {
      *
      */
     decorateEnd?: JSX.Element | string | number | boolean;
+    decorateEndShowWhenEmpty?: boolean;
+    decorateEndHideWhenEmpty?: boolean;
     /**
      * info label at bottom
      */
@@ -90,7 +92,7 @@ export interface InputProps<V = string> extends TestProps {
      */
     labelWidth?: string;
 }
-export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<InputProps, "value" | "onChange"> {
+export interface BaseSelectProps<T extends AnyObject = string> {
     /**
      * list options
      */
@@ -132,7 +134,8 @@ export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<Inpu
      */
     matcher?: (option: T, query: string) => boolean;
 }
-export type SelectProps<T> = BaseSelectProps<T> & ({
+type BaseSelectType<T> = BaseSelectProps<T> & RefProp<HTMLInputElement> & Omit<InputProps, "value" | "onChange">;
+export type SelectProps<T> = BaseSelectType<T> & ({
     /**
      * is multiple selection
      */
@@ -167,3 +170,4 @@ export type SelectProps<T> = BaseSelectProps<T> & ({
      */
     onChange?: (value?: string[]) => void;
 });
+export {};

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

@@ -1,59 +1,78 @@
-interface BaseSchemaDef {
+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"
+}
+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 {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.34",
   "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.34",
+    "@react-fabric/date": "^1.0.0-beta.34",
+    "@react-fabric/utilities": "^1.0.0-beta.34",
     "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": "dcd1c1b247b6597b168a0649d2b3a53463b9c37e"
 }

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