intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/UI/Alert/Alert.scss

@@ -0,0 +1,86 @@
+.alert {
+  position: relative;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: 15px;
+
+  font-size: 13px;
+
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+
+  &--loading {
+    .loader-box {
+      opacity: 0.2;
+    }
+  }
+
+  &--error {
+    color: #f06d8d;
+    border-left: 2px solid #f06d8d;
+    background-color: #fce2e8;
+  }
+
+  &--warning {
+    color: #f59a2f;
+    border-left: 2px solid #f59a2f;
+    background-color: #ffedc8;
+  }
+
+  &--success {
+    color: #00b031;
+    border-left: 2px solid #00b031;
+    background-color: #e4f3e8;
+  }
+
+  &--info {
+    color: #6b81dd;
+    border-left: 2px solid #6b81dd;
+    background-color: #e2e6f8;
+  }
+
+  &__close-btn {
+    display: flex;
+    justify-content: flex-end;
+    align-self: flex-start;
+
+    min-width: 15px;
+    margin-left: 10px;
+
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &--title {
+    height: 37px;
+
+    font-size: 13px;
+    font-weight: 400;
+    text-transform: uppercase;
+
+    color: #1e1e2d;
+    border-radius: 4px;
+    background-color: #ebeff2;
+
+    .alert__close-btn {
+      display: none;
+    }
+  }
+
+  &__icon-text-box svg {
+    margin-right: 10px;
+  }
+
+  svg {
+    align-self: flex-start;
+
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+  }
+}

package/dist/src/Atomic/UI/Alert/Alert.stories.js

@@ -0,0 +1,81 @@
+"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, {
+    AlertTemplate: function() {
+        return AlertTemplate;
+    },
+    AlertTest: function() {
+        return AlertTest;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _Alert = /*#__PURE__*/ _interop_require_default(require("./Alert"));
+const _reactfeather = require("react-feather");
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+global.lng = 'en';
+const _default = {
+    title: 'UI/Alert',
+    component: _Alert.default,
+    argTypes: {
+        variant: {
+            description: 'string: ["error", "warning", "success", "info"]. optional. warning is default',
+            control: {
+                type: 'select',
+                options: [
+                    'error',
+                    'warning',
+                    'success',
+                    'info'
+                ]
+            }
+        },
+        message: {
+            description: 'string'
+        },
+        noDismiss: 'hide close button. boolean. optional',
+        icon: 'icon before text. jsx. optional',
+        isLoading: 'boolean, add internal spinner'
+    }
+};
+const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+        ...args
+    });
+const AlertTemplate = Template.bind({});
+AlertTemplate.args = {
+    message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+    variant: 'info',
+    noDismiss: false,
+    isHidden: false,
+    isLoading: false,
+    icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Home, {})
+};
+const AlertTest = Template.bind({});
+AlertTest.args = {
+    message: 'example message. last test for close alert',
+    variant: 'info',
+    noDismiss: false,
+    icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Home, {}),
+    // noDismiss: true,
+    buttonParams: {
+        label: 'Got it!',
+        variant: 'link',
+        onClick: ()=>console.log('click')
+    }
+};

package/dist/src/Atomic/UI/Arrow/Arrow.js

@@ -0,0 +1,170 @@
+"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");
+require("./Arrow.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 Arrow = ({ type, className, onClick, disabled, testId, isAlt })=>{
+    if (!type || type !== "left" && type !== "right") return null;
+    const ref = (0, _react.useRef)();
+    const [color, setColor] = (0, _react.useState)("currentColor");
+    (0, _react.useEffect)(()=>{
+        if (ref.current) {
+            setColor((0, _utils.getStyles)(ref.current, "color"));
+        }
+    }, [
+        ref.current
+    ]);
+    function renderSVG() {
+        if (type === "left") {
+            if (isAlt) return /*#__PURE__*/ (0, _jsxruntime.jsxs)("svg", {
+                "data-testid": testId,
+                version: "1.1",
+                id: "Layer_1",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                        d: "M12.7,8H3.3",
+                        stroke: color,
+                        fill: "none",
+                        strokeWidth: 1.3333,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                        d: "M8,3.3L3.3,8L8,12.7",
+                        stroke: color,
+                        fill: "none",
+                        strokeWidth: 1.3333,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    })
+                ]
+            });
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+                "data-testid": testId,
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                    d: "M15 18L9 12L15 6",
+                    stroke: color,
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                })
+            });
+        }
+        if (isAlt) return /*#__PURE__*/ (0, _jsxruntime.jsxs)("svg", {
+            "data-testid": testId,
+            id: "Layer_1",
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                    d: "M3.3,8h9.3",
+                    stroke: color,
+                    fill: "none",
+                    strokeWidth: 1.3333,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                    d: "M8,3.3L12.7,8L8,12.7",
+                    stroke: color,
+                    fill: "none",
+                    strokeWidth: 1.3333,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                })
+            ]
+        });
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+            "data-testid": testId,
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                d: "M9 18L15 12L9 6",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-testid": `arrow--key-${testId}--type-${type}`,
+        ref: ref,
+        className: (0, _classnames.default)("arrow", `arrow_${type}`, className, {
+            arrow_disabled: disabled
+        }),
+        onClick: onClick,
+        children: renderSVG()
+    });
+};
+const _default = Arrow;

package/dist/src/Atomic/UI/Arrow/Arrow.stories.js

@@ -0,0 +1,62 @@
+"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, {
+    ArrowTemplate: function() {
+        return ArrowTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _Arrow = /*#__PURE__*/ _interop_require_default(require("./Arrow"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+global.lng = 'en';
+const _default = {
+    title: 'UI/Arrow',
+    component: _Arrow.default,
+    argTypes: {
+        type: {
+            description: 'string: ["left", "right"]',
+            control: {
+                type: 'select',
+                options: [
+                    'left',
+                    'right'
+                ]
+            }
+        },
+        isAlt: {
+            description: 'boolean: change the arrow print',
+            control: {
+                type: 'torrler'
+            }
+        }
+    }
+};
+const Template = (args)=>{
+    const { className, onClick } = args;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Arrow.default, {
+        ...args
+    });
+};
+const ArrowTemplate = Template.bind({});
+ArrowTemplate.args = {
+    type: 'left',
+    className: 'externall-class-name',
+    onClick: (ev)=>console.log(ev.target.className)
+};

package/dist/src/Atomic/UI/Box/Box.js

@@ -0,0 +1,46 @@
+// global
+"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("./Box.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const directionVariants = {
+    column: "column",
+    row: "row"
+};
+const sizes = {
+    none: "none",
+    xs: "xs",
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl"
+};
+const Box = function({ children, paddingVariant = sizes.m, radiiVariant = sizes.s, direction = directionVariants.column, className }) {
+    const styles = {
+        flexDirection: direction
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        style: styles,
+        className: (0, _classnames.default)("box", `box--padding-${paddingVariant}`, `box--radii-${radiiVariant}`, className, {
+            df: direction === directionVariants.row,
+            "dfc-jc": direction === directionVariants.column
+        }),
+        children: children
+    });
+};
+const _default = Box;

package/dist/src/Atomic/UI/Box/Box.scss

@@ -0,0 +1,56 @@
+@use '../../../scss/_vars';
+
+.box {
+  box-sizing: border-box;
+  height: fit-content;
+
+  border: 1px solid #e1e8f1;
+
+  &--radii-none {
+    border-radius: 0;
+  }
+
+  &--radii-xs {
+    border-radius: vars.$radii-xs;
+  }
+
+  &--radii-s {
+    border-radius: vars.$radii-s;
+  }
+
+  &--radii-m {
+    border-radius: vars.$radii-m;
+  }
+
+  &--radii-l {
+    border-radius: vars.$radii-l;
+  }
+
+  &--radii-xl {
+    border-radius: vars.$radii-xl;
+  }
+
+  &--padding-none {
+    padding: 0;
+  }
+
+  &--padding-xs {
+    padding: vars.$spacing-xs;
+  }
+
+  &--padding-s {
+    padding: vars.$spacing-s;
+  }
+
+  &--padding-m {
+    padding: vars.$spacing-m;
+  }
+
+  &--padding-l {
+    padding: vars.$spacing-l;
+  }
+
+  &--padding-xl {
+    padding: vars.$spacing-xl;
+  }
+}

package/dist/src/Atomic/UI/Box/Box.stories.js

@@ -0,0 +1,114 @@
+"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, {
+    BoxTemplate: function() {
+        return BoxTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _CheckboxInput = /*#__PURE__*/ _interop_require_default(require("../../FormElements/CheckboxInput/CheckboxInput"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("./Box"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getRadioArgType(options, defaultValue) {
+    return {
+        description: `string: ${JSON.stringify(options)}. optional. ${defaultValue} is default`,
+        control: {
+            type: "radio"
+        },
+        options
+    };
+}
+const _default = {
+    title: "UI/Box",
+    component: _Box.default,
+    argTypes: {
+        direction: getRadioArgType([
+            "column",
+            "row"
+        ], "column"),
+        paddingVariant: getRadioArgType([
+            "none",
+            "xs",
+            "s",
+            "m",
+            "l",
+            "xl"
+        ], "m"),
+        radiiVariant: getRadioArgType([
+            "none",
+            "xs",
+            "s",
+            "m",
+            "l",
+            "xl"
+        ], "s")
+    }
+};
+const Template = (args)=>{
+    const { className, onClick } = args;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                ...args,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                        label: "mock element one"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                        label: "mock element second"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("h2", {
+                children: [
+                    "direction: ",
+                    args.direction
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("h2", {
+                children: [
+                    "radii: ",
+                    args.radiiVariant
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("h2", {
+                children: [
+                    "padding: ",
+                    args.paddingVariant
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("h2", {
+                children: [
+                    "className: ",
+                    args.className
+                ]
+            })
+        ]
+    });
+};
+const BoxTemplate = Template.bind({});
+BoxTemplate.args = {
+    direction: "column",
+    radiiVariant: "s",
+    paddingVariant: "m",
+    className: "external-class-name"
+};

package/dist/src/Atomic/UI/Button/Button.js

@@ -0,0 +1,48 @@
+"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("./Button.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = 'button';
+const Button = ({ label, onClick, disabled, icon, className, children, style, noIcon, isIconRight, testId = 'button', tabIndex = 0, variant = 'primary', isTextEllipsis = false, ...props })=>{
+    const noRenderIcon = noIcon || variant === 'ellipse-apply' || variant === 'ellipse-cancel';
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+        ...props,
+        "data-testid": testId,
+        tabIndex: tabIndex,
+        style: style,
+        className: (0, _classnames.default)(RC, {
+            [`${RC}_${variant}`]: variant,
+            'button_icon-left': icon && !isIconRight,
+            'button_icon-right': icon && isIconRight
+        }, className),
+        onClick: onClick,
+        disabled: disabled,
+        type: "button",
+        children: [
+            !noRenderIcon && icon,
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)('button__text', {
+                    'text-ellipsis': isTextEllipsis
+                }),
+                children: label
+            }),
+            !label && children ? children : null
+        ]
+    });
+};
+const _default = Button;