@mailstep/design-system 0.7.11 → 0.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "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;