allaw-ui 3.4.3 → 3.4.4

package/dist/components/molecules/contactCard/ContactCard.js

@@ -0,0 +1,31 @@
+import React from "react";
+import styles from "./contactCard.module.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import Link from "next/link";
+var ContactCard = function (_a) {
+    var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, onClick = _a.onClick, actionsButton = _a.actionsButton, clientLabel = _a.clientLabel;
+    var isPhoneEmpty = !phone || phone.trim() === "";
+    var isEmailEmpty = !email || email.trim() === "";
+    var displayClientLabel = clientLabel || "Client de l'\u00E9tude";
+    return (React.createElement("div", { className: styles.contactCard, onClick: function () { return onClick && onClick(); }, style: { cursor: onClick ? "pointer" : "default" } },
+        React.createElement("div", { className: styles.contentContainer },
+            React.createElement("div", { className: styles.nameTagContainer },
+                React.createElement("h3", { className: styles.contactName }, name),
+                React.createElement(OtherStatusTag, { label: status, type: "readonly" })),
+            React.createElement("div", { className: styles.infoContainer },
+                React.createElement("div", { className: styles.infoItem },
+                    React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
+                    React.createElement("span", { className: styles.infoText }, displayClientLabel)),
+                React.createElement("div", { className: styles.telephoneEmailItems },
+                    React.createElement("div", { className: styles.infoItem },
+                        React.createElement("i", { className: "allaw-icon-phone ".concat(styles.infoIcon, " ").concat(isPhoneEmpty ? styles.infoIconDisabled : "") }),
+                        React.createElement("span", { className: "".concat(styles.infoText, " ").concat(styles.contact, " ").concat(isPhoneEmpty ? styles.emptyField : "") }, isPhoneEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "tel:".concat(phone) }, phone)))),
+                    React.createElement("div", { className: styles.infoItem },
+                        React.createElement("i", { className: "allaw-icon-mail ".concat(styles.infoIcon, " ").concat(isEmailEmpty ? styles.infoIconDisabled : "") }),
+                        React.createElement("span", { className: "".concat(styles.infoText, " ").concat(styles.contact, " ").concat(isEmailEmpty ? styles.emptyField : "") }, isEmailEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "mailTo:".concat(email) }, email))))))),
+        React.createElement("div", { className: styles.actionsContainer },
+            actionsButton ? actionsButton : null,
+            onClick && (React.createElement("div", { className: styles.actionButtonContainer },
+                React.createElement("i", { className: "allaw-icon-arrow-right" }))))));
+};
+export default ContactCard;

package/dist/components/molecules/contactCard/ContactCard.stories.d.ts

@@ -0,0 +1,68 @@
+declare namespace _default {
+    export let title: string;
+    export { ContactCard as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace name {
+            let control: string;
+        }
+        namespace status {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace phone {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace email {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace gender {
+            export namespace control_4 {
+                let type: string;
+                let options: string[];
+            }
+            export { control_4 as control };
+        }
+        namespace clientLabel {
+            let control_5: string;
+            export { control_5 as control };
+            export let description: string;
+        }
+    }
+    export namespace args {
+        let name_1: string;
+        export { name_1 as name };
+        let status_1: string;
+        export { status_1 as status };
+        let phone_1: string;
+        export { phone_1 as phone };
+        let email_1: string;
+        export { email_1 as email };
+        export let isEditable: boolean;
+        let gender_1: string;
+        export { gender_1 as gender };
+        export let actionIconName: string;
+        let clientLabel_1: string;
+        export { clientLabel_1 as clientLabel };
+    }
+    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 Editable: any;
+export const WithCustomIcon: any;
+export const EmptyFields: any;
+export const PartiallyEmpty: any;
+export const CustomClientLabel: any;
+import ContactCard from "./ContactCard";

package/dist/components/molecules/contactCard/ContactCard.stories.js

@@ -0,0 +1,80 @@
+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 ContactCard from "./ContactCard";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/ContactCard",
+    component: ContactCard,
+    tags: ["autodocs"],
+    argTypes: {
+        name: { control: "text" },
+        status: { control: "text" },
+        phone: { control: "text" },
+        email: { control: "text" },
+        gender: {
+            control: {
+                type: "select",
+                options: ["male", "female"],
+            },
+        },
+        clientLabel: {
+            control: "text",
+            description: "Texte personnalisé pour 'Client/Cliente de l'étude'",
+        },
+    },
+    args: {
+        name: "Jane DOE",
+        status: "Client actif",
+        phone: "06 63 90 59 25",
+        email: "enzo@quarantesoixante.com",
+        isEditable: false,
+        gender: "female",
+        actionIconName: "allaw-icon-edit-2",
+        clientLabel: "",
+    },
+    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(ContactCard, __assign({}, args)); };
+export var Default = Template.bind({});
+export var Editable = Template.bind({});
+Editable.args = {
+    isEditable: true,
+};
+export var WithCustomIcon = Template.bind({});
+WithCustomIcon.args = {
+    actionIconName: "allaw-icon-plus",
+};
+export var EmptyFields = Template.bind({});
+EmptyFields.args = {
+    phone: "",
+    email: null,
+};
+export var PartiallyEmpty = Template.bind({});
+PartiallyEmpty.args = {
+    phone: "06 12 34 56 78",
+    email: "",
+};
+export var CustomClientLabel = Template.bind({});
+CustomClientLabel.args = {
+    clientLabel: "Utilisateur professionnel",
+};

package/dist/components/molecules/contactCard/DetailedContactCard.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "./detailedContactCard.css";
+export interface DetailedContactCardProps {
+    size: "small" | "medium" | "large";
+    name: string;
+    birthDate: string;
+    avatarUrl: string;
+    status: string;
+    address: string;
+    phone: string;
+    email: string;
+    isEditable: boolean;
+    onEdit: () => void;
+    gender: "male" | "female";
+    actionIconName?: string;
+}
+declare const DetailedContactCard: React.FC<DetailedContactCardProps>;
+export default DetailedContactCard;

package/dist/components/molecules/contactCard/DetailedContactCard.js

@@ -0,0 +1,61 @@
+import React from "react";
+import "./detailedContactCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import Image from "next/image";
+var NoPhoto = "/assets/NoPhoto.png";
+var DetailedContactCard = function (_a) {
+    var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, gender = _a.gender;
+    var isPhoneEmpty = !phone || phone.trim() === "";
+    var isEmailEmpty = !email || email.trim() === "";
+    var renderContent = function () {
+        switch (size) {
+            case "small":
+                return (React.createElement("div", { className: "detailed-contact-card-content" },
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 64, height: 64, className: "avatar" })),
+                    React.createElement("div", { className: "contact-info" },
+                        React.createElement("h3", { className: "contact-name" }, name),
+                        React.createElement("p", { className: "contact-details" },
+                            React.createElement("span", null, gender === "male" ? "M" : "F"),
+                            React.createElement("span", { className: "gender-separator" }),
+                            React.createElement("span", null, birthDate)))));
+            case "medium":
+                return (React.createElement("div", { className: "detailed-contact-card-content" },
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 72, height: 72, className: "avatar" })),
+                    React.createElement("div", { className: "contact-info" },
+                        React.createElement("h3", { className: "contact-name" }, name),
+                        React.createElement("p", { className: "contact-details" },
+                            React.createElement("span", null, gender === "male" ? "M" : "F"),
+                            React.createElement("span", { className: "gender-separator" }),
+                            React.createElement("span", null, birthDate))),
+                    React.createElement("div", { className: "status-container" },
+                        React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
+            case "large":
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 94, height: 94, className: "avatar" })),
+                    React.createElement("div", { className: "content-container" },
+                        React.createElement("div", null,
+                            React.createElement("h3", { className: "contact-name" }, name),
+                            React.createElement("p", { className: "contact-details" },
+                                React.createElement("span", null, gender === "male" ? "M" : "F"),
+                                React.createElement("span", { className: "gender-separator" }),
+                                React.createElement("span", null, birthDate))),
+                        React.createElement("div", { className: "contact-additional-info" },
+                            React.createElement("div", { className: "contact-address-container" },
+                                React.createElement("p", { className: "info-label" }, "ADRESSE"),
+                                React.createElement("p", { className: "info-value" }, address)),
+                            React.createElement("div", { className: "contact-telephone-email-container" },
+                                React.createElement("p", { className: "info-label" }, "CONTACT"),
+                                React.createElement("p", { className: "info-value" },
+                                    React.createElement("span", { className: "contact-phone ".concat(isPhoneEmpty ? "empty-field" : "") }, isPhoneEmpty ? "Non renseigné" : phone)),
+                                React.createElement("p", { className: "info-value" },
+                                    React.createElement("span", { className: "contact-phone ".concat(isEmailEmpty ? "empty-field" : "") }, isEmailEmpty ? "Non renseigné" : email))))),
+                    React.createElement("div", { className: "status-container" },
+                        React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
+        }
+    };
+    return (React.createElement("div", { className: "detailed-contact-card ".concat(size) }, renderContent()));
+};
+export default DetailedContactCard;

package/dist/components/molecules/contactCard/DetailedContactCard.stories.d.ts

@@ -0,0 +1,94 @@
+declare namespace _default {
+    export let title: string;
+    export { DetailedContactCard as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace size {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+        }
+        namespace name {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace birthDate {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace avatarUrl {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace status {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        namespace address {
+            let control_5: string;
+            export { control_5 as control };
+        }
+        namespace phone {
+            let control_6: string;
+            export { control_6 as control };
+        }
+        namespace email {
+            let control_7: string;
+            export { control_7 as control };
+        }
+        namespace onEdit {
+            let action: string;
+        }
+        namespace gender {
+            export namespace control_8 {
+                let type_1: string;
+                export { type_1 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_8 as control };
+        }
+        namespace actionIconName {
+            let control_9: string;
+            export { control_9 as control };
+            export let description: string;
+        }
+    }
+    export namespace args {
+        let name_1: string;
+        export { name_1 as name };
+        let birthDate_1: string;
+        export { birthDate_1 as birthDate };
+        export { NoPhotoImage as avatarUrl };
+        let status_1: string;
+        export { status_1 as status };
+        let address_1: string;
+        export { address_1 as address };
+        let phone_1: string;
+        export { phone_1 as phone };
+        let email_1: string;
+        export { email_1 as email };
+        let gender_1: string;
+        export { gender_1 as gender };
+        let actionIconName_1: string;
+        export { actionIconName_1 as actionIconName };
+    }
+    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 Medium: any;
+export const Large: any;
+export const LargeEmptyFields: any;
+import DetailedContactCard from "./DetailedContactCard";
+declare const NoPhotoImage: "/assets/NoPhoto.png";

package/dist/components/molecules/contactCard/DetailedContactCard.stories.js

@@ -0,0 +1,83 @@
+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 DetailedContactCard from "./DetailedContactCard";
+import "../../../styles/global.css";
+var NoPhotoImage = "/assets/NoPhoto.png";
+export default {
+    title: "Components/Molecules/DetailedContactCard",
+    component: DetailedContactCard,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+                options: ["small", "medium", "large"],
+            },
+        },
+        name: { control: "text" },
+        birthDate: { control: "text" },
+        avatarUrl: { control: "text" },
+        status: { control: "text" },
+        address: { control: "text" },
+        phone: { control: "text" },
+        email: { control: "text" },
+        onEdit: { action: "edited" },
+        gender: {
+            control: {
+                type: "select",
+                options: ["male", "female"],
+            },
+        },
+        actionIconName: {
+            control: "text",
+            description: "Nom de l'icône pour le bouton d'action",
+        },
+    },
+    args: {
+        name: "Jane DOE",
+        birthDate: "31/12/1985",
+        avatarUrl: NoPhotoImage,
+        status: "Client actif",
+        address: "142 avenue Turbigo, 75016 Paris",
+        phone: "06 63 90 59 25",
+        email: "enzo@quarantesoixante.com",
+        gender: "female",
+        actionIconName: "allaw-icon-edit-2",
+    },
+    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(DetailedContactCard, __assign({}, args)); };
+export var Small = Template.bind({});
+Small.args = {
+    size: "small",
+};
+export var Medium = Template.bind({});
+Medium.args = {
+    size: "medium",
+};
+export var Large = Template.bind({});
+Large.args = {
+    size: "large",
+};
+export var LargeEmptyFields = Template.bind({});
+LargeEmptyFields.args = __assign(__assign({}, Large.args), { phone: "", email: undefined });

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

@@ -0,0 +1,4 @@
+export { default as ContactCard } from "./ContactCard";
+export type { ContactCardProps } from "./ContactCard";
+export { default as DetailedContactCard } from "./DetailedContactCard";
+export type { DetailedContactCardProps } from "./DetailedContactCard";

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

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

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

@@ -0,0 +1,16 @@
+import React from "react";
+import "./datepickerForm.css";
+import "../../../styles/global.css";
+export interface DatepickerFormProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+    text?: string;
+    variant?: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+    yearDropdownItemNumber?: number;
+    maxDaysInPast?: number;
+    minDate?: Date;
+}
+declare const DatepickerForm: React.FC<DatepickerFormProps>;
+export default DatepickerForm;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "./datepickerForm.css";
+import "../../../styles/global.css";
+import Paragraph from "../../atoms/typography/Paragraph";
+import Datepicker from "../../atoms/datepickers/Datepicker";
+var DatepickerForm = function (_a) {
+    // console.log("Valeur reçue dans DatepickerForm :", value);
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.yearDropdownItemNumber, yearDropdownItemNumber = _e === void 0 ? 10 : _e, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate;
+    return (React.createElement("div", { className: "datepicker-form-wrapper" },
+        text && React.createElement(Paragraph, { text: text, variant: variant, color: color }),
+        React.createElement(Datepicker, { value: value || undefined, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber, maxDaysInPast: maxDaysInPast, minDate: minDate })));
+};
+export default DatepickerForm;

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