@mailstep/design-system 0.7.11 → 0.7.13-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.11",
+  "version": "0.7.13-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -34,18 +34,20 @@
     "@lingui/core": "3.17.2",
     "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-controls": "^8.1.1",
-    "@storybook/addon-designs": "^8.0.2",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/blocks": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-webpack5": "^8.1.1",
-    "@storybook/test": "^8.1.1",
+    "@storybook/addon-controls": "^8.4.7",
+    "@storybook/addon-designs": "^8.0.4",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/types": "^8.4.7",
     "@svgr/rollup": "^8.0.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/faker": "^4.1.11",
+    "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.1.7",
     "@types/react": "^18.2.6",
@@ -72,7 +74,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "faker": "^5.1.0",
     "immer": "9.0.7",
     "lodash": "^4.17.21",
@@ -94,7 +96,7 @@
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
-    "storybook": "^8.1.1",
+    "storybook": "^8.4.7",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",

package/ui/Blocks/CommonGrid/components/PresetsModalBody/components/TagRemove.d.ts

@@ -0,0 +1 @@
+export declare const TagRemove: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/CommonGrid/components/PresetsModalBody/components/TagRemove.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '@xstyled/styled-components';
+export var TagRemove = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  margin-left: 6px;\n  height: fit-content;\n  width: 17px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  &:hover {\n    svg {\n      fill: black;\n    }\n  }\n"], ["\n  cursor: pointer;\n  margin-left: 6px;\n  height: fit-content;\n  width: 17px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  &:hover {\n    svg {\n      fill: black;\n    }\n  }\n"])));
+var templateObject_1;

package/ui/Blocks/CommonGrid/components/PresetsModalBody/index.js

@@ -16,6 +16,7 @@ import { Cancel } from '../../../../Elements/Icon/icons/Cancel';
 import Tag from '../../../../Elements/Tag/Tag';
 import { palletes } from '../../../../Elements/Tag/palletes';
 import { H6 } from '../../../../Elements/Typography/Typography';
+import { TagRemove } from './components/TagRemove';
 import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import isEmpty from 'lodash/isEmpty';
@@ -26,6 +27,6 @@ export var PresetsModalBody = function (_a) {
     return (_jsxs(x.div, { children: [_jsx(x.div, { display: "flex", rowGap: "12px", flexWrap: "wrap", children: hasPresets ? (presets === null || presets === void 0 ? void 0 : presets.map(function (_a, index) {
                     var presetName = _a[0], filters = _a[1];
                     var isSelected = presetName === selectedPresetName;
-                    return (_jsxs(Tag, __assign({ size: "big", onClick: handleSelectPreset(presetName, filters) }, (isSelected ? palletes.redWhite : palletes.redRed), { pointer: true, children: [_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: presetName }), _jsx(x.div, { ml: "12px", h: "fit-content", onClick: handleOpenDeletePresetModal(presetName), children: _jsx(Cancel, { fill: isSelected ? 'white' : '#DB2B19' }) })] }), "".concat(presetName, "_").concat(index)));
+                    return (_jsxs(Tag, __assign({ size: "big", onClick: handleSelectPreset(presetName, filters) }, (isSelected ? palletes.redWhite : palletes.redRed), { pointer: true, children: [_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: presetName }), _jsx(TagRemove, { onClick: handleOpenDeletePresetModal(presetName), children: _jsx(Cancel, { fill: isSelected ? 'white' : '#DB2B19', width: "11px", height: "11px" }) })] }), "".concat(presetName, "_").concat(index)));
                 })) : (_jsx(Trans, { id: "dataGrid.noPresets.title", message: "No presets available" })) }), _jsx(x.input, { type: "file", accept: ".json", onChange: handleImportPresets, ref: fileInputRef, display: "none" }), _jsxs(x.div, { display: "flex", mt: "34px", gap: "12px", justifyContent: "space-between", children: [_jsxs(x.div, { display: "flex", gap: "12px", children: [hasPresets && (_jsx(Button, { onClick: handleExportPresets, type: "button", appearance: "secondary", children: _jsx(Trans, { id: "dataGrid.exportPreset.title", message: "Export presets" }) })), _jsx(Button, { onClick: handleImportButtonClick, type: "button", appearance: "secondary", children: _jsx(Trans, { id: "dataGrid.importPreset.title", message: "Import presets" }) })] }), _jsx(Button, { type: "button", onClick: onOpenCreatePresetModal, disabled: isEmpty(filters), children: _jsx(Trans, { id: "dataGrid.createNewPreset.title", message: "Create new preset" }) })] })] }));
 };

package/ui/Blocks/CommonGrid/hooks/usePresetFileHandlers.js

@@ -1,11 +1,26 @@
+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);
+};
 import { useRef, useCallback } from 'react';
+import omit from 'lodash/omit';
+import { i18n } from '@lingui/core';
 export var usePresetFileHandlers = function (_a) {
     var gridName = _a.gridName, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors;
     var fileInputRef = useRef(null);
     var handleExportPresets = useCallback(function () {
         if (!gridName)
             return;
-        var blob = new Blob([JSON.stringify(gridSelectors.presets, null, 2)], {
+        var gridConfig = { gridName: gridName };
+        var data = __assign(__assign({}, gridSelectors.presets), { _: gridConfig });
+        var blob = new Blob([JSON.stringify(data, null, 2)], {
             type: 'application/json'
         });
         var link = document.createElement('a');
@@ -14,7 +29,7 @@ export var usePresetFileHandlers = function (_a) {
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
-    }, [gridName]);
+    }, [gridName, gridSelectors.presets]);
     var handleImportPresets = useCallback(function (event) {
         var _a;
         if (!gridName)
@@ -28,11 +43,20 @@ export var usePresetFileHandlers = function (_a) {
             var _a, _b;
             try {
                 var fileContent = JSON.parse((_a = e.target) === null || _a === void 0 ? void 0 : _a.result);
-                (_b = gridActions.setPresets) === null || _b === void 0 ? void 0 : _b.call(gridActions, fileContent);
+                var gridConfig = fileContent._;
+                if (gridConfig && gridConfig.gridName !== gridName) {
+                    throw new Error(i18n._({ id: 'dataGrid.importPresets.gridNameNotSame', 'message': 'Grid name in file is not the same as current grid.' }));
+                }
+                (_b = gridActions.setPresets) === null || _b === void 0 ? void 0 : _b.call(gridActions, omit(fileContent, '_'));
             }
             catch (error) {
-                console.warn('Error parsing JSON file:', error);
-                alert('The uploaded file is not a valid JSON.');
+                console.warn(error);
+                alert(i18n._({ id: 'dataGrid.importPresets.error', 'message': 'Error with importing files.' }) + error);
+            }
+            finally {
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
             }
         };
     }, [gridName]);

package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts

@@ -5,7 +5,7 @@ declare const meta: {
     component: ({ badge, ...iconProps }: {
         badge: "warning";
     } & import("..").IconProps) => JSX.Element;
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-bf5e6555").R, {
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
         badge: "warning";
         icon: string;
         style?: "normal" | "light" | "solid" | undefined;

package/ui/Elements/Toggle/Toggle.d.ts

@@ -1,3 +1,3 @@
 import { Props } from './types';
-declare const Toggle: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, readOnly, ...rest }: Props) => JSX.Element;
+declare const Toggle: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, labelJustify, variant, spaceBetween, readOnly, ...rest }: Props) => JSX.Element;
 export default Toggle;

package/ui/Elements/Toggle/Toggle.js

@@ -33,8 +33,8 @@ var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templat
     var labelPosition = _a.labelPosition;
     return labelPosition === 'left' ? 'row' : labelPosition === 'right' ? 'row-reverse' : 'column';
 }, function (_a) {
-    var labelPosition = _a.labelPosition;
-    return (labelPosition === 'right' ? 'flex-end' : 'flex-start');
+    var labelPosition = _a.labelPosition, labelJustify = _a.labelJustify;
+    return labelPosition === 'right' ? 'flex-end' : labelJustify === 'between' ? 'space-between' : 'flex-start';
 }, function (_a) {
     var labelPosition = _a.labelPosition;
     return (isHorizontal(labelPosition) ? 'margin-top: 1rem' : '');
@@ -55,8 +55,8 @@ var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTem
 });
 var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"], ["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"])), StyledDot, StyledDot);
 var Toggle = function (_a) {
-    var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, readOnly = _a.readOnly, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "variant", "spaceBetween", "readOnly"]);
-    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, labelPosition: labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { id: name, name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch"), readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
+    var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, labelJustify = _a.labelJustify, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, readOnly = _a.readOnly, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "labelJustify", "variant", "spaceBetween", "readOnly"]);
+    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, labelPosition: labelPosition, labelJustify: labelJustify, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { id: name, name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch"), readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
 };
 export default Toggle;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Toggle/stories/Toggle.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, readOnly, ...rest }: import("../types").Props) => JSX.Element;
+    component: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, labelJustify, variant, spaceBetween, readOnly, ...rest }: import("../types").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
@@ -13,4 +13,5 @@ export declare const Checked: Story;
 export declare const Disabled: Story;
 export declare const LabelRight: Story;
 export declare const LabelLeft: Story;
+export declare const LabelJustifyBetween: Story;
 export declare const VariantGrid: Story;

package/ui/Elements/Toggle/stories/Toggle.stories.js

@@ -3,7 +3,7 @@ var meta = {
     title: 'Elements/Toggle',
     component: Toggle,
     tags: ['autodocs'],
-    argTypes: {},
+    argTypes: {}
 };
 export default meta;
 export var Default = {
@@ -11,7 +11,7 @@ export var Default = {
         name: 'name',
         label: 'Label',
         onChange: console.log
-    },
+    }
 };
 export var Checked = {
     args: {
@@ -19,15 +19,15 @@ export var Checked = {
         label: 'Label',
         checked: true,
         onChange: console.log
-    },
+    }
 };
 export var Disabled = {
     args: {
         name: 'name',
         label: 'Label',
         checked: true,
-        disabled: true,
-    },
+        disabled: true
+    }
 };
 export var LabelRight = {
     args: {
@@ -35,7 +35,7 @@ export var LabelRight = {
         label: 'Label',
         checked: true,
         labelPosition: 'right'
-    },
+    }
 };
 export var LabelLeft = {
     args: {
@@ -43,13 +43,22 @@ export var LabelLeft = {
         label: 'Label',
         checked: true,
         labelPosition: 'left'
-    },
+    }
+};
+export var LabelJustifyBetween = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        labelPosition: 'left',
+        labelJustify: 'between'
+    }
 };
 export var VariantGrid = {
     args: {
         name: 'name',
         label: 'Label',
         checked: true,
-        variant: 'grid',
-    },
+        variant: 'grid'
+    }
 };

package/ui/Elements/Toggle/types.d.ts

@@ -7,6 +7,7 @@ type SpaceAroundProps = {
 };
 type SpaceAround = boolean | SpaceAroundProps;
 export type LabelPosition = 'default' | 'left' | 'right';
+export type LabelJustify = 'between';
 export type Variant = 'primary' | 'grid';
 export type Props = {
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -18,6 +19,7 @@ export type Props = {
     spaceBetween?: boolean;
     disabled?: boolean;
     labelPosition?: LabelPosition;
+    labelJustify?: LabelJustify;
     variant?: Variant;
     readOnly?: boolean;
 };