@homefile/components-v2 1.0.2 → 1.0.3

package/dist/components/forms/dynamicForm/DynamicForm.js

@@ -1,72 +1,56 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicForm = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_hook_form_1 = require("react-hook-form");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../..");
-var hooks_1 = require("../../../hooks");
-var helpers_1 = require("../../../helpers");
-var DynamicForm = function (_a) {
-    var fields = _a.form, onUpload = _a.onUpload, uploadingFieldId = _a.uploadingFieldId;
-    var _b = (0, hooks_1.useDynamicForm)({ fields: fields, onUpload: onUpload }), form = _b.form, visibleFields = _b.visibleFields, hiddenFields = _b.hiddenFields, handleAddAll = _b.handleAddAll, handleAdd = _b.handleAdd, handleFilesUpload = _b.handleFilesUpload, handleRemove = _b.handleRemove;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, { bg: "lightBlue.1", spacing: "0", h: "full", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", px: "base", pt: "4", pb: "2", children: (0, i18next_1.t)('forms.itemDetails') }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, form, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map(function (field) {
-                        var children = field.children, description = field.description, icon = field.icon, id = field.id, name = field.name, options = field.options, type = field.type, value = field.value, visible = field.visible;
-                        var baseProps = {
-                            id: id,
-                            value: value,
-                            icon: icon ? helpers_1.fieldIcons[icon] : undefined,
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormProvider } from 'react-hook-form';
+import { t } from 'i18next';
+import { Stack, Text } from '@chakra-ui/react';
+import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, } from '../..';
+import { useDynamicForm } from '../../../hooks';
+import { fieldIcons } from '../../../helpers';
+export const DynamicForm = ({ form: fields, onUpload, uploadingFieldId, }) => {
+    const { form, visibleFields, hiddenFields, handleAddAll, handleAdd, handleFilesUpload, handleRemove, } = useDynamicForm({ fields, onUpload });
+    return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", children: [_jsx(Text, { fontFamily: "secondary", px: "base", pt: "4", pb: "2", children: t('forms.itemDetails') }), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
+                        const { children, description, icon, id, name, options, type, value, visible, } = field;
+                        const baseProps = {
+                            id,
+                            value,
+                            icon: icon ? fieldIcons[icon] : undefined,
                             placeholder: name || description,
                         };
-                        var fieldWithDeleteBaseProps = {
+                        const fieldWithDeleteBaseProps = {
                             key: id,
-                            id: id,
+                            id,
                             onRemove: handleRemove,
                             isAlwaysVisible: visible,
                         };
                         switch (type) {
                             case 'date':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.DateField, __assign({}, baseProps, { name: name })) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(DateField, Object.assign({}, baseProps, { name: name })) })));
                             case 'email':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.TextField, __assign({}, baseProps, { type: "email" })) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(TextField, Object.assign({}, baseProps, { type: "email" })) })));
                             case 'number':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.NumberField, __assign({}, baseProps)) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(NumberField, Object.assign({}, baseProps)) })));
                             case 'currency':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.CurrencyField, __assign({}, baseProps)) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(CurrencyField, Object.assign({}, baseProps)) })));
                             case 'telephone':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.TextField, __assign({}, baseProps, { type: "tel" })) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(TextField, Object.assign({}, baseProps, { type: "tel" })) })));
                             case 'text':
                             case 'string':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.TextField, __assign({}, baseProps)) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(TextField, Object.assign({}, baseProps)) })));
                             case 'textarea':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.TextAreaField, __assign({}, baseProps)) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(TextAreaField, Object.assign({}, baseProps)) })));
                             case 'select':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.SelectField, __assign({}, baseProps, { options: options })) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(SelectField, Object.assign({}, baseProps, { options: options })) })));
                             case 'rating':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.RatingField, __assign({}, baseProps)) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(RatingField, Object.assign({}, baseProps)) })));
                             case 'grid':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.GridField, __assign({}, baseProps, { children: children })) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(GridField, Object.assign({}, baseProps, { children: children })) })));
                             case 'switch':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.SwitchField, __assign({}, baseProps, { description: description })) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(SwitchField, Object.assign({}, baseProps, { description: description })) })));
                             case 'file':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, __assign({}, fieldWithDeleteBaseProps, { children: (0, jsx_runtime_1.jsx)(components_1.FileField, { icon: baseProps.icon, description: description, onUpload: function (files) { return handleFilesUpload({ id: id, files: files }); }, uploading: uploadingFieldId === id }) })));
+                                return (_jsx(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { children: _jsx(FileField, { icon: baseProps.icon, description: description, onUpload: (files) => handleFilesUpload({ id, files }), uploading: uploadingFieldId === id }) })));
                             case 'group':
-                                return ((0, jsx_runtime_1.jsx)(components_1.GroupField, { id: id, fields: children, onRemove: handleRemove, visible: visible }, id));
+                                return (_jsx(GroupField, { id: id, fields: children, onRemove: handleRemove, visible: visible }, id));
                             default:
                                 return null;
                         }
-                    }) }) })), hiddenFields.length && ((0, jsx_runtime_1.jsx)(components_1.HiddenFieldSection, { fields: hiddenFields, onAddAll: handleAddAll, onClick: handleAdd }))] }));
+                    }) }) })), hiddenFields.length && (_jsx(HiddenFieldSection, { fields: hiddenFields, onAddAll: handleAddAll, onClick: handleAdd }))] }));
 };
-exports.DynamicForm = DynamicForm;

package/dist/components/forms/dynamicForm/DynamicFormSimple.js

@@ -1,48 +1,32 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicFormSimple = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_hook_form_1 = require("react-hook-form");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../..");
-var hooks_1 = require("../../../hooks");
-var helpers_1 = require("../../../helpers");
-var DynamicFormSimple = function (_a) {
-    var fields = _a.form;
-    var form = (0, hooks_1.useDynamicForm)({ fields: fields }).form;
-    return ((0, jsx_runtime_1.jsx)(react_1.Stack, { bg: "neutral.white", spacing: "0", h: "full", boxShadow: "md", children: (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, form, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Divider, {}), fields === null || fields === void 0 ? void 0 : fields.map(function (field) {
-                        var description = field.description, icon = field.icon, id = field.id, name = field.name, options = field.options, type = field.type, value = field.value;
-                        var baseProps = {
-                            description: description,
-                            id: id,
-                            value: value,
-                            icon: icon ? helpers_1.fieldIcons[icon] : undefined,
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormProvider } from 'react-hook-form';
+import { Divider, Stack } from '@chakra-ui/react';
+import { TextField, SelectField, SwitchField, NumberField, FieldDivider, } from '../..';
+import { useDynamicForm } from '../../../hooks';
+import { fieldIcons } from '../../../helpers';
+export const DynamicFormSimple = ({ form: fields }) => {
+    const { form } = useDynamicForm({ fields });
+    return (_jsx(Stack, { bg: "neutral.white", spacing: "0", h: "full", boxShadow: "md", children: _jsx(FormProvider, Object.assign({}, form, { children: _jsxs(_Fragment, { children: [_jsx(Divider, {}), fields === null || fields === void 0 ? void 0 : fields.map((field) => {
+                        const { description, icon, id, name, options, type, value } = field;
+                        const baseProps = {
+                            description,
+                            id,
+                            value,
+                            icon: icon ? fieldIcons[icon] : undefined,
                             placeholder: name || description,
                         };
                         switch (type) {
                             case 'number':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldDivider, { children: (0, jsx_runtime_1.jsx)(components_1.NumberField, __assign({}, baseProps)) }, id));
+                                return (_jsx(FieldDivider, { children: _jsx(NumberField, Object.assign({}, baseProps)) }, id));
                             case 'text':
                             case 'string':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldDivider, { children: (0, jsx_runtime_1.jsx)(components_1.TextField, __assign({}, baseProps)) }, id));
+                                return (_jsx(FieldDivider, { children: _jsx(TextField, Object.assign({}, baseProps)) }, id));
                             case 'select':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldDivider, { children: (0, jsx_runtime_1.jsx)(components_1.SelectField, __assign({}, baseProps, { options: options })) }, id));
+                                return (_jsx(FieldDivider, { children: _jsx(SelectField, Object.assign({}, baseProps, { options: options })) }, id));
                             case 'switch':
-                                return ((0, jsx_runtime_1.jsx)(components_1.FieldDivider, { children: (0, jsx_runtime_1.jsx)(components_1.SwitchField, __assign({}, baseProps)) }, id));
+                                return (_jsx(FieldDivider, { children: _jsx(SwitchField, Object.assign({}, baseProps)) }, id));
                             default:
                                 return null;
                         }
                     })] }) })) }));
 };
-exports.DynamicFormSimple = DynamicFormSimple;

package/dist/components/forms/dynamicForm/HiddenField.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HiddenField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var HiddenField = function (_a) {
-    var icon = _a.icon, id = _a.id, name = _a.name, onClick = _a.onClick;
-    var handleClick = function () { return onClick(id); };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Center, { as: "button", bg: "neutral.white", borderRadius: "md", w: "auto", h: "80px", boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: "transparent", _hover: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Center, Image, Text } from '@chakra-ui/react';
+export const HiddenField = ({ icon, id, name, onClick }) => {
+    const handleClick = () => onClick(id);
+    return (_jsxs(Center, { as: "button", bg: "neutral.white", borderRadius: "md", w: "auto", h: "80px", boxShadow: "md", flexDirection: "column", onClick: handleClick, gap: "1", transition: "all .2s ease-in-out", border: "1px solid", borderColor: "transparent", _hover: {
             borderColor: 'blue.1',
         }, _active: {
             boxShadow: 'md',
-        }, children: [(0, jsx_runtime_1.jsx)(react_1.Image, { h: "24px", w: "auto", maxW: "35px", src: icon }), (0, jsx_runtime_1.jsx)(react_1.Text, { textTransform: "uppercase", fontSize: "xs", noOfLines: 2, overflow: "hidden", lineHeight: "1", width: "100%", children: name })] }));
+        }, children: [_jsx(Image, { h: "24px", w: "auto", maxW: "35px", src: icon }), _jsx(Text, { textTransform: "uppercase", fontSize: "xs", noOfLines: 2, overflow: "hidden", lineHeight: "1", width: "100%", children: name })] }));
 };
-exports.HiddenField = HiddenField;

package/dist/components/forms/dynamicForm/HiddenFieldSection.js

@@ -1,16 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HiddenFieldSection = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var helpers_1 = require("../../../helpers");
-var components_1 = require("../..");
-var HiddenFieldSection = function (_a) {
-    var fields = _a.fields, onAddAll = _a.onAddAll, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, { mt: "base", spacing: "base", bg: "lightBlue.2", borderTop: "1px dashed", borderColor: "lightGray.2", p: "base", h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", py: "2", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", children: (0, i18next_1.t)('forms.moreDetails') }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "text", onClick: onAddAll, children: (0, i18next_1.t)('forms.addAll') })] }), (0, jsx_runtime_1.jsx)(react_1.Grid, { templateColumns: "repeat(auto-fill, minmax(70px, 1fr))", gap: "base", children: fields.map(function (_a) {
-                    var _b = _a.icon, icon = _b === void 0 ? 'default' : _b, id = _a.id, _c = _a.name, name = _c === void 0 ? '' : _c;
-                    return ((0, jsx_runtime_1.jsx)(components_1.HiddenField, { id: id, name: name, icon: helpers_1.fieldIcons[icon], onClick: onClick }, id));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Button, Flex, Grid, Stack, Text } from '@chakra-ui/react';
+import { fieldIcons } from '../../../helpers';
+import { HiddenField } from '../..';
+export const HiddenFieldSection = ({ fields, onAddAll, onClick, }) => {
+    return (_jsxs(Stack, { mt: "base", spacing: "base", bg: "lightBlue.2", borderTop: "1px dashed", borderColor: "lightGray.2", p: "base", h: "100%", children: [_jsxs(Flex, { align: "center", justify: "space-between", py: "2", children: [_jsx(Text, { fontFamily: "secondary", children: t('forms.moreDetails') }), _jsx(Button, { variant: "text", onClick: onAddAll, children: t('forms.addAll') })] }), _jsx(Grid, { templateColumns: "repeat(auto-fill, minmax(70px, 1fr))", gap: "base", children: fields.map(({ icon = 'default', id, name = '' }) => {
+                    return (_jsx(HiddenField, { id: id, name: name, icon: fieldIcons[icon], onClick: onClick }, id));
                 }) })] }));
 };
-exports.HiddenFieldSection = HiddenFieldSection;

package/dist/components/forms/dynamicForm/fields/CurrencyField.js

@@ -1,23 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrencyField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_hook_form_1 = require("react-hook-form");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var utils_1 = require("../../../../utils");
-var CurrencyField = function (_a) {
-    var id = _a.id, icon = _a.icon, placeholder = _a.placeholder, value = _a.value;
-    var control = (0, react_hook_form_1.useFormContext)().control;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", flex: "auto", children: [(0, jsx_runtime_1.jsx)(components_1.FormIcon, { icon: icon }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: id, defaultValue: value, render: function (_a) {
-                    var _b = _a.field, value = _b.value, onChange = _b.onChange;
-                    var handleChange = function (e) {
-                        var value = e.target.value;
-                        var number = Number(value.replace(/[^0-9]+/g, '')) / 100;
-                        var currency = (0, utils_1.formatCurrency)({ value: number });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller, useFormContext } from 'react-hook-form';
+import { Flex, Input, Tooltip } from '@chakra-ui/react';
+import { FormIcon } from '../../..';
+import { formatCurrency } from '../../../../utils';
+export const CurrencyField = ({ id, icon, placeholder, value }) => {
+    const { control } = useFormContext();
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+                    const handleChange = (e) => {
+                        const { value } = e.target;
+                        const number = Number(value.replace(/[^0-9]+/g, '')) / 100;
+                        const currency = formatCurrency({ value: number });
                         onChange(currency);
                     };
-                    return ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: placeholder, children: (0, jsx_runtime_1.jsx)(react_1.Input, { onChange: handleChange, placeholder: placeholder, textAlign: "right", value: value, _placeholder: { color: 'gray.2' } }) }));
+                    return (_jsx(Tooltip, { label: placeholder, children: _jsx(Input, { onChange: handleChange, placeholder: placeholder, textAlign: "right", value: value, _placeholder: { color: 'gray.2' } }) }));
                 } })] }));
 };
-exports.CurrencyField = CurrencyField;

package/dist/components/forms/dynamicForm/fields/DateField.js

@@ -1,16 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_hook_form_1 = require("react-hook-form");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var DateField = function (_a) {
-    var id = _a.id, icon = _a.icon, name = _a.name, placeholder = _a.placeholder, _b = _a.showCalendarIcon, showCalendarIcon = _b === void 0 ? true : _b, value = _a.value, width = _a.width;
-    var control = (0, react_hook_form_1.useFormContext)().control;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", flex: "auto", children: [name && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", children: [(0, jsx_runtime_1.jsx)(components_1.FormIcon, { icon: icon }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", noOfLines: 1, overflow: "hidden", children: name })] })), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: id, defaultValue: value, render: function (_a) {
-                    var _b = _a.field, value = _b.value, onChange = _b.onChange;
-                    return ((0, jsx_runtime_1.jsx)(components_1.DatePicker, { onChange: onChange, showCalendarIcon: showCalendarIcon, placeholder: placeholder, value: value, width: width }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller, useFormContext } from 'react-hook-form';
+import { Flex, Text } from '@chakra-ui/react';
+import { DatePicker, FormIcon } from '../../..';
+export const DateField = ({ id, icon, name, placeholder, showCalendarIcon = true, value, width, }) => {
+    const { control } = useFormContext();
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [name && (_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(FormIcon, { icon: icon }), _jsx(Text, { fontFamily: "secondary", noOfLines: 1, overflow: "hidden", children: name })] })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+                    return (_jsx(DatePicker, { onChange: onChange, showCalendarIcon: showCalendarIcon, placeholder: placeholder, value: value, width: width }));
                 } })] }));
 };
-exports.DateField = DateField;

package/dist/components/forms/dynamicForm/fields/FieldDescription.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,13 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldDescription = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var FieldDescription = function (_a) {
-    var icon = _a.icon, description = _a.description, props = __rest(_a, ["icon", "description"]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", children: [icon && ((0, jsx_runtime_1.jsx)(react_1.Center, { minW: "40px", children: (0, jsx_runtime_1.jsx)(components_1.FormIcon, { icon: icon }) })), description && ((0, jsx_runtime_1.jsx)(react_1.Box, __assign({ w: ['190px', '280px'], pr: "4" }, props, { children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", children: description }) })))] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Center, Flex, Text } from '@chakra-ui/react';
+import { FormIcon } from '../../..';
+export const FieldDescription = (_a) => {
+    var { icon, description } = _a, props = __rest(_a, ["icon", "description"]);
+    return (_jsxs(Flex, { gap: "base", children: [icon && (_jsx(Center, { minW: "40px", children: _jsx(FormIcon, { icon: icon }) })), description && (_jsx(Box, Object.assign({ w: ['190px', '280px'], pr: "4" }, props, { children: _jsx(Text, { fontFamily: "secondary", children: description }) })))] }));
 };
-exports.FieldDescription = FieldDescription;

package/dist/components/forms/dynamicForm/fields/FieldDivider.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldDivider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var FieldDivider = function (_a) {
-    var children = _a.children;
-    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", borderBottom: "1px solid", borderColor: "lightBlue.6", p: "base", children: children }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '@chakra-ui/react';
+export const FieldDivider = ({ children }) => {
+    return (_jsx(Flex, { align: "center", borderBottom: "1px solid", borderColor: "lightBlue.6", p: "base", children: children }));
 };
-exports.FieldDivider = FieldDivider;

package/dist/components/forms/dynamicForm/fields/FieldWithDelete.js

@@ -1,14 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldWithDelete = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var FieldWithDelete = function (_a) {
-    var children = _a.children, id = _a.id, isAlwaysVisible = _a.isAlwaysVisible, _b = _a.onRemove, onRemove = _b === void 0 ? function () { } : _b;
-    var isUndefined = isAlwaysVisible === undefined;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", borderBottom: "1px dashed", borderColor: "lightBlue.6", p: "base", children: [children, !isUndefined && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Remove field", variant: "unstyled", icon: (0, jsx_runtime_1.jsx)(components_1.TrashIcon, {}), size: "md", position: "relative", right: "-16px", transition: "all 0.2s ease-in-out", _hover: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, IconButton } from '@chakra-ui/react';
+import { TrashIcon } from '../../..';
+export const FieldWithDelete = ({ children, id, isAlwaysVisible, onRemove = () => { }, }) => {
+    const isUndefined = isAlwaysVisible === undefined;
+    return (_jsxs(Flex, { align: "center", borderBottom: "1px dashed", borderColor: "lightBlue.6", p: "base", children: [children, !isUndefined && (_jsx(IconButton, { "aria-label": "Remove field", variant: "unstyled", icon: _jsx(TrashIcon, {}), size: "md", position: "relative", right: "-16px", transition: "all 0.2s ease-in-out", _hover: {
                     filter: 'brightness(0.7)',
-                }, onClick: function () { return onRemove(id); } }))] }));
+                }, onClick: () => onRemove(id) }))] }));
 };
-exports.FieldWithDelete = FieldWithDelete;

package/dist/components/forms/dynamicForm/fields/FileField.js

@@ -1,16 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var hooks_1 = require("../../../../hooks");
-var FileField = function (_a) {
-    var description = _a.description, icon = _a.icon, onUpload = _a.onUpload, _b = _a.uploading, uploading = _b === void 0 ? false : _b;
-    var _c = (0, hooks_1.useFilesUploader)({
-        onUpload: onUpload,
-        uploading: uploading,
-    }), errorMessage = _c.errorMessage, getInputProps = _c.getInputProps, getRootProps = _c.getRootProps;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", align: "center", flex: "auto", children: [icon && (0, jsx_runtime_1.jsx)(react_1.Image, { h: "auto", w: "icon.md", src: icon, marginTop: "2" }), (0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: "base", flex: "auto", children: [description && (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", children: description }), (0, jsx_runtime_1.jsx)(components_1.DragDropArea, { errorMessage: errorMessage, getInputProps: getInputProps, getRootProps: getRootProps, height: "85px" })] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Image, Stack, Text } from '@chakra-ui/react';
+import { DragDropArea } from '../../..';
+import { useFilesUploader } from '../../../../hooks';
+export const FileField = ({ description, icon, onUpload, uploading = false, }) => {
+    const { errorMessage, getInputProps, getRootProps } = useFilesUploader({
+        onUpload,
+        uploading,
+    });
+    return (_jsxs(Flex, { gap: "base", align: "center", flex: "auto", children: [icon && _jsx(Image, { h: "auto", w: "icon.md", src: icon, marginTop: "2" }), _jsxs(Stack, { spacing: "base", flex: "auto", children: [description && _jsx(Text, { fontFamily: "secondary", children: description }), _jsx(DragDropArea, { errorMessage: errorMessage, getInputProps: getInputProps, getRootProps: getRootProps, height: "85px" })] })] }));
 };
-exports.FileField = FileField;

package/dist/components/forms/dynamicForm/fields/GridField.js

@@ -1,51 +1,34 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var helpers_1 = require("../../../../helpers");
-var GridField = function (_a) {
-    var children = _a.children;
-    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "stretch", gap: "base", children: children === null || children === void 0 ? void 0 : children.map(function (_a) {
-            var id = _a.id, description = _a.description, name = _a.name, value = _a.value, type = _a.type, _b = _a.options, options = _b === void 0 ? [] : _b, icon = _a.icon;
-            var baseProps = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '@chakra-ui/react';
+import { DateField, NumberField, TextField, SelectField, CurrencyField, } from '../../..';
+import { fieldIcons } from '../../../../helpers';
+export const GridField = ({ children }) => {
+    return (_jsx(Flex, { align: "stretch", gap: "base", children: children === null || children === void 0 ? void 0 : children.map(({ id, description, name, value, type, options = [], icon }) => {
+            const baseProps = {
                 key: id,
-                id: id,
-                value: value,
+                id,
+                value,
                 placeholder: name || description,
-                icon: icon ? helpers_1.fieldIcons[icon] : undefined,
+                icon: icon ? fieldIcons[icon] : undefined,
             };
             switch (type) {
                 case 'date':
-                    return ((0, jsx_runtime_1.jsx)(components_1.DateField, __assign({}, baseProps, { name: "", width: "230px", showCalendarIcon: false })));
+                    return (_jsx(DateField, Object.assign({}, baseProps, { name: "", width: "230px", showCalendarIcon: false })));
                 case 'email':
-                    return (0, jsx_runtime_1.jsx)(components_1.TextField, __assign({}, baseProps, { type: "email" }));
+                    return _jsx(TextField, Object.assign({}, baseProps, { type: "email" }));
                 case 'number':
-                    return (0, jsx_runtime_1.jsx)(components_1.NumberField, __assign({}, baseProps));
+                    return _jsx(NumberField, Object.assign({}, baseProps));
                 case 'currency':
-                    return (0, jsx_runtime_1.jsx)(components_1.CurrencyField, __assign({}, baseProps));
+                    return _jsx(CurrencyField, Object.assign({}, baseProps));
                 case 'text':
                 case 'string':
-                    return (0, jsx_runtime_1.jsx)(components_1.TextField, __assign({}, baseProps));
+                    return _jsx(TextField, Object.assign({}, baseProps));
                 case 'select':
-                    return (0, jsx_runtime_1.jsx)(components_1.SelectField, __assign({}, baseProps, { options: options }));
+                    return _jsx(SelectField, Object.assign({}, baseProps, { options: options }));
                 case 'telephone':
-                    return (0, jsx_runtime_1.jsx)(components_1.TextField, __assign({}, baseProps, { type: "tel" }));
+                    return _jsx(TextField, Object.assign({}, baseProps, { type: "tel" }));
                 default:
                     return null;
             }
         }) }));
 };
-exports.GridField = GridField;

package/dist/components/forms/dynamicForm/fields/GroupField.js

@@ -1,12 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var SingleFields_1 = require("./SingleFields");
-var GroupField = function (_a) {
-    var id = _a.id, fields = _a.fields, onRemove = _a.onRemove, visible = _a.visible;
-    return ((0, jsx_runtime_1.jsx)(components_1.FieldWithDelete, { id: id, onRemove: onRemove, isAlwaysVisible: visible, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: "base", flex: "1", children: (0, jsx_runtime_1.jsx)(SingleFields_1.SingleFields, { fields: fields }) }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from '@chakra-ui/react';
+import { FieldWithDelete } from '../../..';
+import { SingleFields } from './SingleFields';
+export const GroupField = ({ id, fields, onRemove, visible }) => {
+    return (_jsx(FieldWithDelete, { id: id, onRemove: onRemove, isAlwaysVisible: visible, children: _jsx(Stack, { spacing: "base", flex: "1", children: _jsx(SingleFields, { fields: fields }) }) }));
 };
-exports.GroupField = GroupField;

package/dist/components/forms/dynamicForm/fields/NumberField.js

@@ -1,18 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NumberField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_hook_form_1 = require("react-hook-form");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var NumberField = function (_a) {
-    var description = _a.description, id = _a.id, icon = _a.icon, placeholder = _a.placeholder, value = _a.value;
-    var control = (0, react_hook_form_1.useFormContext)().control;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", flex: "auto", children: [(0, jsx_runtime_1.jsx)(components_1.FieldDescription, { description: description, icon: icon }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: id, defaultValue: value, render: function (_a) {
-                    var _b = _a.field, value = _b.value, onChange = _b.onChange;
-                    return ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: !description && placeholder, children: (0, jsx_runtime_1.jsx)(react_1.Input, { onChange: function (e) {
-                                var value = e.target.valueAsNumber;
-                                var isNumber = !isNaN(value);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller, useFormContext } from 'react-hook-form';
+import { Flex, Input, Tooltip } from '@chakra-ui/react';
+import { FieldDescription } from '../../..';
+export const NumberField = ({ description, id, icon, placeholder, value, }) => {
+    const { control } = useFormContext();
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FieldDescription, { description: description, icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+                    return (_jsx(Tooltip, { label: !description && placeholder, children: _jsx(Input, { onChange: (e) => {
+                                const value = e.target.valueAsNumber;
+                                const isNumber = !isNaN(value);
                                 if (!isNumber) {
                                     onChange('');
                                 }
@@ -22,4 +17,3 @@ var NumberField = function (_a) {
                             }, placeholder: placeholder, type: "number", pattern: "[1-9]", value: value, textAlign: "right", _placeholder: { color: 'gray.2' } }) }));
                 } })] }));
 };
-exports.NumberField = NumberField;

package/dist/components/forms/dynamicForm/fields/RatingField.js

@@ -1,26 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RatingField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var i18next_1 = require("i18next");
-var react_hook_form_1 = require("react-hook-form");
-var react_2 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var colors_1 = require("../../../../theme/colors");
-var RatingField = function (_a) {
-    var id = _a.id, icon = _a.icon, value = _a.value;
-    var control = (0, react_hook_form_1.useFormContext)().control;
-    var _b = (0, react_1.useState)(Number(value) - 1), actived = _b[0], setActived = _b[1];
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "base", justify: "space-between", flex: "auto", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "base", children: [(0, jsx_runtime_1.jsx)(components_1.FormIcon, { icon: icon }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "secondary", flexShrink: 0, children: (0, i18next_1.t)('forms.rating') })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: id, defaultValue: value, render: function (_a) {
-                        var onChange = _a.field.onChange;
-                        return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: "1", children: Array.from({ length: 5 }).map(function (_, index) {
-                                var starColor = actived >= index ? colors_1.colors.yellow['1'] : colors_1.colors.gray['1'];
-                                return ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "star", variant: "unstyled", icon: (0, jsx_runtime_1.jsx)(components_1.Star, { stroke: starColor }), onClick: function () {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { t } from 'i18next';
+import { Controller, useFormContext } from 'react-hook-form';
+import { Box, Flex, IconButton, Text } from '@chakra-ui/react';
+import { FormIcon, Star } from '../../..';
+import { colors } from '../../../../theme/colors';
+export const RatingField = ({ id, icon, value }) => {
+    const { control } = useFormContext();
+    const [actived, setActived] = useState(Number(value) - 1);
+    return (_jsxs(Flex, { align: "center", gap: "base", justify: "space-between", flex: "auto", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(FormIcon, { icon: icon }), _jsx(Text, { fontFamily: "secondary", flexShrink: 0, children: t('forms.rating') })] }), _jsx(Box, { children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { onChange } }) => {
+                        return (_jsx(Flex, { align: "center", gap: "1", children: Array.from({ length: 5 }).map((_, index) => {
+                                const starColor = actived >= index ? colors.yellow['1'] : colors.gray['1'];
+                                return (_jsx(IconButton, { "aria-label": "star", variant: "unstyled", icon: _jsx(Star, { stroke: starColor }), onClick: () => {
                                         setActived(index);
                                         onChange(index + 1);
-                                    } }, "".concat(id, "-").concat(index)));
+                                    } }, `${id}-${index}`));
                             }) }));
                     } }) })] }));
 };
-exports.RatingField = RatingField;