@portnet/ui 2.0.7 → 2.0.9

package/dist/components/ui/layout/Layout.js

@@ -0,0 +1,104 @@
+"use strict";
+
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _material = require("@mui/material");
+var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "title", "userName", "userRole", "avatarSrc", "logoUrl", "appName", "menuItems", "activeMenuId", "onLogout", "onSettingsClick", "onProfileClick", "notificationsCount", "onNotificationsClick"]; // Conteneur principal
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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); }
+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; }
+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; }
+const MainContainer = (0, _styles.styled)(_material.Box)({
+  display: 'flex'
+});
+
+// Conteneur du contenu
+const ContentContainer = (0, _styles.styled)(_material.Box)({
+  marginLeft: '280px',
+  // Doit correspondre à la largeur de la Sidebar
+  marginTop: '64px',
+  // Doit correspondre à la hauteur du Header
+  width: 'calc(100% - 280px)',
+  minHeight: 'calc(100vh - 64px)',
+  padding: '24px',
+  backgroundColor: '#f9fafb',
+  // Fond légèrement grisé pour le contenu
+  boxSizing: 'border-box'
+});
+
+/**
+ * Composant Layout - Structure principale de l'application
+ */
+const Layout = _ref => {
+  let {
+      children,
+      title,
+      userName,
+      userRole,
+      avatarSrc,
+      logoUrl,
+      appName,
+      menuItems,
+      activeMenuId,
+      onLogout,
+      onSettingsClick,
+      onProfileClick,
+      notificationsCount,
+      onNotificationsClick
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MainContainer, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Sidebar.default, {
+      items: menuItems,
+      logoUrl: logoUrl,
+      appName: appName,
+      userName: userName,
+      userRole: userRole,
+      onLogout: onLogout,
+      activeItemId: activeMenuId
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
+      title: title,
+      userName: userName,
+      avatarSrc: avatarSrc,
+      onLogout: onLogout,
+      onSettingsClick: onSettingsClick,
+      onProfileClick: onProfileClick,
+      notificationsCount: notificationsCount,
+      onNotificationsClick: onNotificationsClick
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentContainer, {
+      children: children
+    })]
+  }));
+};
+Layout.propTypes = {
+  children: _propTypes.default.node,
+  title: _propTypes.default.string,
+  userName: _propTypes.default.string,
+  userRole: _propTypes.default.string,
+  avatarSrc: _propTypes.default.string,
+  logoUrl: _propTypes.default.string,
+  appName: _propTypes.default.string,
+  menuItems: _propTypes.default.array,
+  activeMenuId: _propTypes.default.string,
+  onLogout: _propTypes.default.func,
+  onSettingsClick: _propTypes.default.func,
+  onProfileClick: _propTypes.default.func,
+  notificationsCount: _propTypes.default.number,
+  onNotificationsClick: _propTypes.default.func
+};
+var _default = exports.default = Layout;

package/dist/components/ui/layout/Sidebar.js

@@ -0,0 +1,193 @@
+"use strict";
+
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _apperance = require("../../../config/apperance");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["items", "logoUrl", "appName", "userName", "userRole", "onLogout", "activeItemId"]; // Largeur augmentée
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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); }
+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; }
+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; }
+const SIDEBAR_WIDTH = 280; // Largeur augmentée (anciennement 254px)
+
+// Composant stylisé pour la barre latérale
+const SidebarContainer = (0, _styles.styled)(_material.Box)(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    width: SIDEBAR_WIDTH,
+    height: '100vh',
+    position: 'fixed',
+    left: 0,
+    top: 0,
+    backgroundColor: _apperance.palette.white,
+    borderRight: "1px solid ".concat(_apperance.palette.gray.light),
+    boxShadow: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    zIndex: 1200,
+    overflow: 'hidden',
+    transition: 'width 0.3s ease'
+  };
+});
+
+// En-tête de la barre latérale
+const SidebarHeader = (0, _styles.styled)(_material.Box)({
+  padding: '16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
+});
+
+// Contenu de la barre latérale
+const SidebarContent = (0, _styles.styled)(_material.Box)({
+  flex: 1,
+  overflowY: 'auto',
+  padding: '8px 0'
+});
+
+// Pied de la barre latérale
+const SidebarFooter = (0, _styles.styled)(_material.Box)({
+  padding: '12px',
+  borderTop: "1px solid ".concat(_apperance.palette.gray.light),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+
+// Item de menu stylisé
+const StyledListItem = (0, _styles.styled)(_material.ListItem)({
+  padding: '8px 16px',
+  borderRadius: '4px',
+  margin: '2px 8px',
+  transition: 'all 0.2s ease',
+  '&:hover': {
+    backgroundColor: "".concat(_apperance.palette.primary, "08"),
+    '& .MuiListItemIcon-root': {
+      color: _apperance.palette.primary
+    },
+    '& .MuiListItemText-root': {
+      color: _apperance.palette.primary
+    }
+  },
+  '&.active': {
+    backgroundColor: "".concat(_apperance.palette.primary, "10"),
+    '& .MuiListItemIcon-root': {
+      color: _apperance.palette.primary
+    },
+    '& .MuiListItemText-root': {
+      color: _apperance.palette.primary
+    }
+  }
+});
+
+// Icône de déconnexion stylisée
+const LogoutButton = (0, _styles.styled)(_material.IconButton)({
+  color: _apperance.palette.gray.dark,
+  padding: '6px',
+  transition: 'all 0.2s ease',
+  '&:hover': {
+    color: _apperance.palette.error,
+    backgroundColor: "".concat(_apperance.palette.error, "08")
+  }
+});
+
+/**
+ * Composant Sidebar - Barre latérale de navigation
+ */
+const Sidebar = _ref2 => {
+  let {
+      items,
+      logoUrl,
+      appName,
+      userName,
+      userRole,
+      onLogout,
+      activeItemId
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SidebarContainer, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SidebarHeader, {
+      children: logoUrl ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: logoUrl,
+        alt: appName,
+        style: {
+          height: 40
+        }
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h6",
+        fontWeight: "bold",
+        children: appName || 'Application'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SidebarContent, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
+        component: "nav",
+        children: items && items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledListItem, {
+          button: true,
+          onClick: item.onClick,
+          className: activeItemId === item.id ? 'active' : '',
+          children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+            children: item.icon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+            primary: item.label,
+            primaryTypographyProps: {
+              fontSize: '0.9rem',
+              fontWeight: activeItemId === item.id ? 'bold' : 'normal'
+            }
+          })]
+        }, item.id))
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(SidebarFooter, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        flexDirection: "column",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "subtitle2",
+          fontWeight: "bold",
+          children: userName || 'Utilisateur'
+        }), userRole && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "caption",
+          color: "textSecondary",
+          children: userRole
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(LogoutButton, {
+        onClick: onLogout,
+        title: "D\xE9connexion",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ExitToApp, {}), " "]
+      })]
+    })]
+  }));
+};
+Sidebar.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired,
+    icon: _propTypes.default.node,
+    onClick: _propTypes.default.func
+  })),
+  logoUrl: _propTypes.default.string,
+  appName: _propTypes.default.string,
+  userName: _propTypes.default.string,
+  userRole: _propTypes.default.string,
+  onLogout: _propTypes.default.func,
+  activeItemId: _propTypes.default.string
+};
+var _default = exports.default = Sidebar;

package/dist/components/ui/layout/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function get() {
+    return _Header.default;
+  }
+});
+Object.defineProperty(exports, "Layout", {
+  enumerable: true,
+  get: function get() {
+    return _Layout.default;
+  }
+});
+Object.defineProperty(exports, "Sidebar", {
+  enumerable: true,
+  get: function get() {
+    return _Sidebar.default;
+  }
+});
+exports.default = void 0;
+var _Layout = _interopRequireDefault(require("./Layout"));
+var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+var _Header = _interopRequireDefault(require("./Header"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Layout.default;

package/dist/index.js

@@ -1,8 +1,22 @@
 "use strict";
 
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function get() {
+    return _layout.Header;
+  }
+});
+Object.defineProperty(exports, "Layout", {
+  enumerable: true,
+  get: function get() {
+    return _layout.Layout;
+  }
+});
 Object.defineProperty(exports, "PuiAlertProvider", {
   enumerable: true,
   get: function get() {
@@ -165,6 +179,12 @@ Object.defineProperty(exports, "PuiNetworkErrorPage", {
     return _PuiNetworkErrorPage.default;
   }
 });
+Object.defineProperty(exports, "PuiNewUserButton", {
+  enumerable: true,
+  get: function get() {
+    return _PuiNewUserButton.default;
+  }
+});
 Object.defineProperty(exports, "PuiNotFoundErrorPage", {
   enumerable: true,
   get: function get() {
@@ -237,6 +257,12 @@ Object.defineProperty(exports, "PuiSpecificReferentielField", {
     return _PuiSpecificReferentielField.default;
   }
 });
+Object.defineProperty(exports, "PuiStatusChip", {
+  enumerable: true,
+  get: function get() {
+    return _PuiChip.PuiStatusChip;
+  }
+});
 Object.defineProperty(exports, "PuiTab", {
   enumerable: true,
   get: function get() {
@@ -279,6 +305,12 @@ Object.defineProperty(exports, "PuiTooltip", {
     return _PuiTooltip.default;
   }
 });
+Object.defineProperty(exports, "Sidebar", {
+  enumerable: true,
+  get: function get() {
+    return _layout.Sidebar;
+  }
+});
 Object.defineProperty(exports, "applyImprovedStyles", {
   enumerable: true,
   get: function get() {
@@ -359,7 +391,7 @@ var _PuiRadioItem = _interopRequireDefault(require("./components/inputs/PuiRadio
 var _PuiSelect = _interopRequireDefault(require("./components/inputs/PuiSelect"));
 var _PuiTextField = _interopRequireDefault(require("./components/inputs/PuiTextField"));
 var _PuiBadge = _interopRequireDefault(require("./components/others/PuiBadge"));
-var _PuiChip = _interopRequireDefault(require("./components/others/PuiChip"));
+var _PuiChip = _interopRequireWildcard(require("./components/others/PuiChip"));
 var _PuiDialog = _interopRequireDefault(require("./components/others/PuiDialog"));
 var _PuiFormikForm = _interopRequireDefault(require("./components/others/PuiFormikForm"));
 var _PuiGrid = _interopRequireDefault(require("./components/others/PuiGrid"));
@@ -395,4 +427,8 @@ var _useQuery = _interopRequireDefault(require("./hooks/useQuery"));
 var _ThemeProvider = _interopRequireDefault(require("./config/ThemeProvider"));
 var _theme = require("./config/theme");
 var _styleUtils = require("./config/styleUtils");
+var _layout = require("./components/ui/layout");
+var _PuiNewUserButton = _interopRequireDefault(require("./components/buttons/PuiNewUserButton"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Portnet UI",
   "keywords": [
     "react",