intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactfeather = require("react-feather");
+const _utils = require("../../../Functions/utils");
+require("./FileLoaderLocal.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+const FileLoaderLocal = ({ groupId, id, fieldId, fieldKey, label, error, outerError, isRequired, accept, onChange, className, value, isNoTrashIcon = false, maxItemSizeBytes, testId = "file-loader-local", attributesOfNativeInput = {} })=>{
+    const getFileName = (value)=>{
+        const result = value.match(/[^\\]+$/);
+        return result === null || result === void 0 ? void 0 : result[0];
+    };
+    const renderRequiredLabel = ()=>{
+        if (!value) {
+            if (isRequired) return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "file-loader-local--required",
+                children: "Required"
+            });
+            else return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "file-loader-local--optional",
+                children: "Optional"
+            });
+        }
+    };
+    const isFileSizeOutOfLimit = (file)=>{
+        var _ref;
+        return (_ref = file.size > maxItemSizeBytes) !== null && _ref !== void 0 ? _ref : MAX_FILE_SIZE;
+    };
+    const checkExtension = (valueExtension)=>{
+        return accept.includes(valueExtension);
+    };
+    const handle = {
+        change: (e)=>{
+            var _name_match, _name_split, _e_target_files, _e_target, _e_target_files1, _e_target1;
+            const name = getFileName(e.target.value);
+            const valueExtension = name === null || name === void 0 ? void 0 : (_name_match = name.match(/[^\.]+$/)) === null || _name_match === void 0 ? void 0 : _name_match[0];
+            const fileName = (_name_split = name.split(".")) === null || _name_split === void 0 ? void 0 : _name_split[0];
+            const latinRegex = /^[A-Za-z\u00C0-\u00FF0-9!@#\$%\^\&*\)\(+=._-\s]+$/;
+            const file = (_e_target = e.target) === null || _e_target === void 0 ? void 0 : (_e_target_files = _e_target.files) === null || _e_target_files === void 0 ? void 0 : _e_target_files[0];
+            if (isFileSizeOutOfLimit((_e_target1 = e.target) === null || _e_target1 === void 0 ? void 0 : (_e_target_files1 = _e_target1.files) === null || _e_target_files1 === void 0 ? void 0 : _e_target_files1[0])) {
+                onChange({
+                    id,
+                    name,
+                    valueExtension,
+                    e,
+                    file,
+                    groupId,
+                    error: `Max file size is ${(0, _utils.renderFileSize)(maxItemSizeBytes)}`
+                });
+            } else if (!checkExtension(valueExtension)) {
+                var _accept_replace;
+                const allowedExtensions = (accept === null || accept === void 0 ? void 0 : (_accept_replace = accept.replace(/\./g, "")) === null || _accept_replace === void 0 ? void 0 : _accept_replace.toUpperCase()) || "JPG, PNG, PDF";
+                const uniqExts = (0, _utils.getUniqueFileExtensions)(allowedExtensions);
+                onChange({
+                    id,
+                    groupId,
+                    name,
+                    valueExtension,
+                    e,
+                    file,
+                    error: `Only ${uniqExts} are allowed`
+                });
+            } else if (!latinRegex.test(fileName)) {
+                onChange({
+                    id,
+                    groupId,
+                    name,
+                    valueExtension,
+                    e,
+                    file,
+                    error: `File name must be Latin characters only.`
+                });
+            } else onChange({
+                id,
+                groupId,
+                name,
+                valueExtension,
+                e,
+                file
+            });
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)("file-loader-local", className, {
+            ["file-loader-local_outer-error"]: Boolean(outerError)
+        }),
+        children: [
+            (fieldId === "uploadTrigger" || !value) && /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                onChange: handle.change,
+                className: "file-loader-local__file-input",
+                id: fieldKey || `file-input-${id}${groupId ? `-${groupId}` : ""}`,
+                type: "file",
+                name: fieldKey || id,
+                required: isRequired,
+                accept: accept,
+                ...attributesOfNativeInput
+            }, id),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
+                className: (0, _classnames.default)("file-loader-local__label-box", {
+                    "file-loader-local__label-box--upload-trigger": fieldId === "uploadTrigger" || !value
+                }),
+                htmlFor: fieldKey || `file-input-${id}${groupId ? `-${groupId}` : ""}`,
+                children: [
+                    !value && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Download, {
+                        className: "file-loader-local__upload-icon"
+                    }),
+                    value && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Paperclip, {
+                        className: "file-loader-local__upload-icon"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        title: value || label,
+                        className: "file-loader-local__label-wrapper",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: (0, _classnames.default)("file-loader-local__label", {
+                                "file-loader-local__label-filled": value
+                            }),
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    className: "file-loader-local__label-text",
+                                    children: value || label
+                                }),
+                                error && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    className: "file-loader-local__error",
+                                    children: error
+                                }),
+                                typeof outerError === "string" && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    className: "file-loader-local__error",
+                                    children: outerError
+                                })
+                            ]
+                        })
+                    }),
+                    value && !isNoTrashIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Trash2, {
+                        className: "file-loader-local__trash-icon",
+                        onClick: ()=>onChange({
+                                id: fieldId,
+                                groupId
+                            })
+                    }),
+                    renderRequiredLabel()
+                ]
+            })
+        ]
+    });
+};
+const _default = FileLoaderLocal;

package/dist/src/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.scss

@@ -0,0 +1,129 @@
+.file-loader-local {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  min-height: 50px;
+
+  border-radius: 8px;
+  background-color: #ffffff;
+  box-shadow: 0px 2px 8px rgb(39 73 113 / 15%);
+
+  &_outer-error {
+    border: 1px solid #fa564c;
+  }
+
+  &__top-label {
+    margin-bottom: 16px;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+    &-extension {
+      color: #757f8c;
+    }
+  }
+
+  &__file-input {
+    position: absolute;
+    z-index: -10;
+
+    width: 0.1px;
+    height: 0.1px;
+
+    opacity: 0;
+  }
+
+  &__label-box {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+
+    box-sizing: border-box;
+    width: 100%;
+    max-height: 50px;
+    padding: 15px 18px 15px 16px;
+
+    font-family: Sarabun;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+
+    color: #1f7499;
+
+    &--upload-trigger {
+      cursor: pointer;
+    }
+  }
+
+  &__upload-icon {
+    min-width: 16px;
+    max-width: 16px;
+    min-height: 16px;
+    max-height: 16px;
+    margin-right: 8px;
+
+    color: #a0a4b0;
+
+    transform: rotate(180deg);
+    stroke-width: 1.5px;
+  }
+
+  &__trash-icon {
+    min-width: 16px;
+    max-width: 16px;
+    min-height: 16px;
+    max-height: 16px;
+
+    cursor: pointer;
+
+    color: #f06d8d;
+  }
+
+  &__label-wrapper {
+    overflow: hidden;
+    flex-grow: 1;
+
+    margin-right: 8px;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+  }
+
+  &__label-text {
+    overflow: hidden;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-word;
+  }
+
+  &__label-filled {
+    color: #171d33;
+  }
+
+  &__error {
+    font-size: 12px;
+
+    color: #f06d8d;
+  }
+
+  &--required {
+    color: #f06d8d;
+  }
+
+  &--optional {
+    color: #757f8c;
+  }
+}

package/dist/src/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.stories.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    FileLoaderLocalTemplate: function() {
+        return FileLoaderLocalTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _utils = require("../../../Functions/utils");
+const _FileLoaderLocal = /*#__PURE__*/ _interop_require_default(require("./FileLoaderLocal"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+global.lng = "en";
+const _default = {
+    title: "Form Elements/FileLoaderLocal",
+    component: _FileLoaderLocal.default,
+    argTypes: {
+        maxItemSizeBytes: {
+            description: "number in bytes"
+        },
+        accept: {
+            description: "string of extensions -  .jpg, .jpeg, .png .pdf"
+        },
+        titleDescription: {
+            description: "string"
+        },
+        attributesOfNativeInput: {
+            description: "Object. Optional. This is list of attributes to add in native input"
+        }
+    }
+};
+const Template = (args)=>{
+    const [fields, setFields] = (0, _react.useState)([
+        args
+    ]);
+    const uploadFieldTemplate = {
+        id: fields.at(-1).id + 1,
+        isRequired: false,
+        value: "",
+        base64: "",
+        maxItemSizeBytes: 1048576,
+        error: "",
+        accept: ".jpg, .jpeg, .png, .pdf, .JPG, .JPEG, .PNG, .PDF",
+        titleDescription: "lorem ipsum"
+    };
+    const buttonStyles = {
+        marginTop: "50px",
+        marginRight: "10px",
+        border: "solid 1px black",
+        padding: "5px"
+    };
+    (0, _react.useEffect)(()=>{
+        if (fields.every((item)=>item.value) && fields.length < 10) {
+            setFields([
+                ...fields,
+                uploadFieldTemplate
+            ]);
+        }
+    }, [
+        fields
+    ]);
+    const handle = {
+        change: ({ e, name, id, error, valueExtension, file })=>{
+            const changedField = fields.find((item)=>item.id === id);
+            if (error) {
+                changedField.value = name;
+                changedField.error = error;
+                setFields([
+                    ...fields
+                ]);
+            } else if (name && !error) {
+                (0, _utils.getBase64)(file).then((result)=>{
+                    changedField.value = name;
+                    changedField.base64 = result;
+                    changedField.error = "";
+                    setFields([
+                        ...fields
+                    ]);
+                }).catch((e)=>console.error(e));
+            } else {
+                const filteredFields = fields.filter((item)=>item.id !== id);
+                setFields([
+                    ...filteredFields
+                ]);
+            }
+        },
+        reset: ()=>setFields([
+                args
+            ])
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            fields.map((field)=>{
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "mb10",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FileLoaderLocal.default, {
+                        fieldKey: field.id,
+                        id: field.id,
+                        error: field.error,
+                        label: "Upload document",
+                        accept: field.accept,
+                        value: field.value,
+                        maxItemSizeBytes: field.maxItemSizeBytes,
+                        onChange: (value)=>handle.change(value, field.id),
+                        isRequired: fields.length <= 1,
+                        isNoTrashIcon: false,
+                        titleDescription: field.titleDescription,
+                        testId: "intelicoReact"
+                    })
+                }, field.id);
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                style: buttonStyles,
+                onClick: ()=>handle.reset(),
+                children: "Reset"
+            })
+        ]
+    });
+};
+const FileLoaderLocalTemplate = Template.bind({});
+FileLoaderLocalTemplate.args = {
+    id: 1,
+    value: "",
+    error: "",
+    isRequired: false,
+    maxItemSizeBytes: 1048576,
+    accept: ".jpg, .jpeg, .png, .pdf, .JPG, .JPEG, .PNG, .PDF",
+    titleDescription: "lorem ipsum"
+};