@react-fabric/form 1.0.0-beta.0

package/dist/types/select/useSelect.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+interface State {
+    multiple: boolean;
+    emptyValue: AnyObject;
+    open: boolean;
+    loading: boolean;
+    activeIndex: number | null;
+    selectedIndex: number | null;
+    value: AnyObject;
+    query?: string;
+    items: AnyObject[];
+}
+export declare const useSelect: ({ options, value, autoComplete, multiple, allowCreate, groupProperty, valueProperty, labelProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
+    value?: AnyObject;
+    options?: AnyObject[];
+    multiple?: boolean;
+    allowCreate?: boolean;
+    groupProperty?: AnyObject;
+    valueProperty?: AnyObject;
+    labelProperty?: AnyObject;
+    autoComplete?: boolean;
+    matcher?: (item: AnyObject, query: string) => boolean;
+    createOption?: (query: string) => AnyObject;
+    onQuery?: (query: string) => AnyObject;
+    onSelect?: (item: AnyObject) => void;
+    onChange?: (value: AnyObject) => void;
+}) => {
+    state: State | {
+        value: any;
+        activeIndex: null;
+        selectedIndex: any;
+        multiple: boolean;
+        emptyValue: AnyObject;
+        open: boolean;
+        loading: boolean;
+        query?: string | undefined;
+        items: AnyObject[];
+    };
+    listRef: import("react").MutableRefObject<HTMLElement[]>;
+    focusableRef: import("react").RefObject<HTMLElement>;
+    listContentRef: import("react").MutableRefObject<any[]>;
+    handleChange: (value?: AnyObject) => void;
+    handleRemove: (index?: number) => void;
+    handleQuery: (query: string) => void;
+    macthOption: (item: AnyObject, query: string) => boolean;
+    setActiveIndex: (index: number | null) => void;
+    setOpen: (open: boolean) => void;
+    setItemRef: (index: number, node: HTMLElement) => void;
+};
+export {};

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

@@ -0,0 +1,169 @@
+/// <reference types="react" />
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+export interface InputProps<V = string> {
+    /**
+     * value
+     */
+    value?: V;
+    /**
+     * change handler
+     */
+    onChange?: (value?: V) => void;
+    /**
+     * on focus event handler
+     */
+    onFocus?: React.FocusEventHandler;
+    /**
+     * on blur event handler
+     */
+    onBlur?: React.FocusEventHandler;
+    /**
+     * on enter press callback
+     */
+    onEnterPressed?: React.KeyboardEventHandler;
+    /**
+     * input name
+     */
+    name?: string;
+    /**
+     * input label
+     */
+    label?: string;
+    /**
+     * input placeholder
+     */
+    placeholder?: string;
+    /**
+     * append to label end
+     */
+    appendLabel?: JSX.Element | string | number | boolean;
+    /**
+     *
+     */
+    decorateStart?: JSX.Element | string | number | boolean;
+    /**
+     *
+     */
+    decorateEnd?: JSX.Element | string | number | 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;
+    /**
+     * invalid value input
+     */
+    invalid?: boolean;
+    /**
+     * error message
+     */
+    error?: string;
+    /**
+     * field width
+     */
+    width?: number | string;
+    /**
+     * inline label and input
+     */
+    inline?: boolean;
+    /**
+     * label width for inline
+     */
+    labelWidth?: string;
+}
+export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<InputProps, "value" | "onChange"> {
+    /**
+     * list options
+     */
+    options?: T[];
+    /**
+     * group by property name
+     */
+    groupProperty?: keyof T;
+    /**
+     * label property name
+     */
+    labelProperty?: keyof T;
+    /**
+     * value property name
+     */
+    valueProperty?: keyof T;
+    /**
+     * searchable list
+     */
+    searchable?: boolean;
+    /**
+     * allow create item
+     */
+    allowCreate?: boolean;
+    /**
+     * create new item object
+     */
+    createOption?: (query: string) => T;
+    /**
+     * query handler
+     */
+    onQuery?: (query: string) => T[] | Promise<T[]>;
+    /**
+     * item renderer
+     */
+    renderer?: (option: T) => React.ReactNode;
+    /**
+     * item matcher
+     */
+    matcher?: (option: T, query: string) => boolean;
+}
+export type SelectProps<T> = BaseSelectProps<T> & ({
+    /**
+     * is multiple selection
+     */
+    multiple?: never | false;
+    /**
+     * selected value
+     */
+    value?: string;
+    /**
+     * select handler
+     */
+    onSelect?: (option: T) => void;
+    /**
+     * change handler
+     */
+    onChange?: (value?: string) => void;
+} | {
+    /**
+     * is multiple selection
+     */
+    multiple: true;
+    /**
+     * selected value
+     */
+    value?: string[];
+    /**
+     * select handler
+     */
+    onSelect?: (option: T[]) => void;
+    /**
+     * change handler
+     */
+    onChange?: (value?: string[]) => void;
+});

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

@@ -0,0 +1,59 @@
+interface BaseSchemaDef {
+    id: string;
+    label: string;
+    datatype: string;
+    required?: boolean;
+    multiple?: boolean;
+    defaultValue?: AnyObject;
+}
+interface SchemaDef extends BaseSchemaDef {
+    datatype: "text" | "color";
+}
+interface BooleanSchema extends BaseSchemaDef {
+    datatype: "boolean";
+    defaultValue?: boolean;
+}
+interface StringSchema extends BaseSchemaDef {
+    datatype: "string";
+    options?: string[];
+    regex?: string;
+    identifierType?: string;
+}
+interface RangeSchema extends BaseSchemaDef {
+    datatype: "range";
+    min?: number;
+    max?: number;
+    step?: number;
+    defaultValue?: [number, number];
+}
+interface NumberSchema extends BaseSchemaDef {
+    datatype: "number";
+    min?: number;
+    max?: number;
+    step?: number;
+    defaultValue?: number;
+}
+interface DecimalSchema extends BaseSchemaDef {
+    datatype: "decimal";
+    min?: number;
+    max?: number;
+    step?: number;
+    defaultValue?: number;
+}
+export interface FileSchema extends BaseSchemaDef {
+    datatype: "file";
+    accept?: string;
+}
+export interface AvatarSchema extends BaseSchemaDef {
+    datatype: "avatar";
+    multiple?: false;
+}
+export type SchemaType = SchemaDef | BooleanSchema | StringSchema | RangeSchema | NumberSchema | DecimalSchema | FileSchema | AvatarSchema;
+export interface ChildSchema extends BaseSchemaDef {
+    datatype: "schema";
+    inline?: boolean;
+    schema: SchemaType[];
+    defaultValue?: never;
+}
+export type FormSchema = SchemaType | ChildSchema;
+export {};

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

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

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

@@ -0,0 +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;

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

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

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@react-fabric/form",
+  "version": "1.0.0-beta.0",
+  "description": "RUF: Form package",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "repository": "https://github.com/adarshpastakia/react-ui-framework/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",
+    "test": "tests"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "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",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "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.0",
+    "@react-fabric/utilities": "^1.0.0-beta.0",
+    "classnames": "^2.5.1",
+    "color": "^4.2.3",
+    "react-color": "^2.19.3",
+    "react-hook-form": "^7.52.1"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "@types/axios": "^0.14.0",
+    "@types/react-color": "^3.0.12"
+  },
+  "engines": {
+    "node": ">=18.12.0",
+    "npm": ">=8.19.0"
+  },
+  "gitHead": "83fa79064b1d57e71149005432192d506810bbda"
+}

package/src/builder/FileField.tsx

@@ -0,0 +1,122 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 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 { 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 { Field } from "../input/Field";
+import { HiddenInput } from "../input/Hidden";
+import { type FileSchema } from "../types/schema";
+
+export const FileField = ({
+  uploadHandler,
+  inline,
+  label,
+  accept,
+  multiple = false,
+  value,
+  ...rest
+}: Partial<FileSchema> & {
+  value?: AnyObject;
+  inline?: boolean;
+  fileUrl?: (path: string) => string;
+  uploadHandler: UploadHandler;
+}) => {
+  const { pending, files, list, upload, remove } = useFileUploader(
+    async (data, config) => await uploadHandler?.(data, config),
+    value,
+    multiple,
+  );
+
+  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>
+      <br />
+      <div className="bg-alternate">
+        {files.map((file, idx) => (
+          <div key={idx} className="px-2 py-1">
+            <div className="flex flex-nowrap gap-1 items-start">
+              <div className="flex-1 truncate pe-2">
+                {file.filename}
+                <br />
+                <span className="text-xs">{FileUtil.mime(file.mime)}</span>
+                <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>
+                )}
+              </div>
+              {file.progress && (
+                <Icon
+                  icon="mdi mdi-stop-circle"
+                  bg="danger"
+                  color="white"
+                  size="sm"
+                  className="p-[2px]"
+                  aria-label="abort"
+                  onClick={() => file.abort?.()}
+                />
+              )}
+              {!file.progress && (
+                <Icon
+                  icon="mdi mdi-trash-can"
+                  color="danger"
+                  size="sm"
+                  aria-label="remove"
+                  onClick={() => remove(file.key)}
+                />
+              )}
+            </div>
+            {file.progress && (
+              <ProgressBar animate value={file.progress * 100} size="xxs" />
+            )}
+          </div>
+        ))}
+      </div>
+    </Fragment>
+  );
+};

package/src/builder/FormField.tsx

@@ -0,0 +1,161 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 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 { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Controller } from "../form/Controller";
+import { type UploadHandler } from "../hooks/useFileUploader";
+import { ArrayInput } from "../input/ArrayInput";
+import { AvatarInput } from "../input/AvatarInput";
+import { ColorInput } from "../input/ColorInput";
+import { Input } from "../input/Input";
+import { Number } from "../input/Number";
+import { Range } from "../input/Range";
+import { Switch } from "../input/Switch";
+import { Textarea } from "../input/Textarea";
+import { Select } from "../select/Select";
+import { type SchemaType } from "../types/schema";
+import { FileField } from "./FileField";
+
+export const FormField = ({
+  id,
+  label,
+  required,
+  inline,
+  prefix,
+  autoFocus,
+  defaultValue,
+  fileUrl,
+  uploadHandler,
+  ...rest
+}: SchemaType & {
+  inline?: boolean;
+  prefix?: string;
+  autoFocus?: boolean;
+  fileUrl?: (path: string) => string;
+  uploadHandler?: UploadHandler;
+}) => {
+  const { t } = useTranslation();
+  const fieldName = useMemo(
+    () => [prefix, id].filter(Boolean).join("."),
+    [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;
+
+    return Input;
+  }, [rest.datatype]);
+
+  const props = useMemo(() => {
+    if (rest.datatype === "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")
+      return {
+        min: rest.min ?? 1,
+        max: rest.max ?? 99,
+        step: rest.step ?? 1,
+        showValue: true,
+        showLabels: true,
+      };
+    if (rest.datatype === "text") return { rows: 3 };
+    if (rest.datatype === "color") return { showPicker: true };
+
+    if (rest.datatype === "string" && rest.options)
+      return {
+        options: rest.options,
+        multiple: rest.multiple,
+        searchable: true,
+      };
+
+    return {};
+  }, [rest]);
+
+  if (rest.datatype === "avatar")
+    return (
+      uploadHandler && (
+        <Controller name={fieldName}>
+          <AvatarInput
+            uploadHandler={uploadHandler}
+            fileUrl={fileUrl}
+            name={fieldName}
+          />
+        </Controller>
+      )
+    );
+
+  if (rest.datatype === "file")
+    return (
+      uploadHandler && (
+        <Controller name={fieldName}>
+          <FileField
+            uploadHandler={uploadHandler}
+            inline={inline}
+            label={label}
+            id={id}
+            {...rest}
+          />
+        </Controller>
+      )
+    );
+
+  return rest.multiple && !("options" in rest) ? (
+    <ArrayInput
+      name={fieldName}
+      label={t(label, label)}
+      required={required}
+      onAdd={() => ""}
+    >
+      <Controller>
+        <E {...props} />
+      </Controller>
+    </ArrayInput>
+  ) : (
+    <Controller name={fieldName}>
+      <E
+        {...props}
+        autoFocus={autoFocus}
+        label={t(label, label)}
+        placeholder={t(label, label)}
+        required={required}
+        inline={inline}
+      />
+    </Controller>
+  );
+};