allaw-ui 1.1.1 → 2.0.1

package/dist/components/atoms/tags/OtherStatusTag.js

@@ -1,13 +1,13 @@
 import React from "react";
 import "./OtherStatusTag.css";
 var OtherStatusTag = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? "Tags" : _b, _c = _a.type, type = _c === void 0 ? "readonly" : _c, _d = _a.startIcon, startIcon = _d === void 0 ? false : _d, _e = _a.startIconName, startIconName = _e === void 0 ? "allaw-icon-pmr" : _e, labelLimit = _a.labelLimit, _f = _a.style, style = _f === void 0 ? "normal" : _f;
+    var _b = _a.label, label = _b === void 0 ? "Tags" : _b, _c = _a.type, type = _c === void 0 ? "readonly" : _c, _d = _a.startIcon, startIcon = _d === void 0 ? false : _d, _e = _a.startIconName, startIconName = _e === void 0 ? "allaw-icon-pmr" : _e, labelLimit = _a.labelLimit, _f = _a.style, style = _f === void 0 ? "normal" : _f, _g = _a.informationColor, informationColor = _g === void 0 ? "blue" : _g;
     var truncateText = function (text, limit) {
         if (!limit || text.length <= limit)
             return text;
         return "".concat(text.slice(0, limit), "...");
     };
-    return (React.createElement("div", { className: "other-status-tag ".concat(type, " ").concat(style) },
+    return (React.createElement("div", { className: "other-status-tag ".concat(type, " ").concat(style, " ").concat(type === "information" ? "information-color-".concat(informationColor) : "") },
         type === "information" && startIcon && (React.createElement("span", { className: "icon ".concat(startIconName) })),
         React.createElement("span", { className: "other-status-tag-label", title: label }, truncateText(label, labelLimit)),
         type === "editable" && React.createElement("span", { className: "icon allaw-icon-close" })));

package/dist/components/atoms/tags/OtherStatusTag.stories.d.ts

@@ -0,0 +1,97 @@
+declare namespace _default {
+    export let title: string;
+    export { OtherStatusTag as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace label {
+            namespace control {
+                let type: string;
+            }
+            let description: string;
+        }
+        export namespace type_1 {
+            export namespace control_1 {
+                let type_2: string;
+                export { type_2 as type };
+                export let options: string[];
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export { type_1 as type };
+        export namespace startIcon {
+            export namespace control_2 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export namespace startIconName {
+            export namespace control_3 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        export namespace labelLimit {
+            export namespace control_4 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        export namespace style {
+            export namespace control_5 {
+                let type_6: string;
+                export { type_6 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+            export let defaultValue: string;
+        }
+        export namespace informationColor {
+            export namespace control_6 {
+                let type_7: string;
+                export { type_7 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const ReadOnly: any;
+export const Editable: any;
+export const Information: any;
+export const LongLabel: any;
+export const LongLabelWithoutLimit: any;
+export const ReadOnlyCompact: any;
+export const EditableCompact: any;
+export const InformationCompact: any;
+export const LongLabelCompact: any;
+import OtherStatusTag from "./OtherStatusTag";

package/dist/components/atoms/tags/OtherStatusTag.stories.js

@@ -0,0 +1,151 @@
+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 OtherStatusTag from "./OtherStatusTag";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Atoms/Tags/OtherStatusTag",
+    component: OtherStatusTag,
+    tags: ["autodocs"],
+    argTypes: {
+        label: {
+            control: {
+                type: "text",
+            },
+            description: "Texte à afficher dans le tag",
+        },
+        type: {
+            control: {
+                type: "select",
+                options: ["readonly", "editable", "information"],
+            },
+            description: "Type de tag à afficher",
+        },
+        startIcon: {
+            control: {
+                type: "boolean",
+            },
+            description: "Afficher une icône au début",
+        },
+        startIconName: {
+            control: {
+                type: "text",
+            },
+            description: "Nom de l'icône à afficher",
+        },
+        labelLimit: {
+            control: {
+                type: "number",
+            },
+            description: "Nombre maximum de caractères avant troncature",
+        },
+        style: {
+            control: {
+                type: "select",
+                options: ["normal", "compact"],
+            },
+            description: "Style du tag (normal ou compact)",
+            defaultValue: "normal",
+        },
+        informationColor: {
+            control: {
+                type: "select",
+                options: ["blue", "green", "red", "orange"],
+            },
+            description: "Couleur du tag d'information",
+            defaultValue: "blue",
+        },
+    },
+    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(OtherStatusTag, __assign({}, args)); };
+export var ReadOnly = Template.bind({});
+ReadOnly.args = {
+    label: "Tags",
+    type: "readonly",
+    startIcon: false,
+    startIconName: "allaw-icon-pmr",
+};
+export var Editable = Template.bind({});
+Editable.args = {
+    label: "Tags",
+    type: "editable",
+    startIcon: false,
+    startIconName: "allaw-icon-pmr",
+};
+export var Information = Template.bind({});
+Information.args = {
+    label: "Informations",
+    type: "information",
+    startIcon: true,
+    startIconName: "allaw-icon-pmr",
+    informationColor: "blue",
+};
+export var LongLabel = Template.bind({});
+LongLabel.args = {
+    label: "Un très long label qui sera tronqué automatiquement",
+    type: "readonly",
+    labelLimit: 20,
+};
+export var LongLabelWithoutLimit = Template.bind({});
+LongLabelWithoutLimit.args = {
+    label: "Un très long label qui ne sera pas tronqué",
+    type: "readonly",
+};
+// Documentation supplémentaire
+LongLabel.parameters = {
+    docs: {
+        description: {
+            story: "Exemple avec un label long et une limite de caractères",
+        },
+    },
+};
+LongLabelWithoutLimit.parameters = {
+    docs: {
+        description: {
+            story: "Exemple avec un label long sans limite de caractères",
+        },
+    },
+};
+export var ReadOnlyCompact = Template.bind({});
+ReadOnlyCompact.args = __assign(__assign({}, ReadOnly.args), { style: "compact" });
+export var EditableCompact = Template.bind({});
+EditableCompact.args = __assign(__assign({}, Editable.args), { style: "compact" });
+export var InformationCompact = Template.bind({});
+InformationCompact.args = __assign(__assign({}, Information.args), { style: "compact" });
+export var LongLabelCompact = Template.bind({});
+LongLabelCompact.args = __assign(__assign({}, LongLabel.args), { style: "compact" });
+// Documentation pour les variantes compactes
+ReadOnlyCompact.parameters = {
+    docs: {
+        description: {
+            story: "Version compacte du tag en lecture seule",
+        },
+    },
+};
+EditableCompact.parameters = {
+    docs: {
+        description: {
+            story: "Version compacte du tag éditable",
+        },
+    },
+};

package/dist/components/atoms/typography/CardDate.stories.d.ts

@@ -0,0 +1,119 @@
+declare namespace _default {
+    export let title: string;
+    export { CardDate as component };
+    export let tags: string[];
+    export namespace parameters {
+        let componentSubtitle: string;
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+    export namespace argTypes {
+        namespace date {
+            export let control: string;
+            let description_1: string;
+            export { description_1 as description };
+            export namespace table {
+                namespace type {
+                    let summary: string;
+                }
+                namespace defaultValue {
+                    let summary_1: string;
+                    export { summary_1 as summary };
+                }
+            }
+        }
+        namespace showYear {
+            let control_1: string;
+            export { control_1 as control };
+            let description_2: string;
+            export { description_2 as description };
+            export namespace table_1 {
+                export namespace type_1 {
+                    let summary_2: string;
+                    export { summary_2 as summary };
+                }
+                export { type_1 as type };
+                export namespace defaultValue_1 {
+                    let summary_3: boolean;
+                    export { summary_3 as summary };
+                }
+                export { defaultValue_1 as defaultValue };
+            }
+            export { table_1 as table };
+        }
+        namespace variant {
+            let control_2: string;
+            export { control_2 as control };
+            export let options: string[];
+            let description_3: string;
+            export { description_3 as description };
+            export namespace table_2 {
+                export namespace type_2 {
+                    let summary_4: string;
+                    export { summary_4 as summary };
+                }
+                export { type_2 as type };
+                export namespace defaultValue_2 {
+                    let summary_5: string;
+                    export { summary_5 as summary };
+                }
+                export { defaultValue_2 as defaultValue };
+            }
+            export { table_2 as table };
+        }
+        namespace label {
+            let control_3: string;
+            export { control_3 as control };
+            let description_4: string;
+            export { description_4 as description };
+            export namespace table_3 {
+                export namespace type_3 {
+                    let summary_6: string;
+                    export { summary_6 as summary };
+                }
+                export { type_3 as type };
+                export namespace defaultValue_3 {
+                    let summary_7: string;
+                    export { summary_7 as summary };
+                }
+                export { defaultValue_3 as defaultValue };
+            }
+            export { table_3 as table };
+        }
+        namespace isDisabled {
+            let control_4: string;
+            export { control_4 as control };
+            let description_5: string;
+            export { description_5 as description };
+            export namespace table_4 {
+                export namespace type_4 {
+                    let summary_8: string;
+                    export { summary_8 as summary };
+                }
+                export { type_4 as type };
+                export namespace defaultValue_4 {
+                    let summary_9: boolean;
+                    export { summary_9 as summary };
+                }
+                export { defaultValue_4 as defaultValue };
+            }
+            export { table_4 as table };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const DisabledHorizontal: any;
+export const DisabledVertical: any;
+import CardDate from "./CardDate";

package/dist/components/atoms/typography/CardDate.stories.js

@@ -0,0 +1,103 @@
+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 CardDate from "./CardDate";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Atoms/typography/CardDate",
+    component: CardDate,
+    tags: ["autodocs"],
+    parameters: {
+        componentSubtitle: "Composant d'affichage de date pour les cards",
+        docs: {
+            description: {
+                component: "Un composant qui affiche une date formatée avec le jour de la semaine, le jour du mois, le mois et optionnellement l'année.",
+            },
+        },
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+    argTypes: {
+        date: {
+            control: "text",
+            description: "Date au format ISO (ex: 2024-10-31)",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "undefined" },
+            },
+        },
+        showYear: {
+            control: "boolean",
+            description: "Afficher ou masquer l'année",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        variant: {
+            control: "select",
+            options: ["horizontal", "hybride", "vertical"], // Mise à jour des options
+            description: "Variante de style de la date",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "hybride" },
+            },
+        },
+        label: {
+            control: "text",
+            description: "Label à afficher avant la date",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "undefined" },
+            },
+        },
+        isDisabled: {
+            control: "boolean",
+            description: "Indique si le composant est désactivé",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+    },
+};
+var Template = function (args) { return React.createElement(CardDate, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    date: "2024-10-31",
+    showYear: true,
+    variant: "hybride",
+};
+export var DisabledHorizontal = Template.bind({});
+DisabledHorizontal.args = {
+    date: "2024-10-31",
+    showYear: true,
+    variant: "horizontal",
+    label: "Clôturé le",
+    isDisabled: true, // Exemple avec isDisabled
+};
+export var DisabledVertical = Template.bind({});
+DisabledVertical.args = {
+    date: "2024-10-31",
+    showYear: true,
+    variant: "vertical",
+    label: "Clôturé le",
+    isDisabled: true, // Exemple avec isDisabled
+};
+// Ajoutez d'autres histoires si nécessaire

package/dist/components/atoms/typography/Heading.js

@@ -2,6 +2,6 @@ import React from "react";
 import "./Heading.css";
 var Heading = function (_a) {
     var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "center" : _c;
-    return React.createElement("span", { className: "heading ".concat(variant, " color-").concat(color, " align-").concat(align) }, text);
+    return (React.createElement("span", { className: "heading ".concat(variant, " color-").concat(color, " align-").concat(align) }, text));
 };
 export default Heading;

package/dist/components/atoms/typography/Heading.stories.d.ts

@@ -0,0 +1,45 @@
+declare namespace _default {
+    export let title: string;
+    export { Heading as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace variant {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+        }
+        namespace color {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_1 as control };
+        }
+        namespace text {
+            let control_2: string;
+            export { control_2 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 H1: any;
+export const H2: any;
+export const H3: any;
+export const H4: any;
+export const H5: any;
+export const H6: any;
+export const H7: any;
+import Heading from "./Heading";

package/dist/components/atoms/typography/Heading.stories.js

@@ -0,0 +1,90 @@
+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 Heading from "./Heading";
+import "../../../styles/global.css";
+export default {
+    title: "Components/UI-Variables/Typography/Heading",
+    component: Heading,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+                options: ["h1", "h2", "h3", "h4", "h5", "h6", "h7"],
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+                options: ["bleu-allaw", "mid-grey", "dark-grey", "noir", "pure-white"],
+            },
+        },
+        text: {
+            control: "text",
+        },
+    },
+    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(Heading, __assign({}, args)); };
+export var H1 = Template.bind({});
+H1.args = {
+    variant: "h1",
+    color: "pure-white",
+    text: "Poppins – SemiBold – 60px",
+};
+export var H2 = Template.bind({});
+H2.args = {
+    variant: "h2",
+    color: "pure-white",
+    text: "Poppins – SemiBold – 36px",
+};
+export var H3 = Template.bind({});
+H3.args = {
+    variant: "h3",
+    color: "pure-white",
+    text: "Poppins – SemiBold – 28px",
+};
+export var H4 = Template.bind({});
+H4.args = {
+    variant: "h4",
+    color: "pure-white",
+    text: "Poppins – SemiBold – 24px",
+};
+export var H5 = Template.bind({});
+H5.args = {
+    variant: "h5",
+    color: "pure-white",
+    text: "Poppins – Medium – 24px",
+};
+export var H6 = Template.bind({});
+H6.args = {
+    variant: "h6",
+    color: "pure-white",
+    text: "Poppins – SemiBold – 18px",
+};
+export var H7 = Template.bind({});
+H7.args = {
+    variant: "h7",
+    color: "pure-white",
+    text: "Poppins – SemiBold – 14px",
+};

package/dist/components/atoms/typography/Link.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface LinkProps {
+    variant: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+    text: React.ReactNode;
+    maxLines?: number;
+    maxChars?: number;
+    size?: "default" | "small";
+    className?: string;
+    onClick?: () => void;
+}
+declare const Link: React.FC<LinkProps>;
+export default Link;

package/dist/components/atoms/typography/Link.js

@@ -0,0 +1,35 @@
+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 styles from "./Link.module.css";
+import { convertToHtml } from "../../../utils/utils";
+var Link = function (_a) {
+    var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars, _b = _a.size, size = _b === void 0 ? "default" : _b, className = _a.className, onClick = _a.onClick;
+    var truncateText = function (text, maxChars) {
+        if (text.length <= maxChars)
+            return text;
+        return text.slice(0, maxChars) + "...";
+    };
+    var htmlText = convertToHtml(text);
+    var truncatedText = maxChars ? truncateText(htmlText, maxChars) : htmlText;
+    var isClickable = typeof onClick === "function";
+    var colorClassName = color ? "color-".concat(color) : "";
+    return (React.createElement("div", { className: "".concat(styles.link, " ").concat(styles[variant], " ").concat(size === "small" ? styles["link-small"] : "", " ").concat(className || "", " ").concat(isClickable ? styles.pointer : "", " ").concat(styles[colorClassName]), style: __assign({ whiteSpace: "pre-line" }, (maxLines
+            ? {
+                WebkitLineClamp: maxLines,
+                display: "-webkit-box",
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+            }
+            : {})), onClick: onClick, dangerouslySetInnerHTML: { __html: truncatedText } }));
+};
+export default Link;