@portnet/ui 3.0.7 → 3.1.2

package/dist/components-antd-optional/PuiAntdTable.js

@@ -0,0 +1,352 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.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;
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+var _apperance = require("../../config/apperance");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["data", "columns", "actions", "loading", "title", "pagination", "currentPage", "totalPages", "pageSize", "total", "onPageChange", "onPageSizeChange", "rowKey", "size", "showHeader", "bordered", "expandable", "rowSelection", "scroll", "emptyText"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+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 {
+  Title
+} = _antd.Typography;
+
+// Container principal avec style moderne
+const TableContainer = (0, _styles.styled)(_material.Box)(() => ({
+  padding: '24px',
+  backgroundColor: _apperance.palette.background.default,
+  borderRadius: '12px',
+  minHeight: '400px',
+  // Styles pour la table Ant Design
+  '& .ant-table': {
+    backgroundColor: _apperance.palette.background.paper,
+    borderRadius: '8px',
+    overflow: 'hidden',
+    boxShadow: _apperance.palette.shadow.card
+  },
+  '& .ant-table-thead > tr > th': {
+    backgroundColor: _apperance.palette.gray[50],
+    color: _apperance.palette.gray[700],
+    fontWeight: 600,
+    borderBottom: "2px solid ".concat(_apperance.palette.border.light),
+    padding: '16px'
+  },
+  '& .ant-table-tbody > tr > td': {
+    padding: '16px',
+    borderBottom: "1px solid ".concat(_apperance.palette.border.light),
+    color: _apperance.palette.gray[700]
+  },
+  '& .ant-table-tbody > tr:hover > td': {
+    backgroundColor: "".concat(_apperance.palette.primary, "08")
+  },
+  '& .ant-pagination': {
+    marginTop: '24px',
+    textAlign: 'center',
+    '& .ant-pagination-item': {
+      borderRadius: '6px',
+      border: "1px solid ".concat(_apperance.palette.border.light),
+      '&:hover': {
+        borderColor: _apperance.palette.primary,
+        color: _apperance.palette.primary
+      }
+    },
+    '& .ant-pagination-item-active': {
+      backgroundColor: _apperance.palette.primary,
+      borderColor: _apperance.palette.primary,
+      '& a': {
+        color: _apperance.palette.white
+      }
+    }
+  }
+}));
+
+// Configuration des icônes et couleurs d'actions selon les maquettes
+const actionConfig = {
+  validate: {
+    icon: _icons.CheckCircleOutlined,
+    color: _apperance.palette.actions.validate,
+    label: 'Validé'
+  },
+  expire: {
+    icon: _icons.CloseCircleOutlined,
+    color: _apperance.palette.actions.expire,
+    label: 'Expiré'
+  },
+  renew: {
+    icon: _icons.SyncOutlined,
+    color: _apperance.palette.actions.renew,
+    label: 'Renouveler'
+  },
+  download: {
+    icon: _icons.DownloadOutlined,
+    color: _apperance.palette.actions.download,
+    label: 'Télécharger'
+  },
+  processing: {
+    icon: _icons.ClockCircleOutlined,
+    color: _apperance.palette.actions.processing,
+    label: 'En cours'
+  },
+  souscrit: {
+    icon: _icons.CheckCircleOutlined,
+    color: _apperance.palette.actions.souscrit,
+    label: 'Souscrit'
+  },
+  edit: {
+    icon: _icons.EditOutlined,
+    color: _apperance.palette.info,
+    label: 'Modifier'
+  },
+  view: {
+    icon: _icons.EyeOutlined,
+    color: _apperance.palette.gray[600],
+    label: 'Voir'
+  },
+  delete: {
+    icon: _icons.DeleteOutlined,
+    color: _apperance.palette.error,
+    label: 'Supprimer'
+  }
+};
+
+/**
+ * Composant de tableau moderne utilisant Ant Design avec le thème des maquettes
+ */
+const PuiAntdTable = _ref => {
+  let {
+      data = [],
+      columns = [],
+      actions = [],
+      loading = false,
+      title,
+      pagination = true,
+      currentPage = 1,
+      totalPages = 1,
+      pageSize = 10,
+      total,
+      onPageChange,
+      onPageSizeChange,
+      rowKey = 'id',
+      size = 'middle',
+      showHeader = true,
+      bordered = false,
+      expandable,
+      rowSelection,
+      scroll,
+      emptyText = 'Aucune donnée disponible'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [selectedRowKeys, setSelectedRowKeys] = (0, _react.useState)([]);
+
+  // Transformation des colonnes pour Ant Design
+  const antdColumns = [...columns.map(col => ({
+    title: col.label || col.title,
+    dataIndex: col.key || col.dataIndex,
+    key: col.key || col.dataIndex,
+    width: col.width,
+    fixed: col.fixed,
+    align: col.align || 'left',
+    sorter: col.sortable ? (a, b) => {
+      const aVal = a[col.key] || '';
+      const bVal = b[col.key] || '';
+      return aVal.toString().localeCompare(bVal.toString());
+    } : false,
+    render: col.render || ((text, record) => {
+      if (col.type === 'currency') {
+        return new Intl.NumberFormat('fr-FR', {
+          style: 'currency',
+          currency: 'EUR'
+        }).format(text || 0);
+      }
+      if (col.type === 'date') {
+        return text ? new Date(text).toLocaleDateString('fr-FR') : '-';
+      }
+      if (col.type === 'tag') {
+        const config = col.tagConfig || {};
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tag, {
+          color: config.color || 'default',
+          style: {
+            borderRadius: '6px'
+          },
+          children: text
+        });
+      }
+      return text || '-';
+    })
+  })),
+  // Colonne d'actions si des actions sont définies
+  ...(actions.length > 0 ? [{
+    title: 'Actions',
+    key: 'actions',
+    fixed: 'right',
+    width: Math.min(actions.length * 60 + 40, 300),
+    render: (_, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
+      size: "small",
+      children: actions.map((action, index) => {
+        const config = actionConfig[action.type] || action;
+        const IconComponent = config.icon || action.icon;
+        const isDisabled = action.disabled ? action.disabled(record) : false;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+          type: action.type === 'validate' || action.type === 'renew' ? 'primary' : 'default',
+          icon: IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {}) : null,
+          size: "small",
+          disabled: isDisabled,
+          onClick: () => action.onClick && action.onClick(record),
+          style: {
+            backgroundColor: !isDisabled ? config.color : undefined,
+            borderColor: !isDisabled ? config.color : undefined,
+            color: !isDisabled && config.color ? _apperance.palette.white : undefined,
+            borderRadius: '6px',
+            fontWeight: 500
+          },
+          title: action.tooltip || config.label || action.label,
+          children: action.showLabel !== false && (action.label || config.label)
+        }, index);
+      })
+    })
+  }] : [])];
+
+  // Configuration de la sélection de lignes
+  const selectionConfig = rowSelection ? _objectSpread({
+    selectedRowKeys,
+    onChange: (keys, rows) => {
+      setSelectedRowKeys(keys);
+      rowSelection.onChange && rowSelection.onChange(keys, rows);
+    },
+    onSelectAll: rowSelection.onSelectAll,
+    onSelect: rowSelection.onSelect,
+    type: rowSelection.type || 'checkbox'
+  }, rowSelection) : undefined;
+
+  // Configuration de la pagination
+  const paginationConfig = pagination ? {
+    current: currentPage,
+    pageSize: pageSize,
+    total: total || (data.length > 0 ? totalPages * pageSize : 0),
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total, range) => "".concat(range[0], "-").concat(range[1], " sur ").concat(total, " \xE9l\xE9ments"),
+    onChange: (page, size) => {
+      onPageChange && onPageChange(page);
+      if (size !== pageSize) {
+        onPageSizeChange && onPageSizeChange(size);
+      }
+    },
+    onShowSizeChange: (current, size) => {
+      onPageSizeChange && onPageSizeChange(size);
+    },
+    pageSizeOptions: ['10', '20', '50', '100'],
+    size: 'default'
+  } : false;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableContainer, {
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        mb: 3
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
+        level: 3,
+        style: {
+          margin: 0,
+          color: _apperance.palette.gray[800],
+          fontWeight: 600
+        },
+        children: title
+      })
+    }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: '300px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {
+        size: "large",
+        tip: "Chargement des donn\xE9es..."
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Table, _objectSpread({
+      dataSource: data,
+      columns: antdColumns,
+      rowKey: rowKey,
+      pagination: paginationConfig,
+      loading: loading,
+      size: size,
+      showHeader: showHeader,
+      bordered: bordered,
+      expandable: expandable,
+      rowSelection: selectionConfig,
+      scroll: scroll,
+      locale: {
+        emptyText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Empty, {
+          description: emptyText,
+          style: {
+            padding: '40px 20px'
+          }
+        })
+      }
+    }, props))]
+  });
+};
+PuiAntdTable.propTypes = {
+  data: _propTypes.default.array,
+  columns: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string,
+    title: _propTypes.default.string,
+    width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    fixed: _propTypes.default.oneOf(['left', 'right']),
+    align: _propTypes.default.oneOf(['left', 'center', 'right']),
+    sortable: _propTypes.default.bool,
+    type: _propTypes.default.oneOf(['text', 'currency', 'date', 'tag']),
+    tagConfig: _propTypes.default.object,
+    render: _propTypes.default.func
+  })),
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    type: _propTypes.default.string,
+    label: _propTypes.default.string,
+    icon: _propTypes.default.elementType,
+    onClick: _propTypes.default.func,
+    disabled: _propTypes.default.func,
+    tooltip: _propTypes.default.string,
+    showLabel: _propTypes.default.bool
+  })),
+  loading: _propTypes.default.bool,
+  title: _propTypes.default.string,
+  pagination: _propTypes.default.bool,
+  currentPage: _propTypes.default.number,
+  totalPages: _propTypes.default.number,
+  pageSize: _propTypes.default.number,
+  total: _propTypes.default.number,
+  onPageChange: _propTypes.default.func,
+  onPageSizeChange: _propTypes.default.func,
+  rowKey: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'middle', 'large']),
+  showHeader: _propTypes.default.bool,
+  bordered: _propTypes.default.bool,
+  expandable: _propTypes.default.object,
+  rowSelection: _propTypes.default.object,
+  scroll: _propTypes.default.object,
+  emptyText: _propTypes.default.string
+};
+var _default = exports.default = PuiAntdTable;

package/dist/config/antdTheme.js

@@ -0,0 +1,227 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.antdTheme = void 0;
+var _apperance = require("./apperance");
+// Configuration Ant Design avec la nouvelle palette de couleurs des maquettes
+const antdTheme = exports.antdTheme = {
+  token: {
+    // Couleurs principales
+    colorPrimary: _apperance.palette.primary,
+    colorSuccess: _apperance.palette.success,
+    colorWarning: _apperance.palette.warning,
+    colorError: _apperance.palette.error,
+    colorInfo: _apperance.palette.info,
+    // Couleurs de fond
+    colorBgBase: _apperance.palette.white,
+    colorBgContainer: _apperance.palette.background.paper,
+    colorBgElevated: _apperance.palette.background.card,
+    colorBgLayout: _apperance.palette.background.default,
+    colorBgSpotlight: _apperance.palette.background.sidebar,
+    // Couleurs de texte
+    colorText: _apperance.palette.dark,
+    colorTextSecondary: _apperance.palette.gray[600],
+    colorTextTertiary: _apperance.palette.gray[500],
+    colorTextQuaternary: _apperance.palette.gray[400],
+    // Bordures
+    colorBorder: _apperance.palette.border.light,
+    colorBorderSecondary: _apperance.palette.border.main,
+    // Radius moderne comme dans les maquettes
+    borderRadius: 8,
+    borderRadiusLG: 12,
+    borderRadiusSM: 6,
+    borderRadiusXS: 4,
+    // Shadows modernes
+    boxShadow: _apperance.palette.shadow.light,
+    boxShadowSecondary: _apperance.palette.shadow.medium,
+    boxShadowTertiary: _apperance.palette.shadow.strong,
+    // Espacement
+    padding: 16,
+    paddingLG: 24,
+    paddingSM: 12,
+    paddingXS: 8,
+    paddingXXS: 4,
+    margin: 16,
+    marginLG: 24,
+    marginSM: 12,
+    marginXS: 8,
+    marginXXS: 4,
+    // Tailles
+    controlHeight: 40,
+    controlHeightLG: 48,
+    controlHeightSM: 32,
+    controlHeightXS: 24,
+    // Typographie moderne
+    fontSize: 14,
+    fontSizeLG: 16,
+    fontSizeSM: 12,
+    fontSizeXL: 20,
+    fontSizeHeading1: 32,
+    fontSizeHeading2: 24,
+    fontSizeHeading3: 20,
+    fontSizeHeading4: 16,
+    fontSizeHeading5: 14,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontFamilyCode: 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace',
+    // Line heights
+    lineHeight: 1.5,
+    lineHeightLG: 1.6,
+    lineHeightSM: 1.4,
+    lineHeightHeading1: 1.2,
+    lineHeightHeading2: 1.3,
+    lineHeightHeading3: 1.4,
+    lineHeightHeading4: 1.5,
+    lineHeightHeading5: 1.5,
+    // Motion
+    motionDurationFast: '0.1s',
+    motionDurationMid: '0.2s',
+    motionDurationSlow: '0.3s',
+    motionEaseInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+    motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    motionEaseIn: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+    // Z-index
+    zIndexBase: 0,
+    zIndexPopupBase: 1000,
+    // Screen sizes
+    screenXS: 480,
+    screenSM: 576,
+    screenMD: 768,
+    screenLG: 992,
+    screenXL: 1200,
+    screenXXL: 1600
+  },
+  components: {
+    // Button personnalisé selon les maquettes
+    Button: {
+      borderRadius: 8,
+      controlHeight: 40,
+      controlHeightLG: 48,
+      controlHeightSM: 32,
+      fontWeight: 500,
+      defaultShadow: _apperance.palette.shadow.light,
+      primaryShadow: "0 2px 4px ".concat(_apperance.palette.primary, "40")
+    },
+    // Input personnalisé
+    Input: {
+      borderRadius: 8,
+      controlHeight: 40,
+      controlHeightLG: 48,
+      controlHeightSM: 32,
+      activeBorderColor: _apperance.palette.primary,
+      hoverBorderColor: _apperance.palette.gray[400]
+    },
+    // Select personnalisé  
+    Select: {
+      borderRadius: 8,
+      controlHeight: 40,
+      controlHeightLG: 48,
+      controlHeightSM: 32,
+      optionSelectedBg: "".concat(_apperance.palette.primary, "10"),
+      optionActiveBg: "".concat(_apperance.palette.primary, "08")
+    },
+    // Card moderne selon les maquettes
+    Card: {
+      borderRadius: 12,
+      boxShadow: _apperance.palette.shadow.card,
+      headerBg: _apperance.palette.background.paper,
+      bodyPadding: 24,
+      headPadding: '16px 24px'
+    },
+    // Table style moderne
+    Table: {
+      borderRadius: 8,
+      headerBg: _apperance.palette.gray[50],
+      headerColor: _apperance.palette.gray[700],
+      rowHoverBg: "".concat(_apperance.palette.primary, "08"),
+      borderColor: _apperance.palette.border.light,
+      headerSplitColor: _apperance.palette.border.light
+    },
+    // Menu style moderne
+    Menu: {
+      borderRadius: 8,
+      itemBg: 'transparent',
+      itemSelectedBg: "".concat(_apperance.palette.primary, "10"),
+      itemHoverBg: "".concat(_apperance.palette.primary, "08"),
+      itemActiveBg: "".concat(_apperance.palette.primary, "15"),
+      itemSelectedColor: _apperance.palette.primary,
+      itemColor: _apperance.palette.gray[700]
+    },
+    // Modal moderne
+    Modal: {
+      borderRadius: 12,
+      headerBg: _apperance.palette.background.paper,
+      contentBg: _apperance.palette.background.paper,
+      titleColor: _apperance.palette.dark
+    },
+    // Drawer moderne
+    Drawer: {
+      colorBgElevated: _apperance.palette.background.paper,
+      colorBgMask: 'rgba(0, 0, 0, 0.45)'
+    },
+    // Steps (Stepper) selon les maquettes de parcours
+    Steps: {
+      borderRadius: 8,
+      dotSize: 32,
+      iconSize: 16,
+      titleLineHeight: 1.5,
+      descriptionLineHeight: 1.4,
+      customDotSize: 40,
+      finishIconBorderColor: _apperance.palette.success,
+      finishIconColor: _apperance.palette.success,
+      processIconBorderColor: _apperance.palette.primary,
+      processIconColor: _apperance.palette.primary,
+      waitIconBorderColor: _apperance.palette.gray[300],
+      waitIconColor: _apperance.palette.gray[400]
+    },
+    // Notification moderne
+    Notification: {
+      borderRadius: 8,
+      paddingMD: 16,
+      paddingContentHorizontal: 16
+    },
+    // Message moderne
+    Message: {
+      borderRadius: 8,
+      contentPadding: '10px 16px'
+    },
+    // Progress moderne
+    Progress: {
+      borderRadius: 6,
+      defaultColor: _apperance.palette.gray[200],
+      remainingColor: _apperance.palette.gray[100]
+    },
+    // Tag moderne
+    Tag: {
+      borderRadius: 6,
+      defaultBg: _apperance.palette.gray[100],
+      defaultColor: _apperance.palette.gray[700]
+    },
+    // Breadcrumb moderne
+    Breadcrumb: {
+      itemColor: _apperance.palette.gray[600],
+      lastItemColor: _apperance.palette.dark,
+      linkColor: _apperance.palette.primary,
+      linkHoverColor: _apperance.palette.blue.dark,
+      separatorColor: _apperance.palette.gray[400]
+    },
+    // Pagination moderne
+    Pagination: {
+      borderRadius: 6,
+      itemSize: 32,
+      itemSizeSM: 24,
+      itemActiveBg: _apperance.palette.primary,
+      itemLinkBg: _apperance.palette.background.paper,
+      itemInputBg: _apperance.palette.background.paper
+    },
+    // Typography moderne
+    Typography: {
+      titleMarginBottom: '0.5em',
+      titleMarginTop: '1.2em'
+    }
+  },
+  // Algorithmes de couleurs personnalisés
+  algorithm: []
+};
+var _default = exports.default = antdTheme;