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

package/dist/esm/form/Form.js

@@ -1,41 +1,86 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { yupResolver } from '@hookform/resolvers/yup';
 import { useDebounce } from '@react-fabric/core';
+import { EMPTY_OBJECT } from '@react-fabric/utilities';
 import { useRef, useTransition, useEffect, useCallback, useImperativeHandle } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["formRef", "schema", "children", "defaultValues", "onSubmit", "onChange"];
+var _excluded = ["formRef", "resolver", "children", "resetOnChange", "defaultValues", "onSubmit", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
   return undefined;
 };
-var Form = function Form(_ref) {
+
+/**
+ * Form component for managing form state and validation using react-hook-form and yup.
+ * It provides a simple interface for form handling, including submission, validation, and value management.
+ * It supports nested form structures and allows for custom validation schemas using Yup.
+ *
+ * @example
+ * ```jsx
+ * <Form
+ *   formRef={formRef}
+ *   resolver={hookformResolver(schema)}
+ *   defaultValues={{ name: "", email: "" }}
+ *   onSubmit={(values) => {
+ *     console.log("Form submitted with values:", values);
+ *   }}
+ * >
+ *   <input name="name" ref={form.register} placeholder="Name" />
+ *   <input name="email" ref={form.register} placeholder="Email" />
+ *   <button type="submit">Submit</button>
+ * </Form>
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/docs/useform} for more details on the properties.
+ */
+function Form(_ref) {
   var formRef = _ref.formRef,
-    schema = _ref.schema,
+    resolver = _ref.resolver,
     children = _ref.children,
-    defaultValues = _ref.defaultValues,
+    resetOnChange = _ref.resetOnChange,
+    _ref$defaultValues = _ref.defaultValues,
+    _defaultValues = _ref$defaultValues === void 0 ? EMPTY_OBJECT : _ref$defaultValues,
     _ref$onSubmit = _ref.onSubmit,
-    onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
+    _onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef(null);
   var form = useForm({
     shouldFocusError: true,
-    resolver: schema && yupResolver(schema),
-    defaultValues: defaultValues
+    resolver: resolver,
+    defaultValues: function () {
+      var _defaultValues2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 1;
+              return Promise.resolve(_defaultValues);
+            case 1:
+              return _context.abrupt("return", _context.sent);
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function defaultValues() {
+        return _defaultValues2.apply(this, arguments);
+      }
+      return defaultValues;
+    }()
   });
   var _useTransition = useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
     startTransition = _useTransition2[1];
-  var changeHandler = useDebounce(onChange, [onChange]);
+  var changeHandler = useDebounce(onChange, [onChange], 300);
   useEffect(function () {
     var subscription = form.watch(function (value) {
       startTransition(function () {
@@ -45,42 +90,49 @@ var Form = function Form(_ref) {
     return function () {
       return subscription.unsubscribe();
     };
-  }, [form.watch, changeHandler]);
+  }, [form.watch, changeHandler, form]);
   var handleReset = useCallback(function () {
-    var _ref$current;
     var reset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    form.reset(reset);
-    form.clearErrors();
-    (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.querySelector("[auto-focus], input, textarea")) === null || _ref$current === void 0 || _ref$current.focus();
-  }, [defaultValues]);
+    void Promise.resolve(reset).then(function (resp) {
+      var _ref$current;
+      form.reset(resp);
+      form.clearErrors();
+      (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.querySelector("[auto-focus], input, textarea")) === null || _ref$current === void 0 || _ref$current.focus();
+    });
+  }, [form]);
+  useEffect(function () {
+    if (resetOnChange) {
+      handleReset(_defaultValues);
+    }
+  }, [_defaultValues, handleReset, resetOnChange]);
   useImperativeHandle(formRef, function () {
     return {
       state: form.formState,
       reset: function reset() {
-        return handleReset(defaultValues);
+        return handleReset(_defaultValues);
       },
       clear: function clear() {
         return handleReset();
       },
       submit: function submit() {
-        return form.handleSubmit(onSubmit);
+        return form.handleSubmit(_onSubmit);
       },
       validate: function () {
-        var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
+        var _validate = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields) {
+          return _regeneratorRuntime.wrap(function (_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                _context.next = 2;
-                return form.trigger();
+                _context2.next = 1;
+                return form.trigger(fields);
+              case 1:
+                return _context2.abrupt("return", _context2.sent);
               case 2:
-                return _context.abrupt("return", _context.sent);
-              case 3:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
-          }, _callee);
+          }, _callee2);
         }));
-        function validate() {
+        function validate(_x) {
           return _validate.apply(this, arguments);
         }
         return validate;
@@ -95,28 +147,34 @@ var Form = function Form(_ref) {
       },
       setValue: function setValue(k, v) {
         return setTimeout(function () {
-          return form.setValue(k, v, {
-            shouldDirty: false,
-            shouldTouch: false
-          });
+          return (
+            // @ts-expect-error ignore
+            form.setValue(k, v, {
+              shouldDirty: false,
+              shouldTouch: false
+            })
+          );
         }, 50);
       }
     };
-  }, [onSubmit, form, form.formState, defaultValues]);
+  }, [_defaultValues, form, handleReset, _onSubmit]);
   var onInvalid = useCallback(function (_, e) {
-    var el = e.target;
+    var el = e === null || e === void 0 ? void 0 : e.target;
     setTimeout(function () {
       var _el$querySelector;
-      return (_el$querySelector = el.querySelector("input[aria-invalid='true'],textarea[aria-invalid='true']")) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.focus();
+      return el === null || el === void 0 || (_el$querySelector = el.querySelector("input[aria-invalid='true'],textarea[aria-invalid='true']")) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.focus();
     }, 10);
   }, []);
   return /*#__PURE__*/jsx(FormProvider, _objectSpread(_objectSpread({}, form), {}, {
     children: /*#__PURE__*/jsxs("form", _objectSpread(_objectSpread({
       ref: ref,
       onReset: function onReset() {
-        return handleReset(defaultValues);
+        return handleReset(_defaultValues);
+      },
+      onSubmit: function onSubmit(e) {
+        e.stopPropagation();
+        void form.handleSubmit(_onSubmit, onInvalid)(e);
       },
-      onSubmit: form.handleSubmit(onSubmit, onInvalid),
       "data-loading": form.formState.isSubmitting,
       className: "contents",
       autoComplete: "off"
@@ -127,6 +185,6 @@ var Form = function Form(_ref) {
       })]
     }))
   }));
-};
+}
 
 export { Form };

package/dist/esm/form/useForm.js

@@ -0,0 +1,32 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function useForm() {
+  var _useFormContext = useFormContext(),
+    formState = _useFormContext.formState,
+    getValues = _useFormContext.getValues,
+    setValue = _useFormContext.setValue,
+    watch = _useFormContext.watch,
+    reset = _useFormContext.reset,
+    resetField = _useFormContext.resetField,
+    setError = _useFormContext.setError,
+    setFocus = _useFormContext.setFocus;
+  var values = useWatch();
+  return {
+    values: _objectSpread(_objectSpread({}, values), getValues()),
+    formState: formState,
+    getValues: getValues,
+    setValue: setValue,
+    watch: watch,
+    reset: reset,
+    resetField: resetField,
+    setError: setError,
+    setFocus: setFocus
+  };
+}
+
+export { useForm };

package/dist/esm/hooks/useFileUploader.js

@@ -6,14 +6,33 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { isString, uuid, isObject, isArray } from '@react-fabric/utilities';
-import { useReducer, useCallback } from 'react';
+import { useReducer, useEffect, useCallback } from 'react';
 
 var _excluded = ["progress", "abort"],
   _excluded2 = ["file", "progress", "abort"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useFileUploader = function useFileUploader(uploader, initialList) {
-  var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * useFileUploader hook provides a way to handle file uploads
+ * with progress tracking, error handling, and file management.
+ * It uses a reducer to manage the state of uploaded files and their statuses.
+ *
+ * @param uploader - The function that handles the file upload.
+ * @param initialList - Initial list of files to be managed by the uploader.
+ * @param multiple - Whether to allow multiple file uploads or not.
+ * @returns An object containing methods to upload, remove, retry files,
+ *          and the current state of the uploader including pending uploads and file list.
+ *
+ * @example
+ * ```jsx
+ * const { upload, remove, retry, state } = useFileUploader(uploader, initialList, multiple);
+ * ```
+ */
+function useFileUploader(uploader, initialList) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? true : _ref$multiple,
+    onChange = _ref.onChange;
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "start") {
         if (!multiple) state.files.clear();
@@ -60,40 +79,26 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
       if (action.type === "remove") {
         state.files["delete"](action.key);
       }
-      state.list = Array.from(state.files.values()).map(function (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);
-      return _objectSpread({}, state);
-    }, {
-      files: new Map(),
-      count: 0
-    }, function (state) {
-      if (initialList) {
-        if (isString(initialList)) {
+      if (action.type === "init") {
+        state.files = new Map();
+        if (isString(action.initialList)) {
           var key = uuid();
           state.files.set(key, {
             key: key,
-            path: initialList,
+            path: action.initialList,
             filename: "",
             size: 0,
             mime: ""
           });
         }
-        if (isObject(initialList)) {
+        if (isObject(action.initialList)) {
           var _key = uuid();
-          state.files.set(_key, _objectSpread(_objectSpread({}, initialList), {}, {
+          state.files.set(_key, _objectSpread(_objectSpread({}, action.initialList), {}, {
             key: _key
           }));
         }
-        if (isArray(initialList)) {
-          initialList.forEach(function (file) {
+        if (isArray(action.initialList)) {
+          action.initialList.forEach(function (file) {
             var key = uuid();
             state.files.set(key, _objectSpread(_objectSpread({}, file), {}, {
               key: key
@@ -101,21 +106,46 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
           });
         }
       }
-      state.list = Array.from(state.files.values());
-      return state;
+      state.list = Array.from(state.files.values()).map(function (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);
+      if (action.type === "remove" || action.type === "stop") {
+        setTimeout(function () {
+          var _state$list$;
+          // @ts-expect-error ignore
+          onChange === null || onChange === void 0 || onChange(multiple ? state.list : (_state$list$ = state.list[0]) !== null && _state$list$ !== void 0 ? _state$list$ : null);
+        }, 100);
+      }
+      return _objectSpread({}, state);
+    }, {
+      files: new Map(),
+      count: 0
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
-  var doUpload = useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
-      var data, _abort2;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+  useEffect(function () {
+    dispatch({
+      type: "init",
+      initialList: initialList
+    });
+  }, [initialList]);
+  var doUpload = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
+      var data, _abort;
+      return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             data = new FormData();
             data.append("file", file);
-            _abort2 = new AbortController();
+            _abort = new AbortController();
             dispatch({
               type: "start",
               key: key,
@@ -127,13 +157,13 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
                 filename: file.name,
                 size: file.size,
                 abort: function abort() {
-                  return _abort2.abort();
+                  return _abort.abort();
                 }
               }
             });
-            _context.next = 6;
+            _context.next = 1;
             return uploader(data, {
-              signal: _abort2.signal,
+              signal: _abort.signal,
               onUploadProgress: function onUploadProgress(progressEvent) {
                 var _progressEvent$progre;
                 dispatch({
@@ -149,7 +179,7 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
                 path: path
               });
             })["catch"](function (error) {
-              var _error$message;
+              var _ref3;
               if (error.code === "ERR_CANCELED" || error.name === "AbortError") {
                 return dispatch({
                   type: "abort",
@@ -159,19 +189,19 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
               dispatch({
                 type: "error",
                 key: key,
-                error: (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : "form:fileUploadFailed"
+                error: (_ref3 = error === null || error === void 0 ? void 0 : error.message) !== null && _ref3 !== void 0 ? _ref3 : "form:fileUploadFailed"
               });
             });
-          case 6:
+          case 1:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
-  }(), []);
+  }(), [uploader]);
   var upload = useCallback(function (files) {
     if (!multiple) {
       var _Array$from$, _Array$from$$abort;
@@ -180,25 +210,24 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
     Array.from(files !== null && files !== void 0 ? files : []).slice(0, multiple ? undefined : 1).forEach(function (file) {
       void doUpload(uuid(), file);
     });
-  }, [multiple]);
+  }, [doUpload, multiple, state.files]);
   var retry = useCallback(function (key) {
     var fileObject = state.files.get(key);
     void ((fileObject === null || fileObject === void 0 ? void 0 : fileObject.file) && doUpload(key, fileObject.file));
-  }, [state]);
+  }, [doUpload, state.files]);
   var remove = useCallback(function (key) {
     dispatch({
       type: "remove",
       key: key
     });
-  }, [state]);
+  }, []);
   return {
     upload: upload,
     remove: remove,
     retry: retry,
     pending: state.count,
-    list: state.list,
     files: Array.from(state.files.values())
   };
-};
+}
 
 export { useFileUploader };

package/dist/esm/hooks/useFormBuilder.js

@@ -1,33 +1,45 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { EmptyContent } from '@react-fabric/core';
 import { yup, isNil, isEmpty } from '@react-fabric/utilities';
 import { useMemo, Fragment } from 'react';
 import { FormField } from '../builder/FormField.js';
-import { jsx } from 'react/jsx-runtime';
+import { DATA_TYPES } from '../types/schema.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var makeYupField = function makeYupField(field) {
-  var yupField = yup.string();
-  if (field.datatype === "schema") {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function makeYupField(field) {
+  var yupField = yup.string().trim();
+  if (field.datatype === DATA_TYPES.SCHEMA) {
     var child = Object.fromEntries(field.schema.map(function (field) {
       return [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 === DATA_TYPES.BOOL) {
+    yupField = yup["boolean"]();
+    if (field.required) yupField = yupField.test({
+      test: function test(value) {
+        return !!value;
+      }
+    });
   }
-  if (field.datatype === "string") {
-    field.options && (yupField = yupField.oneOf(field.options));
-    field.regex && (yupField = yupField.matches(new RegExp(field.regex)));
+  if (field.datatype === DATA_TYPES.NUMBER || field.datatype === DATA_TYPES.RANGE) {
+    var numberField = yup.number();
+    if (!isNil(field.min)) numberField = numberField.min(field.min);
+    if (!isNil(field.max)) numberField = numberField.max(field.max);
+    if (field.datatype === DATA_TYPES.RANGE) yupField = yup.array(numberField);else yupField = numberField;
   }
-  if (field.datatype === "file") {
+  if (field.datatype === DATA_TYPES.STRING) {
+    var stringField = yup.string().trim();
+    if (field.options && !field.allowCustom) stringField = stringField.oneOf(field.options);
+    if (field.regex) stringField = stringField.matches(new RegExp(field.regex));
+    yupField = stringField;
+  }
+  if (field.datatype === DATA_TYPES.FILE) {
     yupField = yup.object({
       filename: yup.string().required(),
       path: yup.string().required()
@@ -44,16 +56,49 @@ var makeYupField = function makeYupField(field) {
       });
     }
   }
-  if (field.required) {
-    yupField = yupField.required();
-  }
   if (field.multiple) {
-    yupField = yup.array(yupField);
-    field.required && (yupField = yupField.required().min(1));
+    var arrayField = yup.array(yupField);
+    if (field.required) arrayField = arrayField.required().min(1);
+    yupField = arrayField;
+  } else {
+    if (field.required) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      yupField = yupField.required();
+    }
   }
   return yupField.label(field.label);
-};
-var useFormBuilder = function useFormBuilder(schema) {
+}
+
+/**
+ * useFormBuilder hook to create a form definition based on a schema.
+ * It generates a Yup validation schema and a form definition component.
+ *
+ * @param {FormSchema} schema - The schema defining the form fields.
+ * @param {Object} options - Optional parameters for the form builder.
+ * @returns An object containing the form definition and the Yup validation schema.
+ *
+ * @example
+ * ```jsx
+ * const { formDef, schemaDef } = useFormBuilder(schema, {
+ *   prefix: "form",
+ *   inline: true,
+ *   fileUrl: (path) => `/files/${path}`,
+ *   uploadHandler: async (file) => {
+ *    // handle file upload
+ *   },
+ *  optionLists: {
+ *    // define option lists for select fields
+ *  }
+ * * });
+ * <FormBuilder
+ *   schema={schemaDef}
+ *   onSubmit={(data) => console.log(data)}
+ * >
+ *   {formDef}
+ * </FormBuilder>
+ * ```
+ */
+function useFormBuilder(schema) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var filteredSchema = useMemo(function () {
     var _schema$filter, _schema$filter2;
@@ -61,27 +106,36 @@ var useFormBuilder = function useFormBuilder(schema) {
       return !!schm.id;
     })) !== null && _schema$filter !== void 0 ? _schema$filter : [];
   }, [schema]);
-  var schemaDef = yup.object(Object.fromEntries(filteredSchema.map(function (field) {
-    return [field.id, makeYupField(field)];
-  })));
-  var formDef = /*#__PURE__*/jsx(Fragment, {
-    children: filteredSchema.map(function (field, idx) {
+  var schemaDef = useMemo(function () {
+    return yup.object(Object.fromEntries(filteredSchema.map(function (field) {
+      return [field.id, makeYupField(field)];
+    })));
+  }, [filteredSchema]);
+  var resolver = useMemo(function () {
+    return yupResolver(schemaDef);
+  }, [schemaDef]);
+  var formDef = /*#__PURE__*/jsxs(Fragment, {
+    children: [filteredSchema.map(function (field, idx) {
       return /*#__PURE__*/jsx("div", {
         className: "mb-4",
-        children: field.datatype === "schema" ? null : /*#__PURE__*/jsx(FormField, _objectSpread(_objectSpread({}, field), {}, {
+        children: field.datatype === DATA_TYPES.SCHEMA ? null : /*#__PURE__*/jsx(FormField, _objectSpread(_objectSpread({}, field), {}, {
           autoFocus: idx === 0,
           fileUrl: options.fileUrl,
+          optionLists: options.optionLists,
           uploadHandler: options.uploadHandler,
           inline: options.inline,
           prefix: options.prefix
         }))
       }, field.id);
-    })
+    }), filteredSchema.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
+      message: "No schema defined"
+    })]
   });
   return {
     formDef: formDef,
+    resolver: resolver,
     schemaDef: schemaDef
   };
-};
+}
 
 export { useFormBuilder };

package/dist/esm/i18n/{ar.json.js → ar/form.json.js}

@@ -2,17 +2,18 @@
 
 var addArray = "اضافة عنصر";
 var password = {
-	show: "عرض كلمة المرور",
-	hide: "اخفاء كلمة المرور"
+	hide: "اخفاء كلمة المرور",
+	show: "عرض كلمة المرور"
 };
 var select = {
+	createOption: "إنشاء خيار جديد ل ",
 	emptyList: "لا توجد خيارات متاحة",
-	notFound: "لم يتم العثور على خيارات ل ",
-	createOption: "إنشاء خيار جديد ل "
+	notFound: "لم يتم العثور على خيارات ل "
 };
 var yup = {
 	arrayMax: "{{label}} حدد ما يصل {{max}} غرض",
 	arrayMin: "{{label}} اختر على الأقل {{min}} غرض",
+	empty: "{{label}} يجب ألا يكون فارغًا",
 	invalid: "{{label}} نوع بيانات غير صالح",
 	invalidType: "{{label}} غير صالح",
 	numberMax: "{{label}} الحد الأقصى {{max}}",