@portnet/ui 2.0.2 → 2.0.5
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/dist/components/buttons/PuiButton.js +80 -72
- package/dist/components/common/StyledMuiTextField.js +53 -18
- package/dist/components/inputs/PuiFileField.js +82 -10
- package/dist/components/others/PuiDialog.js +18 -9
- package/dist/components/others/PuiSection.js +11 -11
- package/dist/components/table/PuiTable.js +220 -481
- package/dist/components/ui/pages/general/PuiSearchPage.js +172 -142
- package/dist/config/ThemeProvider.js +32 -0
- package/dist/config/styleUtils.js +135 -0
- package/dist/config/theme.js +183 -0
- package/dist/hooks/useAxios.js +3 -1
- package/dist/index.js +63 -0
- package/package.json +2 -1
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.theme = exports.commonStyles = void 0;
|
|
7
|
+
require("core-js/modules/es.parse-int.js");
|
|
8
|
+
var _styles = require("@mui/material/styles");
|
|
9
|
+
var _apperance = require("./apperance");
|
|
10
|
+
// Theme.js - Fichier de configuration de thème partagé pour tous les composants
|
|
11
|
+
|
|
12
|
+
// Variables de style communes
|
|
13
|
+
const commonStyles = exports.commonStyles = {
|
|
14
|
+
// Couleurs
|
|
15
|
+
colors: {
|
|
16
|
+
headerBackground: '#f5f8fa',
|
|
17
|
+
rowBackgroundOdd: '#ffffff',
|
|
18
|
+
rowBackgroundEven: '#F6F9FF',
|
|
19
|
+
hoverBackground: 'rgba(149, 199, 252, 0.15)',
|
|
20
|
+
selectedBackground: 'rgba(149, 199, 252, 0.25)',
|
|
21
|
+
selectedHoverBackground: 'rgba(149, 199, 252, 0.35)',
|
|
22
|
+
borderLight: 'rgba(224, 224, 224, 0.3)',
|
|
23
|
+
borderMedium: 'rgba(224, 224, 224, 0.5)',
|
|
24
|
+
borderFocus: 'rgba(149, 199, 252, 0.3)',
|
|
25
|
+
shadowLight: 'rgba(0, 0, 0, 0.05)',
|
|
26
|
+
shadowMedium: 'rgba(0, 0, 0, 0.08)'
|
|
27
|
+
},
|
|
28
|
+
// Typographie
|
|
29
|
+
typography: {
|
|
30
|
+
fontSizeSmall: '0.8em',
|
|
31
|
+
fontSizeDefault: '0.85em',
|
|
32
|
+
fontSizeMedium: '0.9em',
|
|
33
|
+
letterSpacing: '0.5px',
|
|
34
|
+
lineHeight: '1.3em'
|
|
35
|
+
},
|
|
36
|
+
// Espacement
|
|
37
|
+
spacing: {
|
|
38
|
+
cellPaddingY: '6px',
|
|
39
|
+
cellPaddingX: '12px',
|
|
40
|
+
headerPadding: '8px 0'
|
|
41
|
+
},
|
|
42
|
+
// Dimensions
|
|
43
|
+
sizes: {
|
|
44
|
+
borderRadius: '8px',
|
|
45
|
+
buttonHeight: '30px',
|
|
46
|
+
headerHeight: '48px',
|
|
47
|
+
footerHeight: '40px',
|
|
48
|
+
rowHeight: '40px'
|
|
49
|
+
},
|
|
50
|
+
// Transitions
|
|
51
|
+
transitions: {
|
|
52
|
+
hover: 'background-color 0.2s ease',
|
|
53
|
+
fade: 'opacity 0.3s ease-in-out'
|
|
54
|
+
},
|
|
55
|
+
// Ombres
|
|
56
|
+
shadows: {
|
|
57
|
+
elevation: '0 6px 16px rgba(0, 0, 0, 0.08)',
|
|
58
|
+
subtle: '2px 0 5px rgba(0, 0, 0, 0.05)'
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
// Créer un thème Material-UI basé sur notre configuration
|
|
63
|
+
const theme = exports.theme = (0, _styles.createTheme)({
|
|
64
|
+
palette: {
|
|
65
|
+
primary: {
|
|
66
|
+
main: _apperance.palette.primary
|
|
67
|
+
},
|
|
68
|
+
secondary: {
|
|
69
|
+
main: _apperance.palette.secondary
|
|
70
|
+
},
|
|
71
|
+
info: {
|
|
72
|
+
main: _apperance.palette.info
|
|
73
|
+
},
|
|
74
|
+
background: {
|
|
75
|
+
default: _apperance.palette.white,
|
|
76
|
+
paper: _apperance.palette.white
|
|
77
|
+
},
|
|
78
|
+
text: {
|
|
79
|
+
primary: _apperance.palette.black,
|
|
80
|
+
secondary: _apperance.palette.gray.dark
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
typography: {
|
|
84
|
+
fontSize: 14,
|
|
85
|
+
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
|
|
86
|
+
},
|
|
87
|
+
shape: {
|
|
88
|
+
borderRadius: parseInt(commonStyles.sizes.borderRadius)
|
|
89
|
+
},
|
|
90
|
+
components: {
|
|
91
|
+
MuiButton: {
|
|
92
|
+
styleOverrides: {
|
|
93
|
+
root: {
|
|
94
|
+
textTransform: 'none',
|
|
95
|
+
borderRadius: commonStyles.sizes.borderRadius,
|
|
96
|
+
transition: commonStyles.transitions.hover
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
MuiPaper: {
|
|
101
|
+
styleOverrides: {
|
|
102
|
+
root: {
|
|
103
|
+
borderRadius: commonStyles.sizes.borderRadius,
|
|
104
|
+
boxShadow: commonStyles.shadows.elevation
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
MuiTableCell: {
|
|
109
|
+
styleOverrides: {
|
|
110
|
+
root: {
|
|
111
|
+
padding: "".concat(commonStyles.spacing.cellPaddingY, " ").concat(commonStyles.spacing.cellPaddingX),
|
|
112
|
+
fontSize: commonStyles.typography.fontSizeDefault
|
|
113
|
+
},
|
|
114
|
+
head: {
|
|
115
|
+
backgroundColor: commonStyles.colors.headerBackground,
|
|
116
|
+
fontWeight: 600,
|
|
117
|
+
textTransform: 'uppercase',
|
|
118
|
+
letterSpacing: commonStyles.typography.letterSpacing
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
MuiTableRow: {
|
|
123
|
+
styleOverrides: {
|
|
124
|
+
root: {
|
|
125
|
+
transition: commonStyles.transitions.hover,
|
|
126
|
+
'&:nth-of-type(odd)': {
|
|
127
|
+
backgroundColor: commonStyles.colors.rowBackgroundOdd
|
|
128
|
+
},
|
|
129
|
+
'&:nth-of-type(even)': {
|
|
130
|
+
backgroundColor: commonStyles.colors.rowBackgroundEven
|
|
131
|
+
},
|
|
132
|
+
'&:hover': {
|
|
133
|
+
backgroundColor: commonStyles.colors.hoverBackground
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
MuiCheckbox: {
|
|
139
|
+
styleOverrides: {
|
|
140
|
+
root: {
|
|
141
|
+
padding: '4px'
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
MuiTextField: {
|
|
146
|
+
styleOverrides: {
|
|
147
|
+
root: {
|
|
148
|
+
'& .MuiOutlinedInput-root': {
|
|
149
|
+
borderRadius: commonStyles.sizes.borderRadius
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
MuiSelect: {
|
|
155
|
+
styleOverrides: {
|
|
156
|
+
root: {
|
|
157
|
+
borderRadius: commonStyles.sizes.borderRadius
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
MuiPagination: {
|
|
162
|
+
styleOverrides: {
|
|
163
|
+
root: {
|
|
164
|
+
'& .MuiPaginationItem-root': {
|
|
165
|
+
margin: '0 2px',
|
|
166
|
+
minWidth: '30px',
|
|
167
|
+
height: '30px',
|
|
168
|
+
borderRadius: '4px',
|
|
169
|
+
fontSize: commonStyles.typography.fontSizeSmall,
|
|
170
|
+
'&.Mui-selected': {
|
|
171
|
+
backgroundColor: _apperance.palette.primary,
|
|
172
|
+
color: _apperance.palette.white,
|
|
173
|
+
fontWeight: 'bold'
|
|
174
|
+
},
|
|
175
|
+
'&:hover': {
|
|
176
|
+
backgroundColor: commonStyles.colors.hoverBackground
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
});
|
package/dist/hooks/useAxios.js
CHANGED
|
@@ -9,7 +9,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
9
9
|
const useAxios = function useAxios(token) {
|
|
10
10
|
let secret = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
11
11
|
let baseURL = arguments.length > 2 ? arguments[2] : undefined;
|
|
12
|
-
|
|
12
|
+
// Vérifier si axios est un objet ou une fonction avec une propriété default
|
|
13
|
+
const axiosToUse = _axios.default.default ? _axios.default.default : _axios.default;
|
|
14
|
+
const axiosInstance = axiosToUse.create({
|
|
13
15
|
baseURL: baseURL,
|
|
14
16
|
headers: {
|
|
15
17
|
Authorization: secret ? token : "Bearer ".concat(token)
|
package/dist/index.js
CHANGED
|
@@ -267,12 +267,72 @@ Object.defineProperty(exports, "PuiTextField", {
|
|
|
267
267
|
return _PuiTextField.default;
|
|
268
268
|
}
|
|
269
269
|
});
|
|
270
|
+
Object.defineProperty(exports, "PuiThemeProvider", {
|
|
271
|
+
enumerable: true,
|
|
272
|
+
get: function get() {
|
|
273
|
+
return _ThemeProvider.default;
|
|
274
|
+
}
|
|
275
|
+
});
|
|
270
276
|
Object.defineProperty(exports, "PuiTooltip", {
|
|
271
277
|
enumerable: true,
|
|
272
278
|
get: function get() {
|
|
273
279
|
return _PuiTooltip.default;
|
|
274
280
|
}
|
|
275
281
|
});
|
|
282
|
+
Object.defineProperty(exports, "applyImprovedStyles", {
|
|
283
|
+
enumerable: true,
|
|
284
|
+
get: function get() {
|
|
285
|
+
return _styleUtils.applyImprovedStyles;
|
|
286
|
+
}
|
|
287
|
+
});
|
|
288
|
+
Object.defineProperty(exports, "commonStyles", {
|
|
289
|
+
enumerable: true,
|
|
290
|
+
get: function get() {
|
|
291
|
+
return _theme.commonStyles;
|
|
292
|
+
}
|
|
293
|
+
});
|
|
294
|
+
Object.defineProperty(exports, "getActionStyles", {
|
|
295
|
+
enumerable: true,
|
|
296
|
+
get: function get() {
|
|
297
|
+
return _styleUtils.getActionStyles;
|
|
298
|
+
}
|
|
299
|
+
});
|
|
300
|
+
Object.defineProperty(exports, "getContainerStyles", {
|
|
301
|
+
enumerable: true,
|
|
302
|
+
get: function get() {
|
|
303
|
+
return _styleUtils.getContainerStyles;
|
|
304
|
+
}
|
|
305
|
+
});
|
|
306
|
+
Object.defineProperty(exports, "getFormElementStyles", {
|
|
307
|
+
enumerable: true,
|
|
308
|
+
get: function get() {
|
|
309
|
+
return _styleUtils.getFormElementStyles;
|
|
310
|
+
}
|
|
311
|
+
});
|
|
312
|
+
Object.defineProperty(exports, "getHeaderStyles", {
|
|
313
|
+
enumerable: true,
|
|
314
|
+
get: function get() {
|
|
315
|
+
return _styleUtils.getHeaderStyles;
|
|
316
|
+
}
|
|
317
|
+
});
|
|
318
|
+
Object.defineProperty(exports, "getLoadingStyles", {
|
|
319
|
+
enumerable: true,
|
|
320
|
+
get: function get() {
|
|
321
|
+
return _styleUtils.getLoadingStyles;
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
Object.defineProperty(exports, "getStripedRowStyles", {
|
|
325
|
+
enumerable: true,
|
|
326
|
+
get: function get() {
|
|
327
|
+
return _styleUtils.getStripedRowStyles;
|
|
328
|
+
}
|
|
329
|
+
});
|
|
330
|
+
Object.defineProperty(exports, "theme", {
|
|
331
|
+
enumerable: true,
|
|
332
|
+
get: function get() {
|
|
333
|
+
return _theme.theme;
|
|
334
|
+
}
|
|
335
|
+
});
|
|
276
336
|
Object.defineProperty(exports, "useAlert", {
|
|
277
337
|
enumerable: true,
|
|
278
338
|
get: function get() {
|
|
@@ -332,4 +392,7 @@ var _PuiDefaultPage = _interopRequireDefault(require("./components/ui/pages/gene
|
|
|
332
392
|
var _PuiSearchPage = _interopRequireDefault(require("./components/ui/pages/general/PuiSearchPage"));
|
|
333
393
|
var _useAlert = _interopRequireDefault(require("./hooks/useAlert"));
|
|
334
394
|
var _useQuery = _interopRequireDefault(require("./hooks/useQuery"));
|
|
395
|
+
var _ThemeProvider = _interopRequireDefault(require("./config/ThemeProvider"));
|
|
396
|
+
var _theme = require("./config/theme");
|
|
397
|
+
var _styleUtils = require("./config/styleUtils");
|
|
335
398
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@portnet/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.5",
|
|
4
4
|
"description": "Portnet UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"@testing-library/user-event": "^13.5.0",
|
|
28
28
|
"ajv": "^6.12.6",
|
|
29
29
|
"ajv-keywords": "^3.5.2",
|
|
30
|
+
"antd": "^5.24.3",
|
|
30
31
|
"axios": "^0.27.2",
|
|
31
32
|
"formik": "^2.2.9",
|
|
32
33
|
"lodash": "^4.17.21",
|