@mailstep/design-system 0.5.0-beta.42 → 0.5.0-beta.43

package/README.md

@@ -1,76 +1,76 @@
-# Mailstep Design-system
-
-Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook 
-
-## Peer dependencies
-- @xstyled/styled-components
-- styled-component
-- react-router
-- react-router-dom
-
-### How to develoop
-```
-yarn install
-yarn dev
-```
-
-### How to use
-```
-yarn add @mailstep/design-system
-```
-and add `import 'swiper/css'` somewhere to the root app.
-
-
-#### How to publish
-In root folder run 
-
-```
-npm run build
-npm run deploy
-```
-
-## Components
-There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
-
-### Elements
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| Alert |  TBD | [More info](ui/Elements/Alert/README.md) |
-| Avatar |  TBD | [More info](ui/Elements/Avatar/README.md) |
-| Badge |  TBD | [More info](ui/Elements/Badge/README.md) |
-| BorderedBox |  TBD | [More info](ui/Elements/BorderedBox/README.md) |
-| Button |  TBD | [More info](ui/Elements/Button/README.md) |
-| Card |  TBD | [More info](ui/Elements/Card/README.md) |
-| DialogOverlay |  TBD | [More info](ui/Elements/DialogOverlay/README.md) |
-| Dropdown |  TBD | [More info](ui/Elements/Dropdown/README.md) |
-| ErrorMessage |  TBD | [More info](ui/Elements/ErrorMessage/README.md) |
-| Icon |  TBD | [More info](ui/Elements/Icon/README.md) |
-| Image |  TBD | [More info](ui/Elements/Image/README.md) |
-| Label |  TBD | [More info](ui/Elements/Label/README.md) |
-| Link |  TBD | [More info](ui/Elements/Link/README.md) |
-| Logo |  TBD | [More info](ui/Elements/Logo/README.md) |
-| Overlay |  TBD | [More info](ui/Elements/Overlay/README.md) |
-| Pagination |  TBD | [More info](ui/Elements/Pagination/README.md) |
-| Paragraph |  TBD | [More info](ui/Elements/Paragraph/README.md) |
-| Spinner |  TBD | [More info](ui/Elements/Spinner/README.md) |
-
-### Blocks
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| TBD |  TBD | TBD |
-
-### Forms
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| TBD |  TBD | TBD |
-
-### System
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| Fonts |  Import adjusted fonts of inter | TBD |
-
-### Theme Provider
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| Theme Provider |  TBD | [More info](ui/ThemeProvider/README.md) |
-
+# Mailstep Design-system
+
+Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook 
+
+## Peer dependencies
+- @xstyled/styled-components
+- styled-component
+- react-router
+- react-router-dom
+
+### How to develoop
+```
+yarn install
+yarn dev
+```
+
+### How to use
+```
+yarn add @mailstep/design-system
+```
+and add `import 'swiper/css'` somewhere to the root app.
+
+
+#### How to publish
+In root folder run 
+
+```
+npm run build
+npm run deploy
+```
+
+## Components
+There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
+
+### Elements
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| Alert |  TBD | [More info](ui/Elements/Alert/README.md) |
+| Avatar |  TBD | [More info](ui/Elements/Avatar/README.md) |
+| Badge |  TBD | [More info](ui/Elements/Badge/README.md) |
+| BorderedBox |  TBD | [More info](ui/Elements/BorderedBox/README.md) |
+| Button |  TBD | [More info](ui/Elements/Button/README.md) |
+| Card |  TBD | [More info](ui/Elements/Card/README.md) |
+| DialogOverlay |  TBD | [More info](ui/Elements/DialogOverlay/README.md) |
+| Dropdown |  TBD | [More info](ui/Elements/Dropdown/README.md) |
+| ErrorMessage |  TBD | [More info](ui/Elements/ErrorMessage/README.md) |
+| Icon |  TBD | [More info](ui/Elements/Icon/README.md) |
+| Image |  TBD | [More info](ui/Elements/Image/README.md) |
+| Label |  TBD | [More info](ui/Elements/Label/README.md) |
+| Link |  TBD | [More info](ui/Elements/Link/README.md) |
+| Logo |  TBD | [More info](ui/Elements/Logo/README.md) |
+| Overlay |  TBD | [More info](ui/Elements/Overlay/README.md) |
+| Pagination |  TBD | [More info](ui/Elements/Pagination/README.md) |
+| Paragraph |  TBD | [More info](ui/Elements/Paragraph/README.md) |
+| Spinner |  TBD | [More info](ui/Elements/Spinner/README.md) |
+
+### Blocks
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| TBD |  TBD | TBD |
+
+### Forms
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| TBD |  TBD | TBD |
+
+### System
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| Fonts |  Import adjusted fonts of inter | TBD |
+
+### Theme Provider
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| Theme Provider |  TBD | [More info](ui/ThemeProvider/README.md) |
+

package/package.json

@@ -1,132 +1,134 @@
-{
-  "name": "@mailstep/design-system",
-  "version": "0.5.0-beta.42",
-  "license": "ISC",
-  "type": "module",
-  "main": "./ui/index.js",
-  "module": "./ui/index.es.js",
-  "types": "./ui/index.d.ts",
-  "files": [
-    "ui",
-    "assets"
-  ],
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build": "rm -rf ./build && tsc && vite build && cp package.json build && cp README.md build",
-    "build-storybook": "storybook build",
-    "deploy": "npm run build && npm publish ./build",
-    "dev": "yarn storybook",
-    "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\""
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
-    "@fortawesome/pro-light-svg-icons": "^6.0.0",
-    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
-    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/react": "3.17.2",
-    "@popperjs/core": "^2.11.8",
-    "@storybook/addon-controls": "7.6.8",
-    "@storybook/addon-essentials": "7.6.8",
-    "@storybook/addon-interactions": "7.6.8",
-    "@storybook/addon-links": "7.6.8",
-    "@storybook/blocks": "7.6.8",
-    "@storybook/react": "7.6.8",
-    "@storybook/react-webpack5": "7.6.8",
-    "@storybook/testing-library": "0.2.2",
-    "@svgr/rollup": "^8.0.1",
-    "@types/faker": "^4.1.11",
-    "@types/luxon": "^3.4.2",
-    "@types/node": "^20.1.7",
-    "@types/react": "^18.2.6",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^18.2.4",
-    "@types/react-helmet": "^6.1.11",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.26",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@xstyled/styled-components": "^3.8.0",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "eslint-plugin-storybook": "0.6.15",
-    "faker": "^5.1.0",
-    "immer": "9.0.7",
-    "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
-    "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-image": "^4.1.0",
-    "react-onclickoutside": "^6.13.0",
-    "react-popper": "^2.3.0",
-    "react-redux": "*",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-script": "^2.0.5",
-    "react-select": "^5.8.0",
-    "react-toastify": "^9.1.3",
-    "react-use-draggable-scroll": "^0.4.7",
-    "redux": ">=4.0.5",
-    "reselect": "5.0.0-alpha.2",
-    "storybook": "7.6.8",
-    "string-width": "6.1.0",
-    "styled-components": "^5.3.10",
-    "swiper": "^11.0.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.0.4",
-    "vite": "^5.0.10",
-    "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1"
-  },
-  "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
-    "@fortawesome/pro-light-svg-icons": "^6.0.0",
-    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
-    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/react": "3.17.2",
-    "@lingui/core": "3.17.2",
-    "@popperjs/core": "^2.11.8",
-    "@xstyled/styled-components": "^3.8.0",
-    "babel-plugin-macros": "^3.1.0",
-    "immer": "9.0.7",
-    "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
-    "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-image": "^4.1.0",
-    "react-onclickoutside": "^6.13.0",
-    "react-popper": "^2.3.0",
-    "react-redux": ">=4.0.5",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-select": "^5.8.0",
-    "react-toastify": "^9.1.3",
-    "react-use-draggable-scroll": "^0.4.7",
-    "redux": ">=4.0.5",
-    "reselect": "5.0.0-alpha.2",
-    "styled-components": "^5.3.10",
-    "swiper": "^11.0.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.0.4"
-  },
-  "resolutions": {
-    "jackspeak": "2.1.1"
-  }
-}
+{
+  "name": "@mailstep/design-system",
+  "version": "0.5.0-beta.43",
+  "license": "ISC",
+  "type": "module",
+  "main": "./ui/index.js",
+  "module": "./ui/index.es.js",
+  "types": "./ui/index.d.ts",
+  "files": [
+    "ui",
+    "assets"
+  ],
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build": "tsc && vite build && copy package.json build && copy README.md build",
+    "build-storybook": "storybook build",
+    "deploy": "npm run build && npm publish ./build",
+    "dev": "yarn storybook",
+    "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\""
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
+    "@fortawesome/pro-light-svg-icons": "^6.0.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
+    "@popperjs/core": "^2.11.8",
+    "@storybook/addon-controls": "7.6.8",
+    "@storybook/addon-essentials": "7.6.8",
+    "@storybook/addon-interactions": "7.6.8",
+    "@storybook/addon-links": "7.6.8",
+    "@storybook/blocks": "7.6.8",
+    "@storybook/react": "7.6.8",
+    "@storybook/react-webpack5": "7.6.8",
+    "@storybook/testing-library": "0.2.2",
+    "@svgr/rollup": "^8.0.1",
+    "@types/faker": "^4.1.11",
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^20.1.7",
+    "@types/react": "^18.2.6",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-helmet": "^6.1.11",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@xstyled/styled-components": "^3.8.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint-plugin-storybook": "0.6.15",
+    "faker": "^5.1.0",
+    "immer": "9.0.7",
+    "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
+    "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-redux": "*",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-script": "^2.0.5",
+    "react-select": "^5.8.0",
+    "react-toastify": "^9.1.3",
+    "react-use-draggable-scroll": "^0.4.7",
+    "redux": ">=4.0.5",
+    "reselect": "5.0.0-alpha.2",
+    "storybook": "7.6.8",
+    "string-width": "6.1.0",
+    "styled-components": "^5.3.10",
+    "swiper": "^11.0.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.0.4",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-static-copy": "^1.0.0",
+    "vite-require": "^0.2.3",
+    "webpack": "^5.82.1"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
+    "@fortawesome/pro-light-svg-icons": "^6.0.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
+    "@popperjs/core": "^2.11.8",
+    "@xstyled/styled-components": "^3.8.0",
+    "babel-plugin-macros": "^3.1.0",
+    "immer": "9.0.7",
+    "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
+    "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-redux": ">=4.0.5",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-select": "^5.8.0",
+    "react-toastify": "^9.1.3",
+    "react-use-draggable-scroll": "^0.4.7",
+    "redux": ">=4.0.5",
+    "reselect": "5.0.0-alpha.2",
+    "styled-components": "^5.3.10",
+    "swiper": "^11.0.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.0.4"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}

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

@@ -1,12 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, 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 '../../hooks/useAddFilter';
 import withReduxActions from '../../HoC/withReduxActions';
 import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
 import withRedux from '../utils/withRedux';
+import { LinguiContainer } from '../utils/linguiContainer';
 var ActionColumnButtons = {
     flexBasis: 160,
     canRowRead: true,
@@ -25,7 +25,7 @@ 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?'); } })] })); };
+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, 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/default.stories.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 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';
+import { LinguiContainer } from '../utils/linguiContainer';
 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 }));
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors }) }));
 };

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 import { columnDefinitions } from '../utils/columnDefinition';
+import { LinguiContainer } from '../utils/linguiContainer';
 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 })); };
+export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _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.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 import { oversizedColumnDefinition } from '../utils/columnDefinition';
-import { filters } from '../utils/filters';
+import { LinguiContainer } from '../utils/linguiContainer';
 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 })); };
+export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), 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.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 import { oversizedColumnDefinition } from '../utils/columnDefinition';
-import { filters } from '../utils/filters';
+import { LinguiContainer } from '../utils/linguiContainer';
 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 })); };
+export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
 ManyColumnsNormalLayoutANoControls.story = {
     name: 'many columns normal layout a no controls',
 };

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

@@ -1,15 +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';
+import { LinguiContainer } from '../utils/linguiContainer';
 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 }) }));
+    return (_jsx(LinguiContainer, { children: _jsx("div", { className: "styled", children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridActions: gridDummyActions, gridSelectors: gridSelectors }) }) }));
 };

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 import { columnDefinitions } from '../utils/columnDefinition';
 import { onRowAction } from '../utils/actions';
-import { filters } from '../utils/filters';
+import { LinguiContainer } from '../utils/linguiContainer';
 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 }));
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { 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.js

@@ -3,6 +3,7 @@ import { ReduxGrid, createRandomData } from '../utils/utils';
 import { onRowEditClick, onRowReadClick, onRowAction } from '../utils/actions';
 import { columnDefinitions } from '../utils/columnDefinition';
 import withRedux from '../utils/withRedux';
+import { LinguiContainer } from '../utils/linguiContainer';
 export var ActionColumnCheckboxes = {
     flexBasis: 160,
     forceCheckboxes: true,
@@ -18,7 +19,7 @@ export default {
     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 })); };
+export var WithForcedCheckboxesAndCustomTitle = function () { return (_jsx(LinguiContainer, { children: _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/linguiContainer.d.ts

@@ -0,0 +1 @@
+export declare const LinguiContainer: ({ children }: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
+export var LinguiContainer = function (_a) {
+    var children = _a.children;
+    i18n.activate('en');
+    return _jsx(I18nProvider, { i18n: i18n, children: children });
+};

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

@@ -1,18 +1,2 @@
-/*
-import React from 'react'
-import Theme from '@designSystem/Theme'
-import Normalize, { NormalizeBaseFonts } from '@designSystem/Normalize'
-
-const withProvider = (story: Function): JSX.Element => (
-  <Theme>
-    <Normalize />
-    <NormalizeBaseFonts />
-    {story()}
-  </Theme>
-)
-
-export default withProvider
-*/
-// @TODO do theme
-var withProvider = function (story) { return (story()); };
+var withProvider = function (story) { return story(); };
 export default withProvider;