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

package/dist/cjs/builder/FormField.js

@@ -2,33 +2,47 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var reactI18next = require('react-i18next');
 var Controller = require('../form/Controller.js');
 var ArrayInput = require('../input/ArrayInput.js');
 var AvatarInput = require('../input/AvatarInput.js');
 var ColorInput = require('../input/ColorInput.js');
+var DateInput = require('../input/DateInput.js');
 var Input = require('../input/Input.js');
 var Number = require('../input/Number.js');
-var Range = require('../input/Range.js');
+var RangeSlider = require('../input/RangeSlider.js');
 var Switch = require('../input/Switch.js');
 var Textarea = require('../input/Textarea.js');
 var Select = require('../select/Select.js');
+var schema = require('../types/schema.js');
 var FileField = require('./FileField.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["id", "label", "required", "inline", "prefix", "autoFocus", "defaultValue", "fileUrl", "uploadHandler"];
+var _excluded = ["id", "label", "required", "inline", "prefix", "autoFocus", "optionLists", "fileUrl", "uploadHandler"];
 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 FormField = function FormField(_ref) {
+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 getField = function getField(datatype, hasOptions) {
+  if (datatype === schema.DATA_TYPES.NUMBER) return Number.Number;
+  if (datatype === schema.DATA_TYPES.RANGE) return RangeSlider.RangeSlider;
+  if (datatype === schema.DATA_TYPES.BOOL) return Switch.Switch;
+  if (datatype === schema.DATA_TYPES.TEXT) return Textarea.Textarea;
+  if (datatype === schema.DATA_TYPES.DATE) return DateInput.DateInput;
+  if (datatype === schema.DATA_TYPES.DATETIME) return DateInput.DateInput;
+  if (datatype === schema.DATA_TYPES.COLOR) return ColorInput.ColorInput;
+  if (hasOptions) return Select.Select;
+  return Input.Input;
+};
+function FormField(_ref) {
   var id = _ref.id,
     label = _ref.label,
     required = _ref.required,
     inline = _ref.inline,
     prefix = _ref.prefix,
-    autoFocus = _ref.autoFocus;
-    _ref.defaultValue;
-    var fileUrl = _ref.fileUrl,
+    autoFocus = _ref.autoFocus,
+    optionLists = _ref.optionLists,
+    fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation(),
@@ -36,48 +50,55 @@ var FormField = function FormField(_ref) {
   var fieldName = react.useMemo(function () {
     return [prefix, id].filter(Boolean).join(".");
   }, [id, prefix]);
-  var E = react.useMemo(function () {
-    if (rest.datatype === "number" || rest.datatype === "decimal") return Number.Number;
-    if (rest.datatype === "range") return Range.Range;
-    if (rest.datatype === "boolean") return Switch.Switch;
-    if (rest.datatype === "text") return Textarea.Textarea;
-    if (rest.datatype === "color") return ColorInput.ColorInput;
-    if (rest.datatype === "string" && rest.options) return Select.Select;
-    return Input.Input;
-  }, [rest.datatype]);
+  var hasOptions = react.useMemo(function () {
+    var _rest$optionList;
+    return rest.datatype === schema.DATA_TYPES.STRING && (rest.optionList === "--CUSTOM--" && !utilities.isEmpty(rest.options) || !utilities.isEmpty(optionLists === null || optionLists === void 0 ? void 0 : optionLists[(_rest$optionList = rest.optionList) !== null && _rest$optionList !== void 0 ? _rest$optionList : ""]));
+  }, [rest, optionLists]);
   var props = react.useMemo(function () {
-    var _rest$step, _rest$step2, _rest$min, _rest$max, _rest$step3;
-    if (rest.datatype === "number") return {
+    var _rest$step, _rest$min, _rest$max, _rest$step2, _optionLists, _rest$optionList2;
+    if (rest.datatype === schema.DATA_TYPES.NUMBER) return {
       min: rest.min,
       max: rest.max,
       step: (_rest$step = rest.step) !== null && _rest$step !== void 0 ? _rest$step : 1
     };
-    if (rest.datatype === "decimal") return {
-      min: rest.min,
-      max: rest.max,
-      step: (_rest$step2 = rest.step) !== null && _rest$step2 !== void 0 ? _rest$step2 : 0.1
-    };
-    if (rest.datatype === "range") return {
+    if (rest.datatype === schema.DATA_TYPES.RANGE) return {
       min: (_rest$min = rest.min) !== null && _rest$min !== void 0 ? _rest$min : 1,
       max: (_rest$max = rest.max) !== null && _rest$max !== void 0 ? _rest$max : 99,
-      step: (_rest$step3 = rest.step) !== null && _rest$step3 !== void 0 ? _rest$step3 : 1,
+      step: (_rest$step2 = rest.step) !== null && _rest$step2 !== void 0 ? _rest$step2 : 1,
       showValue: true,
       showLabels: true
     };
-    if (rest.datatype === "text") return {
+    if (rest.datatype === schema.DATA_TYPES.DATE) return {
+      min: rest.min,
+      max: rest.max,
+      type: "date"
+    };
+    if (rest.datatype === schema.DATA_TYPES.DATETIME) return {
+      min: rest.min,
+      max: rest.max,
+      type: "datetime"
+    };
+    if (rest.datatype === schema.DATA_TYPES.TEXT) return {
       rows: 3
     };
-    if (rest.datatype === "color") return {
+    if (rest.datatype === schema.DATA_TYPES.COLOR) return {
       showPicker: true
     };
-    if (rest.datatype === "string" && rest.options) return {
-      options: rest.options,
+    if (rest.datatype === schema.DATA_TYPES.STRING && hasOptions) return _objectSpread({
       multiple: rest.multiple,
+      allowCreate: rest.allowCustom,
       searchable: true
-    };
+    }, (_optionLists = optionLists === null || optionLists === void 0 ? void 0 : optionLists[(_rest$optionList2 = rest.optionList) !== null && _rest$optionList2 !== void 0 ? _rest$optionList2 : ""]) !== null && _optionLists !== void 0 ? _optionLists : {
+      options: rest.options
+    });
     return {};
-  }, [rest]);
-  if (rest.datatype === "avatar") return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+  }, [rest, hasOptions, optionLists]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  var E = react.useMemo(function () {
+    return getField(rest.datatype, hasOptions);
+  }, [rest.datatype, hasOptions]);
+  if (rest.datatype === schema.DATA_TYPES.AVATAR) return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsxRuntime.jsx(AvatarInput.AvatarInput, {
       uploadHandler: uploadHandler,
@@ -85,7 +106,7 @@ var FormField = function FormField(_ref) {
       name: fieldName
     })
   });
-  if (rest.datatype === "file") return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+  if (rest.datatype === schema.DATA_TYPES.FILE) return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsxRuntime.jsx(FileField.FileField, _objectSpread({
       uploadHandler: uploadHandler,
@@ -94,12 +115,12 @@ var FormField = function FormField(_ref) {
       id: id
     }, rest))
   });
-  return rest.multiple && !("options" in rest) ? /*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
+  return rest.multiple && !hasOptions ? /*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
     name: fieldName,
-    label: t(label, label),
+    label: t("fb.".concat(id), label || id),
     required: required,
     onAdd: function onAdd() {
-      return "";
+      return String("");
     },
     children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
       children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread({}, props))
@@ -108,12 +129,12 @@ var FormField = function FormField(_ref) {
     name: fieldName,
     children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({}, props), {}, {
       autoFocus: autoFocus,
-      label: t(label, label),
-      placeholder: t(label, label),
+      label: t("fb.".concat(id), label || id),
+      placeholder: t("fb.".concat(id), label || id),
       required: required,
       inline: inline
     }))
   });
-};
+}
 
 exports.FormField = FormField;

package/dist/cjs/builder/SchemaEditor.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var Form = require('../form/Form.js');
+var schema = require('../types/schema.js');
+var SchemaArrayForm = require('./components/SchemaArrayForm.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 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.
+ */
+
+function SchemaEditor(_ref) {
+  var schemaDef = _ref.schemaDef,
+    dynamic = _ref.dynamic,
+    acceptableTypes = _ref.acceptableTypes,
+    _ref$optionLists = _ref.optionLists,
+    optionLists = _ref$optionLists === void 0 ? utilities.EMPTY_ARRAY : _ref$optionLists,
+    children = _ref.children,
+    onSubmit = _ref.onSubmit,
+    onChange = _ref.onChange;
+  var formRef = react.useRef(null);
+  var handleChange = react.useCallback(function (model) {
+    onChange === null || onChange === void 0 || onChange(model.schema);
+  }, [onChange]);
+  var handleSubmit = react.useCallback(function (model) {
+    onSubmit === null || onSubmit === void 0 || onSubmit(model.schema);
+  }, [onSubmit]);
+  react.useEffect(function () {
+    var _formRef$current;
+    (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setValues({
+      schema: schemaDef
+    });
+  }, [schemaDef]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Form.Form, {
+    formRef: formRef,
+    onChange: handleChange,
+    onSubmit: handleSubmit,
+    children: [/*#__PURE__*/jsxRuntime.jsx(SchemaArrayForm.SchemaArrayForm, {
+      dynamic: dynamic,
+      optionLists: optionLists,
+      acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(schema.DATA_TYPES)
+    }), children && /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
+      flex: true,
+      className: "border-t bg-default px-6 py-2",
+      children: children
+    })]
+  });
+}
+
+exports.SchemaEditor = SchemaEditor;

package/dist/cjs/builder/components/AddSchemaFields.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var yup = require('@hookform/resolvers/yup');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var Controller = require('../../form/Controller.js');
+var Form = require('../../form/Form.js');
+var ArrayInput = require('../../input/ArrayInput.js');
+var Input = require('../../input/Input.js');
+var jsxRuntime = require('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), 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 fieldSchema = utilities.yup.object({
+  fields: utilities.yup.array(utilities.yup.string().trim().required()).required().min(1)
+});
+function AddSchemaFields(props) {
+  var handleSubmit = react.useCallback(function (model) {
+    var _props$onClose;
+    (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props, model.fields.map(function (f) {
+      return f.split(",").map(function (ff) {
+        return ff.trim();
+      });
+    }).flat(2));
+  }, [props]);
+  return /*#__PURE__*/jsxRuntime.jsx(core.Modal, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Form.Form, {
+      resolver: yup.yupResolver(fieldSchema),
+      defaultValues: {
+        fields: [" "]
+      },
+      onSubmit: handleSubmit,
+      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Content, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
+          minItems: 1,
+          name: "fields",
+          onAdd: function onAdd() {
+            return String("");
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+              autoFocus: true
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-sm text-muted",
+          children: "Provide list of fields or comma-separated value"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
+        flex: true,
+        justify: "end",
+        className: "px-2 py-1",
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          type: "submit",
+          children: "Add"
+        })
+      })]
+    })
+  }));
+}
+
+exports.AddSchemaFields = AddSchemaFields;

package/dist/cjs/builder/components/SchemaArrayForm.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var modifiers = require('@dnd-kit/abstract/modifiers');
+var react$1 = require('@dnd-kit/react');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var reactHookForm = require('react-hook-form');
+var schema = require('../../types/schema.js');
+var AddSchemaFields = require('./AddSchemaFields.js');
+var SchemaField = require('./SchemaField.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Wrapper(_ref) {
+  var children = _ref.children,
+    fields = _ref.fields,
+    onMove = _ref.onMove;
+  // pass id list to dnd context
+  var idMap = fields.map(function (item) {
+    return item.__ID__;
+  });
+  var handleDragEnd = function handleDragEnd(e) {
+    var _e$operation$source, _e$operation$target;
+    if (((_e$operation$source = e.operation.source) === null || _e$operation$source === void 0 ? void 0 : _e$operation$source.id) !== ((_e$operation$target = e.operation.target) === null || _e$operation$target === void 0 ? void 0 : _e$operation$target.id)) {
+      var _e$operation$source2, _e$operation$target2;
+      // find index of item and drop over
+      var active = idMap.indexOf("".concat((_e$operation$source2 = e.operation.source) === null || _e$operation$source2 === void 0 ? void 0 : _e$operation$source2.id));
+      var end = idMap.indexOf("".concat((_e$operation$target2 = e.operation.target) === null || _e$operation$target2 === void 0 ? void 0 : _e$operation$target2.id));
+      onMove(active, end);
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.DragDropProvider, {
+    onDragEnd: handleDragEnd,
+    modifiers: [modifiers.RestrictToVerticalAxis],
+    children: children
+  });
+}
+
+// Need to disable prop-types lint due to uknown lint error
+function SchemaArrayForm(_ref2) {
+  var dynamic = _ref2.dynamic,
+    acceptableTypes = _ref2.acceptableTypes,
+    optionLists = _ref2.optionLists;
+  var form = reactHookForm.useFormContext();
+  var _useState = react.useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultOpen = _useState2[0],
+    setDefaultOpen = _useState2[1];
+  var _useFieldArray = reactHookForm.useFieldArray({
+      name: "schema",
+      control: form.control
+    }),
+    fields = _useFieldArray.fields,
+    append = _useFieldArray.append,
+    remove = _useFieldArray.remove,
+    move = _useFieldArray.move;
+  var handleTypeChange = react.useCallback(function (index, val) {
+    form.setValue("schema.".concat(index), val);
+  }, [form]);
+  var handleRemove = react.useCallback(function (index) {
+    remove(index);
+  }, [remove]);
+  var _useOverlayService = core.useOverlayService(AddSchemaFields.AddSchemaFields),
+    _useOverlayService2 = _slicedToArray(_useOverlayService, 2),
+    renderModal = _useOverlayService2[0],
+    openAddfields = _useOverlayService2[1];
+  var handleAdd = react.useCallback(function () {
+    void openAddfields().then(function (fields) {
+      if (utilities.isArray(fields)) {
+        var existing = form.getValues().schema.map(function (field) {
+          return field.id;
+        });
+        fields.forEach(function (field) {
+          if (!existing.includes(field)) {
+            append({
+              id: field,
+              datatype: schema.DATA_TYPES.STRING,
+              label: ""
+            });
+          }
+        });
+      }
+    });
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
+    onMove: move,
+    fields: fields,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(core.Header, {
+      flex: true,
+      justify: "end",
+      className: "gap-1 px-2",
+      children: [dynamic && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "link",
+        icon: "icon-[mdi--plus-circle-outline]",
+        "aria-label": "add field",
+        onClick: handleAdd
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "link",
+        icon: "icon-[mdi--arrow-collapse-vertical]",
+        "aria-label": "collapse all",
+        onClick: function onClick() {
+          return setDefaultOpen(false);
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "link",
+        icon: "icon-[mdi--arrow-expand-vertical]",
+        "aria-label": "expand all",
+        onClick: function onClick() {
+          return setDefaultOpen(true);
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Content, {
+      className: "divide-y",
+      children: fields.map(function (field, index) {
+        return /*#__PURE__*/jsxRuntime.jsx(SchemaField.SchemaField
+        // eslint-disable-next-line @eslint-react/no-array-index-key
+        , {
+          index: index,
+          defaultOpen: defaultOpen,
+          id: form.getValues().schema[index].id,
+          fieldId: field.id,
+          field: "schema.".concat(index),
+          dynamic: dynamic,
+          optionLists: optionLists,
+          onRemove: function onRemove() {
+            return handleRemove(index);
+          },
+          getModel: function getModel() {
+            return form.getValues().schema[index];
+          },
+          onTypeChange: function onTypeChange(val) {
+            return handleTypeChange(index, val);
+          },
+          acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(schema.DATA_TYPES)
+        }, index);
+      })
+    }), renderModal()]
+  });
+}
+
+exports.SchemaArrayForm = SchemaArrayForm;