allaw-ui 3.4.3 → 3.4.4

package/dist/components/molecules/datepickerForm/DatepickerForm.stories.js

@@ -0,0 +1,113 @@
+import React from "react";
+import DatepickerForm from "./DatepickerForm";
+import "../../../styles/global.css";
+import "react-datepicker/dist/react-datepicker.css";
+export default {
+    title: "Components/Molecules/DatepickerForm",
+    component: DatepickerForm,
+    tags: ["autodocs"],
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+    argTypes: {
+        text: {
+            control: "text",
+            description: "Label text above the datepicker",
+            defaultValue: "DATE D'OUVERTURE",
+        },
+        variant: {
+            options: ["bold", "semiBold", "medium"],
+            control: { type: "select" },
+            defaultValue: "medium",
+        },
+        color: {
+            options: [
+                "bleu-allaw",
+                "mid-grey",
+                "dark-grey",
+                "noir",
+                "pure-white",
+                "grey-venom",
+                "venom-grey-dark",
+            ],
+            control: { type: "select" },
+            defaultValue: "noir",
+        },
+        yearDropdownItemNumber: {
+            control: { type: "number" },
+            description: "Nombre d'années à afficher dans la liste déroulante",
+            defaultValue: 10,
+        },
+        maxDaysInPast: {
+            control: { type: "number" },
+            description: "Nombre maximum de jours dans le passé sélectionnables",
+        },
+        minDate: {
+            control: { type: "date" },
+            description: "Date minimale sélectionnable",
+        },
+    },
+};
+export var Default = {
+    args: {
+        text: "DATE D'OUVERTURE",
+        placeholder: "Sélectionner une date",
+        variant: "medium",
+        color: "noir",
+        yearDropdownItemNumber: 10,
+    },
+};
+export var WithLabel = {
+    args: {
+        text: "DATE D'OUVERTURE",
+        placeholder: "Sélectionner une date",
+        variant: "medium",
+        color: "noir",
+        yearDropdownItemNumber: 10,
+    },
+};
+export var WithValue = {
+    args: {
+        value: new Date("2022-11-10"),
+        text: "DATE D'OUVERTURE",
+        placeholder: "Sélectionner une date",
+        variant: "medium",
+        color: "noir",
+        yearDropdownItemNumber: 10,
+    },
+};
+export var WithMaxDaysInPast = {
+    args: {
+        text: "DATE D'OUVERTURE (max 10 jours dans le passé)",
+        placeholder: "Sélectionner une date",
+        variant: "medium",
+        color: "noir",
+        maxDaysInPast: 10,
+    },
+};
+export var WithMinDate = {
+    args: {
+        text: "DATE D'OUVERTURE (à partir du 1er janvier 2024)",
+        placeholder: "Sélectionner une date",
+        variant: "medium",
+        color: "noir",
+        minDate: new Date("2024-01-01"),
+    },
+};
+export var WithBothConstraints = {
+    args: {
+        text: "DATE D'OUVERTURE (avec les deux contraintes)",
+        placeholder: "Sélectionner une date",
+        variant: "medium",
+        color: "noir",
+        maxDaysInPast: 30,
+        minDate: new Date("2024-01-01"),
+    },
+};

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

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

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

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

package/dist/components/molecules/documentCard/DocumentCard.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "./DocumentCard.css";
+export interface DocumentCardProps {
+    type: "document" | "note" | "invoice" | "waiting" | "payment" | undefined;
+    title: string;
+    date: Date | undefined;
+    status: "sent" | "received" | "refunded" | "partialyRefunded" | "internal" | "notRequired" | "waiting" | "expired" | "canceled" | "failed" | "processing" | "maxAttemptsReached";
+    documents?: {
+        [key: string]: boolean;
+    };
+    onCardClick?: () => any;
+    documentCount?: string;
+    shadow?: boolean;
+}
+declare const DocumentCard: React.FC<DocumentCardProps>;
+export default DocumentCard;

package/dist/components/molecules/documentCard/DocumentCard.js

@@ -0,0 +1,124 @@
+import React from "react";
+import "./DocumentCard.css";
+import IconButton from "../../atoms/buttons/IconButton";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import { Paragraph } from "../../atoms/typography";
+var DocumentCard = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? "document" : _b, title = _a.title, _c = _a.date, date = _c === void 0 ? new Date() : _c, onCardClick = _a.onCardClick, status = _a.status, _d = _a.documents, documents = _d === void 0 ? {} : _d, _e = _a.documentCount, documentCount = _e === void 0 ? "" : _e, _f = _a.shadow, shadow = _f === void 0 ? true : _f;
+    var getIconName = function () {
+        switch (type) {
+            case "document":
+                return "allaw-icon-edit-2";
+            case "note":
+                return "allaw-icon-document";
+            case "invoice":
+                return "allaw-icon-file";
+            case "waiting":
+                return "allaw-icon-clock";
+            case "payment":
+                return "allaw-icon-prestation";
+            default:
+                return "allaw-icon-document";
+        }
+    };
+    var getStatusName = function () {
+        switch (status) {
+            case "partialyRefunded":
+            case "refunded":
+                return "REMBOURSÉ";
+            case "internal":
+                return "INTERNE";
+            case "received":
+                return "REÇU";
+            case "sent":
+                return "ENVOYÉ";
+            case "notRequired":
+                return "NON REQUIS";
+            case "waiting":
+                return "EN ATTENTE";
+            case "expired":
+                return "EXPIRÉ";
+            case "canceled":
+                return "ANNULÉ";
+            case "failed":
+                return "ÉCHOUÉ";
+            case "processing":
+                return "EN COURS";
+            case "maxAttemptsReached":
+                return "ÉCHOUÉ";
+            default:
+                return "INTERNE";
+        }
+    };
+    var getDisplayType = function (type) {
+        if (!type) {
+            return "";
+        }
+        if (type === "invoice") {
+            return "FACTURE";
+        }
+        if (type === "payment") {
+            return "PAIEMENT";
+        }
+        return type.toUpperCase();
+    };
+    var formatDate = function (date) {
+        if (!date) {
+            return "";
+        }
+        return date.toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "2-digit",
+            year: "2-digit",
+        });
+    };
+    var getInformationColor = function (status) {
+        switch (status) {
+            case "refunded":
+            case "partialyRefunded":
+            case "internal":
+            case "received":
+            case "sent":
+            case "notRequired":
+            case "waiting":
+                return "blue";
+            case "processing":
+                return "orange";
+            case "expired":
+            case "canceled":
+            case "failed":
+            case "maxAttemptsReached":
+                return "red";
+            default:
+                return "blue";
+        }
+    };
+    if (type === "waiting") {
+        var documentList = Object.keys(documents);
+        return (React.createElement("div", { className: "document-card waiting", style: { cursor: onCardClick ? "pointer" : "default" }, onClick: function () { return onCardClick && onCardClick(); } },
+            React.createElement("div", { className: "document-card-left" },
+                React.createElement(OtherStatusTag, { type: "information", label: "Documents demand\u00E9s pour ce rendez-vous" }),
+                React.createElement("h3", { className: "document-card-title" }, title),
+                React.createElement("div", { className: "document-list" },
+                    React.createElement("ul", null, documentList.map(function (doc, index) { return (React.createElement("li", { key: index, className: "document-label" },
+                        React.createElement("span", { className: "document-bullet" }),
+                        " ",
+                        doc)); })))),
+            React.createElement("div", { className: "document-card-right" },
+                React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document" }),
+                React.createElement("span", { className: "document-count" }, documentCount))));
+    }
+    return (React.createElement("div", { className: "document-card".concat(shadow ? " with-shadow" : ""), onClick: function () { return onCardClick && onCardClick(); }, style: { cursor: onCardClick ? "pointer" : "default" } },
+        React.createElement("div", { className: "document-card-left" },
+            React.createElement(IconButton, { style: "largeFilled", iconName: getIconName(), color: type == "payment" ? "#25BEEB" : "inherit" }),
+            React.createElement("div", { className: "document-card-info" },
+                React.createElement("span", { className: "document-card-type" }, getDisplayType(type)),
+                React.createElement(Paragraph, { text: title, variant: "semiBold", size: "default", maxLines: 2, color: "noir" }),
+                React.createElement("span", { className: "document-card-date" }, formatDate(date)))),
+        React.createElement("div", { className: "document-card-right" },
+            React.createElement("div", { className: "document-card-status" },
+                React.createElement(OtherStatusTag, { type: "information", label: getStatusName(), informationColor: getInformationColor(status) })),
+            type != "payment" && (React.createElement("div", { className: "document-card-icon-eye" },
+                React.createElement("i", { className: "allaw-icon-eye" }))))));
+};
+export default DocumentCard;

package/dist/components/molecules/documentCard/DocumentCard.stories.d.ts

@@ -0,0 +1,71 @@
+declare namespace _default {
+    export let title: string;
+    export { DocumentCard as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace type {
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+                export let options: string[];
+            }
+        }
+        export namespace title_1 {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        export { title_1 as title };
+        export namespace date {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        export namespace status {
+            export namespace control_3 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_3 as control };
+        }
+        export namespace documents {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        export namespace documentCount {
+            let control_5: string;
+            export { control_5 as control };
+        }
+        export namespace shadow {
+            let control_6: string;
+            export { control_6 as control };
+        }
+    }
+    export namespace args {
+        export { defaultDocuments as documents };
+        let documentCount_1: string;
+        export { documentCount_1 as documentCount };
+        let shadow_1: boolean;
+        export { shadow_1 as shadow };
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Note: any;
+export const Invoice: any;
+export const Waiting: any;
+import DocumentCard from "./DocumentCard";
+declare const defaultDocuments: {
+    "Carte d'identit\u00E9 des \u00E9poux": boolean;
+    "Acte de naissance des \u00E9poux": boolean;
+};

package/dist/components/molecules/documentCard/DocumentCard.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 DocumentCard from "./DocumentCard";
+import "../../../styles/global.css";
+var defaultDocuments = {
+    "Carte d'identité des époux": true,
+    "Acte de naissance des époux": true,
+};
+export default {
+    title: "Components/Molecules/DocumentCard",
+    component: DocumentCard,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            control: {
+                type: "select",
+                options: ["document", "note", "invoice", "waiting"],
+            },
+        },
+        title: { control: "text" },
+        date: { control: "date" },
+        status: {
+            control: {
+                type: "select",
+                options: [
+                    "sent",
+                    "received",
+                    "internal",
+                    "notRequired",
+                    "waiting",
+                    "expired",
+                    "canceled",
+                    "failed",
+                    "processing",
+                    "maxAttemptsReached",
+                ],
+            },
+        },
+        documents: {
+            control: "object",
+        },
+        documentCount: { control: "text" },
+        shadow: { control: "boolean" },
+    },
+    args: {
+        documents: defaultDocuments,
+        documentCount: "1/3",
+        shadow: 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(DocumentCard, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    type: "document",
+    title: "RDV Signature des docs",
+    date: new Date("2023-05-14"),
+    status: "sent",
+};
+export var Note = Template.bind({});
+Note.args = {
+    type: "note",
+    title: "Note de frais",
+    date: new Date("2023-06-01"),
+    status: "received",
+};
+export var Invoice = Template.bind({});
+Invoice.args = {
+    type: "invoice",
+    title: "Facture #2023-001",
+    date: new Date("2023-07-15"),
+    status: "sent",
+};
+export var Waiting = Template.bind({});
+Waiting.args = {
+    type: "waiting",
+    title: "Motif du rendez-vous : Signature des docs",
+    date: new Date("2023-08-30"),
+    status: "received",
+};

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from "react";
+import "./EmployeeCard.css";
+export interface EmployeeCardProps {
+    name: string;
+    role: string;
+    contactNumber: string;
+    email1: string;
+    email2: string;
+    profileImage: string;
+    isVerified: boolean;
+    size: "small" | "large";
+    onEdit: () => void;
+}
+declare const EmployeeCard: React.FC<EmployeeCardProps>;
+export default EmployeeCard;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import "./EmployeeCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import IconButton from "../../atoms/buttons/IconButton";
+import Image from "next/image";
+var NoPhoto = "/assets/NoPhoto.png";
+var EmployeeCard = function (_a) {
+    var name = _a.name, role = _a.role, contactNumber = _a.contactNumber, email1 = _a.email1, email2 = _a.email2, profileImage = _a.profileImage, isVerified = _a.isVerified, size = _a.size, onEdit = _a.onEdit;
+    var renderProfileImage = function () { return (React.createElement("div", { className: "profile-image-container" },
+        React.createElement(Image, { src: profileImage || NoPhoto, alt: name, width: size === "small" ? 64 : 94, height: size === "small" ? 64 : 94, className: "profile-image" }),
+        isVerified && (React.createElement("span", { className: "verified-icon allaw-icon-verified" })))); };
+    var renderNameAndRole = function () { return (React.createElement("div", { className: "name-tag-container" },
+        React.createElement("h3", { className: "name" }, name),
+        React.createElement("div", { className: "role-container" },
+            React.createElement(OtherStatusTag, { label: role, type: "information" })))); };
+    var renderContactInfo = function () { return (React.createElement("div", { className: "contact-container" },
+        React.createElement("span", { className: "contact-label" }, "CONTACT"),
+        React.createElement("div", { className: "phone-email-container" },
+            React.createElement("span", { className: "phone-number" }, contactNumber),
+            React.createElement("span", { className: "email" }, email1),
+            React.createElement("span", { className: "email" }, email2)))); };
+    var renderSmallCard = function () { return (React.createElement("div", { className: "content" },
+        renderProfileImage(),
+        renderNameAndRole())); };
+    var renderLargeCard = function () { return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "content" },
+            renderProfileImage(),
+            React.createElement("div", { className: "content-main-container" },
+                renderNameAndRole(),
+                React.createElement("div", { className: "content-container" }, renderContactInfo()))),
+        React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit }))); };
+    return (React.createElement("div", { className: "employee-card ".concat(size) }, size === "small" ? renderSmallCard() : renderLargeCard()));
+};
+export default EmployeeCard;

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/entityAdminCard/EntityAdminCard.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface EntityAdminCardProps {
+    email: string;
+    dateSent?: string;
+    role?: "admin" | "default";
+    status?: "member" | "request";
+    avatarUrl?: string;
+    onAccept?: () => void;
+    onRefuse?: () => void;
+    onRoleChange?: (newRole: "admin" | "default") => void;
+}
+declare function EntityAdminCard({ email, dateSent, role, status, avatarUrl, onAccept, onRefuse, onRoleChange, }: EntityAdminCardProps): React.JSX.Element;
+export default EntityAdminCard;