allaw-ui 1.1.1 → 2.0.0

package/dist/components/molecules/blogTextImageBlock/BlogTextImageBlock.stories.d.ts

@@ -0,0 +1,37 @@
+declare namespace _default {
+    export let title: string;
+    export { BlogTextImageBlock as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace title_1 {
+            let control: string;
+            let description: string;
+        }
+        export { title_1 as title };
+        export namespace article {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export namespace imageUrl {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+    }
+    export namespace parameters {
+        namespace docs {
+            export namespace description_3 {
+                let component: string;
+            }
+            export { description_3 as description };
+        }
+    }
+}
+export default _default;
+export const DefaultView: any;
+export const LongArticleWithImage: any;
+export const ArticleWithoutImage: any;
+import BlogTextImageBlock from "./BlogTextImageBlock";

package/dist/components/molecules/blogTextImageBlock/BlogTextImageBlock.stories.js

@@ -0,0 +1,58 @@
+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 BlogTextImageBlock from "./BlogTextImageBlock";
+export default {
+    title: "Components/molecules/Blog/BlogTextImageBlock",
+    component: BlogTextImageBlock,
+    tags: ["autodocs"],
+    argTypes: {
+        title: {
+            control: "text",
+            description: "Le titre principal de l'article du bloc.",
+        },
+        article: {
+            control: "text",
+            description: "Le contenu textuel de l'article ou de la description.",
+        },
+        imageUrl: {
+            control: "text",
+            description: "L'URL de l'image à afficher dans le bloc.",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Le composant `BlogTextImageBlock` affiche un bloc structuré avec un titre, un paragraphe et une image associée. Il est idéal pour présenter des articles ou sections de blogs.",
+            },
+        },
+    },
+};
+var Template = function (args) { return React.createElement(BlogTextImageBlock, __assign({}, args)); };
+export var DefaultView = Template.bind({});
+DefaultView.args = {
+    title: "Titre d'exemple",
+    article: "Ceci est un exemple d'article court. Ce composant est conçu pour afficher un contenu structuré avec un titre, un paragraphe et une image.",
+    imageUrl: "https://images.unsplash.com/photo-1733324770222-a6c4a921b379?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+};
+export var LongArticleWithImage = Template.bind({});
+LongArticleWithImage.args = {
+    title: "Pourquoi une architecture modulaire est essentielle",
+    article: "L'architecture modulaire est une pratique clé pour la réussite des projets modernes.\n\nElle offre une meilleure maintenabilité en permettant aux développeurs de se concentrer sur des modules indépendants. De plus, elle améliore la collaboration grâce au déploiement incrémental et à une réduction des conflits.\n\nEnfin, elle garantit une meilleure scalabilité en isolant les fonctionnalités, ce qui simplifie les mises à jour et réduit les risques d'introduire des bugs dans l'ensemble de l'application.",
+    imageUrl: "https://images.unsplash.com/photo-1731955196267-e863d6f39794?q=80&w=1693&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+};
+export var ArticleWithoutImage = Template.bind({});
+ArticleWithoutImage.args = {
+    title: "Titre sans image",
+    article: "Ce test illustre l'affichage d'un article sans image associée. Le composant doit s'adapter en conséquence, en affichant uniquement le titre et le contenu textuel.",
+    imageUrl: "",
+};

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

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

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

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

package/dist/components/molecules/breadcrumb/Breadcrumb.stories.d.ts

@@ -0,0 +1,24 @@
+declare namespace _default {
+    export let title: string;
+    export { Breadcrumb as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace items {
+            let control: string;
+        }
+    }
+    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 LongBreadcrumb: any;
+import Breadcrumb from "./Breadcrumb";

package/dist/components/molecules/breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,54 @@
+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 Breadcrumb from "./Breadcrumb";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/Breadcrumb",
+    component: Breadcrumb,
+    tags: ["autodocs"],
+    argTypes: {
+        items: {
+            control: "object",
+        },
+    },
+    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(Breadcrumb, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    items: [
+        { key: 1, label: "Home", link: "/" },
+        { key: 2, label: "Components", link: "/components" },
+        { key: 3, label: "Breadcrumb", link: "/components/breadcrumb" },
+    ],
+};
+export var LongBreadcrumb = Template.bind({});
+LongBreadcrumb.args = {
+    items: [
+        { key: 1, label: "Home", link: "/" },
+        { key: 2, label: "Category", link: "/category" },
+        { key: 3, label: "Subcategory", link: "/category/subcategory" },
+        { key: 4, label: "Product", link: "/category/subcategory/product" },
+        { key: 5, label: "Details", link: "/category/subcategory/product/details" },
+    ],
+};

package/dist/components/molecules/caseCard/CaseCard.stories.d.ts

@@ -0,0 +1,114 @@
+declare namespace _default {
+    export let title: string;
+    export { CaseCard as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace variant {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+            let description: string;
+        }
+        namespace categoryLabelLimit {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace isDisabled {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace dateStyle {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace dateLabel {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace barColor {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace showYear {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+        namespace steps {
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace currentStep {
+            export namespace control_8 {
+                let type_8: string;
+                export { type_8 as type };
+            }
+            export { control_8 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Desktop: any;
+export const Mobile: any;
+export const LongCategories: any;
+export const LongTitle: any;
+export const Archived: any;
+export const RedProgressBar: any;
+export const GreenProgressBar: any;
+export const GreyProgressBar: any;
+export const WithYear: any;
+export const WithoutYear: any;
+export const ProgressExample: any;
+export const CompletedProgress: any;
+import CaseCard from "./CaseCard";

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/caseCardCompact/CaseCardCompact.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { Paragraph, SmallTitle } from "../../atoms/typography";
+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";

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

@@ -12,6 +12,8 @@
   transition:
     border-color 0.1s ease,
     border-width 0.1s ease;
+  flex-wrap: wrap;
+  row-gap: 8px;
 }
 
 .case-card-compact:hover {
@@ -36,7 +38,7 @@
   flex-direction: column;
   align-items: flex-end;
   gap: 8px;
-  min-height: 45px;
+
 }
 
 .case-card-compact-right--centered .case-card-compact-arrow {
@@ -73,5 +75,6 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 8px;
+  gap: 1rem;
+  flex-wrap: wrap;
 }

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

@@ -12,9 +12,7 @@
   align-items: center;
   gap: 16px;
 
-  transition:
-    border-color 0.2s ease,
-    border-width 0.2s ease;
+  transition: border-color 0.2s ease, border-width 0.2s ease;
 }
 
 .case-card-link:hover {
@@ -90,7 +88,7 @@
   width: 100%;
   flex-direction: row;
   justify-content: space-between;
-  align-items: end;
+  align-items: flex-end;
 }
 
 .case-card-link-info-col {

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

@@ -9,6 +9,7 @@ export interface CheckboxFormProps {
     isRequired?: boolean;
     linkText?: string;
     linkUrl?: string;
+    onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
     size?: "default" | "small";
     style?: "default" | "light";
     markType?: "cross" | "check";