allaw-ui 3.4.3 → 3.4.5

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

@@ -0,0 +1,42 @@
+import React from "react";
+import "./AppointementStatusTag.css";
+var statusStyles = {
+    confirmed: "status-confirmed",
+    pending: "status-pending",
+    available: "status-available",
+    unavailable: "status-unavailable",
+    cancelled: "status-cancelled",
+    passed: "status-passed",
+    refused: "status-refused",
+};
+var statusLabels = {
+    confirmed: "CONFIRMÉ",
+    pending: "EN ATTENTE",
+    available: "DISPONIBLE",
+    unavailable: "INDISPONIBLE",
+    cancelled: "ANNULÉ",
+    passed: "PASSÉ",
+    refused: "REFUSÉ",
+};
+var variantLabels = {
+    confirmed: "RDV CONFIRMÉ",
+    passed: "RDV PASSÉ",
+    cancelled: "RDV ANNULÉ",
+};
+var variantStyles = {
+    small: "variant-small",
+    big: "variant-big",
+    default: "variant-default",
+};
+var AppointementStatusTag = function (_a) {
+    var status = _a.status, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
+    var label = variant === "big" && variantLabels[status]
+        ? variantLabels[status]
+        : statusLabels[status];
+    var variantClass = variantStyles[variant];
+    var specificStyles = status === "cancelled" && variant === "big"
+        ? "status-cancelled-big"
+        : statusStyles[status];
+    return (React.createElement("span", { className: "appointement-status-tag ".concat(variantClass, " ").concat(specificStyles) }, label));
+};
+export default AppointementStatusTag;

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

@@ -0,0 +1,17 @@
+declare namespace _default {
+    export let title: string;
+    export { AppointementStatusTag as component };
+    export let tags: string[];
+}
+export default _default;
+export const Confirmed: any;
+export const Pending: any;
+export const Available: any;
+export const Unavailable: any;
+export const Cancelled: any;
+export const Passed: any;
+export const RefusedStatus: any;
+export const ConfirmedBig: any;
+export const PassedBig: any;
+export const CancelledBigVariant: any;
+import AppointementStatusTag from "./AppointementStatusTag";

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

@@ -0,0 +1,70 @@
+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 AppointementStatusTag from "./AppointementStatusTag";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Atoms/Tags/AppointementStatusTag",
+    component: AppointementStatusTag,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return React.createElement(AppointementStatusTag, __assign({}, args)); };
+export var Confirmed = Template.bind({});
+Confirmed.args = {
+    status: "confirmed",
+    variant: "default",
+};
+export var Pending = Template.bind({});
+Pending.args = {
+    status: "pending",
+    variant: "default",
+};
+export var Available = Template.bind({});
+Available.args = {
+    status: "available",
+    variant: "default",
+};
+export var Unavailable = Template.bind({});
+Unavailable.args = {
+    status: "unavailable",
+    variant: "default",
+};
+export var Cancelled = Template.bind({});
+Cancelled.args = {
+    status: "cancelled",
+    variant: "default",
+};
+export var Passed = Template.bind({});
+Passed.args = {
+    status: "passed",
+    variant: "default",
+};
+export var RefusedStatus = Template.bind({});
+RefusedStatus.args = {
+    status: "refused",
+    variant: "default",
+};
+export var ConfirmedBig = Template.bind({});
+ConfirmedBig.args = {
+    status: "confirmed",
+    variant: "big",
+};
+export var PassedBig = Template.bind({});
+PassedBig.args = {
+    status: "passed",
+    variant: "big",
+};
+export var CancelledBigVariant = Template.bind({});
+CancelledBigVariant.args = {
+    status: "cancelled",
+    variant: "big",
+};

package/dist/components/atoms/tags/FolderStatusTag.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./FolderStatusTag.css";
+export type FolderStatus = "OPEN" | "CLOSED" | "BLOCKED";
+export interface FolderStatusTagProps {
+    status: FolderStatus;
+}
+declare const FolderStatusTag: React.FC<FolderStatusTagProps>;
+export default FolderStatusTag;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import "./FolderStatusTag.css";
+var FolderStatusTag = function (_a) {
+    var status = _a.status;
+    var label, color;
+    switch (status) {
+        case "OPEN":
+            label = "DOSSIER OUVERT";
+            color = "--Tags-Vert, #29a36a";
+            break;
+        case "CLOSED":
+            label = "DOSSIER CLÔS";
+            color = "--dark-grey, #456073";
+            break;
+        case "BLOCKED":
+            label = "DOSSIER BLOQUÉ";
+            color = "--actions-error, #e15151";
+            break;
+        default:
+            label = "";
+            color = "";
+    }
+    return (React.createElement("div", { className: "folder-status-tag ".concat(status), style: { color: "var(".concat(color, ")") } }, label));
+};
+export default FolderStatusTag;

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

@@ -0,0 +1,28 @@
+declare namespace _default {
+    export let title: string;
+    export { FolderStatusTag as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace status {
+            namespace control {
+                let type: string;
+                let options: 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 Open: any;
+export const Closed: any;
+export const Bloqued: any;
+import FolderStatusTag from "./FolderStatusTag";

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

@@ -0,0 +1,51 @@
+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 FolderStatusTag from "./FolderStatusTag";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Atoms/Tags/FolderStatusTag",
+    component: FolderStatusTag,
+    tags: ["autodocs"],
+    argTypes: {
+        status: {
+            control: {
+                type: "select",
+                options: ["OPEN", "CLOSED", "BLOCKED"],
+            },
+        },
+    },
+    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(FolderStatusTag, __assign({}, args)); };
+export var Open = Template.bind({});
+Open.args = {
+    status: "OPEN",
+};
+export var Closed = Template.bind({});
+Closed.args = {
+    status: "CLOSED",
+};
+export var Bloqued = Template.bind({});
+Bloqued.args = {
+    status: "BLOCKED",
+};

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "./OtherStatusTag.css";
+export interface OtherStatusTagProps {
+    label?: string;
+    type?: "readonly" | "editable" | "information";
+    startIcon?: boolean;
+    startIconName?: string;
+    labelLimit?: number;
+    style?: "normal" | "compact";
+    informationColor?: "blue" | "green" | "red" | "orange";
+}
+declare const OtherStatusTag: React.FC<OtherStatusTagProps>;
+export default OtherStatusTag;

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

@@ -0,0 +1,15 @@
+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, _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, " ").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" })));
+};
+export default OtherStatusTag;

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/tags/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AppointementStatusTag } from "./AppointementStatusTag";
+export { default as FolderStatusTag } from "./FolderStatusTag";
+export { default as OtherStatusTag } from "./OtherStatusTag";
+export type { AppointementStatusTagProps } from "./AppointementStatusTag";
+export type { FolderStatusTagProps } from "./FolderStatusTag";
+export type { OtherStatusTagProps } from "./OtherStatusTag";

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

@@ -0,0 +1,3 @@
+export { default as AppointementStatusTag } from "./AppointementStatusTag";
+export { default as FolderStatusTag } from "./FolderStatusTag";
+export { default as OtherStatusTag } from "./OtherStatusTag";

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "./cardDate.css";
+interface CardDateProps {
+    date: string;
+    showYear?: boolean;
+    variant?: "horizontal" | "hybride" | "vertical";
+    label?: string;
+    isDisabled?: boolean;
+}
+declare const CardDate: React.FC<CardDateProps>;
+export default CardDate;

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

@@ -0,0 +1,52 @@
+import React from "react";
+import "./cardDate.css";
+var DAYS_FR = ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."];
+var MONTHS_FR = [
+    "jan.",
+    "fév.",
+    "mar",
+    "avr.",
+    "mai",
+    "juin",
+    "juil.",
+    "aoû",
+    "sep.",
+    "oct.",
+    "nov.",
+    "déc.",
+];
+var CardDate = function (_a) {
+    var date = _a.date, _b = _a.showYear, showYear = _b === void 0 ? true : _b, _c = _a.variant, variant = _c === void 0 ? "hybride" : _c, label = _a.label, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d;
+    var parseDate = function (dateString) {
+        var d = new Date(dateString);
+        return {
+            weekDay: DAYS_FR[d.getDay()],
+            day: d.getDate(),
+            month: MONTHS_FR[d.getMonth()],
+            yearFull: d.getFullYear(),
+            yearShort: d.getFullYear().toString().slice(-2),
+        };
+    };
+    var _e = parseDate(date), weekDay = _e.weekDay, day = _e.day, month = _e.month, yearFull = _e.yearFull, yearShort = _e.yearShort;
+    return (React.createElement(React.Fragment, null, variant === "horizontal" ? (React.createElement("div", { className: "card-date" },
+        label && React.createElement("span", { className: "card-date-horizontal-label" }, label),
+        React.createElement("span", { className: "card-date-horizontal ".concat(isDisabled ? "disabled" : "", " ") },
+            day,
+            " ",
+            month,
+            " ",
+            showYear ? yearShort : ""))) : variant === "vertical" ? (React.createElement("div", { className: "card-date" },
+        label && React.createElement("span", { className: "card-date-vertical-label" }, label),
+        React.createElement("span", { className: "card-date-vertical-weekday ".concat(isDisabled ? "disabled" : "") }, weekDay),
+        React.createElement("span", { className: "card-date-vertical-day ".concat(isDisabled ? "disabled" : "") }, day),
+        React.createElement("span", { className: "card-date-vertical-month ".concat(isDisabled ? "disabled" : "") }, month),
+        showYear && (React.createElement("span", { className: "card-date-vertical-year" }, yearFull)))) : (React.createElement("div", { className: "card-date" },
+        label && React.createElement("span", { className: "card-date-hybride-label" }, label),
+        React.createElement("span", { className: "card-date-vertical-day-line" },
+            React.createElement("span", { className: "card-date-hybride-day ".concat(isDisabled ? "disabled" : "") },
+                day,
+                " "),
+            React.createElement("span", { className: "card-date-hybride-month ".concat(isDisabled ? "disabled" : "") }, month)),
+        showYear && (React.createElement("span", { className: "card-date-hybride-year" }, yearFull))))));
+};
+export default CardDate;