allaw-ui 0.1.71 → 1.0.0

package/dist/components/molecules/employeeCard/EmployeeCard.stories.d.ts

@@ -0,0 +1,74 @@
+declare namespace _default {
+    export let title: string;
+    export { EmployeeCard as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace name {
+            let control: string;
+        }
+        namespace role {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace contactNumber {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace email1 {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace email2 {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        namespace profileImage {
+            let control_5: string;
+            export { control_5 as control };
+        }
+        namespace isVerified {
+            let control_6: string;
+            export { control_6 as control };
+        }
+        namespace size {
+            export namespace control_7 {
+                let type: string;
+                let options: string[];
+            }
+            export { control_7 as control };
+        }
+        namespace onEdit {
+            let action: string;
+        }
+    }
+    export namespace args {
+        let name_1: string;
+        export { name_1 as name };
+        let role_1: string;
+        export { role_1 as role };
+        let contactNumber_1: string;
+        export { contactNumber_1 as contactNumber };
+        let email1_1: string;
+        export { email1_1 as email1 };
+        let email2_1: string;
+        export { email2_1 as email2 };
+        export { NoPhotoImage as profileImage };
+        let isVerified_1: boolean;
+        export { isVerified_1 as isVerified };
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Small: any;
+export const Large: any;
+import EmployeeCard from "./EmployeeCard";
+declare const NoPhotoImage: "/assets/NoPhoto.png";

package/dist/components/molecules/employeeCard/EmployeeCard.stories.js

@@ -0,0 +1,65 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import EmployeeCard from "./EmployeeCard";
+import "../../../styles/global.css";
+var NoPhotoImage = "/assets/NoPhoto.png";
+export default {
+    title: "Components/Molecules/EmployeeCard",
+    component: EmployeeCard,
+    tags: ["autodocs"],
+    argTypes: {
+        name: { control: "text" },
+        role: { control: "text" },
+        contactNumber: { control: "text" },
+        email1: { control: "text" },
+        email2: { control: "text" },
+        profileImage: { control: "text" },
+        isVerified: { control: "boolean" },
+        size: {
+            control: {
+                type: "select",
+                options: ["small", "large"],
+            },
+        },
+        onEdit: { action: "edited" },
+    },
+    args: {
+        name: "Enzo Soixante",
+        role: "AVOCAT",
+        contactNumber: "06 63 90 59 25",
+        email1: "enzo@quarantesoixante.com",
+        email2: "enzo@quarantesoixante.com",
+        profileImage: NoPhotoImage,
+        isVerified: true,
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(EmployeeCard, __assign({}, args)); };
+export var Small = Template.bind({});
+Small.args = {
+    size: "small",
+};
+export var Large = Template.bind({});
+Large.args = {
+    size: "large",
+};

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

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

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

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

package/dist/components/molecules/loadingBox/LoadingBox.css

@@ -1,13 +1,12 @@
 .loading-box {
-    animation: skeleton-loading 1s linear infinite alternate;
+  animation: skeleton-loading 1s linear infinite alternate;
 }
 
 @keyframes skeleton-loading {
-    0% {
-      background-color: hsl(200, 20%, 80%);
-    }
-    100% {
-      background-color: hsl(200, 20%, 95%);
-    }
+  0% {
+    background-color: hsl(200, 20%, 80%);
   }
-  
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}

package/dist/components/molecules/loadingBox/LoadingBox.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./LoadingBox.css";
+export interface LoadingBoxProps {
+    boxHeight?: string;
+    boxWidth?: string;
+    boxRadius?: string;
+    height?: string;
+    width?: string;
+    borderRadius?: string;
+}
+declare const LoadingBox: React.FC<LoadingBoxProps>;
+export default LoadingBox;

package/dist/components/molecules/loadingBox/LoadingBox.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "./LoadingBox.css";
+var LoadingBox = function (_a) {
+    var boxHeight = _a.boxHeight, boxWidth = _a.boxWidth, boxRadius = _a.boxRadius, _b = _a.height, height = _b === void 0 ? "100px" : _b, _c = _a.width, width = _c === void 0 ? "100px" : _c, _d = _a.borderRadius, borderRadius = _d === void 0 ? "8px" : _d;
+    return (React.createElement("div", { className: "loading-box", style: {
+            height: boxHeight || height,
+            width: boxWidth || width,
+            borderRadius: boxRadius || borderRadius,
+        } }));
+};
+export default LoadingBox;

package/dist/components/molecules/loadingBox/LoadingBox.stories.d.ts

@@ -0,0 +1,54 @@
+declare namespace _default {
+    export let title: string;
+    export { LoadingBox as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace boxHeight {
+            namespace control {
+                let type: string;
+            }
+            let description: string;
+        }
+        namespace boxWidth {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace boxRadius {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+        namespace docs {
+            export namespace description_3 {
+                let component: string;
+            }
+            export { description_3 as description };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Large: any;
+export const Small: any;
+export const MultipleBoxes: any;
+export const CardSkeleton: any;
+import LoadingBox from "./LoadingBox";

package/dist/components/molecules/loadingBox/LoadingBox.stories.js

@@ -0,0 +1,128 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import LoadingBox from "./LoadingBox";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/LoadingBox",
+    component: LoadingBox,
+    tags: ["autodocs"],
+    argTypes: {
+        boxHeight: {
+            control: {
+                type: "text",
+            },
+            description: "Hauteur de la boîte de chargement",
+        },
+        boxWidth: {
+            control: {
+                type: "text",
+            },
+            description: "Largeur de la boîte de chargement",
+        },
+        boxRadius: {
+            control: {
+                type: "text",
+            },
+            description: "Rayon de bordure de la boîte de chargement",
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+        docs: {
+            description: {
+                component: "Composant d'animation de chargement sous forme de boîte avec un effet de pulsation.",
+            },
+        },
+    },
+};
+var Template = function (args) { return (React.createElement("div", { style: { padding: "20px", display: "flex", gap: "20px", flexWrap: "wrap" } },
+    React.createElement(LoadingBox, __assign({}, args)))); };
+export var Default = Template.bind({});
+Default.args = {
+    boxHeight: "100px",
+    boxWidth: "100px",
+    boxRadius: "8px",
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: "Version par défaut de la boîte de chargement avec des dimensions moyennes.",
+        },
+    },
+};
+export var Large = Template.bind({});
+Large.args = {
+    boxHeight: "200px",
+    boxWidth: "200px",
+    boxRadius: "8px",
+};
+Large.parameters = {
+    docs: {
+        description: {
+            story: "Version large de la boîte de chargement, utile pour les conteneurs plus importants.",
+        },
+    },
+};
+export var Small = Template.bind({});
+Small.args = {
+    boxHeight: "50px",
+    boxWidth: "50px",
+    boxRadius: "8px",
+};
+Small.parameters = {
+    docs: {
+        description: {
+            story: "Version compacte de la boîte de chargement, idéale pour les petits espaces.",
+        },
+    },
+};
+export var MultipleBoxes = Template.bind({});
+MultipleBoxes.args = {
+    boxHeight: "100px",
+    boxWidth: "100px",
+    boxRadius: "8px",
+};
+MultipleBoxes.decorators = [
+    function (Story) { return (React.createElement("div", { style: { display: "flex", gap: "20px" } },
+        React.createElement(Story, null),
+        React.createElement(Story, null),
+        React.createElement(Story, null))); },
+];
+MultipleBoxes.parameters = {
+    docs: {
+        description: {
+            story: "Exemple d'utilisation de plusieurs boîtes de chargement côte à côte.",
+        },
+    },
+};
+export var CardSkeleton = Template.bind({});
+CardSkeleton.args = {
+    boxHeight: "150px",
+    boxWidth: "450px",
+    boxRadius: "8px",
+};
+CardSkeleton.parameters = {
+    docs: {
+        description: {
+            story: "Exemple d'utilisation comme squelette de carte.",
+        },
+    },
+};

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

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

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

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

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/Pagination.stories.d.ts

@@ -0,0 +1,44 @@
+declare namespace _default {
+    export let title: string;
+    export { Pagination as component };
+    export let tags: string[];
+    export namespace args {
+        let currentPage: number;
+        let totalPages: number;
+        function onPageChange(page: any): void;
+    }
+    export namespace argTypes {
+        export namespace currentPage_1 {
+            namespace control {
+                let type: string;
+                let min: number;
+            }
+            let description: string;
+        }
+        export { currentPage_1 as currentPage };
+        export namespace totalPages_1 {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+                let min_1: number;
+                export { min_1 as min };
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export { totalPages_1 as totalPages };
+        export namespace onPageChange_1 {
+            export let action: string;
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export { onPageChange_1 as onPageChange };
+    }
+}
+export default _default;
+export const Default: any;
+export const FirstPage: any;
+export const LastPage: any;
+export const FewPages: any;
+import Pagination from "./Pagination";

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

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import Pagination from "./Pagination";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/Pagination",
+    component: Pagination,
+    tags: ["autodocs"],
+    args: {
+        currentPage: 21,
+        totalPages: 42,
+        onPageChange: function (page) { return console.log("Page changed to ".concat(page)); },
+    },
+    argTypes: {
+        currentPage: {
+            control: { type: "number", min: 1 },
+            description: "La page actuellement sélectionnée",
+        },
+        totalPages: {
+            control: { type: "number", min: 1 },
+            description: "Le nombre total de pages",
+        },
+        onPageChange: {
+            action: "page changed",
+            description: "Fonction appelée lors du changement de page",
+        },
+    },
+};
+var Template = function (args) { return React.createElement(Pagination, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    currentPage: 21,
+    totalPages: 42,
+};
+export var FirstPage = Template.bind({});
+FirstPage.args = {
+    currentPage: 1,
+    totalPages: 42,
+};
+export var LastPage = Template.bind({});
+LastPage.args = {
+    currentPage: 42,
+    totalPages: 42,
+};
+export var FewPages = Template.bind({});
+FewPages.args = {
+    currentPage: 3,
+    totalPages: 5,
+};

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";