@portnet/ui 2.0.8 → 2.0.9

package/dist/components/others/PuiSection.js

@@ -9,81 +9,106 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var React = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
 var _apperance = require("../../config/apperance");
-var _styleUtils = require("../../config/styleUtils");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 }; }
 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); }
-const StyledMuiPaper = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiPaper-root": _objectSpread({}, (0, _styleUtils.getContainerStyles)({
-      position: "relative",
-      backgroundColor: _apperance.palette.gray.light
-    }))
-  };
-});
-const PuiSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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); } // Style CSS personnalisé pour la section
+const sectionStyles = "\n  .pui-section {\n    position: relative;\n    border-radius: 8px;\n    background-color: #f5f5f5;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);\n    overflow: visible;\n    margin-top: 20px;  /* Espace ajust\xE9 pour le titre flottant */\n    transition: all 0.3s ease-in-out;\n  }\n  \n  .pui-section:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);\n    transform: translateY(-1px);\n  }\n  \n  .pui-section .ant-card-head {\n    position: relative;\n    min-height: 0;\n    padding: 0;\n    border-bottom: none;\n  }\n  \n  .pui-section .ant-card-head-title {\n    padding: 0;\n  }\n  \n  .pui-section-title {\n    position: absolute;\n    top: -16px;\n    left: 16px;\n    padding: 4px 12px;\n    background: linear-gradient(145deg, #ffffff, #f8f8f8);\n    border-radius: 6px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    z-index: 1;\n    display: inline-block;\n    line-height: 1.2;\n    transition: all 0.2s ease;\n    border-left: 3px solid ".concat(_apperance.palette.primary, ";\n  }\n  \n  .pui-section:hover .pui-section-title {\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);\n  }\n  \n  .pui-section .ant-card-body {\n    padding: 20px;\n    padding-top: 28px; /* Espacement suppl\xE9mentaire pour le titre */\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 8px;\n    border-bottom-right-radius: 8px;\n  }\n  \n  .pui-section-h1 { \n    font-size: 20px; \n    font-weight: 600; \n    color: rgba(0, 0, 0, 0.85);\n  }\n  \n  .pui-section-h2 { \n    font-size: 18px; \n    font-weight: 600; \n    color: rgba(0, 0, 0, 0.85);\n  }\n  \n  .pui-section-h3 { \n    font-size: 16px; \n    font-weight: 600; \n    color: rgba(0, 0, 0, 0.85);\n  }\n  \n  .pui-section-h4 { \n    font-size: 14px; \n    font-weight: 500; \n    color: rgba(0, 0, 0, 0.8);\n  }\n  \n  .pui-section-h5 { \n    font-size: 13px; \n    font-weight: 500; \n    color: rgba(0, 0, 0, 0.8);\n  }\n  \n  .pui-section-h6 { \n    font-size: 12px; \n    font-weight: 500; \n    color: rgba(0, 0, 0, 0.8);\n  }\n  \n  /* Bordure color\xE9e selon la variante */\n  .pui-section-primary .pui-section-title {\n    border-left: 3px solid ").concat(_apperance.palette.primary, ";\n  }\n  \n  .pui-section-success .pui-section-title {\n    border-left: 3px solid ").concat(_apperance.palette.success, ";\n  }\n  \n  .pui-section-warning .pui-section-title {\n    border-left: 3px solid ").concat(_apperance.palette.warning, ";\n  }\n  \n  .pui-section-error .pui-section-title {\n    border-left: 3px solid ").concat(_apperance.palette.error, ";\n  }\n  \n  .pui-section-info .pui-section-title {\n    border-left: 3px solid ").concat(_apperance.palette.info, ";\n  }\n  \n  /* Style compact */\n  .pui-section-compact {\n    margin-top: 16px;\n  }\n  \n  .pui-section-compact .ant-card-body {\n    padding: 12px 16px;\n    padding-top: 20px; /* Espacement r\xE9duit mais suffisant */\n  }\n  \n  .pui-section-compact .pui-section-title {\n    top: -13px;\n    padding: 2px 8px;\n    font-size: 0.9em;\n  }\n  \n  /* Soulignement du contenu */\n  .pui-section-underlined .ant-card-body::after {\n    content: '';\n    display: block;\n    margin-top: 12px;\n    height: 1px;\n    background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0) 100%);\n  }\n  \n  /* Avec bordure */\n  .pui-section.ant-card-bordered {\n    border: 1px solid #e8e8e8;\n    border-radius: 8px;\n  }\n  \n  /* Animation d'entr\xE9e si support\xE9e */\n  @keyframes sectionFadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  \n  .pui-section.with-animation {\n    animation: sectionFadeIn 0.3s ease-out forwards;\n  }\n");
+
+// Fonction pour injecter les styles CSS
+const injectStyles = () => {
+  const styleId = 'pui-section-styles';
+  if (!document.getElementById(styleId)) {
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.innerHTML = sectionStyles;
+    document.head.appendChild(styleElement);
+  }
+};
+
+// Fonction pour supprimer les styles CSS
+const removeStyles = () => {
+  const styleElement = document.getElementById('pui-section-styles');
+  if (styleElement) {
+    document.head.removeChild(styleElement);
+  }
+};
+const PuiSection = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     id,
     className,
     sx,
     title,
     titleVariant,
-    children
+    children,
+    bordered = false,
+    compact = false,
+    variant = 'primary',
+    underlined = false,
+    animated = false
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMuiPaper, {
-    id: id,
-    className: className,
-    sx: _objectSpread({
-      padding: 2
-    }, sx),
-    ref: ref,
-    elevation: 1,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        position: "absolute",
-        top: "-1px",
-        left: "30px",
-        transform: "translate(0,-50%)"
-      },
-      children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          transform: "translateY(-50%)",
-          top: "50%",
-          zIndex: "-1",
-          position: "absolute",
-          width: "100%",
-          height: "4px",
-          backgroundColor: _apperance.palette.gray.light
+  // Injection des styles CSS
+  (0, _react.useEffect)(() => {
+    injectStyles();
+    return () => removeStyles();
+  }, []);
+
+  // Construction des styles
+  const containerStyle = _objectSpread({}, sx || {});
+
+  // Construction de la classe pour le titre selon la variante
+  const titleClass = "pui-section-".concat(titleVariant);
+
+  // Classes additionnelles basées sur les props
+  const variantClass = "pui-section-".concat(variant);
+  const underlinedClass = underlined ? 'pui-section-underlined' : '';
+  const animatedClass = animated ? 'with-animation' : '';
+
+  // Rendu du composant
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Card: {
+          headerBg: 'transparent',
+          colorBorderSecondary: bordered ? '#f0f0f0' : 'transparent',
+          colorBgContainer: '#f5f5f5'
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        variant: titleVariant,
-        sx: _objectSpread({}, (0, _styleUtils.getHeaderStyles)({
-          textAlign: "center",
-          paddingX: 1,
-          backgroundColor: "transparent",
-          borderBottom: "none",
-          minHeight: "auto",
-          textTransform: "none",
-          fontSize: "1.2rem"
-        })),
-        children: title
+      }
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Card, {
+      id: id,
+      ref: ref,
+      className: "pui-section ".concat(compact ? 'pui-section-compact' : '', " ").concat(variantClass, " ").concat(underlinedClass, " ").concat(animatedClass, " ").concat(className || ''),
+      style: containerStyle,
+      bordered: bordered,
+      headStyle: {
+        padding: 0,
+        minHeight: 0
+      },
+      bodyStyle: {
+        padding: compact ? '12px 16px 12px 16px' : '20px 20px 20px 20px',
+        paddingTop: compact ? '20px' : '28px'
+      },
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "pui-section-title",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Typography.Text, {
+          className: titleClass,
+          strong: true,
+          children: title
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: children
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      children: children
-    })]
+    })
   });
 });
 PuiSection.propTypes = {
@@ -91,9 +116,19 @@ PuiSection.propTypes = {
   className: _propTypes.default.string,
   sx: _propTypes.default.object,
   title: _propTypes.default.string,
-  titleVariant: _propTypes.default.oneOf(["h1", "h2", "h3", "h4", "h5", "h6"])
+  titleVariant: _propTypes.default.oneOf(["h1", "h2", "h3", "h4", "h5", "h6"]),
+  bordered: _propTypes.default.bool,
+  compact: _propTypes.default.bool,
+  variant: _propTypes.default.oneOf(["primary", "success", "warning", "error", "info"]),
+  underlined: _propTypes.default.bool,
+  animated: _propTypes.default.bool
 };
 PuiSection.defaultProps = {
-  titleVariant: "h2"
+  titleVariant: "h2",
+  bordered: false,
+  compact: false,
+  variant: "primary",
+  underlined: false,
+  animated: false
 };
 var _default = exports.default = PuiSection;

package/package.json

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