@mailstep/design-system 0.6.52 → 0.6.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -78
- package/package.json +150 -150
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +4 -4
- package/ui/Blocks/CommonGrid/storybook/stories/default.stories.js +2 -2
- package/ui/Blocks/CommonGrid/storybook/stories/loading.stories.js +3 -3
- package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.js +3 -3
- package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.js +3 -3
- package/ui/Blocks/CommonGrid/storybook/stories/styledCommonGrid.stories.js +2 -2
- package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.js +3 -3
- package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.js +5 -5
- package/ui/Blocks/CommonGrid/storybook/stories/withQuickFilter.stories.js +3 -3
- package/ui/Blocks/LanguageSwitch/LanguageSwitch.d.ts +4 -0
- package/ui/{Elements → Blocks}/LanguageSwitch/LanguageSwitch.js +5 -5
- package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.d.ts +11 -0
- package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.js +32 -0
- package/ui/{Elements → Blocks}/LanguageSwitch/styles.d.ts +4 -1
- package/ui/Blocks/LanguageSwitch/styles.js +18 -0
- package/ui/Blocks/LanguageSwitch/types.d.ts +13 -0
- package/ui/Blocks/LoginPage/LoginPage.js +3 -3
- package/ui/Blocks/LoginPage/stories/LoginPage.stories.d.ts +8 -0
- package/ui/Blocks/LoginPage/stories/LoginPage.stories.js +94 -0
- package/ui/Blocks/LoginPage/styles.d.ts +3 -1
- package/ui/Blocks/LoginPage/styles.js +8 -2
- package/ui/Blocks/LoginPage/types.d.ts +3 -1
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg +12 -12
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg +17 -17
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg +17 -17
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg +12 -12
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg +46 -46
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg +19 -19
- package/ui/index.d.ts +2 -2
- package/ui/index.es.js +338 -326
- package/ui/index.js +2 -2
- package/ui/index.umd.js +76 -74
- package/ui/Elements/LanguageSwitch/LanguageSwitch.d.ts +0 -9
- package/ui/Elements/LanguageSwitch/styles.js +0 -12
- package/ui/Elements/LanguageSwitch/types.d.ts +0 -6
- /package/ui/{Elements → Blocks}/LanguageSwitch/index.d.ts +0 -0
- /package/ui/{Elements → Blocks}/LanguageSwitch/index.js +0 -0
- /package/ui/{Elements → Blocks}/LanguageSwitch/types.js +0 -0
- /package/ui/Blocks/LoginPage/assets/{shutterstock.jpg → mailship.jpg} +0 -0
- /package/ui/{Blocks/CommonGrid/storybook/utils/linguiContainer.d.ts → utils/LinguiContainer/index.d.ts} +0 -0
- /package/ui/{Blocks/CommonGrid/storybook/utils/linguiContainer.js → utils/LinguiContainer/index.js} +0 -0
package/README.md
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
# Mailstep Design-system
|
|
2
|
-
|
|
3
|
-
Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook
|
|
4
|
-
|
|
5
|
-
Powered by chromatic: https://www.chromatic.com/library?appId=664c5032c1e55e80a74fcfd2&branch=master
|
|
6
|
-
|
|
7
|
-
## Peer dependencies
|
|
8
|
-
- @xstyled/styled-components
|
|
9
|
-
- styled-component
|
|
10
|
-
- react-router
|
|
11
|
-
- react-router-dom
|
|
12
|
-
|
|
13
|
-
### How to develoop
|
|
14
|
-
```
|
|
15
|
-
yarn install
|
|
16
|
-
yarn dev
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
### How to use
|
|
20
|
-
```
|
|
21
|
-
yarn add @mailstep/design-system
|
|
22
|
-
```
|
|
23
|
-
and add `import 'swiper/css'` somewhere to the root app.
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
#### How to publish
|
|
27
|
-
In root folder run
|
|
28
|
-
|
|
29
|
-
```
|
|
30
|
-
npm run build
|
|
31
|
-
npm run deploy
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Components
|
|
35
|
-
There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
|
|
36
|
-
|
|
37
|
-
### Elements
|
|
38
|
-
| Component | Description | Info |
|
|
39
|
-
|----------|:-------------:|------:|
|
|
40
|
-
| Alert | TBD | [More info](ui/Elements/Alert/README.md) |
|
|
41
|
-
| Avatar | TBD | [More info](ui/Elements/Avatar/README.md) |
|
|
42
|
-
| Badge | TBD | [More info](ui/Elements/Badge/README.md) |
|
|
43
|
-
| BorderedBox | TBD | [More info](ui/Elements/BorderedBox/README.md) |
|
|
44
|
-
| Button | TBD | [More info](ui/Elements/Button/README.md) |
|
|
45
|
-
| Card | TBD | [More info](ui/Elements/Card/README.md) |
|
|
46
|
-
| DialogOverlay | TBD | [More info](ui/Elements/DialogOverlay/README.md) |
|
|
47
|
-
| Dropdown | TBD | [More info](ui/Elements/Dropdown/README.md) |
|
|
48
|
-
| ErrorMessage | TBD | [More info](ui/Elements/ErrorMessage/README.md) |
|
|
49
|
-
| Icon | TBD | [More info](ui/Elements/Icon/README.md) |
|
|
50
|
-
| Image | TBD | [More info](ui/Elements/Image/README.md) |
|
|
51
|
-
| Label | TBD | [More info](ui/Elements/Label/README.md) |
|
|
52
|
-
| Link | TBD | [More info](ui/Elements/Link/README.md) |
|
|
53
|
-
| Logo | TBD | [More info](ui/Elements/Logo/README.md) |
|
|
54
|
-
| Overlay | TBD | [More info](ui/Elements/Overlay/README.md) |
|
|
55
|
-
| Pagination | TBD | [More info](ui/Elements/Pagination/README.md) |
|
|
56
|
-
| Paragraph | TBD | [More info](ui/Elements/Paragraph/README.md) |
|
|
57
|
-
| Spinner | TBD | [More info](ui/Elements/Spinner/README.md) |
|
|
58
|
-
|
|
59
|
-
### Blocks
|
|
60
|
-
| Component | Description | Info |
|
|
61
|
-
|----------|:-------------:|------:|
|
|
62
|
-
| TBD | TBD | TBD |
|
|
63
|
-
|
|
64
|
-
### Forms
|
|
65
|
-
| Component | Description | Info |
|
|
66
|
-
|----------|:-------------:|------:|
|
|
67
|
-
| TBD | TBD | TBD |
|
|
68
|
-
|
|
69
|
-
### System
|
|
70
|
-
| Component | Description | Info |
|
|
71
|
-
|----------|:-------------:|------:|
|
|
72
|
-
| Fonts | Import adjusted fonts of inter | TBD |
|
|
73
|
-
|
|
74
|
-
### Theme Provider
|
|
75
|
-
| Component | Description | Info |
|
|
76
|
-
|----------|:-------------:|------:|
|
|
77
|
-
| Theme Provider | TBD | [More info](ui/ThemeProvider/README.md) |
|
|
78
|
-
|
|
1
|
+
# Mailstep Design-system
|
|
2
|
+
|
|
3
|
+
Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook
|
|
4
|
+
|
|
5
|
+
Powered by chromatic: https://www.chromatic.com/library?appId=664c5032c1e55e80a74fcfd2&branch=master
|
|
6
|
+
|
|
7
|
+
## Peer dependencies
|
|
8
|
+
- @xstyled/styled-components
|
|
9
|
+
- styled-component
|
|
10
|
+
- react-router
|
|
11
|
+
- react-router-dom
|
|
12
|
+
|
|
13
|
+
### How to develoop
|
|
14
|
+
```
|
|
15
|
+
yarn install
|
|
16
|
+
yarn dev
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### How to use
|
|
20
|
+
```
|
|
21
|
+
yarn add @mailstep/design-system
|
|
22
|
+
```
|
|
23
|
+
and add `import 'swiper/css'` somewhere to the root app.
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
#### How to publish
|
|
27
|
+
In root folder run
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
npm run build
|
|
31
|
+
npm run deploy
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Components
|
|
35
|
+
There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
|
|
36
|
+
|
|
37
|
+
### Elements
|
|
38
|
+
| Component | Description | Info |
|
|
39
|
+
|----------|:-------------:|------:|
|
|
40
|
+
| Alert | TBD | [More info](ui/Elements/Alert/README.md) |
|
|
41
|
+
| Avatar | TBD | [More info](ui/Elements/Avatar/README.md) |
|
|
42
|
+
| Badge | TBD | [More info](ui/Elements/Badge/README.md) |
|
|
43
|
+
| BorderedBox | TBD | [More info](ui/Elements/BorderedBox/README.md) |
|
|
44
|
+
| Button | TBD | [More info](ui/Elements/Button/README.md) |
|
|
45
|
+
| Card | TBD | [More info](ui/Elements/Card/README.md) |
|
|
46
|
+
| DialogOverlay | TBD | [More info](ui/Elements/DialogOverlay/README.md) |
|
|
47
|
+
| Dropdown | TBD | [More info](ui/Elements/Dropdown/README.md) |
|
|
48
|
+
| ErrorMessage | TBD | [More info](ui/Elements/ErrorMessage/README.md) |
|
|
49
|
+
| Icon | TBD | [More info](ui/Elements/Icon/README.md) |
|
|
50
|
+
| Image | TBD | [More info](ui/Elements/Image/README.md) |
|
|
51
|
+
| Label | TBD | [More info](ui/Elements/Label/README.md) |
|
|
52
|
+
| Link | TBD | [More info](ui/Elements/Link/README.md) |
|
|
53
|
+
| Logo | TBD | [More info](ui/Elements/Logo/README.md) |
|
|
54
|
+
| Overlay | TBD | [More info](ui/Elements/Overlay/README.md) |
|
|
55
|
+
| Pagination | TBD | [More info](ui/Elements/Pagination/README.md) |
|
|
56
|
+
| Paragraph | TBD | [More info](ui/Elements/Paragraph/README.md) |
|
|
57
|
+
| Spinner | TBD | [More info](ui/Elements/Spinner/README.md) |
|
|
58
|
+
|
|
59
|
+
### Blocks
|
|
60
|
+
| Component | Description | Info |
|
|
61
|
+
|----------|:-------------:|------:|
|
|
62
|
+
| TBD | TBD | TBD |
|
|
63
|
+
|
|
64
|
+
### Forms
|
|
65
|
+
| Component | Description | Info |
|
|
66
|
+
|----------|:-------------:|------:|
|
|
67
|
+
| TBD | TBD | TBD |
|
|
68
|
+
|
|
69
|
+
### System
|
|
70
|
+
| Component | Description | Info |
|
|
71
|
+
|----------|:-------------:|------:|
|
|
72
|
+
| Fonts | Import adjusted fonts of inter | TBD |
|
|
73
|
+
|
|
74
|
+
### Theme Provider
|
|
75
|
+
| Component | Description | Info |
|
|
76
|
+
|----------|:-------------:|------:|
|
|
77
|
+
| Theme Provider | TBD | [More info](ui/ThemeProvider/README.md) |
|
|
78
|
+
|
package/package.json
CHANGED
|
@@ -1,150 +1,150 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@mailstep/design-system",
|
|
3
|
-
"version": "0.6.
|
|
4
|
-
"license": "ISC",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./ui/index.js",
|
|
7
|
-
"module": "./ui/index.es.js",
|
|
8
|
-
"types": "./ui/index.d.ts",
|
|
9
|
-
"files": [
|
|
10
|
-
"ui",
|
|
11
|
-
"assets"
|
|
12
|
-
],
|
|
13
|
-
"scripts": {
|
|
14
|
-
"storybook": "storybook dev -p 6006",
|
|
15
|
-
"build": "tsc && vite build &&
|
|
16
|
-
"build-storybook": "storybook build",
|
|
17
|
-
"deploy": "npm run build && npm publish ./build",
|
|
18
|
-
"dev": "yarn storybook",
|
|
19
|
-
"test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
|
|
20
|
-
"chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358 --exit-zero-on-changes",
|
|
21
|
-
"lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
|
|
22
|
-
},
|
|
23
|
-
"devDependencies": {
|
|
24
|
-
"@babel/core": "^7.20.12",
|
|
25
|
-
"@babel/preset-env": "^7.22.4",
|
|
26
|
-
"@babel/preset-react": "^7.22.3",
|
|
27
|
-
"@babel/preset-typescript": "^7.23.3",
|
|
28
|
-
"@chromatic-com/storybook": "^1",
|
|
29
|
-
"@fortawesome/fontawesome-svg-core": "^6.3.0",
|
|
30
|
-
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
|
31
|
-
"@fortawesome/pro-duotone-svg-icons": "^6.0.0",
|
|
32
|
-
"@fortawesome/pro-light-svg-icons": "^6.0.0",
|
|
33
|
-
"@fortawesome/pro-regular-svg-icons": "^6.0.0",
|
|
34
|
-
"@fortawesome/pro-solid-svg-icons": "^6.3.0",
|
|
35
|
-
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
36
|
-
"@lingui/core": "3.17.2",
|
|
37
|
-
"@lingui/react": "3.17.2",
|
|
38
|
-
"@popperjs/core": "^2.11.8",
|
|
39
|
-
"@storybook/addon-controls": "^8.1.1",
|
|
40
|
-
"@storybook/addon-designs": "^8.0.2",
|
|
41
|
-
"@storybook/addon-essentials": "^8.1.1",
|
|
42
|
-
"@storybook/addon-interactions": "^8.1.1",
|
|
43
|
-
"@storybook/addon-links": "^8.1.1",
|
|
44
|
-
"@storybook/blocks": "^8.1.1",
|
|
45
|
-
"@storybook/react": "^8.1.1",
|
|
46
|
-
"@storybook/react-webpack5": "^8.1.1",
|
|
47
|
-
"@storybook/test": "^8.1.1",
|
|
48
|
-
"@svgr/rollup": "^8.0.1",
|
|
49
|
-
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
|
50
|
-
"@types/faker": "^4.1.11",
|
|
51
|
-
"@types/luxon": "^3.4.2",
|
|
52
|
-
"@types/node": "^20.1.7",
|
|
53
|
-
"@types/react": "^18.2.6",
|
|
54
|
-
"@types/react-beautiful-dnd": "^13.1.2",
|
|
55
|
-
"@types/react-dom": "^18.2.4",
|
|
56
|
-
"@types/react-helmet": "^6.1.11",
|
|
57
|
-
"@types/react-router": "^5.1.20",
|
|
58
|
-
"@types/react-router-dom": "^5.3.3",
|
|
59
|
-
"@types/styled-components": "^5.1.26",
|
|
60
|
-
"@typescript-eslint/eslint-plugin": "^5.59.6",
|
|
61
|
-
"@typescript-eslint/parser": "^5.59.6",
|
|
62
|
-
"@vitejs/plugin-react": "^4.2.1",
|
|
63
|
-
"@xstyled/styled-components": "^3.8.0",
|
|
64
|
-
"babel-loader": "^9.1.3",
|
|
65
|
-
"babel-plugin-macros": "^3.1.0",
|
|
66
|
-
"babel-plugin-named-exports-order": "^0.0.2",
|
|
67
|
-
"chromatic": "^11.3.5",
|
|
68
|
-
"eslint": "^8.41.0",
|
|
69
|
-
"eslint-config-prettier": "^8.8.0",
|
|
70
|
-
"eslint-config-standard-with-typescript": "^34.0.1",
|
|
71
|
-
"eslint-plugin-import": "^2.29.1",
|
|
72
|
-
"eslint-plugin-n": "^17.9.0",
|
|
73
|
-
"eslint-plugin-prettier": "^4.2.1",
|
|
74
|
-
"eslint-plugin-promise": "^6.6.0",
|
|
75
|
-
"eslint-plugin-react": "^7.35.0",
|
|
76
|
-
"eslint-plugin-react-hooks": "^4.6.2",
|
|
77
|
-
"eslint-plugin-react-perf": "^3.3.2",
|
|
78
|
-
"eslint-plugin-storybook": "^0.8.0",
|
|
79
|
-
"faker": "^5.1.0",
|
|
80
|
-
"immer": "9.0.7",
|
|
81
|
-
"lodash": "^4.17.21",
|
|
82
|
-
"luxon": "^3.4.4",
|
|
83
|
-
"moment": "^2.30.1",
|
|
84
|
-
"prettier": "2.8.8",
|
|
85
|
-
"react": "^18.2.0",
|
|
86
|
-
"react-beautiful-dnd": "^13.0.0",
|
|
87
|
-
"react-dom": "^18.2.0",
|
|
88
|
-
"react-helmet": "^6.1.0",
|
|
89
|
-
"react-image": "^4.1.0",
|
|
90
|
-
"react-onclickoutside": "^6.13.0",
|
|
91
|
-
"react-popper": "^2.3.0",
|
|
92
|
-
"react-redux": "*",
|
|
93
|
-
"react-router": "^5.1.2",
|
|
94
|
-
"react-router-dom": "^5.1.2",
|
|
95
|
-
"react-script": "^2.0.5",
|
|
96
|
-
"react-select": "^5.8.0",
|
|
97
|
-
"react-use-draggable-scroll": "^0.4.7",
|
|
98
|
-
"redux": ">=4.0.5",
|
|
99
|
-
"reselect": "5.0.0-alpha.2",
|
|
100
|
-
"storybook": "^8.1.1",
|
|
101
|
-
"string-width": "6.1.0",
|
|
102
|
-
"styled-components": "^5.3.10",
|
|
103
|
-
"swiper": "^11.0.3",
|
|
104
|
-
"tslib": "^2.6.2",
|
|
105
|
-
"typescript": "^5.0.4",
|
|
106
|
-
"vite": "^5.0.10",
|
|
107
|
-
"vite-plugin-dts": "^3.6.4",
|
|
108
|
-
"vite-plugin-static-copy": "^1.0.0",
|
|
109
|
-
"webpack": "^5.82.1"
|
|
110
|
-
},
|
|
111
|
-
"peerDependencies": {
|
|
112
|
-
"@fortawesome/fontawesome-svg-core": "^6.3.0",
|
|
113
|
-
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
|
114
|
-
"@fortawesome/pro-duotone-svg-icons": "^6.0.0",
|
|
115
|
-
"@fortawesome/pro-light-svg-icons": "^6.0.0",
|
|
116
|
-
"@fortawesome/pro-regular-svg-icons": "^6.0.0",
|
|
117
|
-
"@fortawesome/pro-solid-svg-icons": "^6.3.0",
|
|
118
|
-
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
119
|
-
"@lingui/core": "3.17.2",
|
|
120
|
-
"@lingui/react": "3.17.2",
|
|
121
|
-
"@popperjs/core": "^2.11.8",
|
|
122
|
-
"@xstyled/styled-components": "^3.8.0",
|
|
123
|
-
"babel-plugin-macros": "^3.1.0",
|
|
124
|
-
"immer": "9.0.7",
|
|
125
|
-
"lodash": "^4.17.21",
|
|
126
|
-
"luxon": "^3.4.4",
|
|
127
|
-
"moment": "^2.30.1",
|
|
128
|
-
"react": "^18.2.0",
|
|
129
|
-
"react-beautiful-dnd": "^13.0.0",
|
|
130
|
-
"react-dom": "^18.2.0",
|
|
131
|
-
"react-helmet": "^6.1.0",
|
|
132
|
-
"react-image": "^4.1.0",
|
|
133
|
-
"react-onclickoutside": "^6.13.0",
|
|
134
|
-
"react-popper": "^2.3.0",
|
|
135
|
-
"react-redux": ">=4.0.5",
|
|
136
|
-
"react-router": "^5.1.2",
|
|
137
|
-
"react-router-dom": "^5.1.2",
|
|
138
|
-
"react-select": "^5.8.0",
|
|
139
|
-
"react-use-draggable-scroll": "^0.4.7",
|
|
140
|
-
"redux": ">=4.0.5",
|
|
141
|
-
"reselect": "5.0.0-alpha.2",
|
|
142
|
-
"styled-components": "^5.3.10",
|
|
143
|
-
"swiper": "^11.0.3",
|
|
144
|
-
"tslib": "^2.6.2",
|
|
145
|
-
"typescript": "^5.0.4"
|
|
146
|
-
},
|
|
147
|
-
"resolutions": {
|
|
148
|
-
"jackspeak": "2.1.1"
|
|
149
|
-
}
|
|
150
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@mailstep/design-system",
|
|
3
|
+
"version": "0.6.54",
|
|
4
|
+
"license": "ISC",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./ui/index.js",
|
|
7
|
+
"module": "./ui/index.es.js",
|
|
8
|
+
"types": "./ui/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"ui",
|
|
11
|
+
"assets"
|
|
12
|
+
],
|
|
13
|
+
"scripts": {
|
|
14
|
+
"storybook": "storybook dev -p 6006",
|
|
15
|
+
"build": "rm -rf ./build && tsc && vite build && cp package.json build && cp README.md build",
|
|
16
|
+
"build-storybook": "storybook build",
|
|
17
|
+
"deploy": "npm run build && npm publish ./build",
|
|
18
|
+
"dev": "yarn storybook",
|
|
19
|
+
"test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
|
|
20
|
+
"chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358 --exit-zero-on-changes",
|
|
21
|
+
"lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@babel/core": "^7.20.12",
|
|
25
|
+
"@babel/preset-env": "^7.22.4",
|
|
26
|
+
"@babel/preset-react": "^7.22.3",
|
|
27
|
+
"@babel/preset-typescript": "^7.23.3",
|
|
28
|
+
"@chromatic-com/storybook": "^1",
|
|
29
|
+
"@fortawesome/fontawesome-svg-core": "^6.3.0",
|
|
30
|
+
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
|
31
|
+
"@fortawesome/pro-duotone-svg-icons": "^6.0.0",
|
|
32
|
+
"@fortawesome/pro-light-svg-icons": "^6.0.0",
|
|
33
|
+
"@fortawesome/pro-regular-svg-icons": "^6.0.0",
|
|
34
|
+
"@fortawesome/pro-solid-svg-icons": "^6.3.0",
|
|
35
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
36
|
+
"@lingui/core": "3.17.2",
|
|
37
|
+
"@lingui/react": "3.17.2",
|
|
38
|
+
"@popperjs/core": "^2.11.8",
|
|
39
|
+
"@storybook/addon-controls": "^8.1.1",
|
|
40
|
+
"@storybook/addon-designs": "^8.0.2",
|
|
41
|
+
"@storybook/addon-essentials": "^8.1.1",
|
|
42
|
+
"@storybook/addon-interactions": "^8.1.1",
|
|
43
|
+
"@storybook/addon-links": "^8.1.1",
|
|
44
|
+
"@storybook/blocks": "^8.1.1",
|
|
45
|
+
"@storybook/react": "^8.1.1",
|
|
46
|
+
"@storybook/react-webpack5": "^8.1.1",
|
|
47
|
+
"@storybook/test": "^8.1.1",
|
|
48
|
+
"@svgr/rollup": "^8.0.1",
|
|
49
|
+
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
|
50
|
+
"@types/faker": "^4.1.11",
|
|
51
|
+
"@types/luxon": "^3.4.2",
|
|
52
|
+
"@types/node": "^20.1.7",
|
|
53
|
+
"@types/react": "^18.2.6",
|
|
54
|
+
"@types/react-beautiful-dnd": "^13.1.2",
|
|
55
|
+
"@types/react-dom": "^18.2.4",
|
|
56
|
+
"@types/react-helmet": "^6.1.11",
|
|
57
|
+
"@types/react-router": "^5.1.20",
|
|
58
|
+
"@types/react-router-dom": "^5.3.3",
|
|
59
|
+
"@types/styled-components": "^5.1.26",
|
|
60
|
+
"@typescript-eslint/eslint-plugin": "^5.59.6",
|
|
61
|
+
"@typescript-eslint/parser": "^5.59.6",
|
|
62
|
+
"@vitejs/plugin-react": "^4.2.1",
|
|
63
|
+
"@xstyled/styled-components": "^3.8.0",
|
|
64
|
+
"babel-loader": "^9.1.3",
|
|
65
|
+
"babel-plugin-macros": "^3.1.0",
|
|
66
|
+
"babel-plugin-named-exports-order": "^0.0.2",
|
|
67
|
+
"chromatic": "^11.3.5",
|
|
68
|
+
"eslint": "^8.41.0",
|
|
69
|
+
"eslint-config-prettier": "^8.8.0",
|
|
70
|
+
"eslint-config-standard-with-typescript": "^34.0.1",
|
|
71
|
+
"eslint-plugin-import": "^2.29.1",
|
|
72
|
+
"eslint-plugin-n": "^17.9.0",
|
|
73
|
+
"eslint-plugin-prettier": "^4.2.1",
|
|
74
|
+
"eslint-plugin-promise": "^6.6.0",
|
|
75
|
+
"eslint-plugin-react": "^7.35.0",
|
|
76
|
+
"eslint-plugin-react-hooks": "^4.6.2",
|
|
77
|
+
"eslint-plugin-react-perf": "^3.3.2",
|
|
78
|
+
"eslint-plugin-storybook": "^0.8.0",
|
|
79
|
+
"faker": "^5.1.0",
|
|
80
|
+
"immer": "9.0.7",
|
|
81
|
+
"lodash": "^4.17.21",
|
|
82
|
+
"luxon": "^3.4.4",
|
|
83
|
+
"moment": "^2.30.1",
|
|
84
|
+
"prettier": "2.8.8",
|
|
85
|
+
"react": "^18.2.0",
|
|
86
|
+
"react-beautiful-dnd": "^13.0.0",
|
|
87
|
+
"react-dom": "^18.2.0",
|
|
88
|
+
"react-helmet": "^6.1.0",
|
|
89
|
+
"react-image": "^4.1.0",
|
|
90
|
+
"react-onclickoutside": "^6.13.0",
|
|
91
|
+
"react-popper": "^2.3.0",
|
|
92
|
+
"react-redux": "*",
|
|
93
|
+
"react-router": "^5.1.2",
|
|
94
|
+
"react-router-dom": "^5.1.2",
|
|
95
|
+
"react-script": "^2.0.5",
|
|
96
|
+
"react-select": "^5.8.0",
|
|
97
|
+
"react-use-draggable-scroll": "^0.4.7",
|
|
98
|
+
"redux": ">=4.0.5",
|
|
99
|
+
"reselect": "5.0.0-alpha.2",
|
|
100
|
+
"storybook": "^8.1.1",
|
|
101
|
+
"string-width": "6.1.0",
|
|
102
|
+
"styled-components": "^5.3.10",
|
|
103
|
+
"swiper": "^11.0.3",
|
|
104
|
+
"tslib": "^2.6.2",
|
|
105
|
+
"typescript": "^5.0.4",
|
|
106
|
+
"vite": "^5.0.10",
|
|
107
|
+
"vite-plugin-dts": "^3.6.4",
|
|
108
|
+
"vite-plugin-static-copy": "^1.0.0",
|
|
109
|
+
"webpack": "^5.82.1"
|
|
110
|
+
},
|
|
111
|
+
"peerDependencies": {
|
|
112
|
+
"@fortawesome/fontawesome-svg-core": "^6.3.0",
|
|
113
|
+
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
|
114
|
+
"@fortawesome/pro-duotone-svg-icons": "^6.0.0",
|
|
115
|
+
"@fortawesome/pro-light-svg-icons": "^6.0.0",
|
|
116
|
+
"@fortawesome/pro-regular-svg-icons": "^6.0.0",
|
|
117
|
+
"@fortawesome/pro-solid-svg-icons": "^6.3.0",
|
|
118
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
119
|
+
"@lingui/core": "3.17.2",
|
|
120
|
+
"@lingui/react": "3.17.2",
|
|
121
|
+
"@popperjs/core": "^2.11.8",
|
|
122
|
+
"@xstyled/styled-components": "^3.8.0",
|
|
123
|
+
"babel-plugin-macros": "^3.1.0",
|
|
124
|
+
"immer": "9.0.7",
|
|
125
|
+
"lodash": "^4.17.21",
|
|
126
|
+
"luxon": "^3.4.4",
|
|
127
|
+
"moment": "^2.30.1",
|
|
128
|
+
"react": "^18.2.0",
|
|
129
|
+
"react-beautiful-dnd": "^13.0.0",
|
|
130
|
+
"react-dom": "^18.2.0",
|
|
131
|
+
"react-helmet": "^6.1.0",
|
|
132
|
+
"react-image": "^4.1.0",
|
|
133
|
+
"react-onclickoutside": "^6.13.0",
|
|
134
|
+
"react-popper": "^2.3.0",
|
|
135
|
+
"react-redux": ">=4.0.5",
|
|
136
|
+
"react-router": "^5.1.2",
|
|
137
|
+
"react-router-dom": "^5.1.2",
|
|
138
|
+
"react-select": "^5.8.0",
|
|
139
|
+
"react-use-draggable-scroll": "^0.4.7",
|
|
140
|
+
"redux": ">=4.0.5",
|
|
141
|
+
"reselect": "5.0.0-alpha.2",
|
|
142
|
+
"styled-components": "^5.3.10",
|
|
143
|
+
"swiper": "^11.0.3",
|
|
144
|
+
"tslib": "^2.6.2",
|
|
145
|
+
"typescript": "^5.0.4"
|
|
146
|
+
},
|
|
147
|
+
"resolutions": {
|
|
148
|
+
"jackspeak": "2.1.1"
|
|
149
|
+
}
|
|
150
|
+
}
|
|
@@ -6,11 +6,11 @@ import { useAddFilter } from '../../hooks/useAddFilter';
|
|
|
6
6
|
import withReduxActions from '../../HoC/withReduxActions';
|
|
7
7
|
import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
|
|
8
8
|
import withRedux from '../utils/withRedux';
|
|
9
|
-
import { LinguiContainer } from '
|
|
9
|
+
import { LinguiContainer } from '../../../../utils/LinguiContainer';
|
|
10
10
|
var ActionColumnButtons = {
|
|
11
11
|
flexBasis: 160,
|
|
12
12
|
canRowRead: true,
|
|
13
|
-
canRowEdit: function (row) { return row.enumColumn !== 'option C'; }
|
|
13
|
+
canRowEdit: function (row) { return row.enumColumn !== 'option C'; }
|
|
14
14
|
};
|
|
15
15
|
var FilterSetter = function (_a) {
|
|
16
16
|
var gridActions = _a.gridActions;
|
|
@@ -23,9 +23,9 @@ var FilterSetter = function (_a) {
|
|
|
23
23
|
var ConnectedFilterSetter = withReduxActions('testGrid')(FilterSetter);
|
|
24
24
|
export default {
|
|
25
25
|
title: 'Blocks/CommonGrid',
|
|
26
|
-
decorators: [withRedux]
|
|
26
|
+
decorators: [withRedux]
|
|
27
27
|
};
|
|
28
28
|
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?'); } })] })); };
|
|
29
29
|
ComplexWithPaginationAndRedux.story = {
|
|
30
|
-
name: 'Complex, with pagination and redux'
|
|
30
|
+
name: 'Complex, with pagination and redux'
|
|
31
31
|
};
|
|
@@ -5,10 +5,10 @@ import { columnDefinitions } from '../utils/columnDefinition';
|
|
|
5
5
|
import withTheme from '../utils/withTheme';
|
|
6
6
|
import withRouter from '../utils/withRouter';
|
|
7
7
|
import withRedux from '../utils/withRedux';
|
|
8
|
-
import { LinguiContainer } from '
|
|
8
|
+
import { LinguiContainer } from '../../../../utils/LinguiContainer';
|
|
9
9
|
export default {
|
|
10
10
|
title: 'Blocks/CommonGrid',
|
|
11
|
-
decorators: [withTheme, withRouter, withRedux]
|
|
11
|
+
decorators: [withTheme, withRouter, withRedux]
|
|
12
12
|
};
|
|
13
13
|
export var Default = function () {
|
|
14
14
|
return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors }) }));
|
|
@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import CommonGrid from '../../CommonGridContainer';
|
|
3
3
|
import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
|
|
4
4
|
import { columnDefinitions } from '../utils/columnDefinition';
|
|
5
|
-
import { LinguiContainer } from '
|
|
5
|
+
import { LinguiContainer } from '../../../../utils/LinguiContainer';
|
|
6
6
|
export default {
|
|
7
|
-
title: 'Blocks/CommonGrid'
|
|
7
|
+
title: 'Blocks/CommonGrid'
|
|
8
8
|
};
|
|
9
9
|
export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true }) })); };
|
|
10
10
|
LoadingState.story = {
|
|
11
|
-
name: 'Loading state'
|
|
11
|
+
name: 'Loading state'
|
|
12
12
|
};
|
|
@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import CommonGrid from '../../CommonGridContainer';
|
|
3
3
|
import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
|
|
4
4
|
import { oversizedColumnDefinition } from '../utils/columnDefinition';
|
|
5
|
-
import { LinguiContainer } from '
|
|
5
|
+
import { LinguiContainer } from '../../../../utils/LinguiContainer';
|
|
6
6
|
export default {
|
|
7
|
-
title: 'Blocks/CommonGrid'
|
|
7
|
+
title: 'Blocks/CommonGrid'
|
|
8
8
|
};
|
|
9
9
|
export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
|
|
10
10
|
ManyColumnsNoScrollLayout.story = {
|
|
11
|
-
name: 'many columns no-scroll layout'
|
|
11
|
+
name: 'many columns no-scroll layout'
|
|
12
12
|
};
|
|
@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import CommonGrid from '../../CommonGridContainer';
|
|
3
3
|
import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
|
|
4
4
|
import { oversizedColumnDefinition } from '../utils/columnDefinition';
|
|
5
|
-
import { LinguiContainer } from '
|
|
5
|
+
import { LinguiContainer } from '../../../../utils/LinguiContainer';
|
|
6
6
|
export default {
|
|
7
|
-
title: 'Blocks/CommonGrid'
|
|
7
|
+
title: 'Blocks/CommonGrid'
|
|
8
8
|
};
|
|
9
9
|
export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
|
|
10
10
|
ManyColumnsNormalLayoutANoControls.story = {
|
|
11
|
-
name: 'many columns normal layout a no controls'
|
|
11
|
+
name: 'many columns normal layout a no controls'
|
|
12
12
|
};
|
|
@@ -5,10 +5,10 @@ import { columnDefinitions } from '../utils/columnDefinition';
|
|
|
5
5
|
import withTheme from '../utils/withTheme';
|
|
6
6
|
import withRouter from '../utils/withRouter';
|
|
7
7
|
import withRedux from '../utils/withRedux';
|
|
8
|
-
import { LinguiContainer } from '
|
|
8
|
+
import { LinguiContainer } from '../../../../utils/LinguiContainer';
|
|
9
9
|
export default {
|
|
10
10
|
title: 'Blocks/CommonGrid',
|
|
11
|
-
decorators: [withTheme, withRouter, withRedux]
|
|
11
|
+
decorators: [withTheme, withRouter, withRedux]
|
|
12
12
|
};
|
|
13
13
|
export var Styled = function () {
|
|
14
14
|
return (_jsx(LinguiContainer, { children: _jsx("div", { className: "styled", children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridActions: gridDummyActions, gridSelectors: gridSelectors }) }) }));
|
|
@@ -3,13 +3,13 @@ import CommonGrid from '../../CommonGridContainer';
|
|
|
3
3
|
import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
|
|
4
4
|
import { columnDefinitions } from '../utils/columnDefinition';
|
|
5
5
|
import { onRowAction } from '../utils/actions';
|
|
6
|
-
import { LinguiContainer } from '
|
|
6
|
+
import { LinguiContainer } from '../../../../utils/LinguiContainer';
|
|
7
7
|
export default {
|
|
8
|
-
title: 'Blocks/CommonGrid'
|
|
8
|
+
title: 'Blocks/CommonGrid'
|
|
9
9
|
};
|
|
10
10
|
export var WithCustomGridActions = function () {
|
|
11
11
|
return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions }) }));
|
|
12
12
|
};
|
|
13
13
|
WithCustomGridActions.story = {
|
|
14
|
-
name: 'With custom grid actions'
|
|
14
|
+
name: 'With custom grid actions'
|
|
15
15
|
};
|
|
@@ -3,23 +3,23 @@ import { ReduxGrid, createRandomData } from '../utils/utils';
|
|
|
3
3
|
import { onRowEditClick, onRowReadClick, onRowAction } from '../utils/actions';
|
|
4
4
|
import { columnDefinitions } from '../utils/columnDefinition';
|
|
5
5
|
import withRedux from '../utils/withRedux';
|
|
6
|
-
import { LinguiContainer } from '
|
|
6
|
+
import { LinguiContainer } from '../../../../utils/LinguiContainer';
|
|
7
7
|
export var ActionColumnCheckboxes = {
|
|
8
8
|
flexBasis: 160,
|
|
9
|
-
forceCheckboxes: true
|
|
9
|
+
forceCheckboxes: true
|
|
10
10
|
};
|
|
11
11
|
var components = {
|
|
12
12
|
ColumnTitle: function (_a) {
|
|
13
13
|
var title = _a.title, isSortable = _a.isSortable;
|
|
14
14
|
return _jsx("div", { children: "".concat(title, " is ").concat(isSortable ? '' : 'NOT', " sortable") });
|
|
15
|
-
}
|
|
15
|
+
}
|
|
16
16
|
};
|
|
17
17
|
export default {
|
|
18
18
|
title: 'Blocks/CommonGrid',
|
|
19
19
|
decorators: [withRedux],
|
|
20
|
-
excludeStories: ['ActionColumnCheckboxes']
|
|
20
|
+
excludeStories: ['ActionColumnCheckboxes']
|
|
21
21
|
};
|
|
22
22
|
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 }) })); };
|
|
23
23
|
WithForcedCheckboxesAndCustomTitle.story = {
|
|
24
|
-
name: 'With forced checkboxes and custom title'
|
|
24
|
+
name: 'With forced checkboxes and custom title'
|
|
25
25
|
};
|
|
@@ -5,14 +5,14 @@ import { columnDefinitions } from '../utils/columnDefinition';
|
|
|
5
5
|
import withTheme from '../utils/withTheme';
|
|
6
6
|
import withRouter from '../utils/withRouter';
|
|
7
7
|
import withRedux from '../utils/withRedux';
|
|
8
|
-
import { LinguiContainer } from '
|
|
8
|
+
import { LinguiContainer } from '../../../../utils/LinguiContainer';
|
|
9
9
|
export default {
|
|
10
10
|
title: '@Blocks/CommonGrid',
|
|
11
|
-
decorators: [withTheme, withRouter, withRedux]
|
|
11
|
+
decorators: [withTheme, withRouter, withRedux]
|
|
12
12
|
};
|
|
13
13
|
export var WithQuickFilter = function () {
|
|
14
14
|
return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors, quickFilter: "numberColumn" }) }));
|
|
15
15
|
};
|
|
16
16
|
WithQuickFilter.story = {
|
|
17
|
-
name: 'with quick filter'
|
|
17
|
+
name: 'with quick filter'
|
|
18
18
|
};
|