allaw-ui 3.4.3 → 3.4.5

package/dist/components/molecules/caseCard/CaseCard.stories.js

@@ -0,0 +1,200 @@
+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 CaseCard from "./CaseCard";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/CaseCard",
+    component: CaseCard,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+                options: ["desktop", "mobile", "archived"],
+            },
+            description: "Variante d'affichage de la carte",
+        },
+        categoryLabelLimit: {
+            control: {
+                type: "number",
+            },
+            description: "Nombre maximum de caractères pour les catégories",
+        },
+        isDisabled: {
+            control: {
+                type: "boolean",
+            },
+            description: "Indique si le composant est désactivé ou clôturé",
+        },
+        dateStyle: {
+            control: {
+                type: "select",
+                options: ["horizontal", "hybride", "vertical"],
+            },
+            description: "Style de date à utiliser pour le composant CardDate",
+        },
+        dateLabel: {
+            control: {
+                type: "text",
+            },
+            description: "Label à afficher avant la date",
+        },
+        barColor: {
+            control: {
+                type: "select",
+                options: ["blue", "red", "green", "grey"],
+            },
+            description: "Couleur de la barre de progression",
+        },
+        showYear: {
+            control: {
+                type: "boolean",
+            },
+            description: "Afficher ou masquer l'année dans la date",
+        },
+        steps: {
+            control: {
+                type: "number",
+            },
+            description: "Nombre total d'étapes de la barre de progression",
+        },
+        currentStep: {
+            control: {
+                type: "number",
+            },
+            description: "Étape actuelle de la barre de progression",
+        },
+    },
+    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(CaseCard, __assign({}, args)); };
+export var Desktop = Template.bind({});
+Desktop.args = {
+    clientName: "MME. JANE DOE",
+    title: "Divorce à l'amiable",
+    nextAppointment: {
+        date: "2024-10-31",
+        time: "14:15",
+    },
+    categories: ["Droit de la famille", "Divorce"],
+    variant: "desktop",
+    categoryLabelLimit: 20,
+    isDisabled: false,
+    dateStyle: "hybride",
+    dateLabel: "Proch. rdv",
+    barColor: "blue",
+    showYear: true,
+    steps: 100,
+    currentStep: 50,
+};
+export var Mobile = Template.bind({});
+Mobile.args = {
+    clientName: "MME. JANE DOE",
+    title: "Divorce à l'amiable avec une procédure très longue et complexe",
+    nextAppointment: {
+        date: "2024-10-31",
+    },
+    categories: ["Droit de la famille", "Divorce"],
+    variant: "mobile",
+    categoryLabelLimit: 15,
+    isDisabled: true,
+    dateStyle: "horizontal",
+    dateLabel: "Clôturé le :",
+    barColor: "grey",
+    showYear: false,
+    steps: 100,
+    currentStep: 100,
+};
+export var LongCategories = Template.bind({});
+LongCategories.args = {
+    clientName: "MME. JANE DOE",
+    title: "Divorce à l'amiable",
+    nextAppointment: {
+        date: "2024-10-31",
+    },
+    categories: [
+        "Droit de la famille très long",
+        "Divorce avec procédure complexe",
+    ],
+    variant: "desktop",
+    categoryLabelLimit: 10,
+    isDisabled: false,
+    dateStyle: "vertical",
+    dateLabel: "Proch rdv",
+    barColor: "green",
+    showYear: true,
+    steps: 100,
+    currentStep: 75,
+};
+export var LongTitle = Template.bind({});
+LongTitle.args = {
+    clientName: "MME. JANE DOE",
+    title: "Ceci est un très long titre qui devrait être tronqué après exactement deux lignes avec des points de suspension à la fin du texte",
+    nextAppointment: {
+        date: "2024-10-31",
+    },
+    categories: ["Droit de la famille", "Divorce"],
+    variant: "desktop",
+    isDisabled: true,
+    dateStyle: "hybride",
+    dateLabel: "Clôturé le :",
+    barColor: "red",
+    showYear: false,
+    steps: 100,
+    currentStep: 100,
+};
+export var Archived = Template.bind({});
+Archived.args = {
+    clientName: "MME. JANE DOE",
+    title: "Divorce à l'amiable depuis longtemps",
+    categories: ["Droit de la famille", "Divorce"],
+    variant: "archived",
+    isDisabled: false,
+    dateStyle: "horizontal",
+    dateLabel: "Proch. rdv",
+    barColor: "grey",
+    showYear: true,
+    steps: 100,
+    currentStep: 90,
+};
+LongCategories.parameters = {
+    docs: {
+        description: {
+            story: "Exemple avec des catégories longues et une limite de caractères courte",
+        },
+    },
+};
+export var RedProgressBar = Template.bind({});
+RedProgressBar.args = __assign(__assign({}, Desktop.args), { barColor: "red" });
+export var GreenProgressBar = Template.bind({});
+GreenProgressBar.args = __assign(__assign({}, Desktop.args), { barColor: "green" });
+export var GreyProgressBar = Template.bind({});
+GreyProgressBar.args = __assign(__assign({}, Desktop.args), { barColor: "grey" });
+export var WithYear = Template.bind({});
+WithYear.args = __assign(__assign({}, Desktop.args), { showYear: true });
+export var WithoutYear = Template.bind({});
+WithoutYear.args = __assign(__assign({}, Desktop.args), { showYear: false });
+export var ProgressExample = Template.bind({});
+ProgressExample.args = __assign(__assign({}, Desktop.args), { steps: 100, currentStep: 75, barColor: "blue" });
+export var CompletedProgress = Template.bind({});
+CompletedProgress.args = __assign(__assign({}, Desktop.args), { steps: 100, currentStep: 100, barColor: "green" });

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

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

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

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

package/dist/components/molecules/caseCardCompact/CaseCardCompact.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { FolderStatus } from "../../atoms/tags/FolderStatusTag";
+import "./caseCardCompact.css";
+import "../../../styles/icons.css";
+export type CaseCardCompactProps = {
+    folderTitle: string;
+    folderStatus: FolderStatus;
+    clientName: string;
+    isLoading?: boolean;
+    category?: string;
+    showArrowOnHover?: boolean;
+    onClientCardClick?: () => any;
+    isSelected?: boolean;
+};
+declare function CaseCardCompact({ folderTitle, folderStatus, isLoading, clientName, category, showArrowOnHover, onClientCardClick, isSelected, }: CaseCardCompactProps): React.JSX.Element;
+export default CaseCardCompact;

package/dist/components/molecules/caseCardCompact/CaseCardCompact.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Paragraph from "../../atoms/typography/Paragraph";
+import SmallTitle from "../../atoms/typography/SmallTitle";
+import FolderStatusTag from "../../atoms/tags/FolderStatusTag";
+import "./caseCardCompact.css";
+import "../../../styles/icons.css";
+import LoadingBox from "../loadingBox/LoadingBox";
+function CaseCardCompact(_a) {
+    var folderTitle = _a.folderTitle, folderStatus = _a.folderStatus, isLoading = _a.isLoading, clientName = _a.clientName, category = _a.category, _b = _a.showArrowOnHover, showArrowOnHover = _b === void 0 ? false : _b, onClientCardClick = _a.onClientCardClick, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c;
+    return !isLoading ? (React.createElement("div", { className: "case-card-compact ".concat(showArrowOnHover ? "case-card-compact--arrow-on-hover" : "", " ").concat(isSelected ? "case-card-compact--selected" : ""), style: {
+            cursor: onClientCardClick || isSelected ? "pointer" : "default",
+        }, onClick: onClientCardClick || (isSelected ? function () { } : undefined) },
+        React.createElement("div", { className: "case-card-compact-left" },
+            React.createElement("span", { className: "title-tag" },
+                React.createElement(Paragraph, { variant: "semiBold", text: folderTitle, size: "default", maxLines: 1, color: "noir" }),
+                React.createElement(FolderStatusTag, { status: folderStatus })),
+            React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: clientName || "" })),
+        React.createElement("div", { className: "case-card-compact-right ".concat(!category ? "case-card-compact-right--centered" : "") }, category && (React.createElement("span", { className: "case-card-compact-office-tag" }, category))))) : (React.createElement(LoadingBox, { boxHeight: "91px", boxRadius: "16px", boxWidth: "100%" }));
+}
+export default CaseCardCompact;

package/dist/components/molecules/caseCardCompact/CaseCardCompact.stories.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    export let title: string;
+    export { CaseCardCompact as component };
+}
+export default _default;
+export const Default: any;
+export const WithoutCategory: any;
+export const WithArrowOnHover: any;
+export const WithoutCategoryAndArrowOnHover: any;
+export const Selected: any;
+import CaseCardCompact from "../caseCardCompact/CaseCardCompact";

package/dist/components/molecules/caseCardCompact/CaseCardCompact.stories.js

@@ -0,0 +1,59 @@
+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 CaseCardCompact from "../caseCardCompact/CaseCardCompact";
+export default {
+    title: "Components/Molecules/CaseCardCompact",
+    component: CaseCardCompact,
+};
+var Template = function (args) { return React.createElement(CaseCardCompact, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    folderTitle: "Dossier John Doe",
+    folderStatus: "OPEN",
+    clientName: "John DOE",
+    category: "Droit des personnes",
+    showArrowOnHover: false,
+    onClientCardClick: function () { return alert("Client card clicked!"); },
+};
+export var WithoutCategory = Template.bind({});
+WithoutCategory.args = {
+    folderTitle: "Dossier Jane Smith",
+    folderStatus: "CLOSED",
+    clientName: "John DOE",
+    showArrowOnHover: false,
+    onClientCardClick: function () { return alert("Client card clicked!"); },
+};
+export var WithArrowOnHover = Template.bind({});
+WithArrowOnHover.args = {
+    folderTitle: "Dossier Alice Johnson",
+    folderStatus: "OPEN",
+    clientName: "John DOE",
+    category: "Droit des personnes",
+    showArrowOnHover: true,
+    onClientCardClick: function () { return alert("Client card clicked!"); },
+};
+export var WithoutCategoryAndArrowOnHover = Template.bind({});
+WithoutCategoryAndArrowOnHover.args = {
+    folderTitle: "Dossier Bob Wilson",
+    folderStatus: "BLOCKED",
+    clientName: "John DOE",
+    showArrowOnHover: true,
+    onClientCardClick: function () { return alert("Client card clicked!"); },
+};
+export var Selected = Template.bind({});
+Selected.args = {
+    folderTitle: "Dossier Michael Brown",
+    folderStatus: "OPEN",
+    clientName: "John DOE",
+    isSelected: true,
+};

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

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

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

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

package/dist/components/molecules/caseLinkCard/CaseCardLink.stories.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export let title: string;
+    export { CaseLinkCard as component };
+}
+export default _default;
+export const Default: any;
+export const AddLink: any;
+export const AnotherExample: any;
+import CaseLinkCard from "./CaseLinkCard";

package/dist/components/molecules/caseLinkCard/CaseCardLink.stories.js

@@ -0,0 +1,37 @@
+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 CaseLinkCard from "./CaseLinkCard";
+export default {
+    title: "Components/Molecules/CaseLinkCard",
+    component: CaseLinkCard,
+};
+var Template = function (args) { return React.createElement(CaseLinkCard, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    proName: "John Doe",
+    caseName: "Case #12345",
+    createdDate: new Date(2024, 9, 21), // Example date: 21st October 2024
+};
+export var AddLink = Template.bind({});
+AddLink.args = {
+    proName: "John Doe",
+    canLinkCase: true,
+    onCaseCardClick: function () { },
+    createdDate: new Date(2024, 9, 21), // Example date: 21st October 2024
+};
+export var AnotherExample = Template.bind({});
+AnotherExample.args = {
+    proName: "Jane Smith",
+    caseName: "Case #98765",
+    createdDate: new Date(2023, 5, 10), // Example date: 10th June 2023
+};

package/dist/components/molecules/caseLinkCard/CaseLinkCard.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./CaseLinkCard.css";
+export type CaseLinkCardProps = {
+    proName?: string;
+    caseName?: string;
+    createdDate?: Date;
+    isLoading?: boolean;
+    canLinkCase?: boolean;
+    onCaseCardClick?: () => any;
+    onCaseLinkRequest?: () => any;
+};
+declare function CaseLinkCard({ proName, caseName, createdDate, onCaseCardClick, isLoading, canLinkCase, onCaseLinkRequest, }: CaseLinkCardProps): React.JSX.Element;
+export default CaseLinkCard;

package/dist/components/molecules/caseLinkCard/CaseLinkCard.js

@@ -0,0 +1,37 @@
+import React from "react";
+import "./CaseLinkCard.css";
+import { Paragraph, SmallTitle } from "../../atoms/typography";
+import LoadingBox from "../loadingBox/LoadingBox";
+function CaseLinkCard(_a) {
+    var proName = _a.proName, caseName = _a.caseName, createdDate = _a.createdDate, onCaseCardClick = _a.onCaseCardClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.canLinkCase, canLinkCase = _c === void 0 ? false : _c, onCaseLinkRequest = _a.onCaseLinkRequest;
+    var formatDate = function (date) {
+        return date.toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "2-digit",
+            year: "2-digit",
+        });
+    };
+    var formatProName = function (name) {
+        return "Ma\u00EEtre ".concat(name).toUpperCase();
+    };
+    return !isLoading ? (React.createElement(React.Fragment, null, caseName || (!onCaseLinkRequest && !canLinkCase) ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "case-card-link", onClick: function () { return onCaseCardClick && onCaseCardClick(); }, style: { cursor: onCaseCardClick ? "pointer" : "default" } },
+            React.createElement("div", { className: "case-card-link-folder-icon" },
+                React.createElement("i", { className: "allaw-icon-folder", style: { fontSize: "20px" } })),
+            React.createElement("div", { className: "case-card-link-right" },
+                React.createElement("div", { className: "case-card-link-right" },
+                    React.createElement("div", { className: "case-card-link-info-row" },
+                        React.createElement(SmallTitle, { text: "DOSSIER", variant: "semiBold12", color: "dark-grey" }),
+                        createdDate && (React.createElement(SmallTitle, { text: "Cr\u00E9\u00E9 le ".concat(formatDate(createdDate)), variant: "semiBold12", color: "dark-grey" }))),
+                    React.createElement("div", { className: "case-card-link-info-row-bottom" },
+                        React.createElement("div", { className: "case-card-link-info-col" },
+                            React.createElement(Paragraph, { variant: "bold", size: "default", text: caseName, maxLines: 1 }),
+                            proName && (React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: formatProName(proName) }))),
+                        React.createElement("i", { className: "allaw-icon-arrow-right" }))))))) : (React.createElement("div", { className: "case-card-no-folder-wrapper", onClick: function () { return onCaseLinkRequest && onCaseLinkRequest(); } },
+        React.createElement("div", { className: "case-card-no-folder-right" },
+            React.createElement(SmallTitle, { text: "AUNCUN DOSSIER LI\u00C9", variant: "semiBold12", color: "dark-grey" }),
+            React.createElement(Paragraph, { variant: "bold", size: "default", text: "Ajouter à un dossier", maxLines: 1 })),
+        React.createElement("div", { className: "case-card-link-no-folder-icon" },
+            React.createElement("i", { className: "allaw-icon-add", style: { fontSize: "18px" } })))))) : (React.createElement(LoadingBox, { boxHeight: "100px", boxRadius: "8px", boxWidth: "100%" }));
+}
+export default CaseLinkCard;

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

@@ -0,0 +1,2 @@
+export { default as CaseCardLink } from "./CaseLinkCard";
+export type { CaseLinkCardProps } from "./CaseLinkCard";

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

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

package/dist/components/molecules/checkboxForm/CheckboxForm.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { ParagraphProps } from "../../atoms/typography/Paragraph";
+import "./CheckboxForm.css";
+export interface CheckboxFormProps {
+    id?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    color?: ParagraphProps["color"];
+    label?: React.ReactNode;
+    isRequired?: boolean;
+    linkText?: string;
+    linkUrl?: string;
+    onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    size?: "default" | "small";
+    style?: "default" | "light" | "form";
+    markType?: "cross" | "check";
+    dataTestId?: string;
+}
+declare const CheckboxForm: React.FC<CheckboxFormProps>;
+export default CheckboxForm;

package/dist/components/molecules/checkboxForm/CheckboxForm.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Checkbox from "../../atoms/checkboxes/Checkbox";
+import Paragraph from "../../atoms/typography/Paragraph";
+import "./CheckboxForm.css";
+var CheckboxForm = function (_a) {
+    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, color = _a.color, label = _a.label, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, linkText = _a.linkText, linkUrl = _a.linkUrl, dataTestId = _a.dataTestId, onLinkClick = _a.onLinkClick, _d = _a.size, size = _d === void 0 ? "default" : _d, _e = _a.style, style = _e === void 0 ? "default" : _e, _f = _a.markType, markType = _f === void 0 ? "cross" : _f;
+    var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
+    var handleCheckboxChange = function (checked) {
+        if (onChange) {
+            onChange(checked);
+        }
+    };
+    // Déterminer la couleur à utiliser
+    var checkboxColor = style === "light"
+        ? "light"
+        : style === "form"
+            ? undefined
+            : color || "noir";
+    var colorClass = checkboxColor ? "checkbox-form-".concat(checkboxColor) : "";
+    return (React.createElement("div", { className: "checkbox-form ".concat(colorClass, " ").concat(size === "small" ? "checkbox-form-small" : "") },
+        React.createElement(Checkbox, { id: checkboxId, checked: checked, onChange: handleCheckboxChange, color: checkboxColor, size: size, style: style, markType: markType, dataTestId: dataTestId }),
+        label && (React.createElement("label", { htmlFor: checkboxId, className: "checkbox-form-label-container" },
+            React.createElement(Paragraph, { variant: style === "form" ? "medium" : "semiBold", color: color || (style === "form" ? undefined : "noir"), text: React.createElement(React.Fragment, null,
+                    React.createElement("span", null, label),
+                    linkText && linkUrl && (React.createElement("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", className: "checkbox-form-link", onClick: onLinkClick }, linkText))), size: size }),
+            isRequired && (React.createElement("span", { className: "checkbox-form-required" },
+                "\u00A0",
+                "*"))))));
+};
+export default CheckboxForm;

package/dist/components/molecules/checkboxForm/CheckboxForm.stories.d.ts

@@ -0,0 +1,94 @@
+declare namespace _default {
+    export let title: string;
+    export { CheckboxForm as component };
+    export let tags: string[];
+    export namespace args {
+        let label: string;
+    }
+    export namespace argTypes {
+        export namespace checked {
+            namespace control {
+                let type: string;
+            }
+        }
+        export namespace isRequired {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export namespace onChange {
+            let action: string;
+        }
+        export namespace label_1 {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        export { label_1 as label };
+        export namespace color {
+            export namespace control_3 {
+                let type_2: string;
+                export { type_2 as type };
+                export let options: string[];
+            }
+            export { control_3 as control };
+        }
+        export namespace size {
+            export namespace control_4 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_4 as control };
+        }
+        export namespace style {
+            export namespace control_5 {
+                let type_4: string;
+                export { type_4 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_5 as control };
+        }
+        export namespace markType {
+            export namespace control_6 {
+                let type_5: string;
+                export { type_5 as type };
+                let options_3: string[];
+                export { options_3 as options };
+            }
+            export { control_6 as control };
+        }
+    }
+    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 Checked: any;
+export const CheckMark: any;
+export const CheckedCheckMark: any;
+export const White: any;
+export const WhiteChecked: any;
+export const Required: any;
+export const WithoutLabel: any;
+export const WithLink: any;
+export const Light: any;
+export const LightChecked: any;
+export const LightCheckMark: any;
+export const LightCheckedCheckMark: any;
+export const Form: any;
+export const FormChecked: any;
+export const FormCheckMark: any;
+export const FormCheckedCheckMark: any;
+import CheckboxForm from "./CheckboxForm";