@react-fabric/form 1.0.0-beta.0

package/src/form/Controller.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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 {
+  Children,
+  cloneElement,
+  isValidElement,
+  type ReactElement,
+} from "react";
+import { Controller as HFController } from "react-hook-form";
+
+export interface ControllerProps {
+  /**
+   * field name
+   */
+  name?: string;
+  children:
+    | ReactElement
+    | ((props: {
+        name: string;
+        error?: string;
+        checked: boolean;
+        value: AnyObject;
+        invalid?: boolean;
+        readOnly?: boolean;
+        disabled?: boolean;
+        onBlur: () => void;
+        onChange: (value: AnyObject) => void;
+        inputRef?: React.Ref<HTMLInputElement>;
+      }) => ReactElement);
+}
+
+export const Controller = ({ name, children, ...rest }: ControllerProps) => {
+  if (!name) throw Error("Form Controller missing `name` prop");
+  return (
+    <HFController
+      name={name}
+      render={({
+        field: { ref, onChange, ...field },
+        fieldState: { error },
+        formState: { isSubmitting },
+      }) =>
+        isValidElement<AnyObject>(children)
+          ? cloneElement(Children.only(children), {
+              ...field,
+              ...rest,
+              ref: (el: AnyObject) => {
+                el && ref(el);
+                try {
+                  if (children.props.ref && "current" in children.props.ref)
+                    children.props.ref.current = el;
+                  if (children.props.ref?.prototype) children.props.ref(el);
+                } catch (_) {
+                  //
+                }
+              },
+              checked: !!field.value,
+              readOnly: isSubmitting || children.props.readOnly,
+              invalid: !!error?.message || children.props.invalid,
+              error: error?.message ?? children.props.error,
+              onChange: (v: AnyObject) => {
+                onChange(v);
+                children.props.onChange?.(v);
+              },
+            })
+          : children({
+              ...field,
+              ...rest,
+              inputRef: (el: AnyObject) => {
+                el && ref(el);
+              },
+              readOnly: isSubmitting,
+              invalid: !!error?.message,
+              checked: !!field.value,
+              error: error?.message,
+              onChange: (v: AnyObject) => {
+                onChange(v);
+              },
+            })
+      }
+    />
+  );
+};

package/src/form/Form.tsx

@@ -0,0 +1,160 @@
+/*
+ * 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 { yupResolver } from "@hookform/resolvers/yup";
+import { useDebounce } from "@react-fabric/core";
+import { type yup } from "@react-fabric/utilities";
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useTransition,
+  type PropsWithChildren,
+  type Ref,
+} from "react";
+import {
+  FormProvider,
+  useForm,
+  type DefaultValues,
+  type FormState,
+} from "react-hook-form";
+
+export interface FormRef<K extends KeyValue> {
+  state: FormState<K>;
+  reset: () => void;
+  clear: () => void;
+  submit: () => void;
+  validate: () => Promise<boolean>;
+  getValues: () => K;
+  setValue: (key: keyof K, value: AnyObject) => void;
+  setValues: (values: K) => void;
+}
+
+export interface FormProps<K extends KeyValue = KeyValue> {
+  formRef?: Ref<FormRef<K>>;
+  /**
+   * form data schema
+   */
+  schema?: yup.ObjectSchema<K>;
+  /**
+   * default data values
+   */
+  defaultValues?: K;
+  /**
+   * change callback
+   */
+  onChange?: (values: K) => void;
+  /**
+   * submit callback after successful validation
+   */
+  onSubmit?: (values: K) => void;
+}
+
+const DEFAULT_SUBMIT = () => undefined;
+
+export const Form = <K extends KeyValue>({
+  formRef,
+  schema,
+  children,
+  defaultValues,
+  onSubmit = DEFAULT_SUBMIT,
+  onChange,
+  ...rest
+}: PropsWithChildren<FormProps<K>>) => {
+  const ref = useRef<HTMLFormElement>(null);
+  const form = useForm<K>({
+    shouldFocusError: true,
+    resolver: schema && (yupResolver(schema) as AnyObject),
+    defaultValues: defaultValues as DefaultValues<K>,
+  });
+
+  const [, startTransition] = useTransition();
+  const changeHandler = useDebounce(onChange, [onChange]);
+  useEffect(() => {
+    const subscription = form.watch((value) => {
+      startTransition(() => changeHandler?.(value as K));
+    });
+    return () => subscription.unsubscribe();
+  }, [form.watch, changeHandler]);
+
+  const handleReset = useCallback(
+    (reset: AnyObject = {}) => {
+      form.reset(reset);
+      form.clearErrors();
+      ref.current
+        ?.querySelector<HTMLElement>("[auto-focus], input, textarea")
+        ?.focus();
+    },
+    [defaultValues],
+  );
+
+  useImperativeHandle(
+    formRef,
+    () => ({
+      state: form.formState,
+      reset: () => handleReset(defaultValues),
+      clear: () => handleReset(),
+      submit: () => form.handleSubmit(onSubmit),
+      validate: async () => await form.trigger(),
+      getValues: () => form.getValues(),
+      setValues: (v) => form.reset(v),
+      setValue: (k, v) =>
+        form.setValue(k as AnyObject, v, {
+          shouldDirty: false,
+          shouldTouch: false,
+        }),
+    }),
+    [onSubmit, form, form.formState, defaultValues],
+  );
+
+  const onInvalid = useCallback((_: AnyObject, e: AnyObject) => {
+    const el = e.target;
+    setTimeout(
+      () =>
+        el
+          .querySelector(
+            "input[aria-invalid='true'],textarea[aria-invalid='true']",
+          )
+          ?.focus(),
+      10,
+    );
+  }, []);
+
+  return (
+    <FormProvider {...form}>
+      <form
+        ref={ref}
+        onReset={() => handleReset(defaultValues)}
+        onSubmit={form.handleSubmit(onSubmit, onInvalid) as AnyObject}
+        data-loading={form.formState.isSubmitting}
+        className="contents"
+        autoComplete="off"
+        {...rest}
+      >
+        {children}
+        <input type="submit" className="absolute invisible" />
+      </form>
+    </FormProvider>
+  );
+};

package/src/hooks/useFileUploader.ts

@@ -0,0 +1,234 @@
+/*
+ * 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 { isArray, isObject, isString, uuid } from "@react-fabric/utilities";
+import { type AxiosRequestConfig } from "axios";
+import { useCallback, useReducer } from "react";
+
+export type UploadHandler = (
+  data: FormData,
+  config: AxiosRequestConfig,
+) => Promise<string>;
+
+interface FileInfo {
+  key: string;
+  filename: string;
+  size: number;
+  mime: string;
+  uploaded?: true;
+  file?: File;
+  path?: string;
+  error?: string;
+  progress?: number;
+  abort?: AbortController["abort"];
+}
+
+interface UploaderState {
+  files: Map<string, FileInfo>;
+  list: FileInfo[];
+  count: number;
+}
+
+type UploaderActions =
+  | { type: "start"; key: string; file: FileInfo }
+  | { type: "stop"; key: string; path: string }
+  | { type: "error"; key: string; error: string }
+  | { type: "progress"; key: string; progress: number }
+  | { type: "remove"; key: string }
+  | { type: "abort"; key: string };
+
+export const useFileUploader = (
+  uploader: UploadHandler,
+  initialList?: string | FileInfo | FileInfo[],
+  multiple = true,
+) => {
+  const [state, dispatch] = useReducer(
+    (state: UploaderState, action: UploaderActions) => {
+      if (action.type === "start") {
+        if (!multiple) state.files.clear();
+        state.files.set(action.key, action.file);
+        state.count++;
+      }
+      if (action.type === "stop") {
+        const fileObject = state.files.get(action.key);
+        if (fileObject) {
+          const { progress, abort, ...rest } = fileObject;
+          state.files.set(action.key, {
+            ...rest,
+            path: action.path,
+            uploaded: true,
+          });
+        }
+        state.count--;
+      }
+      if (action.type === "error") {
+        const fileObject = state.files.get(action.key);
+        if (fileObject) {
+          const { file, progress, abort, ...rest } = fileObject;
+          state.files.set(action.key, { ...rest, error: action.error });
+        }
+        state.count--;
+      }
+      if (action.type === "progress") {
+        const fileObject = state.files.get(action.key);
+        if (fileObject) {
+          fileObject.progress = action.progress;
+          state.files.set(action.key, fileObject);
+        }
+        state.count--;
+      }
+      if (action.type === "abort") {
+        state.files.delete(action.key);
+      }
+      if (action.type === "remove") {
+        state.files.delete(action.key);
+      }
+      state.list = Array.from(state.files.values())
+        .map((file) => {
+          return (
+            !file.progress &&
+            !file.error && {
+              key: file.key,
+              path: file.path,
+              mime: file.mime,
+              size: file.size,
+              uploaded: file.uploaded,
+              filename: file.filename,
+            }
+          );
+        })
+        .filter(Boolean) as FileInfo[];
+      return { ...state };
+    },
+    {
+      files: new Map(),
+      count: 0,
+    } as UploaderState,
+    (state: UploaderState) => {
+      if (initialList) {
+        if (isString(initialList)) {
+          const key = uuid();
+          state.files.set(key, {
+            key,
+            path: initialList,
+            filename: "",
+            size: 0,
+            mime: "",
+          });
+        }
+        if (isObject(initialList)) {
+          const key = uuid();
+          state.files.set(key, { ...(initialList as AnyObject), key });
+        }
+        if (isArray(initialList)) {
+          initialList.forEach((file) => {
+            const key = uuid();
+            state.files.set(key, { ...file, key });
+          });
+        }
+      }
+      state.list = Array.from(state.files.values());
+      return state;
+    },
+  );
+
+  const doUpload = useCallback(async (key: string, file: File) => {
+    const data = new FormData();
+    data.append("file", file);
+    const abort = new AbortController();
+    dispatch({
+      type: "start",
+      key,
+      file: {
+        key,
+        file,
+        progress: 0.001,
+        mime: file.type,
+        filename: file.name,
+        size: file.size,
+        abort: () => abort.abort(),
+      },
+    });
+    await uploader(data, {
+      signal: abort.signal,
+      onUploadProgress(progressEvent) {
+        dispatch({
+          type: "progress",
+          key,
+          progress: progressEvent.progress ?? 0,
+        });
+      },
+    })
+      .then((path) => {
+        dispatch({ type: "stop", key, path });
+      })
+      .catch((error) => {
+        if (error.code === "ERR_CANCELED" || error.name === "AbortError") {
+          return dispatch({ type: "abort", key });
+        }
+        dispatch({
+          type: "error",
+          key,
+          error: error?.message ?? "form:fileUploadFailed",
+        });
+      });
+  }, []);
+
+  const upload = useCallback(
+    (files: FileList | null) => {
+      if (!multiple) {
+        Array.from(state.files.values())[0]?.abort?.();
+      }
+      Array.from(files ?? [])
+        .slice(0, multiple ? undefined : 1)
+        .forEach((file) => {
+          void doUpload(uuid(), file);
+        });
+    },
+    [multiple],
+  );
+
+  const retry = useCallback(
+    (key: string) => {
+      const fileObject = state.files.get(key);
+      void (fileObject?.file && doUpload(key, fileObject.file));
+    },
+    [state],
+  );
+
+  const remove = useCallback(
+    (key: string) => {
+      dispatch({ type: "remove", key });
+    },
+    [state],
+  );
+
+  return {
+    upload,
+    remove,
+    retry,
+    pending: state.count,
+    list: state.list,
+    files: Array.from(state.files.values()),
+  };
+};

package/src/hooks/useFormBuilder.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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 { isEmpty, isNil, yup } from "@react-fabric/utilities";
+import { Fragment, useMemo } from "react";
+import { FormField } from "../builder/FormField";
+import { type FormSchema } from "../types/schema";
+import { type UploadHandler } from "./useFileUploader";
+
+const makeYupField = (field: FormSchema) => {
+  let yupField: AnyObject = yup.string();
+  if (field.datatype === "schema") {
+    const child: yup.ObjectShape = Object.fromEntries(
+      field.schema.map((field) => [field.id, makeYupField(field)]),
+    );
+    yupField = yup.object(child);
+  }
+  if (field.datatype === "boolean") yupField = yup.boolean();
+  if (
+    field.datatype === "decimal" ||
+    field.datatype === "number" ||
+    field.datatype === "range"
+  ) {
+    yupField = yup.number();
+    !isNil(field.min) && (yupField = yupField.min(field.min));
+    !isNil(field.max) && (yupField = yupField.max(field.max));
+
+    if (field.datatype === "range") yupField = yup.array(yupField);
+  }
+  if (field.datatype === "string") {
+    field.options && (yupField = yupField.oneOf(field.options));
+    field.regex && (yupField = yupField.matches(new RegExp(field.regex)));
+  }
+
+  if (field.datatype === "file") {
+    yupField = yup
+      .object({
+        filename: yup.string().required(),
+        path: yup.string().required(),
+      })
+      .unknown(true);
+    if (field.required) {
+      yupField = yupField.test(
+        "is-empty",
+        {
+          key: "form:yup.empty",
+          values: { path: field.id, label: field.label },
+        },
+        (value: AnyObject) => !isEmpty(value),
+      );
+    }
+  }
+
+  if (field.required) {
+    yupField = yupField.required();
+  }
+
+  if (field.multiple) {
+    yupField = yup.array(yupField);
+    field.required && (yupField = yupField.required().min(1));
+  }
+
+  return yupField.label(field.label);
+};
+
+export const useFormBuilder = (
+  schema: FormSchema[],
+  options: {
+    prefix?: string;
+    inline?: boolean;
+    fileUrl?: (path: string) => string;
+    uploadHandler?: UploadHandler;
+  } = {},
+) => {
+  const filteredSchema = useMemo(
+    () => schema.filter?.((schm) => !!schm.id) ?? [],
+    [schema],
+  );
+  const schemaDef = yup.object(
+    Object.fromEntries(
+      filteredSchema.map((field) => [field.id, makeYupField(field)]),
+    ),
+  );
+
+  const formDef = (
+    <Fragment>
+      {filteredSchema.map((field, idx) => (
+        <div className="mb-4" key={field.id}>
+          {field.datatype === "schema" ? null : (
+            <FormField
+              {...field}
+              autoFocus={idx === 0}
+              fileUrl={options.fileUrl}
+              uploadHandler={options.uploadHandler}
+              inline={options.inline}
+              prefix={options.prefix}
+            />
+          )}
+        </div>
+      ))}
+    </Fragment>
+  );
+
+  return {
+    formDef,
+    schemaDef,
+  };
+};

package/src/i18n/ar.json

@@ -0,0 +1,23 @@
+{
+  "addArray": "اضافة عنصر",
+  "password": {
+    "show": "عرض كلمة المرور",
+    "hide": "اخفاء كلمة المرور"
+  },
+  "select": {
+    "emptyList": "لا توجد خيارات متاحة",
+    "notFound": "لم يتم العثور على خيارات ل ",
+    "createOption": "إنشاء خيار جديد ل "
+  },
+  "yup": {
+    "arrayMax": "{{label}} حدد ما يصل {{max}} غرض",
+    "arrayMin": "{{label}} اختر على الأقل {{min}} غرض",
+    "invalid": "{{label}} نوع بيانات غير صالح",
+    "invalidType": "{{label}} غير صالح",
+    "numberMax": "{{label}} الحد الأقصى {{max}}",
+    "numberMin": "{{label}} الحد الأدنى {{min}}",
+    "required": "{{label}} مطلوب",
+    "stringMax": "{{label}} أقصى {{max}} الحروف مسموحة",
+    "stringMin": "{{label}} يتطلب الحد الأدنى {{min}} الشخصيات"
+  }
+}

package/src/i18n/en.json

@@ -0,0 +1,24 @@
+{
+  "addArray": "Add Item",
+  "password": {
+    "show": "Show password",
+    "hide": "Hide password"
+  },
+  "select": {
+    "emptyList": "No options available",
+    "notFound": "No options found for <0>{{query}}</0>",
+    "createOption": "Create new option for <0>{{query}}</0>"
+  },
+  "yup": {
+    "arrayMax": "{{label}} must contain upto {{max}} item",
+    "arrayMin": "{{label}} must contain atleast {{min}} item",
+    "invalid": "{{label}} invalid",
+    "empty": "{{label}} must not be empty",
+    "invalidType": "{{label}} invalid datatype",
+    "numberMax": "{{label}} maximum {{max}}",
+    "numberMin": "{{label}} minimum {{min}}",
+    "required": "{{label}} required",
+    "stringMax": "{{label}} maximum {{max}} characters allowed",
+    "stringMin": "{{label}} requires minimum {{min}} characters"
+  }
+}

package/src/i18n/index.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { addTranslationBundle } from "@react-fabric/core";
+import ar from "./ar.json";
+import en from "./en.json";
+
+addTranslationBundle("form", { en, ar });