@portnet/ui 3.1.6 → 4.0.1

package/dist/components/table/PuiModernTable.js

@@ -1,541 +0,0 @@
-"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 _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
-var _apperance = require("../../config/apperance");
-var _PuiButton = _interopRequireDefault(require("../buttons/PuiButton"));
-var _iconsMaterial = require("@mui/icons-material");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["title", "data", "columns", "actions", "loading", "pagination", "currentPage", "totalPages", "onPageChange", "emptyMessage", "className"]; // Container principal du tableau moderne
-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 ModernTableContainer = (0, _styles.styled)(_material.Box)(() => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '16px',
-  padding: '24px',
-  backgroundColor: _apperance.palette.background.default,
-  borderRadius: '12px',
-  minHeight: '400px'
-}));
-
-// Header du tableau
-const TableHeader = (0, _styles.styled)(_material.Box)(() => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  marginBottom: '16px',
-  borderBottom: "2px solid ".concat(_apperance.palette.border.light),
-  paddingBottom: '16px'
-}));
-
-// Conteneur des cartes
-const CardsContainer = (0, _styles.styled)(_material.Box)(() => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '12px',
-  flex: 1
-}));
-
-// Card individuelle pour chaque ligne
-const TableCard = (0, _styles.styled)(_material.Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '16px 20px',
-  backgroundColor: _apperance.palette.background.paper,
-  borderRadius: '8px',
-  border: "1px solid ".concat(_apperance.palette.border.light),
-  boxShadow: _apperance.palette.shadow.card,
-  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
-  position: 'relative',
-  cursor: 'pointer',
-  '&:hover': {
-    transform: 'translateY(-2px)',
-    boxShadow: _apperance.palette.shadow.medium,
-    borderColor: "".concat(_apperance.palette.primary, "40"),
-    backgroundColor: "".concat(_apperance.palette.primary, "02"),
-    // Afficher les actions de cette ligne spécifique au survol
-    '& .actions-section': {
-      opacity: 1,
-      transform: 'translate(-50%, -50%)',
-      transitionDelay: '0.1s'
-    },
-    // Masquer l'indicateur de points au survol
-    '& .actions-section::before': {
-      opacity: 0
-    }
-  },
-  // Responsive
-  '@media (max-width: 768px)': {
-    flexDirection: 'column',
-    alignItems: 'stretch',
-    gap: '12px',
-    cursor: 'default',
-    '&:hover': {
-      transform: 'none' // Pas d'effet de survol sur mobile
-    }
-  }
-}));
-
-// Section des données dans la card
-const DataSection = (0, _styles.styled)(_material.Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '24px',
-  flex: 1,
-  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
-  // Indicateur subtil d'actions disponibles
-  '.MuiBox-root:hover &': {
-    opacity: 0.7
-  },
-  '@media (max-width: 768px)': {
-    flexDirection: 'column',
-    alignItems: 'stretch',
-    gap: '8px'
-  }
-}));
-
-// Colonne de données
-const DataColumn = (0, _styles.styled)(_material.Box)(() => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '2px',
-  minWidth: '0',
-  flex: 1
-}));
-
-// Label de colonne
-const ColumnLabel = (0, _styles.styled)(_material.Typography)(() => ({
-  fontSize: '12px',
-  fontWeight: 600,
-  color: "#293854",
-  // Couleur bleu marine pour les en-têtes
-  textTransform: 'none',
-  letterSpacing: '0.3px'
-}));
-
-// Valeur de colonne
-const ColumnValue = (0, _styles.styled)(_material.Typography)(() => ({
-  fontSize: '14px',
-  fontWeight: 500,
-  color: _apperance.palette.dark,
-  wordBreak: 'break-word'
-}));
-
-// Section des actions avec effet de survol
-const ActionsSection = (0, _styles.styled)(_material.Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: '8px',
-  flexShrink: 0,
-  opacity: 0,
-  transform: 'translateX(10px)',
-  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  zIndex: 10,
-  // Les actions restent toujours cachées, même au hover direct
-  // Elles ne s'affichent que via le hover de la card parent
-
-  // Indicateur subtil d'actions disponibles (icône menu)
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    right: '8px',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    width: '4px',
-    height: '4px',
-    borderRadius: '50%',
-    backgroundColor: _apperance.palette.gray[400],
-    opacity: 1,
-    transition: 'opacity 0.3s ease',
-    boxShadow: "\n      0 6px 0 ".concat(_apperance.palette.gray[400], ",\n      0 12px 0 ").concat(_apperance.palette.gray[400], "\n    ")
-  },
-  '.MuiBox-root:hover &::before': {
-    opacity: 0
-  },
-  '@media (max-width: 768px)': {
-    justifyContent: 'center',
-    opacity: 0,
-    // Reste caché même sur mobile
-    transform: 'translate(-50%, -50%)',
-    '&::before': {
-      display: 'none' // Pas d'indicateur sur mobile
-    }
-  }
-}));
-
-// Footer avec pagination
-const TableFooter = (0, _styles.styled)(_material.Box)(() => ({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  marginTop: '16px',
-  padding: '16px 0',
-  borderTop: "1px solid ".concat(_apperance.palette.border.light)
-}));
-
-// États de statut avec couleurs
-const statusConfig = {
-  active: {
-    color: _apperance.palette.success,
-    icon: _iconsMaterial.CheckCircleRounded,
-    label: 'Actif'
-  },
-  expired: {
-    color: _apperance.palette.error,
-    icon: _iconsMaterial.ErrorRounded,
-    label: 'Expiré'
-  },
-  pending: {
-    color: _apperance.palette.warning,
-    icon: _iconsMaterial.AccessTimeRounded,
-    label: 'En attente'
-  },
-  processing: {
-    color: _apperance.palette.info,
-    icon: _iconsMaterial.RefreshRounded,
-    label: 'En cours'
-  }
-};
-
-// Types d'actions avec couleurs exactes extraites des maquettes
-const actionConfig = {
-  validate: {
-    color: 'success',
-    icon: _iconsMaterial.CheckCircleRounded,
-    label: 'Validé',
-    bgColor: _apperance.palette.actions.validate,
-    // Vert Material Design des maquettes
-    textColor: '#fff'
-  },
-  expire: {
-    color: 'error',
-    icon: _iconsMaterial.ErrorRounded,
-    label: 'Expiré',
-    bgColor: _apperance.palette.actions.expire,
-    // Rouge Material Design des maquettes
-    textColor: '#fff'
-  },
-  renew: {
-    color: 'warning',
-    icon: _iconsMaterial.RefreshRounded,
-    label: 'Renouveler',
-    bgColor: _apperance.palette.actions.renew,
-    // Orange Material Design des maquettes
-    textColor: '#fff'
-  },
-  download: {
-    color: 'info',
-    icon: _iconsMaterial.DownloadRounded,
-    label: 'Télécharger',
-    bgColor: _apperance.palette.actions.download,
-    // Bleu Material Design des maquettes
-    textColor: '#fff'
-  },
-  processing: {
-    color: 'info',
-    icon: _iconsMaterial.AccessTimeRounded,
-    label: 'En cours',
-    bgColor: _apperance.palette.actions.processing,
-    // Violet Material Design des maquettes
-    textColor: '#fff'
-  },
-  souscrit: {
-    color: 'secondary',
-    icon: _iconsMaterial.CheckCircleRounded,
-    label: 'Souscrit',
-    bgColor: _apperance.palette.actions.souscrit,
-    // Gris bleu Material Design des maquettes
-    textColor: '#fff'
-  }
-};
-
-/**
- * Composant de tableau moderne basé sur la maquette
- * 
- * Fonctionnalités :
- * - Actions visibles uniquement au survol de la ligne
- * - Indicateur visuel subtil (3 points) quand les actions sont cachées
- * - Transitions fluides et animations modernes
- * - Design responsive (actions toujours visibles sur mobile)
- */
-const PuiModernTable = _ref => {
-  let {
-      title,
-      data = [],
-      columns = [],
-      actions = [],
-      loading = false,
-      pagination = true,
-      currentPage = 1,
-      totalPages = 1,
-      onPageChange,
-      emptyMessage = "Aucune donnée disponible",
-      className = ''
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const renderColumnValue = (item, column) => {
-    if (column.render) {
-      return column.render(item[column.key], item);
-    }
-    if (column.type === 'status') {
-      const status = statusConfig[item[column.key]] || statusConfig.pending;
-      const IconComponent = status.icon;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        sx: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: '6px'
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-          sx: {
-            fontSize: '16px',
-            color: status.color
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: {
-            color: status.color
-          },
-          children: status.label
-        })]
-      });
-    }
-    if (column.type === 'currency') {
-      return new Intl.NumberFormat('fr-FR', {
-        style: 'currency',
-        currency: 'MAD'
-      }).format(item[column.key] || 0);
-    }
-    if (column.type === 'date') {
-      return new Date(item[column.key]).toLocaleDateString('fr-FR');
-    }
-    return item[column.key] || '-';
-  };
-  const renderActions = item => {
-    return actions.map((action, index) => {
-      var _action$disabled;
-      const config = actionConfig[action.type] || actionConfig.validate;
-      const IconComponent = action.icon || config.icon;
-      const isDisabled = (_action$disabled = action.disabled) === null || _action$disabled === void 0 ? void 0 : _action$disabled.call(action, item);
-
-      // Couleur unique basée sur le hover (couleur primaire avec transparence)
-      const hoverColor = "".concat(_apperance.palette.primary, "dd"); // Couleur du hover comme couleur unique
-
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-        color: "primary",
-        size: "small",
-        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-          sx: {
-            fontSize: '12px'
-          }
-        }),
-        onClick: () => {
-          var _action$onClick;
-          return (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action, item);
-        },
-        disabled: isDisabled,
-        sx: {
-          minWidth: 'auto',
-          padding: '4px 8px',
-          fontSize: '11px',
-          fontWeight: 500,
-          backgroundColor: isDisabled ? _apperance.palette.gray[300] : hoverColor,
-          color: isDisabled ? _apperance.palette.gray[500] : _apperance.palette.white,
-          border: 'none',
-          borderRadius: '4px',
-          textTransform: 'none',
-          boxShadow: 'none',
-          '&:hover': {
-            backgroundColor: isDisabled ? _apperance.palette.gray[300] : hoverColor,
-            transform: 'none'
-          },
-          '&:active': {
-            transform: 'none'
-          }
-        },
-        children: action.label || config.label
-      }, index);
-    });
-  };
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ModernTableContainer, _objectSpread(_objectSpread({
-      className: className
-    }, props), {}, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
-        sx: {
-          borderRadius: '4px'
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          textAlign: 'center',
-          py: 4
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          variant: "body2",
-          color: "textSecondary",
-          children: "Chargement des donn\xE9es..."
-        })
-      })]
-    }));
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ModernTableContainer, _objectSpread(_objectSpread({
-    className: className
-  }, props), {}, {
-    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableHeader, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        variant: "h5",
-        sx: {
-          fontWeight: 600,
-          color: _apperance.palette.dark
-        },
-        children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-        variant: "body2",
-        color: "textSecondary",
-        children: [data.length, " \xE9l\xE9ment", data.length > 1 ? 's' : '']
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CardsContainer, {
-      children: data.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          textAlign: 'center',
-          py: 6,
-          color: _apperance.palette.gray[500]
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          variant: "body1",
-          children: emptyMessage
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [data.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableCard, {
-          sx: {
-            backgroundColor: _apperance.palette.gray[50],
-            // Fond gris très clair comme dans l'image
-            borderColor: _apperance.palette.border.light,
-            cursor: 'default',
-            // Pas d'effet de hover pour l'en-tête
-            '&:hover': {
-              backgroundColor: _apperance.palette.gray[50],
-              // Garde le même fond au survol
-              borderColor: _apperance.palette.border.light,
-              transform: 'none',
-              boxShadow: 'none'
-            }
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
-            children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(DataColumn, {
-              style: {
-                flex: column.flex || 1
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                sx: {
-                  fontSize: '12px',
-                  fontWeight: 600,
-                  color: '#029cfd !important',
-                  textTransform: 'none',
-                  letterSpacing: '0.3px',
-                  '& *': {
-                    color: '#029cfd !important'
-                  }
-                },
-                children: column.label
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnValue, {
-                sx: {
-                  fontSize: '0px',
-                  height: '0px',
-                  margin: '0px',
-                  padding: '0px',
-                  visibility: 'hidden'
-                }
-              })]
-            }, column.key))
-          })
-        }), data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableCard, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
-            children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(DataColumn, {
-              style: {
-                flex: column.flex || 1
-              },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnValue, {
-                children: renderColumnValue(item, column)
-              })
-            }, column.key))
-          }), actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsSection, {
-            className: "actions-section",
-            children: renderActions(item)
-          })]
-        }, item.id || index))]
-      })
-    }), pagination && totalPages > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableFooter, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Pagination, {
-        count: totalPages,
-        page: currentPage,
-        onChange: (event, page) => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page),
-        color: "primary",
-        size: "medium",
-        showFirstButton: true,
-        showLastButton: true,
-        sx: {
-          '& .MuiPaginationItem-root': {
-            borderRadius: '6px',
-            '&.Mui-selected': {
-              backgroundColor: _apperance.palette.primary,
-              color: _apperance.palette.white,
-              '&:hover': {
-                backgroundColor: _apperance.palette.blue.dark
-              }
-            }
-          }
-        }
-      })
-    })]
-  }));
-};
-PuiModernTable.propTypes = {
-  title: _propTypes.default.string,
-  data: _propTypes.default.arrayOf(_propTypes.default.object),
-  columns: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
-    label: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['text', 'status', 'currency', 'date']),
-    flex: _propTypes.default.number,
-    render: _propTypes.default.func
-  })),
-  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
-    type: _propTypes.default.oneOf(['renew', 'validate', 'expire', 'download']),
-    label: _propTypes.default.string,
-    color: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
-    icon: _propTypes.default.elementType,
-    onClick: _propTypes.default.func,
-    disabled: _propTypes.default.func
-  })),
-  loading: _propTypes.default.bool,
-  pagination: _propTypes.default.bool,
-  currentPage: _propTypes.default.number,
-  totalPages: _propTypes.default.number,
-  onPageChange: _propTypes.default.func,
-  emptyMessage: _propTypes.default.string,
-  className: _propTypes.default.string
-};
-var _default = exports.default = PuiModernTable;