intelicoreact 1.5.32 → 1.5.34

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

@@ -0,0 +1,357 @@
+"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, {
+    TagsDropdownTemplate: function() {
+        return TagsDropdownTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _TagsDropdown = /*#__PURE__*/ _interop_require_default(require("./TagsDropdown"));
+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/TagsDropdown",
+    component: _TagsDropdown.default,
+    argTypes: {
+        noTagsWrap: {
+            type: "boolean",
+            default: false
+        },
+        closeOnSelect: {
+            type: "boolean",
+            default: false
+        },
+        attributesOfNativeInput: {
+            description: "Object. Optional. This is list of attributes to add in native search-input"
+        }
+    }
+};
+const Template = (args)=>{
+    const { isIncludeOuterStyles, ...restArgs } = args;
+    const { options } = args;
+    const selectAllButton = (0, _react.useRef)(null);
+    const unselectAllButton = (0, _react.useRef)(null);
+    const myArgs = {
+        headerContent: /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+            onClick: ()=>alert("Add your action"),
+            children: "Add new option"
+        }),
+        footerContent: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                    ref: selectAllButton,
+                    children: "Select all"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                    ref: unselectAllButton,
+                    children: "Unselect all"
+                })
+            ]
+        }),
+        selectAllButtonRef: selectAllButton,
+        unselectAllButtonRef: unselectAllButton
+    };
+    const [value, setValue] = (0, _react.useState)([
+        "group11"
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        style: {
+            height: '1000px'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TagsDropdown.default, {
+            ...args,
+            ...myArgs,
+            // className={`tags-dropdown_arrow-static ${isIncludeOuterStyles ? "" : ""}`}
+            chosenOptions: value,
+            onChange: setValue,
+            withMobileLogic: true
+        })
+    });
+};
+const TagsDropdownTemplate = Template.bind({});
+const colors = [
+    "#F1F0F0",
+    "#E3E2E0",
+    "#EEDFDA",
+    "#F9DEC9",
+    "#FDECC8",
+    "#DBECDB",
+    "#D3E4EF",
+    "#E8DEEE",
+    "#F4E0E9",
+    "#FFE2DD",
+    "#D3EFED",
+    "#ECEEDE"
+];
+TagsDropdownTemplate.args = {
+    fieldKey: "tagsDropDown",
+    isIncludeOuterStyles: false,
+    disabled: false,
+    error: false,
+    onOptionEdit: (...args)=>console.log("onOptionEdit", ...args),
+    onOptionDelete: (...args)=>new Promise((r)=>{
+            console.log("onOptionDelete", ...args);
+            setTimeout(()=>{
+                console.log("resolved");
+                r();
+            }, 1000);
+        }),
+    placeholder: "Type or select tags from list",
+    // options: (new Array(12)).fill({}).map((v, i) => {
+    //   const uuid = Math.random().toString(16).slice(2);
+    //   return ({
+    //     id: uuid,
+    //     label: `Option ${i+1}`,
+    //     value: uuid,
+    //     // style: {
+    //     //   backgroundColor: colors[i],
+    //     // },
+    //     isEditable: false,
+    //   })
+    // }),
+    options: [],
+    options: [
+        {
+            id: 1,
+            title: "Force close dropdown (closeOnOptionSelect: true)",
+            value: "drop1",
+            closeOnOptionSelect: true,
+            className: "optionClssName"
+        },
+        {
+            id: 2,
+            title: "Force unclose dropdown (closeOnOptionSelect: false)",
+            value: "drop2",
+            closeOnOptionSelect: false,
+            disabled: false
+        },
+        {
+            id: 3,
+            title: "Tags Dropdown3",
+            value: "drop3",
+            disabled: true,
+            isFreezed: true
+        },
+        {
+            id: 4,
+            title: "Tags Dropdown4",
+            value: "drop4",
+            disabled: false,
+            isFreezed: true
+        },
+        {
+            id: 5,
+            title: "Tags Dropdown5",
+            value: "drop5",
+            disabled: false
+        },
+        {
+            id: 6,
+            title: "Tags Dropdown6",
+            value: "drop6",
+            disabled: false
+        },
+        {
+            groupName: "Some Group",
+            className: "groupClssName",
+            list: [
+                {
+                    id: 7,
+                    title: "Group 11",
+                    value: "group11",
+                    disabled: false,
+                    className: "groupOptionClssName",
+                    isFreezed: true,
+                    isHiddenInList: true
+                },
+                {
+                    id: 8,
+                    title: "Group 12",
+                    value: "group12",
+                    disabled: true
+                },
+                {
+                    id: 9,
+                    title: "Group 13",
+                    value: "group13",
+                    disabled: false
+                }
+            ]
+        },
+        {
+            groupName: "Some Group 2",
+            list: [
+                {
+                    id: 10,
+                    title: "Group 21",
+                    value: "group21",
+                    disabled: false
+                },
+                {
+                    id: 11,
+                    title: "Group 22",
+                    value: "group22",
+                    disabled: false
+                },
+                {
+                    id: 12,
+                    title: "Group 23",
+                    value: "group23",
+                    disabled: false
+                }
+            ]
+        },
+        {
+            id: 1,
+            title: "Force close dropdown (closeOnOptionSelect: true)",
+            value: "drop1",
+            closeOnOptionSelect: true,
+            className: "optionClssName"
+        },
+        {
+            id: 2,
+            title: "Force unclose dropdown (closeOnOptionSelect: false)",
+            value: "drop2",
+            closeOnOptionSelect: false,
+            disabled: false
+        },
+        {
+            id: 3,
+            title: "Tags Dropdown3",
+            value: "drop3",
+            disabled: true,
+            isFreezed: true
+        },
+        {
+            id: 4,
+            title: "Tags Dropdown4",
+            value: "drop4",
+            disabled: false,
+            isFreezed: true
+        },
+        {
+            id: 5,
+            title: "Tags Dropdown5",
+            value: "drop5",
+            disabled: false
+        },
+        {
+            id: 6,
+            title: "Tags Dropdown6",
+            value: "drop6",
+            disabled: false
+        },
+        {
+            groupName: "Some Group",
+            className: "groupClssName",
+            list: [
+                {
+                    id: 7,
+                    title: "Group 11",
+                    value: "group11",
+                    disabled: false,
+                    className: "groupOptionClssName",
+                    isFreezed: true,
+                    isHiddenInList: true
+                },
+                {
+                    id: 8,
+                    title: "Group 12",
+                    value: "group12",
+                    disabled: true
+                },
+                {
+                    id: 9,
+                    title: "Group 13",
+                    value: "group13",
+                    disabled: false
+                }
+            ]
+        },
+        {
+            groupName: "Some Group 2",
+            list: [
+                {
+                    id: 10,
+                    title: "Group 21",
+                    value: "group21",
+                    disabled: false
+                },
+                {
+                    id: 11,
+                    title: "Group 22",
+                    value: "group22",
+                    disabled: false
+                },
+                {
+                    id: 12,
+                    title: "Group 23",
+                    value: "group23",
+                    disabled: false
+                }
+            ]
+        }
+    ],
+    isNotValidateASCII: false,
+    noTagsWrap: false,
+    closeOnSelect: false,
+    closeOnRemove: false
+};

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

@@ -0,0 +1,105 @@
+"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"));
+require("./Text.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = "text";
+/**
+ *
+ * @param value
+ * @param className
+ * @param classesObj
+ * @param icon
+ * @param link
+ * @param align
+ * @param testId
+ * @return {JSX.Element|null}
+ * @constructor
+ */ // ? Прототип лежит на проекте кабинета src\JS\Components\Atomic\FormElements\Text\Text.js
+// ? Что поменял?
+// ?   - в верстке убрал дополнительную вложенность
+// ?     (теперь только 1 внешний контейнер, доп. классы назначаются рядом с className)
+// ?   - убрал пропы as и isTitle, они были для работы с предзаданными классами связанными с токенизацией
+// ?     возможность прокинуть доп. классы объектом с условиями оставил через пропу classesObj
+// ?   - заменил пропу text на value
+// ?   - заменил пропу iconMain на icon
+// ?   - переработал пропу link, может быть строкой или объектом
+// ?     если это объект, то у него могут быть свойства
+// ?       - path - значение для href
+// ?       - target - значение для атрибута target, имеет смысл передавать, если не передаются onClick или redirect
+// ?       - onClick - альтернативный обработчик нажатия, если он есть то он будет ипользован в приоритете,
+// ?         ф-я будет вызвана с 1 аргументом - props, в объекте props будет свойство ev (event) и все содержание link,
+// ?         по умолчанию до использования onClick будут вызваны e.preventDefault() и e.stopPropagation
+// ?       - redirect - альтернативный исполнитель редиректа (например history.push),
+// ?         если есть и нет onClick - будет вызван с одним аргументом (link.path)
+// ?       - isNoPreventDefault - отключает вызов e.preventDefault перед вызовом onClick или redirect
+// ?       - isNoStopPropagation - отключает вызов e.preventDefault перед вызовом onClick или redirect
+const Text = ({ value, className, classesObj, icon, link, align = "left", testId = "text-lib-component" })=>{
+    if (!value) return null;
+    const isLinkAsObj = link instanceof Object && !Array.isArray(link);
+    const isLinkAsString = typeof link === "string";
+    const isLink = isLinkAsObj || isLinkAsString;
+    const linkObj = isLinkAsObj ? link : {};
+    const { path = "", target, redirect, onClick: onClickInner, isNoPreventDefault, isNoStopPropagation } = linkObj;
+    const preparedPath = (()=>{
+        if (!isLink) return "";
+        return isLinkAsObj ? path : link;
+    })();
+    const atributes = {};
+    if (typeof onClickInner === "function" || typeof redirect === "function") {
+        atributes.onClick = function onClick(ev) {
+            if (!isNoPreventDefault) ev.preventDefault();
+            if (!isNoStopPropagation) ev.stopPropagation();
+            // ? если переданы и onClick, и redirect, то onClick считается приоритетнее redirect
+            if (onClickInner) {
+                onClickInner({
+                    ev,
+                    ...link
+                });
+                return;
+            }
+            redirect(preparedPath);
+        };
+    }
+    const mainInner = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            icon && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: `${RC}__icon-container`,
+                children: icon
+            }),
+            value
+        ]
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)(RC, className, {
+            [`${RC}-left`]: align === "left",
+            [`${RC}-center`]: align === "center",
+            [`${RC}-right`]: align === "right",
+            [`${RC}-justify`]: align === "justify",
+            ...classesObj
+        }),
+        children: isLink ? /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+            ...atributes,
+            href: preparedPath,
+            target: target !== null && target !== void 0 ? target : "_self",
+            rel: "noreferrer",
+            children: mainInner
+        }) : mainInner
+    });
+};
+const _default = Text;

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

@@ -0,0 +1,80 @@
+"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, {
+    TextTemplate: function() {
+        return TextTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'Form Elements/Text',
+    component: _Text.default,
+    argTypes: {
+        value: {
+            description: 'It is implied that the value must be a string, but technically it can be JSX or anything that cannot be cast false.'
+        },
+        className: {
+            description: 'string'
+        },
+        classesObj: {
+            description: 'object, object of classes for function "classNames"'
+        },
+        icon: {
+            description: 'JSX'
+        },
+        testId: {
+            description: 'string, creates a data-testid attribute on an external container in the format "${testId}"'
+        },
+        link: {
+            description: 'string or object, if it is an object, then the following keys will be processed in it: path, target, onClick, redirect, isNoPreventDefault, isNoStopPropagation'
+        },
+        align: {
+            description: 'string, the main values of the "text-align" property are processed'
+        }
+    }
+};
+const Template = (args)=>{
+    const { classesObj, link, isUseLinkHardCode, ...restArgs } = args;
+    const hardCodeOfClassesObj = {};
+    const linkHardCode = {
+        path: '/test',
+        target: '_blank'
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+        ...restArgs,
+        classesObj: {
+            ...classesObj,
+            ...hardCodeOfClassesObj
+        },
+        link: isUseLinkHardCode ? linkHardCode : link
+    });
+};
+const TextTemplate = Template.bind({});
+TextTemplate.args = {
+    isUseLinkHardCode: false,
+    value: 'Дратути!',
+    className: 'any-outer-class__text',
+    classesObj: {},
+    icon: null,
+    testId: 'text-form-element',
+    // link: '/test',
+    align: 'left'
+};

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

@@ -0,0 +1,49 @@
+"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 _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+require("./TextSwitcher.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = 'text-switcher';
+const TextSwitcher = ({ isActive, onChange, className, disabled, activeText = 'is', inactiveText = 'is not', testId = RC })=>{
+    const isUndefined = isActive === undefined || isActive === null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+        type: "button",
+        "data-testid": testId,
+        className: (0, _classnames.default)(RC, {
+            [`${RC}_active`]: isActive,
+            [`${RC}_disabled`]: disabled
+        }, className),
+        onClick: ()=>onChange(!isActive),
+        disabled: disabled,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: `${RC}__btn`,
+                children: activeText
+            }),
+            inactiveText && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: (0, _classnames.default)(`${RC}__btn`, `${RC}__btn_off`),
+                children: inactiveText
+            }),
+            !isUndefined && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(`${RC}__slider`, {
+                    [`${RC}__slider_inactive`]: !isActive
+                })
+            })
+        ]
+    });
+};
+const _default = TextSwitcher;

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

@@ -0,0 +1,86 @@
+@use '../../../scss/vars';
+
+.text-switcher {
+  position: relative;
+
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  grid-template-columns: repeat(2, 1fr);
+
+  box-sizing: border-box;
+  padding: 2px;
+
+  font-size: 12px;
+  font-weight: 300;
+  font-style: normal;
+
+  border: 2px solid vars.$color--error-bg;
+  border-radius: 26px;
+  background: #fff;
+
+  &__btn {
+    position: relative;
+    z-index: 2;
+
+    min-width: 58px;
+    height: 100%;
+    padding: 0 14px;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    font-style: inherit;
+    line-height: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+    text-transform: uppercase;
+
+    color: vars.$green;
+
+    &_off {
+      color: vars.$color--error;
+    }
+  }
+
+  &__slider {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    width: 50%;
+
+    border-radius: 28px;
+    background-color: vars.$color--green-light;
+
+    transition:
+      left 0.3s ease,
+      background-color 0.3s ease;
+
+    &_inactive {
+      left: 50%;
+
+      background-color: vars.$color--error-bg;
+    }
+  }
+
+  &_active {
+    border-color: vars.$color--green-light;
+  }
+
+  &_disabled {
+    pointer-events: none;
+
+    opacity: 0.7;
+  }
+}
+
+.text-switcher_unsetted {
+  filter: grayscale(1);
+
+  .text-switcher__btn {
+    color: vars.$color--gray !important;
+  }
+}