allaw-ui 0.1.71 → 1.0.0

package/dist/components/molecules/datepickerForm/DatepickerForm.stories.d.ts

@@ -0,0 +1,164 @@
+declare namespace _default {
+    export let title: string;
+    export { DatepickerForm as component };
+    export let tags: string[];
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+    export namespace argTypes {
+        namespace text {
+            let control: string;
+            let description: string;
+            let defaultValue: string;
+        }
+        namespace variant {
+            export let options: string[];
+            export namespace control_1 {
+                let type: string;
+            }
+            export { control_1 as control };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
+        namespace color {
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace control_2 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_2 as control };
+            let defaultValue_2: string;
+            export { defaultValue_2 as defaultValue };
+        }
+        namespace yearDropdownItemNumber {
+            export namespace control_3 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_3 as control };
+            let description_1: string;
+            export { description_1 as description };
+            let defaultValue_3: number;
+            export { defaultValue_3 as defaultValue };
+        }
+        namespace maxDaysInPast {
+            export namespace control_4 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_4 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace minDate {
+            export namespace control_5 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_5 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+    }
+}
+export default _default;
+export namespace Default {
+    namespace args {
+        let text_1: string;
+        export { text_1 as text };
+        export let placeholder: string;
+        let variant_1: string;
+        export { variant_1 as variant };
+        let color_1: string;
+        export { color_1 as color };
+        let yearDropdownItemNumber_1: number;
+        export { yearDropdownItemNumber_1 as yearDropdownItemNumber };
+    }
+}
+export namespace WithLabel {
+    export namespace args_1 {
+        let text_2: string;
+        export { text_2 as text };
+        let placeholder_1: string;
+        export { placeholder_1 as placeholder };
+        let variant_2: string;
+        export { variant_2 as variant };
+        let color_2: string;
+        export { color_2 as color };
+        let yearDropdownItemNumber_2: number;
+        export { yearDropdownItemNumber_2 as yearDropdownItemNumber };
+    }
+    export { args_1 as args };
+}
+export namespace WithValue {
+    export namespace args_2 {
+        export let value: Date;
+        let text_3: string;
+        export { text_3 as text };
+        let placeholder_2: string;
+        export { placeholder_2 as placeholder };
+        let variant_3: string;
+        export { variant_3 as variant };
+        let color_3: string;
+        export { color_3 as color };
+        let yearDropdownItemNumber_3: number;
+        export { yearDropdownItemNumber_3 as yearDropdownItemNumber };
+    }
+    export { args_2 as args };
+}
+export namespace WithMaxDaysInPast {
+    export namespace args_3 {
+        let text_4: string;
+        export { text_4 as text };
+        let placeholder_3: string;
+        export { placeholder_3 as placeholder };
+        let variant_4: string;
+        export { variant_4 as variant };
+        let color_4: string;
+        export { color_4 as color };
+        let maxDaysInPast_1: number;
+        export { maxDaysInPast_1 as maxDaysInPast };
+    }
+    export { args_3 as args };
+}
+export namespace WithMinDate {
+    export namespace args_4 {
+        let text_5: string;
+        export { text_5 as text };
+        let placeholder_4: string;
+        export { placeholder_4 as placeholder };
+        let variant_5: string;
+        export { variant_5 as variant };
+        let color_5: string;
+        export { color_5 as color };
+        let minDate_1: Date;
+        export { minDate_1 as minDate };
+    }
+    export { args_4 as args };
+}
+export namespace WithBothConstraints {
+    export namespace args_5 {
+        let text_6: string;
+        export { text_6 as text };
+        let placeholder_5: string;
+        export { placeholder_5 as placeholder };
+        let variant_6: string;
+        export { variant_6 as variant };
+        let color_6: string;
+        export { color_6 as color };
+        let maxDaysInPast_2: number;
+        export { maxDaysInPast_2 as maxDaysInPast };
+        let minDate_2: Date;
+        export { minDate_2 as minDate };
+    }
+    export { args_5 as args };
+}
+import DatepickerForm from "./DatepickerForm";

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/datepickerForm.css

@@ -0,0 +1,6 @@
+.datepicker-form-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+  width: 100%;
+}

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.css

@@ -9,7 +9,6 @@
   border-radius: 8px;
   border: 1px solid var(--venom-grey, #e6edf5);
   background: var(--Primary-Blanc, #fff);
-  box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
 }
 
 .document-card-left {
@@ -63,6 +62,10 @@
   align-items: flex-end;
 }
 
+.document-card-icon-eye {
+  color: var(--Primary-Mid-black, var(--mid-grey, #728ea7));
+}
+
 /* Styles spécifiques pour le type "waiting" */
 .document-card.waiting {
   width: 425px;
@@ -128,3 +131,7 @@
   font-weight: 600;
   line-height: normal;
 }
+
+.document-card.with-shadow {
+  box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
+}

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" | "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,119 @@
+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 "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 "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;