@react-fabric/form 1.0.0-beta.9 → 1.0.2

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

@@ -1,10 +1,15 @@
-/// <reference types="react" />
-import { type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import type { ChildNode, NestedKeys, RefProp, TestProps } from "@react-fabric/core/dist/types/types";
 export interface InputProps<V = string> extends TestProps {
+    name?: string;
+    autoFocus?: boolean;
     /**
      * value
      */
     value?: V;
+    /**
+     * default value
+     */
+    defaultValue?: V;
     /**
      * change handler
      */
@@ -20,55 +25,44 @@ export interface InputProps<V = string> extends TestProps {
     /**
      * on enter press callback
      */
-    onEnterPressed?: React.KeyboardEventHandler;
+    onEnterPressed?: React.KeyboardEventHandler<HTMLInputElement>;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
     /**
-     * input name
+     * show clear button
      */
+    allowClear?: boolean;
+}
+export interface WrapperProps {
     name?: string;
     /**
      * input label
      */
     label?: string;
     /**
-     * input placeholder
+     * required
      */
-    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
     /**
      * append to label end
      */
-    appendLabel?: JSX.Element | string | number | boolean;
+    appendLabel?: React.ReactNode;
     /**
      *
      */
-    decorateStart?: JSX.Element | string | number | boolean;
+    decorateStart?: React.ReactNode;
     /**
      *
      */
-    decorateEnd?: JSX.Element | string | number | boolean;
+    decorateEnd?: React.ReactNode;
+    decorateEndShowWhenEmpty?: boolean;
+    decorateEndHideWhenEmpty?: boolean;
     /**
      * info label at bottom
      */
-    info?: string;
-    /**
-     * required
-     */
-    required?: boolean;
-    /**
-     * disabled input
-     */
-    disabled?: boolean;
-    /**
-     * read-only input
-     */
-    readOnly?: boolean;
-    /**
-     * auto focus when rendered
-     */
-    autoFocus?: boolean;
-    /**
-     * show clear button
-     */
-    allowClear?: boolean;
+    info?: React.ReactNode;
     /**
      * invalid value input
      */
@@ -88,25 +82,45 @@ export interface InputProps<V = string> extends TestProps {
     /**
      * label width for inline
      */
-    labelWidth?: string;
+    labelWidth?: string | number;
+    /**
+     * remove the outline borders
+     */
+    borderless?: boolean;
 }
-export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<InputProps, "value" | "onChange"> {
+export interface BaseSelectProps<T extends AnyObject = string> {
+    /**
+     * open dropdown by default
+     */
+    defaultOpen?: boolean;
+    /**
+     * hide dropdown handle
+     */
+    hideHandle?: boolean;
     /**
      * list options
      */
-    options?: T[];
+    options: T[];
     /**
      * group by property name
      */
-    groupProperty?: keyof T;
+    groupProperty?: NestedKeys<T>;
     /**
      * label property name
      */
-    labelProperty?: keyof T;
+    labelProperty?: NestedKeys<T>;
+    /**
+     * value property name
+     */
+    valueProperty?: NestedKeys<T>;
+    /**
+     * value property name
+     */
+    infoProperty?: NestedKeys<T>;
     /**
      * value property name
      */
-    valueProperty?: keyof T;
+    sortProperty?: NestedKeys<T> | true;
     /**
      * searchable list
      */
@@ -115,6 +129,10 @@ export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<Inpu
      * allow create item
      */
     allowCreate?: boolean;
+    /**
+     * empty list display
+     */
+    emptyDisplay?: ChildNode;
     /**
      * create new item object
      */
@@ -126,17 +144,18 @@ export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<Inpu
     /**
      * item renderer
      */
-    renderer?: (option: T) => React.ReactNode;
+    renderer?: (option: T) => ChildNode;
     /**
      * item matcher
      */
     matcher?: (option: T, query: string) => boolean;
 }
-export type SelectProps<T> = BaseSelectProps<T> & ({
+type BaseSelectType<T> = BaseSelectProps<T> & Omit<InputProps, "value" | "onChange"> & WrapperProps & RefProp<HTMLInputElement>;
+export type SelectProps<T> = BaseSelectType<T> & ({
     /**
      * is multiple selection
      */
-    multiple?: never | false;
+    multiple?: false;
     /**
      * selected value
      */
@@ -167,3 +186,18 @@ export type SelectProps<T> = BaseSelectProps<T> & ({
      */
     onChange?: (value?: string[]) => void;
 });
+export type DualSelectProps<T> = BaseSelectType<T> & {
+    /**
+     * selected value
+     */
+    value?: string[];
+    /**
+     * select handler
+     */
+    onSelect?: (option: T[]) => void;
+    /**
+     * change handler
+     */
+    onChange?: (value?: string[]) => void;
+};
+export {};

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

@@ -1,59 +1,105 @@
-interface BaseSchemaDef {
+import type { ChildNode } 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",
+    DATETIME = "datetime",
+    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 | DATA_TYPES.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?: ChildNode | Array<ChildNode>;
+    onChange?: (schema: FormSchema) => void;
+    onSubmit?: (schema: FormSchema) => void;
+}
 export {};

package/dist/types/utils/eventHandlers.d.ts

@@ -1,11 +1,11 @@
 import { type KeyboardEvent, type MouseEvent } from "react";
 /** ***************** common handler for enter press *******************/
-export declare const handleEnter: (callback?: (e: KeyboardEvent) => void, { stopPropagation, preventDefault, }?: {
+export declare function useHandleEnter<T extends HTMLElement = HTMLInputElement>(callback?: (e: KeyboardEvent<T>) => void, { stopPropagation, preventDefault }?: {
     stopPropagation?: boolean;
     preventDefault?: boolean;
-}) => (e: KeyboardEvent) => false | undefined;
+}): (e: KeyboardEvent<T>) => false | undefined;
 /** ***************** common handler for mouse primary click *******************/
-export declare const handleClick: (callback?: (e: MouseEvent) => void, { stopPropagation, preventDefault, }?: {
+export declare function handleClick(callback?: (e: MouseEvent) => void, { stopPropagation, preventDefault }?: {
     stopPropagation?: boolean;
     preventDefault?: boolean;
-}) => (e: MouseEvent) => false | undefined;
+}): (e: MouseEvent) => false | undefined;

package/dist/types/utils/getColor.d.ts

@@ -1,4 +1,4 @@
-export declare const getColor: (color?: string) => string | undefined;
-export declare const getBgClass: (bg: string) => string | undefined;
-export declare const getColorClass: (color: string) => string | undefined;
-export declare const getBorderClass: (color: string) => string | undefined;
+export declare function getColor(color?: string): string | undefined;
+export declare function getBgClass(bg: string): string | undefined;
+export declare function getColorClass(color: string): string | undefined;
+export declare function getBorderClass(color: string): string | undefined;

package/dist/types/utils/getProps.d.ts

@@ -0,0 +1,26 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 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 type { WrapperProps } from "../types";
+export declare function getWrapperProps<T extends WrapperProps & KeyValue>(props: T): WrapperProps;

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

@@ -1,2 +1,3 @@
 export * from "./eventHandlers";
 export * from "./getColor";
+export * from "./getProps";

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.2",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
-  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/form",
+  "repository": "https://github.com/adarshpastakia/react-fabric/tree/main/packages/form",
   "source": "src/index.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "directories": {
     "src": "src",
+    "styles": "css",
     "test": "tests"
   },
   "files": [
+    "css",
     "src",
     "dist"
   ],
@@ -22,8 +24,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "makelink": "yarn link",
-    "removelink": "yarn unlink",
     "prebuild": "rm -rf ./dist",
     "build:dts": "tsc -p ./tsconfig.build.json",
     "build:rollup": "rollup -c ../../rollup.config.mjs",
@@ -33,32 +33,32 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/react": "0.26.24",
-    "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.9",
-    "@react-fabric/utilities": "^1.0.0-beta.9",
-    "classnames": "^2.5.1",
-    "color": "^4.2.3",
-    "react-color": "^2.19.3",
-    "react-hook-form": "^7.52.1"
+    "@dnd-kit/abstract": "~0.5.0",
+    "@dnd-kit/react": "~0.5.0",
+    "@faker-js/faker": "10.6.0",
+    "@floating-ui/react": "~0.27.20",
+    "@hookform/resolvers": "~5.9.1",
+    "@react-fabric/core": "^1.0.2",
+    "@react-fabric/date": "^1.0.2",
+    "@react-fabric/utilities": "^1.0.2",
+    "@tanstack/react-form": "~1.33.3",
+    "chroma-js": "~3.2.0",
+    "react-color": "~2.19.3",
+    "react-hook-form": "~7.86.0"
   },
   "peerDependencies": {
-    "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-i18next": "^15.0.2"
+    "axios": "^1.20.0",
+    "i18next": "~26.3.6",
+    "react": "~19.3.0",
+    "react-dom": "~19.3.0",
+    "react-i18next": "~17.0.11"
   },
   "devDependencies": {
-    "@types/axios": "^0.14.0",
-    "@types/react-color": "^3.0.12"
+    "@types/react-color": "~3.0.13"
   },
   "engines": {
-    "node": ">=18.12.0",
-    "npm": ">=8.19.0"
+    "node": ">=24.0.0",
+    "npm": ">=11.0.0"
   },
-  "gitHead": "3dde23444bcebf68c30198af5c2fef55572da38f"
+  "gitHead": "b9fc477b5b3a13b782977bf17762027f376ac30e"
 }

package/src/builder/FileField.tsx

@@ -21,62 +21,93 @@
  * 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 { Badge, Button, Icon, ProgressBar, Tooltip } from "@react-fabric/core";
+import { FileUtil, Format, isObject, 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 = ({
+interface ErrorObject {
+  key: string;
+  values: Record<string, string>;
+}
+
+export function FileField({
   uploadHandler,
   inline,
   label,
   accept,
-  multiple = false,
   value,
+  onChange,
+  multiple,
+  error,
+  invalid,
   ...rest
-}: Partial<FileSchema> & {
-  value?: AnyObject;
+}: Partial<FileSchema & ValueType> & {
+  value?: never;
   inline?: boolean;
+  invalid?: boolean;
+  error?: AnyObject;
+  onChange?: (value: AnyObject) => void;
   fileUrl?: (path: string) => string;
   uploadHandler: UploadHandler;
-}) => {
-  const { pending, files, list, upload, remove } = useFileUploader(
+}) {
+  const { t } = useTranslation();
+  const { pending, files, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
     value,
-    multiple,
+    { multiple, onChange },
   );
 
   return (
     <Fragment>
-      <Field plain inline={inline} label={label} className="inline-block">
-        <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 plain inline={inline} label={label}>
+        <HiddenInput hiddenValue={multiple ? files : files?.[0]} {...rest} />
       </Field>
+      <Tooltip
+        color="danger"
+        content={
+          isObject<ErrorObject>(error)
+            ? t(
+                error.key,
+                isObject(error.values)
+                  ? {
+                      ...error.values,
+                      label: t(error.values.label ?? "form:badkey", error.values.path),
+                    }
+                  : {},
+              )
+            : isString(error)
+              ? error
+              : ""
+        }
+        disabled={!error}
+      >
+        <Button
+          altIcon={pending > 0 ? <Badge inline>{pending}</Badge> : undefined}
+          color={invalid ? "danger" : undefined}
+          variant={invalid ? "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) => (
+          // eslint-disable-next-line @eslint-react/no-array-index-key
           <div key={idx} className="px-2 py-1">
             <div className="flex flex-nowrap gap-1 items-start">
               <div className="flex-1 truncate pe-2">
@@ -86,37 +117,23 @@ export const FileField = ({
                 <span className="text-xs px-1">{Format.bytes(file.size)}</span>
               </div>
               <div className="flex-initial truncate px-2">
-                {file.error && (
-                  <span className="text-danger-600">{file.error}</span>
-                )}
+                {file.error && <span className="text-danger-600">{file.error}</span>}
               </div>
               {file.progress && (
-                <Icon
-                  icon="mdi mdi-stop-circle"
-                  bg="danger"
-                  color="white"
-                  size="sm"
-                  className="p-[2px]"
-                  aria-label="abort"
-                  onClick={() => file.abort?.()}
-                />
+                <button type="button" className="size-fit leading-0 cursor-pointer" onClick={() => file.abort?.()}>
+                  <Icon icon="icon-[mdi--stop]" bg="danger" color="white" size="sm" className="p-0.5" aria-label="abort" />
+                </button>
               )}
               {!file.progress && (
-                <Icon
-                  icon="mdi mdi-trash-can"
-                  color="danger"
-                  size="sm"
-                  aria-label="remove"
-                  onClick={() => remove(file.key)}
-                />
+                <button type="button" className="size-fit leading-0 cursor-pointer" onClick={() => remove(file.key)}>
+                  <Icon icon="icon-[mdi--trash-can-outline]" color="danger" size="sm" aria-label="remove" />
+                </button>
               )}
             </div>
-            {file.progress && (
-              <ProgressBar animate value={file.progress * 100} size="xxs" />
-            )}
+            {file.progress && <ProgressBar animate value={file.progress * 100} size="xxs" />}
           </div>
         ))}
       </div>
     </Fragment>
   );
-};
+}