allaw-ui 3.4.3 → 3.4.5

package/dist/components/molecules/frameCTA/FrameCTA.stories.js

@@ -0,0 +1,58 @@
+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 { Meta, StoryFn } from "@storybook/react";
+import FrameCTA, { FrameCTAProps } from "./FrameCTA";
+export default {
+    title: "Components/Molecules/FrameCTA",
+    component: FrameCTA,
+};
+var Template = function (args) { return React.createElement(FrameCTA, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    textColor: {
+        control: "select",
+        options: ["black", "white", "gray"],
+        description: "Couleur du texte pour le titre et le contenu",
+        defaultValue: "",
+    },
+    title: "Poppins - SemiBold - 46px souvent sur 2 lignes",
+    primaryButton: {
+        label: "Bouton",
+        href: "/primary",
+    },
+    secondaryButton: {
+        label: "Bouton",
+        href: "/secondary",
+    },
+    backgroundImage: {
+        src: "https://images.unsplash.com/photo-1731862872903-1d39fe0c10f8?q=80&w=2108&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Image de fond arrière plan",
+    },
+};
+export var WhiteText = Template.bind({});
+WhiteText.args = {
+    title: "Texte en blanc sur la même image",
+    primaryButton: {
+        label: "Bouton principal",
+        href: "/primary",
+    },
+    secondaryButton: {
+        label: "Bouton secondaire",
+        href: "/secondary",
+    },
+    backgroundImage: {
+        src: "https://images.unsplash.com/photo-1731862872903-1d39fe0c10f8?q=80&w=2108&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", // Même image que dans l'exemple par défaut
+        alt: "Image de fond arrière plan",
+    },
+    textColor: "white",
+};

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

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

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

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

package/dist/components/molecules/heroSection/HeroSection.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export type HeroSectionProps = {
+    reverse?: boolean;
+    title: string;
+    content: string;
+    imageBackground: {
+        src: string;
+        alt: string;
+    };
+    imageTop: {
+        src: string;
+        alt: string;
+    };
+    action: {
+        href: string;
+        label: string;
+    };
+    textColor?: "black" | "white" | "gray";
+};
+declare const HeroSection: React.FC<HeroSectionProps>;
+export default HeroSection;

package/dist/components/molecules/heroSection/HeroSection.js

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./heroSection.module.css";
+import Image from "next/image";
+import Link from "next/link";
+var HeroSection = function (_a) {
+    var _b = _a.reverse, reverse = _b === void 0 ? false : _b, title = _a.title, content = _a.content, imageBackground = _a.imageBackground, imageTop = _a.imageTop, action = _a.action, textColor = _a.textColor;
+    return (React.createElement("header", { className: "".concat(styles.banner, " ").concat(reverse ? styles.bannerReverse : ""), style: {
+            backgroundImage: "url(".concat(imageBackground.src, ")"),
+        }, "aria-labelledby": "hero-title" },
+        React.createElement("div", { className: styles.overlayContainer },
+            React.createElement("div", { className: styles.contentWrapper },
+                React.createElement("div", { className: "".concat(styles.contentLeft, " ").concat(textColor ? styles["text-".concat(textColor)] : "") },
+                    React.createElement("h1", { id: "hero-title", className: styles.contentTitle }, title),
+                    React.createElement("p", { className: styles.contentText }, content),
+                    React.createElement(Link, { href: action.href, className: styles.contentButton },
+                        React.createElement("span", { className: styles.contentButtonLabel }, action.label))),
+                React.createElement("div", { className: styles.contentRight },
+                    React.createElement(Image, { src: imageTop.src, alt: imageTop.alt, className: styles.contentImage, width: 600, height: 400, priority: true }))))));
+};
+export default HeroSection;

package/dist/components/molecules/heroSection/HeroSection.stories.d.ts

@@ -0,0 +1,46 @@
+declare namespace _default {
+    export let title: string;
+    export { HeroSection as component };
+    export namespace argTypes {
+        export namespace reverse {
+            let control: string;
+            let description: string;
+        }
+        export namespace title_1 {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export { title_1 as title };
+        export namespace content {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export namespace imageBackground {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        export namespace imageTop {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        export namespace action {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithLongDescription: any;
+export const WhiteTextColor: any;
+import HeroSection from "./HeroSection";

package/dist/components/molecules/heroSection/HeroSection.stories.js

@@ -0,0 +1,100 @@
+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 { Meta, StoryFn } from "@storybook/react";
+import HeroSection, { HeroSectionProps } from "./HeroSection";
+export default {
+    title: "Components/Molecules/HeroSection",
+    component: HeroSection,
+    argTypes: {
+        reverse: {
+            control: "boolean",
+            description: "Inverse l'ordre des sections (blanche et image)",
+        },
+        title: {
+            control: "text",
+            description: "Titre principal de la section",
+        },
+        content: {
+            control: "text",
+            description: "Contenu descriptif de la section",
+        },
+        imageBackground: {
+            control: "object",
+            description: "Image de fond pour la section droite",
+        },
+        imageTop: {
+            control: "object",
+            description: "Image affichée au-dessus du contenu",
+        },
+        action: {
+            control: "object",
+            description: "Lien d'action avec texte et URL",
+        },
+    },
+};
+var Template = function (args) { return React.createElement(HeroSection, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    reverse: false,
+    title: "Transformez votre carrière en un clic",
+    content: "Accédez à des opportunités adaptées à vos aspirations, connectez-vous avec des clients du monde entier et simplifiez vos projets grâce à nos outils performants.",
+    imageBackground: {
+        src: "https://plus.unsplash.com/premium_photo-1672940671025-113a634f83d1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Personne travaillant sur un ordinateur portable",
+    },
+    imageTop: {
+        src: "https://images.unsplash.com/photo-1737334969823-8d6a43b4cba1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Graphiques montrant une croissance",
+    },
+    action: {
+        href: "/join-now",
+        label: "Rejoignez-nous",
+    },
+};
+export var WithLongDescription = Template.bind({});
+WithLongDescription.args = {
+    reverse: true,
+    title: "Un avenir meilleur vous attend",
+    content: "Découvrez une plateforme révolutionnaire qui connecte des talents avec des opportunités uniques. Nous croyons en la puissance de la collaboration et en la capacité des individus à atteindre leurs objectifs, quels qu'ils soient. Grâce à notre réseau mondial, vous pouvez collaborer avec des experts de diverses industries, apprendre de nouvelles compétences et faire partie d'une communauté qui valorise l'innovation. Que vous soyez à la recherche d'un emploi, d'un client, ou d'une nouvelle aventure, nous avons les outils pour vous aider à réussir. Inscrivez-vous aujourd'hui pour découvrir un monde de possibilités sans fin.",
+    imageBackground: {
+        src: "https://images.unsplash.com/photo-1737381439846-b927265e7dfc?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Personne au sommet d'une montagne au coucher du soleil",
+    },
+    imageTop: {
+        src: "https://images.unsplash.com/photo-1737498352618-4fac98caa557?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Personne analysant des graphiques financiers sur un écran",
+    },
+    action: {
+        href: "/explore",
+        label: "Découvrez maintenant",
+    },
+};
+export var WhiteTextColor = Template.bind({});
+WhiteTextColor.args = {
+    reverse: false,
+    title: "Avec un texte blanc en format mobile",
+    content: "Ce texte utilise la couleur blanche pour être lisible sur des fonds sombres ou colorés.",
+    imageBackground: {
+        src: "https://images.unsplash.com/photo-1737381439846-b927265e7dfc?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Personne créative travaillant dans un espace sombre",
+    },
+    imageTop: {
+        src: "https://images.unsplash.com/photo-1737498352618-4fac98caa557?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Éléments graphiques et lumineux",
+    },
+    action: {
+        href: "/white-text",
+        label: "En savoir plus",
+    },
+    textColor: "white",
+};

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

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

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

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

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/modal/Modal.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+interface ImageConfig {
+    url: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    padding?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface ModalProps {
+    show: boolean;
+    title: string;
+    description: string;
+    confirmLabel: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    isDanger?: boolean;
+    confirmIconName?: string;
+    imageConfig?: ImageConfig;
+    verticalOffset?: {
+        top?: number;
+        bottom?: number;
+    };
+    horizontalOffset?: {
+        left?: number;
+        right?: number;
+    };
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/molecules/modal/Modal.js

@@ -0,0 +1,97 @@
+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, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import style from "./Modal.module.css";
+import PrimaryButton from "../../atoms/buttons/PrimaryButton";
+import SecondaryButton from "../../atoms/buttons/SecondaryButton";
+import Heading from "../../atoms/typography/Heading";
+import Paragraph from "../../atoms/typography/Paragraph";
+var Modal = function (_a) {
+    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset;
+    var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
+    var _e = useState(false), imgError = _e[0], setImgError = _e[1];
+    var portalContainerRef = useRef(null);
+    var modalContentRef = useRef(null);
+    var isMouseDownOutsideRef = useRef(false);
+    useEffect(function () {
+        if (show) {
+            var container = document.createElement("div");
+            document.body.appendChild(container);
+            portalContainerRef.current = container;
+            document.body.style.overflow = "hidden";
+            setIsVisible(true);
+            setImgError(false);
+        }
+        else {
+            setIsVisible(false);
+            if (portalContainerRef.current &&
+                document.body.contains(portalContainerRef.current)) {
+                document.body.removeChild(portalContainerRef.current);
+                document.body.style.overflow = "";
+            }
+        }
+        return function () {
+            setIsVisible(false);
+            if (portalContainerRef.current &&
+                document.body.contains(portalContainerRef.current)) {
+                document.body.removeChild(portalContainerRef.current);
+                document.body.style.overflow = "";
+            }
+        };
+    }, [show]);
+    var handleMouseDown = function (e) {
+        if (modalContentRef.current &&
+            !modalContentRef.current.contains(e.target)) {
+            isMouseDownOutsideRef.current = true;
+        }
+        else {
+            isMouseDownOutsideRef.current = false;
+        }
+    };
+    var handleMouseUp = function (e) {
+        if (isMouseDownOutsideRef.current &&
+            modalContentRef.current &&
+            !modalContentRef.current.contains(e.target)) {
+            onCancel();
+        }
+    };
+    var handleImageError = function () {
+        setImgError(true);
+    };
+    if (!show || !isVisible || !portalContainerRef.current)
+        return null;
+    var modalContent = (React.createElement("div", { className: "".concat(style.modalOverlay, " ").concat(isVisible ? style.visible : "", " ").concat(show ? style.modal : ""), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, style: {
+            paddingTop: (verticalOffset === null || verticalOffset === void 0 ? void 0 : verticalOffset.top) ? "".concat(verticalOffset.top, "px") : undefined,
+            paddingBottom: (verticalOffset === null || verticalOffset === void 0 ? void 0 : verticalOffset.bottom)
+                ? "".concat(verticalOffset.bottom, "px")
+                : undefined,
+            paddingLeft: (horizontalOffset === null || horizontalOffset === void 0 ? void 0 : horizontalOffset.left)
+                ? "".concat(horizontalOffset.left, "px")
+                : undefined,
+            paddingRight: (horizontalOffset === null || horizontalOffset === void 0 ? void 0 : horizontalOffset.right)
+                ? "".concat(horizontalOffset.right, "px")
+                : undefined,
+        } },
+        React.createElement("div", { className: "".concat(style.modalContent, " ").concat(show ? style.modal : ""), ref: modalContentRef },
+            React.createElement("div", { className: style.modalHeadingWrapper },
+                React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
+            React.createElement("div", { className: style.modalParagraphWrapper },
+                React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: style.modalParagraph })),
+            imageConfig && !imgError && (React.createElement("div", { className: "".concat(style.modalImageWrapper, " ").concat(imageConfig.className || ""), style: __assign({ padding: imageConfig.padding }, imageConfig.style) },
+                React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage }))),
+            React.createElement("div", { className: style.modalButtons },
+                cancelLabel && (React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true })),
+                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true })))));
+    return ReactDOM.createPortal(modalContent, portalContainerRef.current);
+};
+export default Modal;