allaw-ui 1.0.33 → 1.0.35

package/dist/components/atoms/buttons/SecondaryButton.css

@@ -24,7 +24,7 @@
 
 .secondary-button-enabled:hover {
   color: #25beeb;
-  border: 0px;
+  /* border: 0px; */
 }
 
 .secondary-button-enabled:active {

package/dist/components/molecules/billingCount/BillingCount.js

@@ -63,8 +63,11 @@ function BillingCount(_a) {
     return React.createElement("button", { onClick: handleButtonClick, className: "billing-button-wrapper" },
         React.createElement("i", { className: "allaw-icon-clock" }),
         formatTime(time),
-        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 43 48" },
-            React.createElement("path", { fill: "#25BEEB", d: "M12 39c-.549 0-1.095-.15-1.578-.447A3.008 3.008 0 0 1 9 36V12c0-1.041.54-2.007 1.422-2.553a3.014 3.014 0 0 1 2.919-.132l24 12a3.003 3.003 0 0 1 0 5.37l-24 12c-.42.21-.885.315-1.341.315z" })));
+        React.createElement("svg", { width: "12px", height: "12px", viewBox: "-0.5 0 7 7", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("g", { id: "Page-1", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
+                React.createElement("g", { id: "Dribbble-Light-Preview", transform: "translate(-347.000000, -3766.000000)", fill: "#25BEEB" },
+                    React.createElement("g", { id: "icons", transform: "translate(56.000000, 160.000000)" },
+                        React.createElement("path", { d: "M296.494737,3608.57322 L292.500752,3606.14219 C291.83208,3605.73542 291,3606.25002 291,3607.06891 L291,3611.93095 C291,3612.7509 291.83208,3613.26444 292.500752,3612.85767 L296.494737,3610.42771 C297.168421,3610.01774 297.168421,3608.98319 296.494737,3608.57322", id: "play-[#1003]" }))))));
 }
 export default BillingCount;
 /*

package/dist/components/molecules/pagination/Pagination.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./pagination.css";
+import "../../../styles/global.css";
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+}
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/dist/components/molecules/pagination/Pagination.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from "react";
+import "./pagination.css";
+import "../../../styles/global.css";
+var Pagination = function (_a) {
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange;
+    var _b = useState(window.innerWidth), setWindowWidth = _b[1];
+    var _c = useState(2), range = _c[0], setRange = _c[1];
+    useEffect(function () {
+        var handleResize = function () {
+            setWindowWidth(window.innerWidth);
+            // Ajuster le range en fonction de la largeur
+            setRange(window.innerWidth < 480 ? 1 : 2);
+        };
+        window.addEventListener("resize", handleResize);
+        handleResize(); // Initialisation
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, []);
+    // Validation des props
+    if (currentPage < 1 || currentPage > totalPages) {
+        console.error("Current page must be between 1 and total pages");
+        return null;
+    }
+    var handlePageChange = function (newPage) {
+        if (newPage >= 1 && newPage <= totalPages) {
+            onPageChange(newPage);
+        }
+    };
+    var renderPageNumbers = function () {
+        var items = [];
+        // Bouton Previous
+        items.push(React.createElement("button", { key: "prev", className: "pagination-nav-button pagination-prev-button", onClick: function () { return handlePageChange(currentPage - 1); }, disabled: currentPage === 1, "aria-label": "Page pr\u00E9c\u00E9dente", type: "button" },
+            React.createElement("span", { className: "allaw-icon-chevron-left pagination-icon", "aria-hidden": "true" }),
+            React.createElement("span", { className: "pagination-nav-text" }, "Pr\u00E9c\u00E9dent")));
+        // Première page
+        items.push(React.createElement("button", { key: 1, className: "pagination-number ".concat(currentPage === 1 ? "active" : ""), onClick: function () { return handlePageChange(1); }, "aria-label": "Page 1", "aria-current": currentPage === 1 ? "page" : undefined, type: "button" }, "1"));
+        // Points de suspension gauche
+        if (currentPage - range > 2) {
+            items.push(React.createElement("span", { key: "ellipsis-left", className: "pagination-ellipsis", "aria-hidden": "true" }, "..."));
+        }
+        var _loop_1 = function (i) {
+            items.push(React.createElement("button", { key: i, className: "pagination-number ".concat(currentPage === i ? "active" : ""), onClick: function () { return handlePageChange(i); }, "aria-label": "Page ".concat(i), "aria-current": currentPage === i ? "page" : undefined, type: "button" }, i));
+        };
+        // Pages autour de la page courante
+        for (var i = Math.max(2, currentPage - range); i <= Math.min(totalPages - 1, currentPage + range); i++) {
+            _loop_1(i);
+        }
+        // Points de suspension droite
+        if (currentPage + range < totalPages - 1) {
+            items.push(React.createElement("span", { key: "ellipsis-right", className: "pagination-ellipsis", "aria-hidden": "true" }, "..."));
+        }
+        // Dernière page
+        if (totalPages > 1) {
+            items.push(React.createElement("button", { key: totalPages, className: "pagination-number ".concat(currentPage === totalPages ? "active" : ""), onClick: function () { return handlePageChange(totalPages); }, "aria-label": "Page ".concat(totalPages), "aria-current": currentPage === totalPages ? "page" : undefined, type: "button" }, totalPages));
+        }
+        // Bouton Next
+        items.push(React.createElement("button", { key: "next", className: "pagination-nav-button pagination-next-button", onClick: function () { return handlePageChange(currentPage + 1); }, disabled: currentPage === totalPages, "aria-label": "Page suivante", type: "button" },
+            React.createElement("span", { className: "pagination-nav-text" }, "Suivant"),
+            React.createElement("span", { className: "allaw-icon-chevron-right pagination-icon", "aria-hidden": "true" })));
+        return items;
+    };
+    return (React.createElement("nav", { "aria-label": "Navigation des pages" },
+        React.createElement("div", { className: "pagination-container", role: "navigation" }, renderPageNumbers())));
+};
+export default Pagination;

package/dist/components/molecules/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from "./Pagination";
+export type { PaginationProps } from "./Pagination";

package/dist/components/molecules/pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from "./Pagination";

package/dist/components/molecules/pagination/pagination.css

@@ -0,0 +1,120 @@
+.pagination-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: "Open Sans", sans-serif;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.pagination-number {
+  min-width: 40px;
+  height: 40px;
+  padding: 4px 8px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  font-size: 14px;
+  color: var(--dark-grey);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.pagination-number:hover {
+  background-color: var(--grey-venom, #e6edf5);
+}
+
+.pagination-number.active {
+  background-color: var(--primary-blue);
+  border: 1px solid var(--bleu-allaw, #25beeb);
+}
+
+.pagination-number.active:hover {
+  background-color: var(--grey-venom, #e6edf5);
+}
+
+.pagination-nav-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px;
+  border: none;
+  background: none;
+  color: var(--dark-grey);
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.2s;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.pagination-prev-button {
+  padding-right: 16px;
+}
+
+.pagination-next-button {
+  padding-left: 16px;
+}
+
+.pagination-nav-button:hover {
+  background-color: var(--grey-venom, #e6edf5);
+}
+
+.pagination-nav-button:hover:not(:disabled) {
+  color: var(--primary-blue);
+}
+
+.pagination-nav-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination-ellipsis {
+  padding: 4px 8px;
+  color: var(--dark-grey);
+}
+
+.pagination-icon {
+  font-size: 10px;
+}
+
+/* Media Queries pour la responsivité */
+@media screen and (max-width: 768px) {
+  .pagination-container {
+    gap: 2px;
+  }
+
+  .pagination-number {
+    min-width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .pagination-nav-text {
+    display: none;
+  }
+
+  .pagination-nav-button {
+    padding: 4px 8px;
+  }
+
+  .pagination-prev-button,
+  .pagination-next-button {
+    padding: 4px 8px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .pagination-container {
+    gap: 1px;
+  }
+
+  .pagination-number {
+    min-width: 28px;
+    height: 28px;
+    padding: 2px 4px;
+    font-size: 12px;
+  }
+}

package/dist/index.d.ts

@@ -54,3 +54,5 @@ export { default as RadioForm } from "./components/molecules/radioForm/RadioForm
 export { default as SelectForm } from "./components/molecules/selectForm/SelectForm";
 export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcrumb";
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
+export { default as Pagination } from "./components/molecules/pagination/Pagination";
+export type { PaginationProps } from "./components/molecules/pagination/Pagination";

package/dist/index.js

@@ -74,3 +74,5 @@ export { default as SelectForm } from "./components/molecules/selectForm/SelectF
 export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcrumb";
 // ProCard
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
+// Pagination
+export { default as Pagination } from "./components/molecules/pagination/Pagination";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",