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

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

@@ -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.31",
+  "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.31",
-    "@react-fabric/utilities": "^1.0.0-beta.31",
+    "@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": "de71c6875264d385666d0fa441785b9884951561"
+  "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} />