@mailstep/design-system 0.6.49 → 0.6.51-beta.0

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.
Files changed (36) hide show
  1. package/README.md +78 -78
  2. package/package.json +150 -150
  3. package/ui/Blocks/LoginPage/LoginPage.d.ts +4 -0
  4. package/ui/Blocks/LoginPage/LoginPage.js +14 -0
  5. package/ui/Blocks/LoginPage/components/LoginForm.d.ts +14 -0
  6. package/ui/Blocks/LoginPage/components/LoginForm.js +59 -0
  7. package/ui/Blocks/LoginPage/components/SocialLinks.d.ts +6 -0
  8. package/ui/Blocks/LoginPage/components/SocialLinks.js +17 -0
  9. package/ui/Blocks/LoginPage/index.d.ts +4 -0
  10. package/ui/Blocks/LoginPage/index.js +2 -0
  11. package/ui/Blocks/LoginPage/styles.d.ts +8 -0
  12. package/ui/Blocks/LoginPage/styles.js +16 -0
  13. package/ui/Blocks/LoginPage/types.d.ts +24 -0
  14. package/ui/Blocks/LoginPage/types.js +1 -0
  15. package/ui/Blocks/LoginPage/utils/links.d.ts +7 -0
  16. package/ui/Blocks/LoginPage/utils/links.js +7 -0
  17. package/ui/Elements/Badge/Badge.d.ts +2 -1
  18. package/ui/Elements/Badge/Badge.js +4 -4
  19. package/ui/Elements/Badge/stories/Badge.stories.d.ts +2 -2
  20. package/ui/Elements/Badge/stories/Badge.stories.js +9 -8
  21. package/ui/Elements/LanguageSwitch/LanguageSwitch.d.ts +9 -0
  22. package/ui/Elements/LanguageSwitch/LanguageSwitch.js +34 -0
  23. package/ui/Elements/LanguageSwitch/index.d.ts +4 -0
  24. package/ui/Elements/LanguageSwitch/index.js +2 -0
  25. package/ui/Elements/LanguageSwitch/styles.d.ts +6 -0
  26. package/ui/Elements/LanguageSwitch/styles.js +12 -0
  27. package/ui/Elements/LanguageSwitch/types.d.ts +6 -0
  28. package/ui/Elements/LanguageSwitch/types.js +1 -0
  29. package/ui/Elements/Logo/assets/mailship/mailship-logo.svg +12 -12
  30. package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg +17 -17
  31. package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg +17 -17
  32. package/ui/Elements/Logo/assets/mailstock/mailstock.svg +12 -12
  33. package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg +46 -46
  34. package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg +19 -19
  35. package/ui/index.es.js +8 -7
  36. package/ui/index.umd.js +2 -2
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.49",
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
- }
1
+ {
2
+ "name": "@mailstep/design-system",
3
+ "version": "0.6.51-beta.0",
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 && copy package.json build && copy 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
+ }
package/ui/Blocks/LoginPage/LoginPage.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { FC } from 'react';
2
+ import { LoginPageProps } from './types';
3
+ declare const Login: FC<LoginPageProps>;
4
+ export default Login;
package/ui/Blocks/LoginPage/LoginPage.js ADDED
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { EMAIL_ADDRESS } from './utils/links';
3
+ import { Trans } from '@lingui/react';
4
+ import { x } from '@xstyled/styled-components';
5
+ import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, CardBodyWithLanguage, Version } from './styles';
6
+ import { H6 } from '../../Elements/Typography/Typography';
7
+ import { SocialLinks } from './components/SocialLinks';
8
+ import { LoginForm } from './components/LoginForm';
9
+ import LanguageSwitch from '../../Elements/LanguageSwitch';
10
+ var Login = function (_a) {
11
+ var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version;
12
+ return (_jsxs(Wrapper, { children: [_jsxs(CardBodyWithLanguage, { children: [_jsx(LogoWrapper, { children: _jsx(MainLogo, { brand: brand, variant: brandVariant }) }), _jsxs(LanguageBox, { children: [_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] }), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter })] }), children, version && _jsx(Version, { children: version }), _jsx(SocialLinks, {})] }));
13
+ };
14
+ export default Login;
package/ui/Blocks/LoginPage/components/LoginForm.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { FC } from 'react';
2
+ import { Option } from '../../../Elements/Select/types';
3
+ import { LoginData } from '../types';
4
+ type Props = {
5
+ onSubmit: (loginData: LoginData) => Promise<void>;
6
+ isSubmitting?: boolean;
7
+ isSubmitDisabled?: boolean;
8
+ withDistributionCenterSelect?: boolean;
9
+ distributionCenterOptions?: Option[];
10
+ onChangeDistributionCenter?: (dcId: string) => void;
11
+ selectedDistributionCenter?: string;
12
+ };
13
+ export declare const LoginForm: FC<Props>;
14
+ export {};
package/ui/Blocks/LoginPage/components/LoginForm.js ADDED
@@ -0,0 +1,59 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
+ import { useCallback, useState } from 'react';
7
+ import Button from '../../../Elements/Button/Button';
8
+ import SingleSelect from '../../../Elements/SingleSelect/SingleSelect';
9
+ import { Input } from '../../../Forms/Input/Input';
10
+ import { i18n } from '@lingui/core';
11
+ import { Trans } from '@lingui/react';
12
+ import styled, { x } from '@xstyled/styled-components';
13
+ var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n width: 100%;\n box-sizing: border-box;\n margin-bottom: 10px;\n & > div > H4 {\n display: none;\n }\n @media (min-width: 1024px) {\n height: 300px;\n min-width: 300px;\n margin-bottom: 50px;\n & > div > H4 {\n display: block;\n }\n }\n"], ["\n display: block;\n width: 100%;\n box-sizing: border-box;\n margin-bottom: 10px;\n & > div > H4 {\n display: none;\n }\n @media (min-width: 1024px) {\n height: 300px;\n min-width: 300px;\n margin-bottom: 50px;\n & > div > H4 {\n display: block;\n }\n }\n"])));
14
+ var ButtonsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n margin-top: 15px;\n width: 100%;\n @media (min-width: 1024px) {\n display: inline-block;\n margin-top: 40px;\n }\n"], ["\n display: flex;\n margin-top: 15px;\n width: 100%;\n @media (min-width: 1024px) {\n display: inline-block;\n margin-top: 40px;\n }\n"])));
15
+ export var LoginForm = function (_a) {
16
+ var onSubmit = _a.onSubmit, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, distributionCenterOptions = _a.distributionCenterOptions, withDistributionCenterSelect = _a.withDistributionCenterSelect, onChangeDistributionCenter = _a.onChangeDistributionCenter, selectedDistributionCenter = _a.selectedDistributionCenter;
17
+ var _b = useState(''), login = _b[0], setLogin = _b[1];
18
+ var _c = useState(''), password = _c[0], setPassword = _c[1];
19
+ var _d = useState(''), loginError = _d[0], setLoginError = _d[1];
20
+ var _e = useState(''), passwordError = _e[0], setPasswordError = _e[1];
21
+ var _f = useState(''), dcCenterError = _f[0], setDCCenterError = _f[1];
22
+ var handleChangeLogin = useCallback(function (e) {
23
+ setLogin(e.target.value);
24
+ }, []);
25
+ var handleChangePassword = useCallback(function (e) {
26
+ setPassword(e.target.value);
27
+ }, []);
28
+ var handleSubmit = function () {
29
+ setLoginError('');
30
+ setPasswordError('');
31
+ setDCCenterError('');
32
+ if (!login) {
33
+ setLoginError(i18n._({ id: 'requiredField', message: 'Required field' }));
34
+ return;
35
+ }
36
+ if (!password) {
37
+ setPasswordError(i18n._({ id: 'requiredField', message: 'Required field' }));
38
+ return;
39
+ }
40
+ if (withDistributionCenterSelect && !selectedDistributionCenter) {
41
+ setDCCenterError(i18n._({ id: 'requiredField', message: 'Required field' }));
42
+ return;
43
+ }
44
+ onSubmit({
45
+ login: login,
46
+ password: password
47
+ }).catch(console.error);
48
+ };
49
+ var handleChangeDistributionCenter = useCallback(function (e) {
50
+ onChangeDistributionCenter === null || onChangeDistributionCenter === void 0 ? void 0 : onChangeDistributionCenter(e.target.value);
51
+ }, [onChangeDistributionCenter]);
52
+ // @ts-ignore
53
+ return (_jsxs(Container, { children: [_jsx(x.div, { mt: "24px", children: _jsx(Input, { label: i18n._({ id: 'form.login.label', message: 'Login' }), placeholder: i18n._({ id: 'form.login.label', message: 'Login' }), type: "text", name: "login", error: loginError, value: login, onChange: handleChangeLogin, onEnter: handleSubmit }) }), _jsx(x.div, { mt: "12px", children: _jsx(Input, { label: i18n._({ id: 'form.password.label', message: 'Password' }), placeholder: i18n._({ id: 'form.password.label', message: 'Password' }), name: "password", type: "password", value: password, onChange: handleChangePassword, error: passwordError, onEnter: handleSubmit }) }), withDistributionCenterSelect && (_jsx(x.div, { mt: "12px", children: _jsx(SingleSelect
54
+ // @ts-ignore
55
+ , {
56
+ // @ts-ignore
57
+ onChange: handleChangeDistributionCenter, options: distributionCenterOptions, value: selectedDistributionCenter, placeholder: i18n._({ id: 'form.distributionCenter.label', message: 'Distribution center' }), label: i18n._({ id: 'form.distributionCenter.label', message: 'Distribution center' }), error: dcCenterError }) })), _jsx(ButtonsContainer, { children: _jsx(Button, { onClick: handleSubmit, iconLeft: "login", isLoading: isSubmitting, disabled: isSubmitDisabled, fullWidth: true, children: _jsx(Trans, { id: "form.buttonSignIn", message: "Sign in" }) }) })] }));
58
+ };
59
+ var templateObject_1, templateObject_2;
package/ui/Blocks/LoginPage/components/SocialLinks.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const SocialLinksWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
3
+ export declare const SocialLinksBody: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
4
+ export declare const LinkTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
5
+ export declare const SocialFooter: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
6
+ export declare const SocialLinks: FC;
package/ui/Blocks/LoginPage/components/SocialLinks.js ADDED
@@ -0,0 +1,17 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
+ import Icon from '../../../Elements/Icon/Icon';
7
+ import { FACEBOOK_LINK, INSTAGRAM_LINK, LINKEDIN_LINK, TWITTER_LINK } from '../utils/links';
8
+ import { Trans } from '@lingui/react';
9
+ import styled, { th } from '@xstyled/styled-components';
10
+ export var SocialLinksWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 600px;\n margin: auto;\n display: none;\n\n @media (min-height: 520px) {\n display: block;\n }\n @media (min-width: 1024px) {\n position: relative;\n width: 500px;\n }\n"], ["\n height: 600px;\n margin: auto;\n display: none;\n\n @media (min-height: 520px) {\n display: block;\n }\n @media (min-width: 1024px) {\n position: relative;\n width: 500px;\n }\n"])));
11
+ export var SocialLinksBody = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n position: absolute;\n bottom: 30px;\n right: 0;\n padding: 0 10px;\n justify-content: center;\n\n @media (min-width: 1024px) {\n width: initial;\n }\n"], ["\n display: flex;\n position: absolute;\n bottom: 30px;\n right: 0;\n padding: 0 10px;\n justify-content: center;\n\n @media (min-width: 1024px) {\n width: initial;\n }\n"])));
12
+ export var LinkTo = styled.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n margin: 0 15px;\n\n @media (min-width: 1024px) {\n margin-left: 20px;\n margin-right: 0;\n }\n"], ["\n color: ", ";\n margin: 0 15px;\n\n @media (min-width: 1024px) {\n margin-left: 20px;\n margin-right: 0;\n }\n"])), th.color('typoPrimary'));
13
+ export var SocialFooter = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 1024px) {\n font-size: 14px;\n display: block;\n position: absolute;\n color: ", ";\n font-weight: 600;\n bottom: 0;\n right: 0;\n }\n"], ["\n display: none;\n\n @media (min-width: 1024px) {\n font-size: 14px;\n display: block;\n position: absolute;\n color: ", ";\n font-weight: 600;\n bottom: 0;\n right: 0;\n }\n"])), th.color('typoPrimary'));
14
+ export var SocialLinks = function () {
15
+ return (_jsxs(SocialLinksWrapper, { children: [_jsxs(SocialLinksBody, { children: [_jsx(LinkTo, { target: "_blank", href: FACEBOOK_LINK, children: _jsx(Icon, { icon: "facebook" }) }), _jsx(LinkTo, { target: "_blank", href: INSTAGRAM_LINK, children: _jsx(Icon, { icon: "instagram" }) }), _jsx(LinkTo, { target: "_blank", href: LINKEDIN_LINK, children: _jsx(Icon, { icon: "linkedin" }) }), _jsx(LinkTo, { target: "_blank", href: TWITTER_LINK, children: _jsx(Icon, { icon: "twitter" }) })] }), _jsx(SocialFooter, { children: _jsx(Trans, { id: "card.entrustLogisticsEshopProfessionals", message: "Entrust the logistics of your e-shop to professionals." }) })] }));
16
+ };
17
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/ui/Blocks/LoginPage/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import LoginPage from './LoginPage';
2
+ import { LoginPageProps, LoginData } from './types';
3
+ export default LoginPage;
4
+ export type { LoginPageProps, LoginData };
package/ui/Blocks/LoginPage/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import LoginPage from './LoginPage';
2
+ export default LoginPage;
package/ui/Blocks/LoginPage/styles.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
3
+ export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
4
+ export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<({ children, ...rest }: import("../../Elements/Card/types").PropsBody) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
5
+ export declare const MailTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
6
+ export declare const LogoWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
7
+ export declare const MainLogo: import("styled-components").StyledComponent<({ brand, variant, size, width, height, ...rest }: import("../../Elements/Logo/types").LogoProps) => JSX.Element | null, import("@xstyled/system").Theme, {}, never>;
8
+ export declare const Version: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
package/ui/Blocks/LoginPage/styles.js ADDED
@@ -0,0 +1,16 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import styled, { th } from '@xstyled/styled-components';
6
+ import shutterstock from './assets/shutterstock.jpg';
7
+ import { CardBody } from '../../Elements/Card/Card';
8
+ import Logo from '../../Elements/Logo/Logo';
9
+ export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n font-family: ", ";\n flex-grow: 1;\n background: ", ";\n opacity: 1;\n z-index: 1;\n display: flex;\n justify-content: space-between;\n @media (min-width: 1024px) {\n background: transparent url(", ") 50% 0% no-repeat padding-box;\n background-size: cover;\n }\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n font-family: ", ";\n flex-grow: 1;\n background: ", ";\n opacity: 1;\n z-index: 1;\n display: flex;\n justify-content: space-between;\n @media (min-width: 1024px) {\n background: transparent url(", ") 50% 0% no-repeat padding-box;\n background-size: cover;\n }\n"])), th('fonts.primary'), th('colors.bgLightGray'), shutterstock);
10
+ export var LanguageBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n margin: 15px 0;\n align-items: flex-end;\n justify-content: space-between;\n @media (min-width: 1024px) {\n justify-content: flex-end;\n margin: 40px 0;\n }\n"], ["\n display: flex;\n margin: 15px 0;\n align-items: flex-end;\n justify-content: space-between;\n @media (min-width: 1024px) {\n justify-content: flex-end;\n margin: 40px 0;\n }\n"])));
11
+ export var CardBodyWithLanguage = styled(CardBody)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"], ["\n display: flex;\n justify-content: start;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"])));
12
+ export var MailTo = styled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n &:hover {\n color: ", ";\n }\n"], ["\n color: ", ";\n &:hover {\n color: ", ";\n }\n"])), th.color('typoPrimary'), th.color('red1'));
13
+ export var LogoWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin-top: 30px;\n @media (min-width: 1024px) {\n display: block;\n margin-top: 0;\n }\n"], ["\n display: flex;\n justify-content: center;\n margin-top: 30px;\n @media (min-width: 1024px) {\n display: block;\n margin-top: 0;\n }\n"])));
14
+ export var MainLogo = styled(Logo)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 50%;\n height: auto;\n"], ["\n width: 50%;\n height: auto;\n"])));
15
+ export var Version = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: gray;\n position: fixed;\n bottom: 10px;\n right: 10px;\n font-size: 12px;\n"], ["\n color: gray;\n position: fixed;\n bottom: 10px;\n right: 10px;\n font-size: 12px;\n"])));
16
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;