allaw-ui 3.4.0 → 3.4.2

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

@@ -1,58 +0,0 @@
-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

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

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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

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

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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

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

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

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

package/dist/components/molecules/modal/Modal.d.ts

@@ -1,32 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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;