intelicoreact 1.5.32 → 1.5.34

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

@@ -0,0 +1,271 @@
+"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_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _utils = require("../../../Functions/utils");
+const _AccordionText = /*#__PURE__*/ _interop_require_default(require("../../UI/AccordionText/AccordionText"));
+const _FileLoaderLocal = /*#__PURE__*/ _interop_require_default(require("../FileLoaderLocal/FileLoaderLocal"));
+require("./FileLoaderDescription.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;
+}
+const RC = "file-loader-description";
+const UPLOAD_TRIGGER_KEY = "uploadTrigger";
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+const ACCEPT_EXTENSIONS_DEFAULT = ".jpg, .jpeg, .png, .pdf, .JPG, .JPEG, .PNG, .PDF";
+const uploadTriggerStucture = {
+    id: UPLOAD_TRIGGER_KEY,
+    isRequired: true,
+    value: "",
+    base64: "",
+    maxItemSizeBytes: MAX_FILE_SIZE,
+    error: "",
+    accept: ACCEPT_EXTENSIONS_DEFAULT
+};
+const getStructure = (data)=>({
+        //? Расчет на то, что data донесет свой id и перетрёт пустые велью
+        value: "",
+        base64: "",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT,
+        ...data
+    });
+const accordionData = (accordionTitle, accordionListContent)=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": "accordion",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: `${RC}__accordion-title`,
+                children: accordionTitle
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: `${RC}__list`,
+                children: accordionListContent === null || accordionListContent === void 0 ? void 0 : accordionListContent.map((item)=>{
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: `${RC}__list-row`,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: `${RC}__list-bullet`
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: `${RC}__list-title`,
+                                        children: item.title
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: `${RC}__list-descr`,
+                                        children: item.description
+                                    })
+                                ]
+                            })
+                        ]
+                    }, item === null || item === void 0 ? void 0 : item.title);
+                })
+            })
+        ]
+    });
+};
+const getSafelyInitFiles = (initFiles, maxFilesCount)=>{
+    if (!Array.isArray(initFiles)) return [];
+    let output = (0, _utils.clone)(initFiles);
+    if (typeof maxFilesCount === 'number' && output.length > maxFilesCount) {
+        output = output.slice(0, maxFilesCount);
+    }
+    return output.map(getStructure);
+};
+const checkOverflow = (files, maxFilesCount, additional)=>{
+    const { error = "", outerError = "" } = additional || {};
+    return typeof maxFilesCount === "number" && files.length < maxFilesCount ? [
+        ...files,
+        {
+            ...(0, _utils.clone)(uploadTriggerStucture),
+            error,
+            outerError
+        }
+    ] : files;
+};
+const FileLoaderDescription = ({ //? Для корректности работы стоит пробрасывать какой-то из id
+id, testId = "file-loader-description", fieldKey, files: initFiles, onChange, className, filesDescription = "Documents must be less than 10MB and must be in PDF, JPG, JPEG or PNG format.", documentName = "Document name", accordionTitle = "There is a list of documents that we accept:", accordionListContent = [], maxFilesCount = 10, isWithoutAccordion, error: outerError, ...props })=>{
+    const uniqueFileLoaderDescriptionId = `${id || testId || fieldKey || `component-${_utils.uuid === null || _utils.uuid === void 0 ? void 0 : (0, _utils.uuid)()}`}`;
+    const safelyInitFiles = (0, _react.useMemo)(()=>getSafelyInitFiles(initFiles, maxFilesCount), [
+        initFiles,
+        maxFilesCount
+    ]);
+    const [files, setFiles] = (0, _react.useState)((()=>{
+        if (!safelyInitFiles.length) return [
+            (0, _utils.clone)(uploadTriggerStucture)
+        ];
+        return checkOverflow(safelyInitFiles, maxFilesCount);
+    })());
+    const generateUniqueFileName = (files, name)=>{
+        let fileName = name;
+        const [nameWithoutExtension, extension] = name.split(/(?=\.[^.]+$)/);
+        let count = 1;
+        while(files.some((file)=>file.value === fileName)){
+            fileName = `${nameWithoutExtension}(${count})${extension}`;
+            count += 1;
+        }
+        return fileName;
+    };
+    const handle = {
+        applyFields: (newFields)=>{
+            setFiles(checkOverflow(newFields, maxFilesCount));
+            onChange(newFields);
+        },
+        change: ({ name, id, error = "", file })=>{
+            //? Работаем с филдами БЕЗ плашки добавления
+            let output = (0, _utils.clone)(files).filter((item)=>item.value && item.base64).map((item)=>({
+                    ...item,
+                    error: ""
+                }));
+            const changedField = output.find((item)=>id === item.id);
+            if (!file) {
+                //? Нет файла - значит это экшн удаления
+                handle.applyFields(output.filter((item)=>item.id !== (changedField === null || changedField === void 0 ? void 0 : changedField.id)));
+            } else if (error) {
+                //? Есть ошибка - не должны менять содержание, только назначить ошибку
+                if (changedField) output = output.map((item)=>id.includes(item.id) ? {
+                        ...item,
+                        error
+                    } : item);
+                //? Установка в локальный стейт БЕЗ верхнего onChange (файл по итогу НЕ загрузили, НЕ мутируем верхнее велью)
+                setFiles(checkOverflow(output, maxFilesCount, {
+                    error: !changedField ? error : null
+                }));
+            } else {
+                //? Во всех остальных случаях - происходит добавленеи/изменение содержимого
+                const uniqueFileName = generateUniqueFileName(output, name);
+                const uniqueId = _utils.uuid === null || _utils.uuid === void 0 ? void 0 : (0, _utils.uuid)();
+                (0, _utils.getBase64)(file).then((result)=>{
+                    const newItem = getStructure({
+                        id: uniqueId,
+                        value: uniqueFileName,
+                        base64: result,
+                        error: ""
+                    });
+                    //? Либо меняем, либо добавляем
+                    output = changedField ? output.map((item)=>item.id === changedField.id ? newItem : item) : [
+                        ...output,
+                        newItem
+                    ];
+                    handle.applyFields(output);
+                });
+            }
+        }
+    };
+    (0, _react.useEffect)(()=>{
+        setFiles(checkOverflow(files.filter((item)=>item.id !== UPLOAD_TRIGGER_KEY), maxFilesCount, {
+            outerError
+        }));
+    }, [
+        outerError
+    ]);
+    //? Обеспечивает чтобы верхний стейт был доминирующим
+    //? Осознанно и намерянно в зависимости стоит initFiles, но расчеты идут от safelyInitFiles
+    (0, _react.useEffect)(()=>{
+        //? Если изменились верхние филды и они отличаются от локальных (без триггера) - перезаписать
+        if (!(0, _utils.compare)(safelyInitFiles, (0, _utils.clone)(files).filter((item)=>item.id !== UPLOAD_TRIGGER_KEY))) {
+            setFiles(checkOverflow(safelyInitFiles, maxFilesCount, {
+                outerError
+            }));
+        }
+    }, [
+        initFiles,
+        maxFilesCount
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        id: uniqueFileLoaderDescriptionId,
+        "data-testid": RC,
+        className: (0, _classnames.default)(RC, className),
+        role: "combobox",
+        children: [
+            !!documentName && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                title: documentName,
+                className: `${RC}__title`,
+                children: documentName
+            }),
+            !isWithoutAccordion && /*#__PURE__*/ (0, _jsxruntime.jsx)(_AccordionText.default, {
+                isForcedAlwaysAccordion: true,
+                className: (0, _classnames.default)(`${RC}__accordion`),
+                text: accordionData(accordionTitle, accordionListContent)
+            }),
+            !!filesDescription && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: `${RC}__file-descr`,
+                title: filesDescription,
+                children: filesDescription
+            }),
+            files.map((field, i)=>{
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FileLoaderLocal.default, {
+                    className: `${RC}__list-item`,
+                    fieldId: field.id,
+                    id: `loader-${uniqueFileLoaderDescriptionId}-field-${field.id}`,
+                    error: field.error,
+                    outerError: field.outerError,
+                    label: "Upload document",
+                    accept: field.accept,
+                    value: field.value,
+                    maxItemSizeBytes: field.maxItemSizeBytes,
+                    onChange: (value)=>handle.change(value),
+                    isRequired: files.length <= 1,
+                    isNoTrashIcon: false
+                }, `${field.id}-${i}`);
+            })
+        ]
+    });
+};
+const _default = FileLoaderDescription;

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

@@ -0,0 +1,82 @@
+.file-loader-description {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  row-gap: 8px;
+
+  &__title {
+    font-family: Sarabun;
+    font-size: 14px;
+    font-weight: 600;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+
+    color: var(--color-text-subtle, #171d33);
+  }
+
+  &__accordion {
+    overflow: hidden;
+  }
+
+  &__file-descr {
+    font-family: Sarabun;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+
+    color: var(--color-text-muted, #656e7a);
+  }
+
+  &__list-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    column-gap: 8px;
+  }
+  &__list-bullet {
+    min-width: 6px;
+    min-height: 6px;
+    margin-top: 7px;
+
+    border-radius: 50%;
+    background: var(--color-text-body, #171d33);
+  }
+
+  &__accordion-title {
+    font-family: Sarabun;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+    text-overflow: ellipsis;
+
+    color: var(--color-text-body, #171d33);
+  }
+
+  &__list-title {
+    font-family: Sarabun;
+    font-size: 12px;
+    font-weight: 500;
+    font-style: normal;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+
+    color: #171d33;
+  }
+
+  &__list-descr {
+    font-family: Sarabun;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+
+    color: var(--color-text-subtle, #171d33);
+  }
+}

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

@@ -0,0 +1,327 @@
+"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, {
+    FileLoaderDescriptionTemplate: function() {
+        return FileLoaderDescriptionTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _FileLoaderDescription = /*#__PURE__*/ _interop_require_default(require("./FileLoaderDescription"));
+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/FileLoaderDescription',
+    component: _FileLoaderDescription.default,
+    argTypes: {
+        accordionListContent: {
+            control: {
+                type: 'object'
+            },
+            description: 'The content of the accordion list'
+        },
+        accordionTitle: {
+            control: {
+                type: 'text'
+            },
+            description: 'The title of the accordion'
+        },
+        filesDescription: {
+            control: {
+                type: 'text'
+            },
+            description: 'Description of the accepted file formats and size limits'
+        },
+        documentName: {
+            control: {
+                type: 'text'
+            },
+            description: 'The name of the document'
+        },
+        onChange: {
+            action: 'onChange',
+            description: 'Callback function triggered on file change'
+        },
+        testId: {
+            control: {
+                type: 'text'
+            },
+            description: 'Test ID for the component'
+        },
+        className: {
+            control: {
+                type: 'text'
+            },
+            description: 'CSS class for custom styling'
+        },
+        files: {
+            control: {
+                type: 'object'
+            },
+            description: 'The files to be uploaded'
+        },
+        maxFilesCount: {
+            control: {
+                type: 'number'
+            },
+            description: 'Files quantity for upload'
+        },
+        isWithoutAccordion: {
+            control: {
+                type: 'boolean'
+            },
+            description: 'If true accordion doesn\'t rendered'
+        }
+    }
+};
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+const ACCEPT_EXTENSIONS_DEFAULT = ".jpg, .jpeg, .png, .pdf, .JPG, .JPEG, .PNG, .PDF";
+const mock = [
+    {
+        id: '1',
+        value: "image1.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '2',
+        value: "image2.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '3',
+        value: "image3.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '4',
+        value: "image4.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '5',
+        value: "image5.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '6',
+        value: "image6.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '7',
+        value: "image7.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '8',
+        value: "image8.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '9',
+        value: "image9.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '10',
+        value: "image10.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    },
+    {
+        id: '11',
+        value: "image11.png",
+        base64: "cscdcscsdc",
+        maxItemSizeBytes: MAX_FILE_SIZE,
+        error: "",
+        isRequired: false,
+        accept: ACCEPT_EXTENSIONS_DEFAULT
+    }
+];
+const Template = (args)=>{
+    const [files, setFiles] = (0, _react.useState)(mock);
+    const [error, setError] = (0, _react.useState)(null);
+    const handleChange = (newFiles)=>{
+        setFiles(newFiles);
+    };
+    const setOuterError = ()=>{
+        const errorValue = true;
+        // const errorValue = 'Error !!!';
+        setError(errorValue);
+    };
+    const changeInitFields = ()=>{
+        const deductible = (Array.isArray(files) ? files : []).length > 2 ? 2 : 1;
+        if (files.length) {
+            setFiles((state)=>state.slice(0, state.length - deductible));
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_FileLoaderDescription.default, {
+                ...args,
+                files: files,
+                onChange: handleChange,
+                error: error
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                style: {
+                    padding: '8px',
+                    border: '1px solid black'
+                },
+                onClick: setOuterError,
+                children: "Set outer error"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            !!files.length && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                style: {
+                    padding: '8px',
+                    border: '1px solid black'
+                },
+                onClick: changeInitFields,
+                children: "Change init fields"
+            })
+        ]
+    });
+};
+const FileLoaderDescriptionTemplate = Template.bind({});
+FileLoaderDescriptionTemplate.args = {
+    accordionListContent: [
+        {
+            title: 'W2 Income',
+            description: 'Most recent paystub(s) covering 30 days OR most recent bank statement reflecting employer deposit(s)'
+        },
+        {
+            title: 'Self-Employment/Contract Income',
+            description: 'Most recent 1099(s) OR most recent tax returns'
+        },
+        {
+            title: 'Retirement income',
+            description: 'Most recent Award letter OR 1099(s) OR W2(s)'
+        },
+        {
+            title: 'Social Security/Disability income',
+            description: 'Most recent award Letter OR most recent bank statement'
+        },
+        {
+            title: 'Rental Income',
+            description: 'Executed Lease Agreement OR most recent tax returns'
+        },
+        {
+            title: 'Alimony /Child Support/Separate Maintenance',
+            description: '6 bank statements reflecting deposits'
+        },
+        {
+            title: 'Investment income',
+            description: 'Most Recent 1099(s) OR Tax Returns'
+        }
+    ],
+    accordionTitle: 'There is a list of documents that we accept:',
+    filesDescription: 'Documents must be less than 10MB and must be in PDF, JPG, JPEG or PNG format.',
+    documentName: 'Document name',
+    testId: 'file-loader-description',
+    className: '',
+    maxFilesCount: undefined,
+    // maxFilesCount: 5,
+    // maxFilesCount: null,
+    isWithoutAccordion: false
+};