@portnet/ui 3.0.7 → 3.1.2

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 (18) hide show
  1. package/dist/components/buttons/PuiButton.js +104 -13
  2. package/dist/components/common/StyledMuiButton.js +5 -3
  3. package/dist/components/common/StyledMuiTextField.js +52 -22
  4. package/dist/components/inputs/PuiSelect.js +68 -28
  5. package/dist/components/providers/PuiAntdProvider.js +70 -0
  6. package/dist/components/providers/PuiThemeProvider.js +230 -0
  7. package/dist/components/stepper/PuiStepContent.js +66 -0
  8. package/dist/components/stepper/PuiStepper.js +184 -0
  9. package/dist/components/stepper/PuiStepperActions.js +105 -0
  10. package/dist/components/table/PuiModernTable.js +427 -0
  11. package/dist/components-antd-optional/PuiAntdForm.js +328 -0
  12. package/dist/components-antd-optional/PuiAntdStepper.js +317 -0
  13. package/dist/components-antd-optional/PuiAntdTable.js +352 -0
  14. package/dist/config/antdTheme.js +227 -0
  15. package/dist/config/apperance.js +67 -38
  16. package/dist/hooks/useAxios.js +1 -2
  17. package/dist/index.js +42 -0
  18. package/package.json +110 -101
package/dist/components/buttons/PuiButton.js CHANGED
@@ -30,19 +30,73 @@ const BaseMuiButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
30
30
  }, props))))(() => {
31
31
  return {
32
32
  "&.MuiButton-root": {
33
- boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
33
+ borderRadius: "8px",
34
+ textTransform: "none",
35
+ fontWeight: 500,
36
+ fontSize: "14px",
37
+ lineHeight: 1.5,
38
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
39
+ transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
40
+ boxShadow: _apperance.palette.shadow.light,
41
+ minHeight: "40px",
42
+ padding: "8px 16px",
43
+ "&.MuiButton-sizeLarge": {
44
+ minHeight: "48px",
45
+ padding: "12px 24px",
46
+ fontSize: "16px",
47
+ borderRadius: "10px"
48
+ },
49
+ "&.MuiButton-sizeSmall": {
50
+ minHeight: "32px",
51
+ padding: "6px 12px",
52
+ fontSize: "12px",
53
+ borderRadius: "6px"
54
+ },
55
+ "&:hover": {
56
+ boxShadow: _apperance.palette.shadow.medium,
57
+ transform: "translateY(-1px)"
58
+ },
59
+ "&:active": {
60
+ boxShadow: _apperance.palette.shadow.light,
61
+ transform: "translateY(0)"
62
+ },
63
+ "&:focus": {
64
+ outline: "2px solid ".concat(_apperance.palette.primary, "40"),
65
+ outlineOffset: "2px"
66
+ },
67
+ "&:disabled": {
68
+ transform: "none",
69
+ boxShadow: "none",
70
+ opacity: 0.6
71
+ }
34
72
  }
35
73
  };
36
74
  });
37
75
  const PrimaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseMuiButton, _objectSpread({
38
76
  ref: ref,
39
- variant: "outlined"
77
+ variant: "contained"
40
78
  }, props))))(() => {
41
79
  return {
42
80
  "&.MuiButton-root": {
43
- backgroundColor: _apperance.palette.primary,
44
- border: "2px solid ".concat(_apperance.palette.primary),
45
- color: _apperance.palette.white
81
+ background: "linear-gradient(135deg, ".concat(_apperance.palette.primary, " 0%, ").concat(_apperance.palette.blue.dark, " 100%)"),
82
+ border: "none",
83
+ color: _apperance.palette.white,
84
+ boxShadow: "0 2px 8px ".concat(_apperance.palette.primary, "40"),
85
+ "&:hover": {
86
+ background: "linear-gradient(135deg, ".concat(_apperance.palette.blue.dark, " 0%, ").concat(_apperance.palette.blue.darker, " 100%)"),
87
+ boxShadow: "0 4px 12px ".concat(_apperance.palette.primary, "50")
88
+ },
89
+ "&:active": {
90
+ background: "linear-gradient(135deg, ".concat(_apperance.palette.blue.darker, " 0%, ").concat(_apperance.palette.blue.darker, " 100%)")
91
+ },
92
+ "&:focus": {
93
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "30, 0 2px 8px ").concat(_apperance.palette.primary, "40")
94
+ },
95
+ "&:disabled": {
96
+ background: _apperance.palette.gray[300],
97
+ color: _apperance.palette.gray[500],
98
+ boxShadow: "none"
99
+ }
46
100
  }
47
101
  };
48
102
  });
@@ -52,21 +106,58 @@ const SecondaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props
52
106
  }, props))))(() => {
53
107
  return {
54
108
  "&.MuiButton-root": {
55
- backgroundColor: _apperance.palette.secondary,
56
- border: "2px solid ".concat(_apperance.palette.gray.dark),
57
- color: _apperance.palette.gray.darker
109
+ backgroundColor: _apperance.palette.white,
110
+ border: "2px solid ".concat(_apperance.palette.border.main),
111
+ color: _apperance.palette.gray[700],
112
+ boxShadow: "none",
113
+ "&:hover": {
114
+ backgroundColor: _apperance.palette.gray[50],
115
+ borderColor: _apperance.palette.primary,
116
+ color: _apperance.palette.primary,
117
+ boxShadow: "0 2px 8px ".concat(_apperance.palette.primary, "20")
118
+ },
119
+ "&:active": {
120
+ backgroundColor: _apperance.palette.gray[100],
121
+ borderColor: _apperance.palette.blue.dark
122
+ },
123
+ "&:focus": {
124
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20"),
125
+ borderColor: _apperance.palette.primary
126
+ },
127
+ "&:disabled": {
128
+ backgroundColor: _apperance.palette.gray[50],
129
+ borderColor: _apperance.palette.gray[200],
130
+ color: _apperance.palette.gray[400]
131
+ }
58
132
  }
59
133
  };
60
134
  });
61
135
  const TertiaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseMuiButton, _objectSpread({
62
136
  ref: ref,
63
- variant: "outlined"
137
+ variant: "text"
64
138
  }, props))))(() => {
65
139
  return {
66
140
  "&.MuiButton-root": {
67
- backgroundColor: _apperance.palette.white,
68
- border: "2px solid ".concat(_apperance.palette.primary),
69
- color: _apperance.palette.primary
141
+ backgroundColor: "transparent",
142
+ border: "none",
143
+ color: _apperance.palette.primary,
144
+ boxShadow: "none",
145
+ "&:hover": {
146
+ backgroundColor: "".concat(_apperance.palette.primary, "10"),
147
+ color: _apperance.palette.blue.dark,
148
+ boxShadow: "none"
149
+ },
150
+ "&:active": {
151
+ backgroundColor: "".concat(_apperance.palette.primary, "15")
152
+ },
153
+ "&:focus": {
154
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20"),
155
+ backgroundColor: "".concat(_apperance.palette.primary, "08")
156
+ },
157
+ "&:disabled": {
158
+ backgroundColor: "transparent",
159
+ color: _apperance.palette.gray[400]
160
+ }
70
161
  }
71
162
  };
72
163
  });
@@ -103,7 +194,7 @@ const PuiButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
103
194
  id,
104
195
  className,
105
196
  sx,
106
- size: "small",
197
+ size: "medium",
107
198
  disabled,
108
199
  loading,
109
200
  loadingPosition,
package/dist/components/common/StyledMuiButton.js CHANGED
@@ -33,12 +33,14 @@ const StyledMuiButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_ref,
33
33
  }))(() => {
34
34
  return {
35
35
  "&.MuiButton-root": {
36
- fontSize: "0.75rem",
36
+ fontSize: "0.875rem",
37
37
  lineSpacing: "-0.03em",
38
38
  textTransform: "initial",
39
- height: "25px",
40
- padding: "0px 12px",
39
+ height: "36px",
40
+ padding: "0px 16px",
41
41
  fontWeight: "600",
42
+ borderRadius: "6px",
43
+ transition: "all 0.2s ease-in-out",
42
44
  "&.Mui-disabled": {
43
45
  opacity: 0.7
44
46
  }
package/dist/components/common/StyledMuiTextField.js CHANGED
@@ -66,15 +66,15 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
66
66
  lineSpacing: "-0.03em",
67
67
  position: "initial",
68
68
  transform: "none",
69
- fontSize: "0.8rem",
69
+ fontSize: "0.875rem",
70
70
  fontWeight: "600",
71
- marginBottom: "4px",
72
- color: _apperance.palette.gray.darker,
73
- "&.Mui-focused ": {
71
+ marginBottom: "6px",
72
+ color: _apperance.palette.gray[700],
73
+ "&.Mui-focused": {
74
74
  color: _apperance.palette.primary
75
75
  },
76
76
  "&.Mui-disabled": {
77
- color: _apperance.palette.gray.darker
77
+ color: _apperance.palette.gray[500]
78
78
  },
79
79
  "&.Mui-error": {
80
80
  color: _apperance.palette.error
@@ -82,35 +82,65 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
82
82
  },
83
83
  "& .MuiInputBase-root": {
84
84
  backgroundColor: _apperance.palette.white,
85
- border: "2px solid ".concat(_apperance.palette.gray.dark),
86
- borderRadius: "5px",
85
+ border: "2px solid ".concat(_apperance.palette.border.light),
86
+ borderRadius: "8px",
87
+ minHeight: "40px",
88
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
89
+ transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
90
+ "&:hover": {
91
+ borderColor: _apperance.palette.gray[400],
92
+ boxShadow: "0 0 0 2px ".concat(_apperance.palette.primary, "10")
93
+ },
87
94
  "&.MuiInputBase-multiline": {
88
- padding: "8px 0"
95
+ padding: "8px 0",
96
+ minHeight: "auto"
89
97
  },
90
- "&.Mui-focused ": {
91
- border: "2px solid ".concat(_apperance.palette.primary)
98
+ "&.Mui-focused": {
99
+ border: "2px solid ".concat(_apperance.palette.primary),
100
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20"),
101
+ outline: "none"
92
102
  },
93
- "&.Mui-error ": {
103
+ "&.Mui-error": {
94
104
  border: "2px solid ".concat(_apperance.palette.error),
95
- backgroundColor: _apperance.palette.background.error
105
+ backgroundColor: _apperance.palette.background.error,
106
+ boxShadow: "0 0 0 2px ".concat(_apperance.palette.error, "20")
96
107
  },
97
- "&.Mui-disabled ": {
108
+ "&.Mui-disabled": {
98
109
  "& input": {
99
- color: "".concat(_apperance.palette.gray.darker),
100
- WebkitTextFillColor: "".concat(_apperance.palette.gray.darker)
110
+ color: _apperance.palette.gray[400],
111
+ WebkitTextFillColor: _apperance.palette.gray[400]
101
112
  },
102
- backgroundColor: "".concat(_apperance.palette.secondary)
113
+ backgroundColor: _apperance.palette.gray[50],
114
+ borderColor: _apperance.palette.gray[200],
115
+ cursor: "not-allowed"
103
116
  },
104
117
  "& .MuiInputBase-input": {
105
- lineHeight: "1",
106
- padding: "1px 6px",
107
- fontSize: "0.7rem"
118
+ lineHeight: "1.5",
119
+ padding: "10px 14px",
120
+ fontSize: "14px",
121
+ fontWeight: 400,
122
+ "&::placeholder": {
123
+ color: _apperance.palette.gray[400],
124
+ opacity: 1,
125
+ fontStyle: "italic"
126
+ }
127
+ },
128
+ "& .MuiInputBase-inputSizeSmall": {
129
+ padding: "8px 12px",
130
+ fontSize: "12px"
131
+ },
132
+ "& .MuiInputAdornment-root": {
133
+ color: _apperance.palette.gray[500],
134
+ "& .MuiSvgIcon-root": {
135
+ fontSize: "1.2rem"
136
+ }
108
137
  }
109
138
  },
110
139
  "& .MuiFormHelperText-root": {
111
- fontWeight: "bold",
112
- fontSize: ".7rem",
113
- color: _apperance.palette.gray.darker
140
+ fontWeight: "500",
141
+ fontSize: "0.75rem",
142
+ marginTop: "4px",
143
+ color: _apperance.palette.gray[600]
114
144
  },
115
145
  "& fieldset": {
116
146
  display: "none"
package/dist/components/inputs/PuiSelect.js CHANGED
@@ -40,10 +40,10 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
40
40
  "&.MuiFormControl-root": {
41
41
  "& .MuiSelect-select": {
42
42
  minHeight: "auto",
43
- height: "1.4375em",
43
+ height: "2.5em",
44
44
  display: "flex",
45
45
  alignItems: "center",
46
- lineHeight: "1"
46
+ lineHeight: "1.5"
47
47
  },
48
48
  "&.required .MuiInputBase-root": {
49
49
  backgroundColor: _apperance.palette.background.required
@@ -53,16 +53,15 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
53
53
  lineSpacing: "-0.03em",
54
54
  position: "initial",
55
55
  transform: "none",
56
- fontSize: "0.8rem",
56
+ fontSize: "0.875rem",
57
57
  fontWeight: "600",
58
- marginBottom: "4px",
59
- color: _apperance.palette.gray.darker,
60
- "&.Mui-focused ": {
61
- lineHeight: "1.4375em",
58
+ marginBottom: "6px",
59
+ color: _apperance.palette.gray[700],
60
+ "&.Mui-focused": {
62
61
  color: _apperance.palette.primary
63
62
  },
64
63
  "&.Mui-disabled": {
65
- color: _apperance.palette.gray.darker
64
+ color: _apperance.palette.gray[500]
66
65
  },
67
66
  "&.Mui-error": {
68
67
  color: _apperance.palette.error
@@ -70,30 +69,50 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
70
69
  },
71
70
  "& .MuiInputBase-root": {
72
71
  backgroundColor: _apperance.palette.white,
73
- border: "2px solid ".concat(_apperance.palette.gray.dark),
74
- borderRadius: "5px",
75
- "&.Mui-focused ": {
76
- border: "2px solid ".concat(_apperance.palette.primary)
72
+ border: "2px solid ".concat(_apperance.palette.border.light),
73
+ borderRadius: "8px",
74
+ minHeight: "40px",
75
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
76
+ transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
77
+ "&:hover": {
78
+ borderColor: _apperance.palette.gray[400],
79
+ boxShadow: "0 0 0 2px ".concat(_apperance.palette.primary, "10")
77
80
  },
78
- "&.Mui-error ": {
81
+ "&.Mui-focused": {
82
+ border: "2px solid ".concat(_apperance.palette.primary),
83
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20"),
84
+ outline: "none"
85
+ },
86
+ "&.Mui-error": {
79
87
  border: "2px solid ".concat(_apperance.palette.error),
80
- backgroundColor: _apperance.palette.background.error
88
+ backgroundColor: _apperance.palette.background.error,
89
+ boxShadow: "0 0 0 2px ".concat(_apperance.palette.error, "20")
81
90
  },
82
- "&.Mui-disabled ": {
83
- backgroundColor: "".concat(_apperance.palette.secondary)
91
+ "&.Mui-disabled": {
92
+ backgroundColor: _apperance.palette.gray[50],
93
+ borderColor: _apperance.palette.gray[200],
94
+ cursor: "not-allowed"
84
95
  },
85
96
  "& .MuiInputBase-input": {
86
- padding: "1px 6px",
87
- fontSize: "0.7rem"
97
+ padding: "10px 14px",
98
+ fontSize: "14px",
99
+ fontWeight: 400
88
100
  },
89
101
  "& .MuiSvgIcon-root": {
90
- marginRight: "2px"
102
+ marginRight: "12px",
103
+ color: _apperance.palette.gray[500],
104
+ fontSize: "1.2rem",
105
+ transition: "transform 0.2s ease"
106
+ },
107
+ "&.Mui-focused .MuiSvgIcon-root": {
108
+ transform: "rotate(180deg)"
91
109
  }
92
110
  },
93
111
  "& .MuiFormHelperText-root": {
94
- fontWeight: "bold",
95
- fontSize: ".7rem",
96
- color: _apperance.palette.gray.darker
112
+ fontWeight: "500",
113
+ fontSize: "0.75rem",
114
+ marginTop: "4px",
115
+ color: _apperance.palette.gray[600]
97
116
  },
98
117
  "& fieldset": {
99
118
  display: "none"
@@ -168,15 +187,36 @@ const PuiStandardSelect = _ref => {
168
187
  },
169
188
  MenuProps: {
170
189
  sx: {
190
+ "& .MuiPaper-root": {
191
+ marginTop: "8px",
192
+ borderRadius: "8px",
193
+ boxShadow: _apperance.palette.shadow.medium,
194
+ border: "1px solid ".concat(_apperance.palette.border.light),
195
+ overflow: "hidden"
196
+ },
171
197
  "& .MuiMenu-list": {
172
- padding: 0,
173
- "& .MuiMenuItem-root:not(:last-child)": {
174
- borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
175
- },
198
+ padding: "6px",
176
199
  "& .MuiMenuItem-root": {
177
- fontSize: 13,
200
+ fontSize: "14px",
201
+ fontWeight: 400,
202
+ padding: "10px 14px",
203
+ margin: "2px 0",
204
+ borderRadius: "6px",
178
205
  height: "fit-content",
179
- minHeight: "auto"
206
+ minHeight: "auto",
207
+ transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
208
+ "&:hover": {
209
+ backgroundColor: "".concat(_apperance.palette.primary, "08"),
210
+ color: _apperance.palette.primary
211
+ },
212
+ "&.Mui-selected": {
213
+ backgroundColor: "".concat(_apperance.palette.primary, "15"),
214
+ color: _apperance.palette.primary,
215
+ fontWeight: 500,
216
+ "&:hover": {
217
+ backgroundColor: "".concat(_apperance.palette.primary, "20")
218
+ }
219
+ }
180
220
  }
181
221
  }
182
222
  }
package/dist/components/providers/PuiAntdProvider.js ADDED
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _jsxRuntime = require("react/jsx-runtime");
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ // Import conditionnel d'Ant Design
11
+ let ConfigProvider, frFR, antdTheme;
12
+ try {
13
+ const antd = require('antd');
14
+ ConfigProvider = antd.ConfigProvider;
15
+ frFR = require('antd/locale/fr_FR').default || require('antd/locale/fr_FR');
16
+ antdTheme = require('../../config/antdTheme').antdTheme;
17
+ } catch (error) {
18
+ console.warn('Ant Design not installed, PuiAntdProvider will render children without styling');
19
+ }
20
+
21
+ /**
22
+ * Provider Ant Design configuré avec le thème personnalisé basé sur les maquettes
23
+ */
24
+ const PuiAntdProvider = _ref => {
25
+ let {
26
+ children
27
+ } = _ref;
28
+ // Si Ant Design n'est pas disponible, retourner les enfants sans wrapper
29
+ if (!ConfigProvider) {
30
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
31
+ children: children
32
+ });
33
+ }
34
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfigProvider, {
35
+ theme: antdTheme,
36
+ locale: frFR,
37
+ autoInsertSpaceInButton: false,
38
+ input: {
39
+ autoComplete: 'off'
40
+ },
41
+ form: {
42
+ requiredMark: 'optional',
43
+ validateMessages: {
44
+ required: 'Ce champ est obligatoire',
45
+ types: {
46
+ email: 'Format email invalide',
47
+ number: 'Format numérique invalide'
48
+ },
49
+ number: {
50
+ range: 'La valeur doit être entre ${min} et ${max}'
51
+ }
52
+ }
53
+ },
54
+ pagination: {
55
+ showSizeChanger: true,
56
+ showQuickJumper: true,
57
+ showTotal: (total, range) => "".concat(range[0], "-").concat(range[1], " sur ").concat(total, " \xE9l\xE9ments")
58
+ },
59
+ table: {
60
+ size: 'middle'
61
+ },
62
+ button: {
63
+ style: {
64
+ fontWeight: 500
65
+ }
66
+ },
67
+ children: children
68
+ });
69
+ };
70
+ var _default = exports.default = PuiAntdProvider;