@mailstep/design-system 0.4.21 → 0.5.0

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

@@ -0,0 +1,230 @@
+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 produce from 'immer';
+import getOr from 'lodash/fp/getOr';
+import migrateState from './migrateState';
+import { createSelector } from 'reselect';
+export var initialState = {
+    page: 1,
+    rowsPerPage: 10,
+    sorting: [],
+    isConfigFormOpen: false,
+    uxState: {
+        selectedRow: null,
+        checkedRows: {},
+    },
+    columnConfig: {},
+    filter: {},
+    columnsWidth: {},
+    columnsOrder: [],
+    defaultSorting: [],
+};
+export var actionPrefix = '@store/CommonGrid';
+export var actionTypes = {
+    init: "".concat(actionPrefix, "/init"),
+    clearUxState: "".concat(actionPrefix, "/clearUxState"),
+    handleUxChange: "".concat(actionPrefix, "/handleUxChange"),
+    openConfigForm: "".concat(actionPrefix, "/openConfigForm"),
+    closeConfigForm: "".concat(actionPrefix, "/closeConfigForm"),
+    setColumnConfig: "".concat(actionPrefix, "/setColumnConfig"),
+    setPage: "".concat(actionPrefix, "/setPage"),
+    setRowsPerPage: "".concat(actionPrefix, "/setRowsPerPage"),
+    resetFilters: "".concat(actionPrefix, "/resetFilters"),
+    addFilter: "".concat(actionPrefix, "/addFilter"),
+    addSorting: "".concat(actionPrefix, "/addSorting"),
+    clearSettings: "".concat(actionPrefix, "/clearSettings"),
+    resetGrid: "".concat(actionPrefix, "/resetGrid"),
+    setColumnWidth: "".concat(actionPrefix, "/setColumnWidth"),
+    setColumnsOrder: "".concat(actionPrefix, "/setColumnsOrder"),
+};
+var migrationChecked = false;
+export default (function (state, action) {
+    if (state === void 0) { state = {}; }
+    return produce(state, function (draft) {
+        var _a, _b;
+        var _c, _d, _e, _f, _g;
+        // version migrations
+        if (!migrationChecked && state && Object.keys(state).length > 0) {
+            draft = migrateState(draft);
+            migrationChecked = true;
+        }
+        var gridName = action.gridName;
+        if (!gridName)
+            return draft; // action does not contains gridName, skip immediatelly
+        if (!draft[gridName]) {
+            // 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;
+        }
+        return draft;
+    });
+});
+export var createActions = function (gridName) { return ({
+    init: function (initProps) { return ({ gridName: gridName, type: actionTypes.init, initProps: initProps }); },
+    clearUxState: function () { return ({ gridName: gridName, type: actionTypes.clearUxState }); },
+    handleUxChange: function (uxKey, uxValue) { return ({
+        gridName: gridName,
+        type: actionTypes.handleUxChange,
+        uxKey: uxKey,
+        uxValue: uxValue,
+    }); },
+    openConfigForm: function () { return ({ gridName: gridName, type: actionTypes.openConfigForm }); },
+    closeConfigForm: function () { return ({ gridName: gridName, type: actionTypes.closeConfigForm }); },
+    setColumnConfig: function (columnConfig) { return ({ gridName: gridName, type: actionTypes.setColumnConfig, columnConfig: columnConfig }); },
+    setPage: function (page) { return ({ gridName: gridName, type: actionTypes.setPage, page: page }); },
+    setColumnWidth: function (columnsWidth, columnLayout) { return ({
+        gridName: gridName,
+        type: actionTypes.setColumnWidth,
+        columnsWidth: columnsWidth,
+        columnLayout: columnLayout,
+    }); },
+    resetGrid: function () { return ({ gridName: gridName, type: actionTypes.resetGrid }); },
+    setColumnsOrder: function (columnsOrder) { return ({
+        gridName: gridName,
+        type: actionTypes.setColumnsOrder,
+        columnsOrder: columnsOrder,
+    }); },
+    setRowsPerPage: function (rowsPerPage) { return ({ gridName: gridName, type: actionTypes.setRowsPerPage, rowsPerPage: rowsPerPage }); },
+    resetFilters: function () { return ({ gridName: gridName, type: actionTypes.resetFilters }); },
+    addFilter: function (column, value, filterProps) { return ({
+        gridName: gridName,
+        type: actionTypes.addFilter,
+        column: column,
+        value: value,
+        filterProps: filterProps,
+    }); },
+    addSorting: function (column, direction) { return ({
+        gridName: gridName,
+        type: actionTypes.addSorting,
+        column: column,
+        direction: direction,
+    }); },
+    clearSettings: function () { return ({ gridName: gridName, type: actionTypes.clearSettings }); },
+}); };
+export var createSelectors = function (gridName) { return ({
+    getUxState: function (state) {
+        return getOr(initialState.uxState, "commonGrid.".concat(gridName, ".uxState"), state);
+    },
+    isConfigFormOpen: function (state) {
+        return getOr(initialState.isConfigFormOpen, "commonGrid.".concat(gridName, ".isConfigFormOpen"), state);
+    },
+    getColumnConfig: function (state) {
+        return getOr(initialState.columnConfig, "commonGrid.".concat(gridName, ".columnConfig"), state);
+    },
+    getPage: function (state) { return getOr(initialState.page, "commonGrid.".concat(gridName, ".page"), state); },
+    getRowsPerPage: function (state) {
+        return getOr(initialState.rowsPerPage, "commonGrid.".concat(gridName, ".rowsPerPage"), state);
+    },
+    getFilter: function (state) { return getOr(initialState.filter, "commonGrid.".concat(gridName, ".filter"), state); },
+    getSorting: function (state) {
+        return getOr(initialState.sorting, "commonGrid.".concat(gridName, ".sorting"), state);
+    },
+    getColumnsWidth: function (state) {
+        return getOr(null, "commonGrid.".concat(gridName, ".columnsWidth"), state);
+    },
+    getColumnsWidthVariant: function (state) {
+        return getOr(undefined, "commonGrid.".concat(gridName, ".columnsWidthVariant"), state);
+    },
+    getColumnsOrder: function (state) {
+        return getOr([], "commonGrid.".concat(gridName, ".columnsOrder"), state);
+    },
+}); };
+export var createFullSelector = function (gridName) {
+    var selectors = createSelectors(gridName);
+    return createSelector(function (state) { return selectors.getUxState(state); }, function (state) { return selectors.isConfigFormOpen(state); }, function (state) { return selectors.getColumnConfig(state); }, function (state) { return selectors.getPage(state); }, function (state) { return selectors.getRowsPerPage(state); }, function (state) { return selectors.getFilter(state); }, function (state) { return selectors.getSorting(state); }, function (state) { return selectors.getColumnsWidth(state); }, function (state) { return selectors.getColumnsWidthVariant(state); }, function (state) { return selectors.getColumnsOrder(state); }, function (uxState, isConfigFormOpen, columnConfig, page, rowsPerPage, filter, sorting, columnsWidth, columnsWidthVariant, columnsOrder) { return ({
+        uxState: uxState,
+        isConfigFormOpen: isConfigFormOpen,
+        columnConfig: columnConfig,
+        page: page,
+        rowsPerPage: rowsPerPage,
+        filter: filter,
+        sorting: sorting,
+        columnsWidth: columnsWidth,
+        columnsWidthVariant: columnsWidthVariant,
+        columnsOrder: columnsOrder,
+    }); });
+};

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

@@ -0,0 +1,3 @@
+import { MultiState } from './index';
+declare const _default: (draft: MultiState) => MultiState;
+export default _default;

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

@@ -0,0 +1,14 @@
+// v1 to v2
+var v2 = function (draft) {
+    Object.keys(draft).forEach(function (gridName) {
+        if (draft[gridName].columnConfig && Array.isArray(draft[gridName].columnConfig)) {
+            draft[gridName].columnConfig = {};
+        }
+    });
+    return draft;
+};
+// migration management
+export default (function (draft) {
+    draft = v2(draft);
+    return draft;
+});

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    title: string;
+    decorators: ((story: Function) => JSX.Element)[];
+};
+export default _default;
+export declare const ComplexWithPaginationAndRedux: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
+import { onRowEditClick, onRowReadClick, onRowAction, onBatchAction } from '../utils/actions';
+import { filters } from '../utils/filters';
+import { useAddFilter } from '../../utils/public';
+import withReduxActions from '../../HoC/withReduxActions';
+import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
+import withRedux from '../utils/withRedux';
+var ActionColumnButtons = {
+    flexBasis: 160,
+    canRowRead: true,
+    canRowEdit: function (row) { return row.enumColumn !== 'option C'; },
+};
+var FilterSetter = function (_a) {
+    var gridActions = _a.gridActions;
+    var handleAddFilter = useAddFilter(gridActions === null || gridActions === void 0 ? void 0 : gridActions.addFilter);
+    React.useEffect(function () {
+        handleAddFilter(enumValues[1], enumColumn);
+    }, []);
+    return null;
+};
+var ConnectedFilterSetter = withReduxActions('testGrid')(FilterSetter);
+export default {
+    title: '@Blocks/CommonGrid',
+    decorators: [withRedux],
+};
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(_Fragment, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { filters: filters, columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
+ComplexWithPaginationAndRedux.story = {
+    name: 'Complex, with pagination and redux',
+};

package/ui/Blocks/CommonGrid/storybook/stories/customControllButtons.stories.d.ts

@@ -0,0 +1,13 @@
+import { ExtraControlButton } from '../../types';
+export declare const extraControlButtons: ExtraControlButton[];
+declare const _default: {
+    title: string;
+    excludeStories: string[];
+};
+export default _default;
+export declare const CustomControllButtons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -0,0 +1,49 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGrid';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { oversizedColumnDefinition } from '../utils/columnDefinition';
+import { ExtraControlButtonPosition } from '../../types';
+export var extraControlButtons = [
+    {
+        label: _jsx(_Fragment, { children: "default left" }),
+        onClick: function () { return alert('test ok'); },
+    },
+    {
+        label: _jsx(_Fragment, { children: "right button" }),
+        onClick: function () { return alert('test ok'); },
+        position: ExtraControlButtonPosition.TopRight,
+    },
+    {
+        label: _jsx(_Fragment, { children: "bottom left button" }),
+        onClick: function () { return alert('test ok'); },
+        position: ExtraControlButtonPosition.BottomLeft,
+    },
+    {
+        label: _jsx(_Fragment, { children: "right options" }),
+        onClick: function () { return alert('test ok'); },
+        onSelect: function (value) { return alert(value); },
+        position: ExtraControlButtonPosition.TopRight,
+        options: [
+            {
+                label: 'Label A',
+                value: 'A',
+            },
+            {
+                label: 'Label B',
+                value: 'B',
+            },
+        ],
+    },
+    {
+        node: (_jsxs("span", { style: { marginLeft: '15px' }, children: [_jsx("span", { children: "custom node with btn - " }), _jsx("button", { onClick: function () { return alert('test ok'); }, children: "btn" })] })),
+        position: ExtraControlButtonPosition.TopRight,
+    },
+];
+export default {
+    title: '@Blocks/CommonGrid',
+    excludeStories: ['extraControlButtons'],
+};
+export var CustomControllButtons = function () { return (_jsx(CommonGrid, { rowsData: createRandomData(10), columnsDefinitions: oversizedColumnDefinition, extraControlButtons: extraControlButtons, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions })); };
+CustomControllButtons.story = {
+    name: 'custom controll buttons',
+};

package/ui/Blocks/CommonGrid/storybook/stories/default.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    decorators: ((story: Function) => JSX.Element)[];
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGrid';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { columnDefinitions } from '../utils/columnDefinition';
+import withTheme from '../utils/withTheme';
+import withRouter from '../utils/withRouter';
+import withRedux from '../utils/withRedux';
+export default {
+    title: '@Blocks/CommonGrid',
+    decorators: [withTheme, withRouter, withRedux],
+};
+export var Default = function () {
+    return (_jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors }));
+};

package/ui/Blocks/CommonGrid/storybook/stories/loading.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const LoadingState: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGrid';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { columnDefinitions } from '../utils/columnDefinition';
+export default {
+    title: '@Blocks/CommonGrid',
+};
+export var LoadingState = function () { return (_jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true, hideColumnConfig: true })); };
+LoadingState.story = {
+    name: 'Loading state',
+};

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ManyColumnsNoScrollLayout: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGrid';
+import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { oversizedColumnDefinition } from '../utils/columnDefinition';
+import { filters } from '../utils/filters';
+export default {
+    title: '@Blocks/CommonGrid',
+};
+export var ManyColumnsNoScrollLayout = function () { return (_jsx(CommonGrid, { rowsData: createOversizedRandomData(5), filters: filters, columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions })); };
+ManyColumnsNoScrollLayout.story = {
+    name: 'many columns no-scroll layout',
+};

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ManyColumnsNormalLayoutANoControls: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGrid';
+import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { oversizedColumnDefinition } from '../utils/columnDefinition';
+import { filters } from '../utils/filters';
+export default {
+    title: '@Blocks/CommonGrid',
+};
+export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(CommonGrid, { rowsData: createOversizedRandomData(5), filters: filters, columnsDefinitions: oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions, hideAllControls: true })); };
+ManyColumnsNormalLayoutANoControls.story = {
+    name: 'many columns normal layout a no controls',
+};

package/ui/Blocks/CommonGrid/storybook/stories/styledCommonGrid.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    decorators: ((story: Function) => JSX.Element)[];
+};
+export default _default;
+export declare const Styled: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReduxGrid, createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { filters } from '../utils/filters';
+import { onRowAction } from '../utils/actions';
+import { columnDefinitions } from '../utils/columnDefinition';
+import withTheme from '../utils/withTheme';
+import withRouter from '../utils/withRouter';
+import withRedux from '../utils/withRedux';
+export default {
+    title: '@Blocks/CommonGrid',
+    decorators: [withTheme, withRouter, withRedux],
+};
+export var Styled = function () {
+    return (_jsx("div", { className: "styled", children: _jsx(ReduxGrid, { filters: filters, columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridActions: gridDummyActions, gridSelectors: gridSelectors }) }));
+};

package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithCustomGridActions: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGrid';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { columnDefinitions } from '../utils/columnDefinition';
+import { onRowAction } from '../utils/actions';
+import { filters } from '../utils/filters';
+export default {
+    title: '@Blocks/CommonGrid',
+};
+export var WithCustomGridActions = function () {
+    return (_jsx(CommonGrid, { filters: filters, columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions, hideColumnConfig: true }));
+};
+WithCustomGridActions.story = {
+    name: 'With custom grid actions',
+};

package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.d.ts

@@ -0,0 +1,14 @@
+import { ActionColumn } from '../../types';
+export declare const ActionColumnCheckboxes: ActionColumn;
+declare const _default: {
+    title: string;
+    decorators: ((story: Function) => JSX.Element)[];
+    excludeStories: string[];
+};
+export default _default;
+export declare const WithForcedCheckboxesAndCustomTitle: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReduxGrid, createRandomData } from '../utils/utils';
+import { onRowEditClick, onRowReadClick, onRowAction } from '../utils/actions';
+import { columnDefinitions } from '../utils/columnDefinition';
+import withRedux from '../utils/withRedux';
+export var ActionColumnCheckboxes = {
+    flexBasis: 160,
+    forceCheckboxes: true,
+};
+var components = {
+    ColumnTitle: function (_a) {
+        var title = _a.title, isSortable = _a.isSortable;
+        return _jsx("div", { children: "".concat(title, " is ").concat(isSortable ? '' : 'NOT', " sortable") });
+    },
+};
+export default {
+    title: '@Blocks/CommonGrid',
+    decorators: [withRedux],
+    excludeStories: ['ActionColumnCheckboxes'],
+};
+export var WithForcedCheckboxesAndCustomTitle = function () { return (_jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnCheckboxes, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, components: components })); };
+WithForcedCheckboxesAndCustomTitle.story = {
+    name: 'With forced checkboxes and custom title',
+};

package/ui/Blocks/CommonGrid/storybook/utils/actions.d.ts

@@ -0,0 +1,4 @@
+export declare const onRowEditClick: (id: string, props: object) => void;
+export declare const onRowReadClick: (id: string, props: object) => void;
+export declare const onRowAction: (id: string, field: string, value: string | boolean) => void;
+export declare const onBatchAction: (action: string, affectedRows: object[]) => void;

package/ui/Blocks/CommonGrid/storybook/utils/actions.js

@@ -0,0 +1,6 @@
+export var onRowEditClick = function (id, props) { return console.log('onRowEditClick', id, props); };
+export var onRowReadClick = function (id, props) { return console.log('onRowReadClick', id, props); };
+export var onRowAction = function (id, field, value) { return console.log('onRowAction', id, field, value); };
+export var onBatchAction = function (action, affectedRows) {
+    console.log('onBatchAction called', action, affectedRows);
+};

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDefinition } from '../../types';
+export declare const oversizedArrayColumns = 25;
+export declare const enumValues: string[];
+export declare const oversizedColumnDefinition: {
+    name: string;
+    title: string;
+    flexBasis: number;
+}[];
+export declare const enumColumn: ColumnDefinition;
+export declare const columnDefinitions: ColumnDefinition[];