@portnet/ui 3.1.2 → 3.1.4

package/dist/components/table/PuiModernTable.js

@@ -63,17 +63,34 @@ const TableCard = (0, _styles.styled)(_material.Box)(() => ({
   borderRadius: '8px',
   border: "1px solid ".concat(_apperance.palette.border.light),
   boxShadow: _apperance.palette.shadow.card,
-  transition: 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  position: 'relative',
+  cursor: 'pointer',
   '&:hover': {
-    transform: 'translateY(-1px)',
+    transform: 'translateY(-2px)',
     boxShadow: _apperance.palette.shadow.medium,
-    borderColor: "".concat(_apperance.palette.primary, "30")
+    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: 'translateX(0)',
+      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'
+    gap: '12px',
+    cursor: 'default',
+    '&:hover': {
+      transform: 'none' // Pas d'effet de survol sur mobile
+    }
   }
 }));
 
@@ -83,6 +100,11 @@ const DataSection = (0, _styles.styled)(_material.Box)(() => ({
   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',
@@ -101,11 +123,12 @@ const DataColumn = (0, _styles.styled)(_material.Box)(() => ({
 
 // Label de colonne
 const ColumnLabel = (0, _styles.styled)(_material.Typography)(() => ({
-  fontSize: '11px',
+  fontSize: '12px',
   fontWeight: 600,
-  color: _apperance.palette.gray[500],
-  textTransform: 'uppercase',
-  letterSpacing: '0.5px'
+  color: "#293854",
+  // Couleur bleu marine pour les en-têtes
+  textTransform: 'none',
+  letterSpacing: '0.3px'
 }));
 
 // Valeur de colonne
@@ -116,14 +139,45 @@ const ColumnValue = (0, _styles.styled)(_material.Typography)(() => ({
   wordBreak: 'break-word'
 }));
 
-// Section des actions
+// Section des actions avec effet de survol
 const ActionsSection = (0, _styles.styled)(_material.Box)(() => ({
   display: 'flex',
   alignItems: 'center',
   gap: '8px',
   flexShrink: 0,
+  opacity: 0,
+  transform: 'translateX(10px)',
+  transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+  position: 'relative',
+  // 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'
+    justifyContent: 'center',
+    opacity: 0,
+    // Reste caché même sur mobile
+    transform: 'translateX(10px)',
+    '&::before': {
+      display: 'none' // Pas d'indicateur sur mobile
+    }
   }
 }));
 
@@ -213,8 +267,14 @@ const actionConfig = {
   }
 };
 
-/**
- * Composant de tableau moderne basé sur la maquette
+/**
+ * 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 {
@@ -274,12 +334,16 @@ const PuiModernTable = _ref => {
       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: '14px'
+            fontSize: '12px'
           }
         }),
         onClick: () => {
@@ -289,20 +353,21 @@ const PuiModernTable = _ref => {
         disabled: isDisabled,
         sx: {
           minWidth: 'auto',
-          padding: '6px 12px',
+          padding: '4px 8px',
           fontSize: '11px',
           fontWeight: 500,
-          backgroundColor: isDisabled ? _apperance.palette.gray[300] : action.bgColor || config.bgColor,
-          color: isDisabled ? _apperance.palette.gray[500] : action.textColor || config.textColor,
+          backgroundColor: isDisabled ? _apperance.palette.gray[300] : hoverColor,
+          color: isDisabled ? _apperance.palette.gray[500] : _apperance.palette.white,
           border: 'none',
-          borderRadius: '6px',
+          borderRadius: '4px',
           textTransform: 'none',
+          boxShadow: 'none',
           '&:hover': {
-            backgroundColor: isDisabled ? _apperance.palette.gray[300] : "".concat(action.bgColor || config.bgColor, "dd"),
-            transform: isDisabled ? 'none' : 'translateY(-1px)'
+            backgroundColor: isDisabled ? _apperance.palette.gray[300] : hoverColor,
+            transform: 'none'
           },
           '&:active': {
-            transform: isDisabled ? 'none' : 'translateY(0)'
+            transform: 'none'
           }
         },
         children: action.label || config.label
@@ -357,22 +422,58 @@ const PuiModernTable = _ref => {
           variant: "body1",
           children: emptyMessage
         })
-      }) : data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableCard, {
-        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)(ColumnLabel, {
-              children: column.label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnValue, {
-              children: renderColumnValue(item, column)
-            })]
-          }, column.key))
-        }), actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsSection, {
-          children: renderActions(item)
-        })]
-      }, item.id || index))
+      }) : /*#__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.jsx)(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: "#2C3E5F  !important"
+                  }
+                },
+                children: column.label
+              })
+            }, 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,

package/dist/config/apperance.js

@@ -6,36 +6,40 @@ Object.defineProperty(exports, "__esModule", {
 exports.palette = void 0;
 const palette = exports.palette = {
   inherit: "inherit",
-  // Couleurs principales extraites des maquettes
-  primary: "#1976D2",
-  // Bleu principal des maquettes
+  // Couleurs principales basées sur l'image "1 - Listing 1.png"
+  primary: "#007BFF",
+  // Bleu vif utilisé pour les éléments actifs
   secondary: "#F5F5F5",
   // Gris très clair pour les backgrounds
-  tertiary: "#757575",
+  tertiary: "#637381",
   // Gris moyen pour les textes secondaires
 
-  // Status colors des maquettes
-  error: "#F44336",
-  // Rouge des maquettes
-  warning: "#FF9800",
-  // Orange des maquettes
-  success: "#4CAF50",
-  // Vert des maquettes
-  info: "#2196F3",
-  // Bleu info des maquettes
+  // Status colors basées sur l'image
+  error: "#DC3545",
+  // Rouge "Expiré" de l'image
+  warning: "#FFC107",
+  // Orange "Renouveler" de l'image
+  success: "#28A745",
+  // Vert "Validé" de l'image
+  info: "#007BFF",
+  // Bleu "En cours" de l'image
 
-  // Colors neutres
+  // Colors neutres basées sur l'image
   white: "#FFFFFF",
-  dark: "#212121",
+  dark: "#212B36",
+  // Bleu très foncé de la barre d'en-tête
+  navy: "#293854",
+  // Bleu marine pour la navigation
   black: "#000000",
-  // Palette complète basée sur l'analyse des maquettes
-  accent: "#FF5722",
-  // Orange accent des maquettes
+  // Palette complète basée sur l'analyse de l'image
+  accent: "#007BFF",
+  // Bleu accent principal
   blue: {
     light: "#E3F2FD",
-    main: "#1976D2",
-    // Bleu principal 
-    dark: "#1565C0",
+    main: "#007BFF",
+    // Bleu principal de l'image
+    dark: "#293854",
+    // Bleu marine du header
     darker: "#0D47A1"
   },
   gray: {
@@ -43,19 +47,25 @@ const palette = exports.palette = {
     100: "#F5F5F5",
     200: "#EEEEEE",
     300: "#E0E0E0",
+    // Gris clair pour "Souscrit"
     400: "#BDBDBD",
     500: "#9E9E9E",
-    600: "#757575",
-    700: "#616161",
+    600: "#637381",
+    // Gris moyen pour les onglets inactifs
+    700: "#454F5B",
+    // Gris foncé pour le texte principal
     800: "#424242",
-    900: "#212121"
+    900: "#212B36" // Bleu très foncé
   },
   background: {
-    default: "#FAFAFA",
-    // Background principal des maquettes
+    default: "#FFFFFF",
+    // Fond principal blanc de l'image
     paper: "#FFFFFF",
+    // Cartes blanches
     card: "#FFFFFF",
-    sidebar: "#F5F5F5",
+    // Cartes du tableau
+    sidebar: "#FFFFFF",
+    // Barre latérale blanche
     required: "#FFF3E0",
     // Orange très clair
     error: "#FFEBEE",
@@ -67,11 +77,11 @@ const palette = exports.palette = {
     info: "#E3F2FD" // Bleu très clair
   },
   border: {
-    light: "#E0E0E0",
-    // Bordures claires des maquettes
+    light: "#DFE3E8",
+    // Bordures claires des cartes de l'image
     main: "#BDBDBD",
-    // Bordures moyennes des maquettes  
-    dark: "#757575" // Bordures foncées des maquettes
+    // Bordures moyennes
+    dark: "#454F5B" // Bordures foncées
   },
   shadow: {
     light: "0px 1px 3px rgba(0, 0, 0, 0.1)",
@@ -79,20 +89,20 @@ const palette = exports.palette = {
     strong: "0px 10px 25px rgba(0, 0, 0, 0.15)",
     card: "0px 2px 8px rgba(0, 0, 0, 0.08)"
   },
-  // Couleurs spécifiques des boutons d'actions des maquettes
+  // Couleurs spécifiques des boutons d'actions basées sur l'image
   actions: {
-    validate: "#4CAF50",
-    // Vert "Validé" des maquettes
-    expire: "#F44336",
-    // Rouge "Expiré" des maquettes  
-    renew: "#FF9800",
-    // Orange "Renouveler" des maquettes
-    download: "#2196F3",
-    // Bleu "Télécharger" des maquettes
-    processing: "#9C27B0",
-    // Violet "En cours" des maquettes
-    souscrit: "#607D8B",
-    // Gris bleu "Souscrit" des maquettes
-    default: "#757575" // Gris par défaut
+    validate: "#28A745",
+    // Vert "Validé" de l'image
+    expire: "#DC3545",
+    // Rouge "Expiré" de l'image  
+    renew: "#FFC107",
+    // Orange "Renouveler" de l'image
+    download: "#007BFF",
+    // Bleu "Télécharger" de l'image
+    processing: "#007BFF",
+    // Bleu "En cours" de l'image
+    souscrit: "#E0E0E0",
+    // Gris clair "Souscrit" de l'image
+    default: "#637381" // Gris moyen par défaut
   }
 };

package/package.json

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