@portnet/ui 3.0.7 → 3.1.1

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.
@@ -30,7 +30,15 @@ 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
+ boxShadow: _apperance.palette.shadow.light,
34
+ "&:hover": {
35
+ boxShadow: _apperance.palette.shadow.medium,
36
+ transform: "translateY(-1px)"
37
+ },
38
+ "&:active": {
39
+ boxShadow: _apperance.palette.shadow.light,
40
+ transform: "translateY(0)"
41
+ }
34
42
  }
35
43
  };
36
44
  });
@@ -41,8 +49,15 @@ const PrimaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
41
49
  return {
42
50
  "&.MuiButton-root": {
43
51
  backgroundColor: _apperance.palette.primary,
44
- border: "2px solid ".concat(_apperance.palette.primary),
45
- color: _apperance.palette.white
52
+ border: "1px solid ".concat(_apperance.palette.primary),
53
+ color: _apperance.palette.white,
54
+ "&:hover": {
55
+ backgroundColor: _apperance.palette.blue.dark,
56
+ borderColor: _apperance.palette.blue.dark
57
+ },
58
+ "&:focus": {
59
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.blue.light)
60
+ }
46
61
  }
47
62
  };
48
63
  });
@@ -52,9 +67,16 @@ const SecondaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props
52
67
  }, props))))(() => {
53
68
  return {
54
69
  "&.MuiButton-root": {
55
- backgroundColor: _apperance.palette.secondary,
56
- border: "2px solid ".concat(_apperance.palette.gray.dark),
57
- color: _apperance.palette.gray.darker
70
+ backgroundColor: _apperance.palette.gray[50],
71
+ border: "1px solid ".concat(_apperance.palette.gray[300]),
72
+ color: _apperance.palette.gray[700],
73
+ "&:hover": {
74
+ backgroundColor: _apperance.palette.gray[100],
75
+ borderColor: _apperance.palette.gray[400]
76
+ },
77
+ "&:focus": {
78
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.gray[200])
79
+ }
58
80
  }
59
81
  };
60
82
  });
@@ -64,9 +86,15 @@ const TertiaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
64
86
  }, props))))(() => {
65
87
  return {
66
88
  "&.MuiButton-root": {
67
- backgroundColor: _apperance.palette.white,
68
- border: "2px solid ".concat(_apperance.palette.primary),
69
- color: _apperance.palette.primary
89
+ backgroundColor: "transparent",
90
+ border: "1px solid ".concat(_apperance.palette.primary),
91
+ color: _apperance.palette.primary,
92
+ "&:hover": {
93
+ backgroundColor: _apperance.palette.blue.light
94
+ },
95
+ "&:focus": {
96
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.blue.light)
97
+ }
70
98
  }
71
99
  };
72
100
  });
@@ -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
  }
@@ -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,46 @@ 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: "1px solid ".concat(_apperance.palette.border.main),
86
+ borderRadius: "6px",
87
+ transition: "all 0.2s ease-in-out",
88
+ "&:hover": {
89
+ borderColor: _apperance.palette.gray[400]
90
+ },
87
91
  "&.MuiInputBase-multiline": {
88
92
  padding: "8px 0"
89
93
  },
90
- "&.Mui-focused ": {
91
- border: "2px solid ".concat(_apperance.palette.primary)
94
+ "&.Mui-focused": {
95
+ border: "1px solid ".concat(_apperance.palette.primary),
96
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.blue.light)
92
97
  },
93
- "&.Mui-error ": {
94
- border: "2px solid ".concat(_apperance.palette.error),
98
+ "&.Mui-error": {
99
+ border: "1px solid ".concat(_apperance.palette.error),
95
100
  backgroundColor: _apperance.palette.background.error
96
101
  },
97
- "&.Mui-disabled ": {
102
+ "&.Mui-disabled": {
98
103
  "& input": {
99
- color: "".concat(_apperance.palette.gray.darker),
100
- WebkitTextFillColor: "".concat(_apperance.palette.gray.darker)
104
+ color: _apperance.palette.gray[600],
105
+ WebkitTextFillColor: _apperance.palette.gray[600]
101
106
  },
102
- backgroundColor: "".concat(_apperance.palette.secondary)
107
+ backgroundColor: _apperance.palette.gray[50],
108
+ borderColor: _apperance.palette.gray[200]
103
109
  },
104
110
  "& .MuiInputBase-input": {
105
- lineHeight: "1",
106
- padding: "1px 6px",
107
- fontSize: "0.7rem"
111
+ lineHeight: "1.5",
112
+ padding: "8px 12px",
113
+ fontSize: "0.875rem",
114
+ "&::placeholder": {
115
+ color: _apperance.palette.gray[400],
116
+ opacity: 1
117
+ }
108
118
  }
109
119
  },
110
120
  "& .MuiFormHelperText-root": {
111
- fontWeight: "bold",
112
- fontSize: ".7rem",
113
- color: _apperance.palette.gray.darker
121
+ fontWeight: "500",
122
+ fontSize: "0.75rem",
123
+ marginTop: "4px",
124
+ color: _apperance.palette.gray[600]
114
125
  },
115
126
  "& fieldset": {
116
127
  display: "none"
@@ -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,38 @@ 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: "1px solid ".concat(_apperance.palette.border.main),
73
+ borderRadius: "6px",
74
+ transition: "all 0.2s ease-in-out",
75
+ "&:hover": {
76
+ borderColor: _apperance.palette.gray[400]
77
77
  },
78
- "&.Mui-error ": {
79
- border: "2px solid ".concat(_apperance.palette.error),
78
+ "&.Mui-focused": {
79
+ border: "1px solid ".concat(_apperance.palette.primary),
80
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.blue.light)
81
+ },
82
+ "&.Mui-error": {
83
+ border: "1px solid ".concat(_apperance.palette.error),
80
84
  backgroundColor: _apperance.palette.background.error
81
85
  },
82
- "&.Mui-disabled ": {
83
- backgroundColor: "".concat(_apperance.palette.secondary)
86
+ "&.Mui-disabled": {
87
+ backgroundColor: _apperance.palette.gray[50],
88
+ borderColor: _apperance.palette.gray[200]
84
89
  },
85
90
  "& .MuiInputBase-input": {
86
- padding: "1px 6px",
87
- fontSize: "0.7rem"
91
+ padding: "8px 12px",
92
+ fontSize: "0.875rem"
88
93
  },
89
94
  "& .MuiSvgIcon-root": {
90
- marginRight: "2px"
95
+ marginRight: "8px",
96
+ color: _apperance.palette.gray[500]
91
97
  }
92
98
  },
93
99
  "& .MuiFormHelperText-root": {
94
- fontWeight: "bold",
95
- fontSize: ".7rem",
96
- color: _apperance.palette.gray.darker
100
+ fontWeight: "500",
101
+ fontSize: "0.75rem",
102
+ marginTop: "4px",
103
+ color: _apperance.palette.gray[600]
97
104
  },
98
105
  "& fieldset": {
99
106
  display: "none"
@@ -168,15 +175,32 @@ const PuiStandardSelect = _ref => {
168
175
  },
169
176
  MenuProps: {
170
177
  sx: {
178
+ "& .MuiPaper-root": {
179
+ marginTop: "4px",
180
+ borderRadius: "6px",
181
+ boxShadow: _apperance.palette.shadow.medium,
182
+ border: "1px solid ".concat(_apperance.palette.border.light)
183
+ },
171
184
  "& .MuiMenu-list": {
172
- padding: 0,
185
+ padding: "4px 0",
173
186
  "& .MuiMenuItem-root:not(:last-child)": {
174
- borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
187
+ borderBottom: "1px solid ".concat(_apperance.palette.gray[100])
175
188
  },
176
189
  "& .MuiMenuItem-root": {
177
- fontSize: 13,
190
+ fontSize: "0.875rem",
191
+ padding: "8px 16px",
178
192
  height: "fit-content",
179
- minHeight: "auto"
193
+ minHeight: "auto",
194
+ transition: "background-color 0.15s ease-in-out",
195
+ "&:hover": {
196
+ backgroundColor: _apperance.palette.gray[50]
197
+ },
198
+ "&.Mui-selected": {
199
+ backgroundColor: _apperance.palette.blue.light,
200
+ "&:hover": {
201
+ backgroundColor: _apperance.palette.blue.light
202
+ }
203
+ }
180
204
  }
181
205
  }
182
206
  }
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.weak-map.js");
4
+ require("core-js/modules/esnext.iterator.constructor.js");
5
+ require("core-js/modules/esnext.iterator.filter.js");
6
+ require("core-js/modules/esnext.iterator.for-each.js");
7
+ require("core-js/modules/web.dom-collections.iterator.js");
8
+ Object.defineProperty(exports, "__esModule", {
9
+ value: true
10
+ });
11
+ exports.default = void 0;
12
+ var _material = require("@mui/material");
13
+ var _styles = require("@mui/material/styles");
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+ var React = _interopRequireWildcard(require("react"));
16
+ var _apperance = require("../../config/apperance");
17
+ var _jsxRuntime = require("react/jsx-runtime");
18
+ const _excluded = ["children", "activeStep", "index", "sx", "className"];
19
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
20
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
21
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
22
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
23
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
24
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
25
+ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
26
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
27
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
28
+ const StyledPaper = (0, _styles.styled)(_material.Paper)(_ref => {
29
+ let {
30
+ theme
31
+ } = _ref;
32
+ return {
33
+ padding: "24px",
34
+ marginTop: "24px",
35
+ borderRadius: "8px",
36
+ boxShadow: _apperance.palette.shadow.card,
37
+ border: "1px solid ".concat(_apperance.palette.border.light)
38
+ };
39
+ });
40
+ const PuiStepContent = _ref2 => {
41
+ let {
42
+ children,
43
+ activeStep,
44
+ index,
45
+ sx,
46
+ className
47
+ } = _ref2,
48
+ rest = _objectWithoutProperties(_ref2, _excluded);
49
+ return activeStep === index ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, _objectSpread(_objectSpread({
50
+ sx: _objectSpread({}, sx),
51
+ className: className
52
+ }, rest), {}, {
53
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPaper, {
54
+ elevation: 0,
55
+ children: children
56
+ })
57
+ })) : null;
58
+ };
59
+ PuiStepContent.propTypes = {
60
+ children: _propTypes.default.node,
61
+ activeStep: _propTypes.default.number.isRequired,
62
+ index: _propTypes.default.number.isRequired,
63
+ sx: _propTypes.default.object,
64
+ className: _propTypes.default.string
65
+ };
66
+ var _default = exports.default = PuiStepContent;
@@ -0,0 +1,184 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.weak-map.js");
4
+ require("core-js/modules/esnext.iterator.filter.js");
5
+ require("core-js/modules/esnext.iterator.for-each.js");
6
+ require("core-js/modules/web.dom-collections.iterator.js");
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.default = void 0;
11
+ require("core-js/modules/esnext.iterator.constructor.js");
12
+ require("core-js/modules/esnext.iterator.map.js");
13
+ var _material = require("@mui/material");
14
+ var _styles = require("@mui/material/styles");
15
+ var _propTypes = _interopRequireDefault(require("prop-types"));
16
+ var React = _interopRequireWildcard(require("react"));
17
+ var _apperance = require("../../config/apperance");
18
+ var _jsxRuntime = require("react/jsx-runtime");
19
+ const _excluded = ["activeStep", "steps", "orientation", "alternativeLabel", "sx", "className"]; // Style personnalisé pour le stepper
20
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
21
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
22
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
24
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
25
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
26
+ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
27
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
28
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
29
+ const StyledMuiStepper = (0, _styles.styled)(_material.Stepper)(_ref => {
30
+ let {
31
+ theme
32
+ } = _ref;
33
+ return {
34
+ width: "100%",
35
+ padding: "16px 0",
36
+ "& .MuiStepConnector-root": {
37
+ top: "20px",
38
+ left: "calc(-50% + 20px)",
39
+ right: "calc(50% + 20px)",
40
+ "& .MuiStepConnector-line": {
41
+ borderColor: _apperance.palette.gray[300],
42
+ borderTopWidth: 3
43
+ }
44
+ },
45
+ "& .MuiStepConnector-active": {
46
+ "& .MuiStepConnector-line": {
47
+ borderColor: _apperance.palette.primary
48
+ }
49
+ },
50
+ "& .MuiStepConnector-completed": {
51
+ "& .MuiStepConnector-line": {
52
+ borderColor: _apperance.palette.success
53
+ }
54
+ },
55
+ "& .MuiStep-root": {
56
+ padding: 0
57
+ },
58
+ "& .MuiStepLabel-root": {
59
+ flexDirection: "column",
60
+ "& .MuiStepLabel-iconContainer": {
61
+ padding: 0,
62
+ marginRight: 0,
63
+ marginBottom: "8px"
64
+ },
65
+ "& .MuiStepLabel-labelContainer": {
66
+ width: "auto",
67
+ color: _apperance.palette.gray[600],
68
+ textAlign: "center",
69
+ "& .MuiStepLabel-label": {
70
+ fontSize: "0.875rem",
71
+ fontWeight: 500,
72
+ "&.Mui-active": {
73
+ color: _apperance.palette.primary,
74
+ fontWeight: 600
75
+ },
76
+ "&.Mui-completed": {
77
+ color: _apperance.palette.success,
78
+ fontWeight: 600
79
+ }
80
+ }
81
+ }
82
+ }
83
+ };
84
+ });
85
+
86
+ // Style personnalisé pour l'icône du step
87
+ const StepIconRoot = (0, _styles.styled)("div")(_ref2 => {
88
+ let {
89
+ ownerState
90
+ } = _ref2;
91
+ return {
92
+ width: 40,
93
+ height: 40,
94
+ display: "flex",
95
+ alignItems: "center",
96
+ justifyContent: "center",
97
+ borderRadius: "50%",
98
+ backgroundColor: ownerState.active ? _apperance.palette.primary : ownerState.completed ? _apperance.palette.success : _apperance.palette.gray[200],
99
+ color: ownerState.completed || ownerState.active ? _apperance.palette.white : _apperance.palette.gray[600],
100
+ fontWeight: 600,
101
+ fontSize: "1rem",
102
+ transition: "all 0.2s ease-in-out",
103
+ boxShadow: ownerState.active ? _apperance.palette.shadow.light : "none"
104
+ };
105
+ });
106
+
107
+ // Composant personnalisé pour l'icône du step
108
+ const StepIcon = _ref3 => {
109
+ let {
110
+ active,
111
+ completed,
112
+ icon
113
+ } = _ref3;
114
+ const ownerState = {
115
+ active,
116
+ completed
117
+ };
118
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(StepIconRoot, {
119
+ ownerState: ownerState,
120
+ children: completed ? /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
121
+ width: "24",
122
+ height: "24",
123
+ viewBox: "0 0 24 24",
124
+ fill: "none",
125
+ xmlns: "http://www.w3.org/2000/svg",
126
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
127
+ d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
128
+ fill: "currentColor"
129
+ })
130
+ }) : icon
131
+ });
132
+ };
133
+ StepIcon.propTypes = {
134
+ active: _propTypes.default.bool,
135
+ completed: _propTypes.default.bool,
136
+ icon: _propTypes.default.node
137
+ };
138
+
139
+ // Composant principal PuiStepper
140
+ const PuiStepper = _ref4 => {
141
+ let {
142
+ activeStep,
143
+ steps,
144
+ orientation,
145
+ alternativeLabel,
146
+ sx,
147
+ className
148
+ } = _ref4,
149
+ rest = _objectWithoutProperties(_ref4, _excluded);
150
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
151
+ sx: _objectSpread({
152
+ width: "100%"
153
+ }, sx),
154
+ className: className,
155
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiStepper, _objectSpread(_objectSpread({
156
+ activeStep: activeStep,
157
+ orientation: orientation,
158
+ alternativeLabel: alternativeLabel
159
+ }, rest), {}, {
160
+ children: steps.map((step, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Step, {
161
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.StepLabel, {
162
+ StepIconComponent: StepIcon,
163
+ children: step.label
164
+ })
165
+ }, step.label || "step-".concat(index)))
166
+ }))
167
+ });
168
+ };
169
+ PuiStepper.propTypes = {
170
+ activeStep: _propTypes.default.number,
171
+ steps: _propTypes.default.arrayOf(_propTypes.default.shape({
172
+ label: _propTypes.default.string.isRequired
173
+ })).isRequired,
174
+ orientation: _propTypes.default.oneOf(["horizontal", "vertical"]),
175
+ alternativeLabel: _propTypes.default.bool,
176
+ sx: _propTypes.default.object,
177
+ className: _propTypes.default.string
178
+ };
179
+ PuiStepper.defaultProps = {
180
+ activeStep: 0,
181
+ orientation: "horizontal",
182
+ alternativeLabel: true
183
+ };
184
+ var _default = exports.default = PuiStepper;
@@ -0,0 +1,105 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.weak-map.js");
4
+ require("core-js/modules/esnext.iterator.constructor.js");
5
+ require("core-js/modules/esnext.iterator.filter.js");
6
+ require("core-js/modules/esnext.iterator.for-each.js");
7
+ require("core-js/modules/web.dom-collections.iterator.js");
8
+ Object.defineProperty(exports, "__esModule", {
9
+ value: true
10
+ });
11
+ exports.default = void 0;
12
+ var _material = require("@mui/material");
13
+ var _styles = require("@mui/material/styles");
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+ var React = _interopRequireWildcard(require("react"));
16
+ var _PuiButton = _interopRequireDefault(require("../buttons/PuiButton"));
17
+ var _jsxRuntime = require("react/jsx-runtime");
18
+ const _excluded = ["activeStep", "steps", "handleNext", "handleBack", "handleReset", "nextButtonText", "backButtonText", "resetButtonText", "disableBackButton", "disableNextButton", "hideBackButton", "sx", "className"];
19
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
20
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
21
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
22
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
23
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
24
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
25
+ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
26
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
27
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
28
+ const StyledBox = (0, _styles.styled)(_material.Box)(_ref => {
29
+ let {
30
+ theme
31
+ } = _ref;
32
+ return {
33
+ display: "flex",
34
+ justifyContent: "space-between",
35
+ marginTop: "24px"
36
+ };
37
+ });
38
+ const PuiStepperActions = _ref2 => {
39
+ let {
40
+ activeStep,
41
+ steps,
42
+ handleNext,
43
+ handleBack,
44
+ handleReset,
45
+ nextButtonText,
46
+ backButtonText,
47
+ resetButtonText,
48
+ disableBackButton,
49
+ disableNextButton,
50
+ hideBackButton,
51
+ sx,
52
+ className
53
+ } = _ref2,
54
+ rest = _objectWithoutProperties(_ref2, _excluded);
55
+ const isLastStep = activeStep === steps.length - 1;
56
+ const isFirstStep = activeStep === 0;
57
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledBox, _objectSpread(_objectSpread({
58
+ sx: _objectSpread({}, sx),
59
+ className: className
60
+ }, rest), {}, {
61
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
62
+ children: !isFirstStep && !hideBackButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
63
+ onClick: handleBack,
64
+ color: "secondary",
65
+ disabled: disableBackButton,
66
+ children: backButtonText
67
+ })
68
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
69
+ children: isLastStep ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
70
+ onClick: handleReset,
71
+ color: "primary",
72
+ children: resetButtonText
73
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
74
+ onClick: handleNext,
75
+ color: "primary",
76
+ disabled: disableNextButton,
77
+ children: nextButtonText
78
+ })
79
+ })]
80
+ }));
81
+ };
82
+ PuiStepperActions.propTypes = {
83
+ activeStep: _propTypes.default.number.isRequired,
84
+ steps: _propTypes.default.array.isRequired,
85
+ handleNext: _propTypes.default.func.isRequired,
86
+ handleBack: _propTypes.default.func.isRequired,
87
+ handleReset: _propTypes.default.func.isRequired,
88
+ nextButtonText: _propTypes.default.string,
89
+ backButtonText: _propTypes.default.string,
90
+ resetButtonText: _propTypes.default.string,
91
+ disableBackButton: _propTypes.default.bool,
92
+ disableNextButton: _propTypes.default.bool,
93
+ hideBackButton: _propTypes.default.bool,
94
+ sx: _propTypes.default.object,
95
+ className: _propTypes.default.string
96
+ };
97
+ PuiStepperActions.defaultProps = {
98
+ nextButtonText: "Suivant",
99
+ backButtonText: "Précédent",
100
+ resetButtonText: "Terminer",
101
+ disableBackButton: false,
102
+ disableNextButton: false,
103
+ hideBackButton: false
104
+ };
105
+ var _default = exports.default = PuiStepperActions;
@@ -20,5 +20,4 @@ const useAxios = function useAxios(token) {
20
20
  });
21
21
  return axiosInstance;
22
22
  };
23
- var _default = exports.default = useAxios;
24
- npm;
23
+ var _default = exports.default = useAxios;
package/dist/index.js CHANGED
@@ -237,6 +237,24 @@ Object.defineProperty(exports, "PuiSpecificReferentielField", {
237
237
  return _PuiSpecificReferentielField.default;
238
238
  }
239
239
  });
240
+ Object.defineProperty(exports, "PuiStepContent", {
241
+ enumerable: true,
242
+ get: function get() {
243
+ return _PuiStepContent.default;
244
+ }
245
+ });
246
+ Object.defineProperty(exports, "PuiStepper", {
247
+ enumerable: true,
248
+ get: function get() {
249
+ return _PuiStepper.default;
250
+ }
251
+ });
252
+ Object.defineProperty(exports, "PuiStepperActions", {
253
+ enumerable: true,
254
+ get: function get() {
255
+ return _PuiStepperActions.default;
256
+ }
257
+ });
240
258
  Object.defineProperty(exports, "PuiTab", {
241
259
  enumerable: true,
242
260
  get: function get() {
@@ -332,4 +350,7 @@ var _PuiDefaultPage = _interopRequireDefault(require("./components/ui/pages/gene
332
350
  var _PuiSearchPage = _interopRequireDefault(require("./components/ui/pages/general/PuiSearchPage"));
333
351
  var _useAlert = _interopRequireDefault(require("./hooks/useAlert"));
334
352
  var _useQuery = _interopRequireDefault(require("./hooks/useQuery"));
353
+ var _PuiStepper = _interopRequireDefault(require("./components/stepper/PuiStepper"));
354
+ var _PuiStepContent = _interopRequireDefault(require("./components/stepper/PuiStepContent"));
355
+ var _PuiStepperActions = _interopRequireDefault(require("./components/stepper/PuiStepperActions"));
335
356
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
package/package.json CHANGED
@@ -1,101 +1,108 @@
1
- {
2
- "name": "@portnet/ui",
3
- "version": "3.0.7",
4
- "description": "Portnet UI",
5
- "keywords": [
6
- "react",
7
- "components",
8
- "ui"
9
- ],
10
- "main": "dist/index.js",
11
- "private": false,
12
- "files": [
13
- "dist",
14
- "README.md"
15
- ],
16
- "dependencies": {
17
- "@emotion/react": "^11.10.5",
18
- "@emotion/styled": "^11.10.5",
19
- "@mui/icons-material": "^5.10.16",
20
- "@mui/lab": "^5.0.0-alpha.60",
21
- "@mui/material": "^5.10.16",
22
- "@mui/x-data-grid": "^5.17.26",
23
- "@mui/x-data-grid-pro": "^5.17.26",
24
- "@mui/x-date-pickers": "^5.0.4",
25
- "@testing-library/jest-dom": "^5.16.5",
26
- "@testing-library/react": "^13.4.0",
27
- "@testing-library/user-event": "^13.5.0",
28
- "axios": "^0.27.2",
29
- "formik": "^2.2.9",
30
- "lodash": "^4.17.21",
31
- "moment": "^2.29.4",
32
- "moment-timezone": "^0.5.45",
33
- "react": "^18.2.0",
34
- "react-dom": "^18.2.0",
35
- "react-scripts": "^5.0.1",
36
- "react-transition-group": "^4.4.5",
37
- "styled-components": "^6.1.3",
38
- "uuid": "^9.0.0",
39
- "web-vitals": "^2.1.4",
40
- "yup": "^0.32.11"
41
- },
42
- "scripts": {
43
- "start": "react-scripts start",
44
- "build": "rimraf dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files",
45
- "test": "react-scripts test",
46
- "eject": "react-scripts eject",
47
- "storybook": "storybook dev -p 6006 -s public",
48
- "build-storybook": "storybook build -s public"
49
- },
50
- "eslintConfig": {
51
- "extends": [
52
- "react-app",
53
- "react-app/jest"
54
- ],
55
- "overrides": [
56
- {
57
- "files": [
58
- "**/*.stories.*"
59
- ],
60
- "rules": {
61
- "import/no-anonymous-default-export": "off"
62
- }
63
- }
64
- ]
65
- },
66
- "browserslist": {
67
- "production": [
68
- ">0.2%",
69
- "not dead",
70
- "not op_mini all"
71
- ],
72
- "development": [
73
- "last 1 chrome version",
74
- "last 1 firefox version",
75
- "last 1 safari version"
76
- ]
77
- },
78
- "devDependencies": {
79
- "@babel/cli": "^7.19.3",
80
- "@babel/core": "^7.20.5",
81
- "@babel/preset-env": "^7.20.2",
82
- "@babel/preset-react": "^7.18.6",
83
- "@storybook/addon-actions": "^9.0.8",
84
- "@storybook/addon-essentials": "^8.6.14",
85
- "@storybook/addon-interactions": "^9.0.0-alpha.10",
86
- "@storybook/addon-links": "^9.1.5",
87
- "@storybook/node-logger": "^9.0.0-alpha.1",
88
- "@storybook/preset-create-react-app": "^9.1.5",
89
- "@storybook/react": "^9.1.5",
90
- "@storybook/react-webpack5": "^9.1.5",
91
- "@storybook/testing-library": "^0.2.2",
92
- "cross-env": "^7.0.3",
93
- "css-minimizer-webpack-plugin": "^7.0.2",
94
- "fork-ts-checker-webpack-plugin": "^9.1.0",
95
- "husky": "^4.3.8",
96
- "prop-types": "^15.8.1",
97
- "rimraf": "^5.0.5",
98
- "storybook": "^9.1.5",
99
- "webpack": "^5.75.0"
100
- }
101
- }
1
+ {
2
+ "name": "@portnet/ui",
3
+ "version": "3.1.1",
4
+ "description": "Portnet UI",
5
+ "keywords": [
6
+ "react",
7
+ "components",
8
+ "ui"
9
+ ],
10
+ "main": "dist/index.js",
11
+ "private": false,
12
+ "files": [
13
+ "dist",
14
+ "README.md"
15
+ ],
16
+ "dependencies": {
17
+ "@emotion/react": "^11.10.5",
18
+ "@emotion/styled": "^11.10.5",
19
+ "@mui/icons-material": "^5.10.16",
20
+ "@mui/lab": "^5.0.0-alpha.60",
21
+ "@mui/material": "^5.10.16",
22
+ "@mui/x-data-grid": "^5.17.26",
23
+ "@mui/x-data-grid-pro": "^5.17.26",
24
+ "@mui/x-date-pickers": "^5.0.4",
25
+ "@testing-library/jest-dom": "^5.16.5",
26
+ "@testing-library/react": "^13.4.0",
27
+ "@testing-library/user-event": "^13.5.0",
28
+ "axios": "^0.27.2",
29
+ "formik": "^2.2.9",
30
+ "lodash": "^4.17.21",
31
+ "moment": "^2.29.4",
32
+ "moment-timezone": "^0.5.45",
33
+ "react": "^18.2.0",
34
+ "react-dom": "^18.2.0",
35
+ "react-scripts": "^5.0.1",
36
+ "react-transition-group": "^4.4.5",
37
+ "styled-components": "^6.1.3",
38
+ "uuid": "^9.0.0",
39
+ "web-vitals": "^2.1.4",
40
+ "yup": "^0.32.11"
41
+ },
42
+ "scripts": {
43
+ "start": "react-scripts start",
44
+ "build": "rimraf dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files",
45
+ "test": "react-scripts test",
46
+ "eject": "react-scripts eject",
47
+ "storybook": "storybook dev -p 6006",
48
+ "build-storybook": "storybook build"
49
+ },
50
+ "eslintConfig": {
51
+ "extends": [
52
+ "react-app",
53
+ "react-app/jest",
54
+ "plugin:storybook/recommended"
55
+ ],
56
+ "overrides": [
57
+ {
58
+ "files": [
59
+ "**/*.stories.*"
60
+ ],
61
+ "rules": {
62
+ "import/no-anonymous-default-export": "off"
63
+ }
64
+ }
65
+ ]
66
+ },
67
+ "browserslist": {
68
+ "production": [
69
+ ">0.2%",
70
+ "not dead",
71
+ "not op_mini all"
72
+ ],
73
+ "development": [
74
+ "last 1 chrome version",
75
+ "last 1 firefox version",
76
+ "last 1 safari version"
77
+ ]
78
+ },
79
+ "devDependencies": {
80
+ "@babel/cli": "^7.19.3",
81
+ "@babel/core": "^7.20.5",
82
+ "@babel/preset-env": "^7.20.2",
83
+ "@babel/preset-react": "^7.18.6",
84
+ "@storybook/addon-actions": "^7.6.20",
85
+ "@storybook/addon-docs": "^7.6.20",
86
+ "@storybook/addon-essentials": "^7.6.20",
87
+ "@storybook/addon-interactions": "^7.6.20",
88
+ "@storybook/addon-links": "^7.6.20",
89
+ "@storybook/jest": "^0.2.2",
90
+ "@storybook/node-logger": "^7.6.20",
91
+ "@storybook/preset-create-react-app": "^7.6.20",
92
+ "@storybook/react": "^7.6.20",
93
+ "@storybook/react-webpack5": "^7.6.20",
94
+ "@storybook/testing-library": "^0.2.2",
95
+ "ajv": "^8.17.1",
96
+ "ajv-keywords": "^5.1.0",
97
+ "cross-env": "^7.0.3",
98
+ "css-minimizer-webpack-plugin": "^7.0.2",
99
+ "eslint-plugin-storybook": "^0.6.15",
100
+ "fork-ts-checker-webpack-plugin": "^8.0.0",
101
+ "husky": "^4.3.8",
102
+ "prop-types": "^15.8.1",
103
+ "react-refresh": "^0.17.0",
104
+ "rimraf": "^5.0.5",
105
+ "storybook": "^7.6.20",
106
+ "webpack": "^5.75.0"
107
+ }
108
+ }