@mailstep/design-system 0.6.89-beta.3 → 0.6.90

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

@@ -0,0 +1,68 @@
+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 { presetsLocalStorageKey } from '../utils/constants';
+export var usePresetFileHandlers = function (_a) {
+    var gridName = _a.gridName, setGridPresets = _a.setGridPresets;
+    var fileInputRef = useRef(null);
+    var handleExportPresets = useCallback(function () {
+        if (!gridName)
+            return;
+        var presetsAsString = localStorage.getItem(presetsLocalStorageKey);
+        var presets = presetsAsString ? JSON.parse(presetsAsString) : {};
+        var blob = new Blob([JSON.stringify(presets[gridName], null, 2)], {
+            type: 'application/json'
+        });
+        var link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = "".concat(gridName, "Presets.json");
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }, [gridName]);
+    var handleImportPresets = useCallback(function (event) {
+        var _a;
+        if (!gridName)
+            return;
+        var file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        var reader = new FileReader();
+        reader.readAsText(file);
+        reader.onload = function (e) {
+            var _a;
+            var _b;
+            try {
+                var fileContent = JSON.parse((_b = e.target) === null || _b === void 0 ? void 0 : _b.result);
+                var presetsAsString = localStorage.getItem(presetsLocalStorageKey);
+                var presets = presetsAsString ? JSON.parse(presetsAsString) : {};
+                var newPresets = JSON.stringify(__assign(__assign({}, presets), (_a = {}, _a[gridName] = fileContent, _a)));
+                localStorage.setItem(presetsLocalStorageKey, newPresets);
+                setGridPresets(fileContent);
+            }
+            catch (error) {
+                console.warn('Error parsing JSON file:', error);
+                alert('The uploaded file is not a valid JSON.');
+            }
+        };
+    }, [gridName]);
+    var handleImportButtonClick = useCallback(function () {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    return {
+        fileInputRef: fileInputRef,
+        handleImportPresets: handleImportPresets,
+        handleExportPresets: handleExportPresets,
+        handleImportButtonClick: handleImportButtonClick
+    };
+};

package/ui/Blocks/CommonGrid/hooks/usePresetsState.d.ts

@@ -0,0 +1,9 @@
+type HookType = () => {
+    isPresetsModalOpen: boolean;
+    onOpenPresetsModal: () => void;
+    onClosePresetsModal: () => void;
+    selectedPresetName: string;
+    setSelectedPresetName: (name: string) => void;
+};
+export declare const usePresetState: HookType;
+export {};

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

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+import { useModal } from '../../Modal/hooks/useModal';
+export var usePresetState = function () {
+    var _a = useModal(), isPresetsModalOpen = _a.isOpen, onOpenPresetsModal = _a.onOpen, onClosePresetsModal = _a.onClose;
+    var _b = useState(''), selectedPresetName = _b[0], setSelectedPresetName = _b[1];
+    return {
+        isPresetsModalOpen: isPresetsModalOpen,
+        onOpenPresetsModal: onOpenPresetsModal,
+        onClosePresetsModal: onClosePresetsModal,
+        selectedPresetName: selectedPresetName,
+        setSelectedPresetName: setSelectedPresetName
+    };
+};

package/ui/Blocks/CommonGrid/hooks/useSelectPreset.d.ts

@@ -0,0 +1,15 @@
+import { Filtering, GridActionsType } from '../types';
+type Props = {
+    gridName?: string;
+    gridActions: GridActionsType;
+    setSelectedPresetName: (value: string) => void;
+    onClosePresetsModal: () => void;
+    filters?: Filtering;
+};
+type HookType = (props: Props) => {
+    gridPresets: Record<string, Filtering>;
+    handleSelectPreset: (presetName: string, filters: Filtering) => () => void;
+    setGridPresets: (data: Record<string, Filtering>) => void;
+};
+export declare const useSelectPreset: HookType;
+export {};

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

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useState } from 'react';
+import { isEqual } from 'lodash';
+import { presetsLocalStorageKey } from '../utils/constants';
+var getInitialPresets = function (gridName) {
+    var _a;
+    if (!gridName)
+        return {};
+    try {
+        var presetsAsString = localStorage.getItem(presetsLocalStorageKey);
+        var presets = presetsAsString ? JSON.parse(presetsAsString) : {};
+        return gridName ? (_a = presets[gridName]) !== null && _a !== void 0 ? _a : {} : {};
+    }
+    catch (error) {
+        console.error('Error parsing JSON file:', error);
+    }
+};
+export var useSelectPreset = function (_a) {
+    var gridName = _a.gridName, gridActions = _a.gridActions, setSelectedPresetName = _a.setSelectedPresetName, onClosePresetsModal = _a.onClosePresetsModal, filters = _a.filters;
+    var _b = useState(false), isFilterChangeFromButton = _b[0], setIsFilterChangeFromButton = _b[1];
+    var _c = useState(getInitialPresets(gridName)), gridPresets = _c[0], setGridPresets = _c[1];
+    var handleSelectPreset = useCallback(function (presetName, filters) { return function () {
+        var _a;
+        setSelectedPresetName(presetName);
+        (_a = gridActions.setFilters) === null || _a === void 0 ? void 0 : _a.call(gridActions, filters);
+        onClosePresetsModal();
+        setIsFilterChangeFromButton(true);
+    }; }, [gridActions]);
+    useEffect(function () {
+        if (!isFilterChangeFromButton) {
+            setSelectedPresetName('');
+        }
+        setIsFilterChangeFromButton(false);
+    }, [filters]);
+    useEffect(function () {
+        var _a;
+        if (!gridName || !gridPresets)
+            return;
+        var activePreset = (_a = Object.entries(gridPresets)) === null || _a === void 0 ? void 0 : _a.find(function (_a) {
+            var presetName = _a[0], presetFilters = _a[1];
+            return isEqual(presetFilters, filters);
+        });
+        if (activePreset) {
+            setSelectedPresetName(activePreset[0]);
+        }
+    }, []);
+    return { gridPresets: gridPresets, setGridPresets: setGridPresets, handleSelectPreset: handleSelectPreset };
+};

package/ui/Blocks/CommonGrid/store/index.d.ts

@@ -1,4 +1,4 @@
-import { FilterProps, SortingValueType, InitProps, GridState, GridSelectorsType, ColumnConfig } from '../types';
+import { FilterProps, SortingValueType, InitProps, GridState, GridSelectorsType, ColumnConfig, Filtering } from '../types';
 type DefaultRootState = {};
 export type MultiState = {
     [key: string]: GridState;
@@ -16,6 +16,7 @@ export declare const actionTypes: {
     setRowsPerPage: string;
     resetFilters: string;
     addFilter: string;
+    setFilters: string;
     addSorting: string;
     clearSettings: string;
     resetGrid: string;
@@ -40,6 +41,7 @@ export declare const createActions: (gridName: string) => {
     setRowsPerPage: (rowsPerPage: number) => Action;
     resetFilters: () => Action;
     addFilter: (column: string, value: any, filterProps: FilterProps) => Action;
+    setFilters: (filters: Filtering) => Action;
     addSorting: (column: string, direction: SortingValueType) => Action;
     clearSettings: () => Action;
 };

package/ui/Blocks/CommonGrid/store/index.js

@@ -10,9 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import produce from 'immer';
+import { createSelector } from 'reselect';
 import getOr from 'lodash/fp/getOr';
 import migrateState from './migrateState';
-import { createSelector } from 'reselect';
 export var initialState = {
     page: 1,
     rowsPerPage: 10,
@@ -20,13 +20,13 @@ export var initialState = {
     isConfigFormOpen: false,
     uxState: {
         selectedRow: null,
-        checkedRows: {},
+        checkedRows: {}
     },
     columnConfig: {},
     filter: {},
     columnsWidth: {},
     columnsOrder: [],
-    defaultSorting: [],
+    defaultSorting: []
 };
 export var actionPrefix = '@store/CommonGrid';
 export var actionTypes = {
@@ -40,11 +40,12 @@ export var actionTypes = {
     setRowsPerPage: "".concat(actionPrefix, "/setRowsPerPage"),
     resetFilters: "".concat(actionPrefix, "/resetFilters"),
     addFilter: "".concat(actionPrefix, "/addFilter"),
+    setFilters: "".concat(actionPrefix, "/setFilters"),
     addSorting: "".concat(actionPrefix, "/addSorting"),
     clearSettings: "".concat(actionPrefix, "/clearSettings"),
     resetGrid: "".concat(actionPrefix, "/resetGrid"),
     setColumnWidth: "".concat(actionPrefix, "/setColumnWidth"),
-    setColumnsOrder: "".concat(actionPrefix, "/setColumnsOrder"),
+    setColumnsOrder: "".concat(actionPrefix, "/setColumnsOrder")
 };
 var migrationChecked = false;
 export default (function (state, action) {
@@ -64,81 +65,81 @@ export default (function (state, action) {
             // if this grid is not yet in store, initialize
             draft[gridName] = __assign({}, initialState);
         }
-        if (action.type === actionTypes.init) {
-            var defaultSorting = action.initProps.defaultSorting;
-            draft[gridName].page = 1;
-            if (defaultSorting) {
-                draft[gridName].defaultSorting = defaultSorting;
-                draft[gridName].sorting = ((_c = draft[gridName].sorting) === null || _c === void 0 ? void 0 : _c.length) ? draft[gridName].sorting : defaultSorting;
-            }
-        }
-        else if (action.type === actionTypes.clearUxState) {
-            draft[gridName].uxState = initialState.uxState;
-        }
-        else if (action.type === actionTypes.handleUxChange) {
-            // for a specific row id (action.id) append uxState from action
-            draft[gridName].uxState = __assign(__assign({}, draft[gridName].uxState), (_a = {}, _a[action.uxKey] = action.uxValue, _a));
-        }
-        else if (action.type === actionTypes.openConfigForm) {
-            draft[gridName].isConfigFormOpen = true;
-        }
-        else if (action.type === actionTypes.closeConfigForm) {
-            draft[gridName].isConfigFormOpen = false;
-        }
-        else if (action.type === actionTypes.setColumnConfig) {
-            draft[gridName].columnConfig = action.columnConfig;
-            draft[gridName].isConfigFormOpen = false;
-        }
-        else if (action.type === actionTypes.resetFilters) {
-            draft[gridName].filter = {};
-        }
-        else if (action.type === actionTypes.addFilter) {
-            // append desired filter for specific column to existing filters
-            var column = action.column, value = action.value, filterProps = action.filterProps;
-            var currentFilterState = (_b = {}, _b[column] = { value: value, filterProps: filterProps }, _b);
-            draft[gridName].filter = __assign(__assign({}, draft[gridName].filter), currentFilterState);
-            draft[gridName].page = 1;
-        }
-        else if (action.type === actionTypes.addSorting) {
-            // append desired sorting for specific column to existing sortings
-            var direction = action.direction;
-            var column = action.column;
-            if (((_f = (_e = (_d = draft[gridName]) === null || _d === void 0 ? void 0 : _d.defaultSorting) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.column) === column && direction === null) {
-                // default column cannot unset itself. it would be stuck on 'desc'
-                direction = 'asc';
-            }
-            var sorting = [{ column: column, direction: direction }];
-            if (direction === null) {
-                sorting = ((_g = draft[gridName]) === null || _g === void 0 ? void 0 : _g.defaultSorting) || [];
-            }
-            draft[gridName].sorting = sorting;
-        }
-        else if (action.type === actionTypes.clearSettings) {
-            // clear grid for reuse
-            draft[gridName].page = initialState.page;
-            draft[gridName].filter = initialState.filter;
-            draft[gridName].uxState = initialState.uxState;
-        }
-        else if (action.type === actionTypes.setPage) {
-            draft[gridName].page = action.page;
-        }
-        else if (action.type === actionTypes.setRowsPerPage) {
-            draft[gridName].rowsPerPage = action.rowsPerPage;
-        }
-        else if (action.type === actionTypes.resetGrid) {
-            draft[gridName] = __assign(__assign({}, initialState), { rowsPerPage: draft[gridName].rowsPerPage });
-        }
-        else if (action.type === actionTypes.setColumnWidth) {
-            if (action.columnsWidth === null) {
-                draft[gridName].columnsWidth = initialState.columnsWidth;
-            }
-            else {
-                draft[gridName].columnsWidth = __assign(__assign({}, draft[gridName].columnsWidth), action.columnsWidth);
-            }
-            draft[gridName].columnsWidthVariant = action.columnLayout;
-        }
-        else if (action.type === actionTypes.setColumnsOrder) {
-            draft[gridName].columnsOrder = action.columnsOrder;
+        switch (action.type) {
+            case actionTypes.init:
+                var defaultSorting = action.initProps.defaultSorting;
+                draft[gridName].page = 1;
+                if (defaultSorting) {
+                    draft[gridName].defaultSorting = defaultSorting;
+                    draft[gridName].sorting = ((_c = draft[gridName].sorting) === null || _c === void 0 ? void 0 : _c.length) ? draft[gridName].sorting : defaultSorting;
+                }
+                break;
+            case actionTypes.clearUxState:
+                draft[gridName].uxState = initialState.uxState;
+                break;
+            case actionTypes.handleUxChange:
+                draft[gridName].uxState = __assign(__assign({}, draft[gridName].uxState), (_a = {}, _a[action.uxKey] = action.uxValue, _a));
+                break;
+            case actionTypes.openConfigForm:
+                draft[gridName].isConfigFormOpen = true;
+                break;
+            case actionTypes.closeConfigForm:
+                draft[gridName].isConfigFormOpen = false;
+                break;
+            case actionTypes.setColumnConfig:
+                draft[gridName].columnConfig = action.columnConfig;
+                draft[gridName].isConfigFormOpen = false;
+                break;
+            case actionTypes.resetFilters:
+                draft[gridName].filter = action.filters;
+                break;
+            case actionTypes.addFilter:
+                var column = action.column, value = action.value, filterProps = action.filterProps;
+                var currentFilterState = (_b = {}, _b[column] = { value: value, filterProps: filterProps }, _b);
+                draft[gridName].filter = __assign(__assign({}, draft[gridName].filter), currentFilterState);
+                draft[gridName].page = 1;
+                break;
+            case actionTypes.setFilters:
+                draft[gridName].filter = action.filters;
+                break;
+            case actionTypes.addSorting:
+                var direction = action.direction;
+                var sortingColumn = action.column;
+                if (((_f = (_e = (_d = draft[gridName]) === null || _d === void 0 ? void 0 : _d.defaultSorting) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.column) === sortingColumn && direction === null) {
+                    direction = 'asc';
+                }
+                var sorting = [{ column: sortingColumn, direction: direction }];
+                if (direction === null) {
+                    sorting = ((_g = draft[gridName]) === null || _g === void 0 ? void 0 : _g.defaultSorting) || [];
+                }
+                draft[gridName].sorting = sorting;
+                break;
+            case actionTypes.clearSettings:
+                draft[gridName].page = initialState.page;
+                draft[gridName].filter = initialState.filter;
+                draft[gridName].uxState = initialState.uxState;
+                break;
+            case actionTypes.setPage:
+                draft[gridName].page = action.page;
+                break;
+            case actionTypes.setRowsPerPage:
+                draft[gridName].rowsPerPage = action.rowsPerPage;
+                break;
+            case actionTypes.resetGrid:
+                draft[gridName] = __assign(__assign({}, initialState), { rowsPerPage: draft[gridName].rowsPerPage });
+                break;
+            case actionTypes.setColumnWidth:
+                if (action.columnsWidth === null) {
+                    draft[gridName].columnsWidth = initialState.columnsWidth;
+                }
+                else {
+                    draft[gridName].columnsWidth = __assign(__assign({}, draft[gridName].columnsWidth), action.columnsWidth);
+                }
+                draft[gridName].columnsWidthVariant = action.columnLayout;
+                break;
+            case actionTypes.setColumnsOrder:
+                draft[gridName].columnsOrder = action.columnsOrder;
+                break;
         }
         return draft;
     });
@@ -150,7 +151,7 @@ export var createActions = function (gridName) { return ({
         gridName: gridName,
         type: actionTypes.handleUxChange,
         uxKey: uxKey,
-        uxValue: uxValue,
+        uxValue: uxValue
     }); },
     openConfigForm: function () { return ({ gridName: gridName, type: actionTypes.openConfigForm }); },
     closeConfigForm: function () { return ({ gridName: gridName, type: actionTypes.closeConfigForm }); },
@@ -160,13 +161,13 @@ export var createActions = function (gridName) { return ({
         gridName: gridName,
         type: actionTypes.setColumnWidth,
         columnsWidth: columnsWidth,
-        columnLayout: columnLayout,
+        columnLayout: columnLayout
     }); },
     resetGrid: function () { return ({ gridName: gridName, type: actionTypes.resetGrid }); },
     setColumnsOrder: function (columnsOrder) { return ({
         gridName: gridName,
         type: actionTypes.setColumnsOrder,
-        columnsOrder: columnsOrder,
+        columnsOrder: columnsOrder
     }); },
     setRowsPerPage: function (rowsPerPage) { return ({ gridName: gridName, type: actionTypes.setRowsPerPage, rowsPerPage: rowsPerPage }); },
     resetFilters: function () { return ({ gridName: gridName, type: actionTypes.resetFilters }); },
@@ -175,15 +176,16 @@ export var createActions = function (gridName) { return ({
         type: actionTypes.addFilter,
         column: column,
         value: value,
-        filterProps: filterProps,
+        filterProps: filterProps
     }); },
+    setFilters: function (filters) { return ({ gridName: gridName, type: actionTypes.setFilters, filters: filters }); },
     addSorting: function (column, direction) { return ({
         gridName: gridName,
         type: actionTypes.addSorting,
         column: column,
-        direction: direction,
+        direction: direction
     }); },
-    clearSettings: function () { return ({ gridName: gridName, type: actionTypes.clearSettings }); },
+    clearSettings: function () { return ({ gridName: gridName, type: actionTypes.clearSettings }); }
 }); };
 export var createSelectors = function (gridName) { return ({
     getUxState: function (state) {
@@ -209,9 +211,7 @@ export var createSelectors = function (gridName) { return ({
     getColumnsWidthVariant: function (state) {
         return getOr(undefined, "commonGrid.".concat(gridName, ".columnsWidthVariant"), state);
     },
-    getColumnsOrder: function (state) {
-        return getOr([], "commonGrid.".concat(gridName, ".columnsOrder"), state);
-    },
+    getColumnsOrder: function (state) { return getOr([], "commonGrid.".concat(gridName, ".columnsOrder"), state); }
 }); };
 export var createFullSelector = function (gridName) {
     var selectors = createSelectors(gridName);
@@ -225,6 +225,6 @@ export var createFullSelector = function (gridName) {
         sorting: sorting,
         columnsWidth: columnsWidth,
         columnsWidthVariant: columnsWidthVariant,
-        columnsOrder: columnsOrder,
+        columnsOrder: columnsOrder
     }); });
 };

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -41,7 +41,7 @@ export default {
     title: 'Blocks/CommonGrid',
     decorators: [withRedux]
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, quickFilter: "productSku", extraControlButtons: extraControlButtons, comparators: comparators })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, quickFilter: "productSku", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };

package/ui/Blocks/CommonGrid/types.d.ts

@@ -229,6 +229,7 @@ export type GridActionsType = {
     setPage?: (number: number) => void;
     setRowsPerPage?: (number: number) => RowsPerPageType | null;
     addFilter?: (column: string, value: any, filterProps: FilterProps) => void;
+    setFilters?: (filters: Filtering) => void;
     resetFilters?: () => void;
     addSorting?: (column: string, direction: SortingValueType) => void;
     openConfigForm?: () => void;
@@ -312,6 +313,8 @@ export type GridProps = CommonGridProps & {
     hideControlButtons?: boolean;
     queryRowsParam?: number | string;
     customPaginationHandler?: (page: number, rows: number) => void;
+    gridName?: string;
+    withPresets?: boolean;
 };
 export type Item = {
     title: string | JSX.Element;

package/ui/Blocks/CommonGrid/utils/constants.d.ts

@@ -0,0 +1 @@
+export declare const presetsLocalStorageKey = "commonGridPresets";

package/ui/Blocks/CommonGrid/utils/constants.js

@@ -0,0 +1 @@
+export var presetsLocalStorageKey = 'commonGridPresets';

package/ui/Elements/Tag/palletes.js

@@ -8,4 +8,7 @@ export var palletes = {
     magentaMagenta: { color: 'magenta20', textColor: 'magenta80' },
     tealTeal: { color: 'teal20', textColor: 'teal90' },
     orangeOrange: { color: 'orange20', textColor: 'orange80' },
+    grayGray: { color: 'neutral20', textColor: 'typoPrimary' },
+    redWhite: { color: 'red1', textColor: 'white' },
+    redRed: { color: 'red30', textColor: 'red1' }
 };