allaw-ui 4.6.5 → 4.6.7

package/dist/components/molecules/appointmentCard/appointmentCard.module.css

@@ -1,5 +1,3 @@
-@import "../../../styles/colors.css";
-
 .card {
   background: white;
   border-radius: 12px;

package/dist/components/molecules/emptyMessage/EmptyMessage.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface EmptyMessageProps {
+    message: string;
+    icon?: string;
+    variant?: "medium12" | "medium14" | "semiBold12" | "semiBold14" | "bold14";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
+    align?: "left" | "center" | "right";
+    height?: string;
+    className?: string;
+}
+declare const EmptyMessage: React.FC<EmptyMessageProps>;
+export default EmptyMessage;

package/dist/components/molecules/emptyMessage/EmptyMessage.js

@@ -0,0 +1,9 @@
+import React from "react";
+import styles from "./emptyMessage.module.css";
+import TinyInfo from "../../atoms/typography/TinyInfo";
+var EmptyMessage = function (_a) {
+    var message = _a.message, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? "medium14" : _b, _c = _a.color, color = _c === void 0 ? "mid-grey" : _c, _d = _a.align, align = _d === void 0 ? "center" : _d, _e = _a.height, height = _e === void 0 ? "100%" : _e, className = _a.className;
+    return (React.createElement("div", { className: "".concat(styles.noElement, " ").concat(className || ""), style: { height: height } },
+        React.createElement(TinyInfo, { variant: variant, text: message, align: align, color: color, startIcon: icon })));
+};
+export default EmptyMessage;

package/dist/components/molecules/emptyMessage/EmptyMessage.stories.d.ts

@@ -0,0 +1,75 @@
+declare namespace _default {
+    export let title: string;
+    export { EmptyMessage as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace message {
+            let control: string;
+            let description: string;
+        }
+        namespace icon {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace variant {
+            export namespace control_2 {
+                let type: string;
+                let options: string[];
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace color {
+            export namespace control_3 {
+                let type_1: string;
+                export { type_1 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 align {
+            export namespace control_4 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace height {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 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 Default: any;
+export const WithIcon: any;
+export const WithCalendarIcon: any;
+export const WithUserIcon: any;
+export const DarkGrey: any;
+export const LeftAligned: any;
+export const CustomHeight: any;
+export const SmallVariant: any;
+export const BoldVariant: any;
+import EmptyMessage from "./EmptyMessage";

package/dist/components/molecules/emptyMessage/EmptyMessage.stories.js

@@ -0,0 +1,115 @@
+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 EmptyMessage from "./EmptyMessage";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/EmptyMessage",
+    component: EmptyMessage,
+    tags: ["autodocs"],
+    argTypes: {
+        message: {
+            control: "text",
+            description: "Message à afficher",
+        },
+        icon: {
+            control: "text",
+            description: "Nom de l'icône à afficher (optionnel)",
+        },
+        variant: {
+            control: {
+                type: "select",
+                options: ["medium12", "medium14", "semiBold12", "semiBold14", "bold14"],
+            },
+            description: "Variante de typographie",
+        },
+        color: {
+            control: {
+                type: "select",
+                options: ["bleu-allaw", "mid-grey", "dark-grey", "noir", "pure-white"],
+            },
+            description: "Couleur du texte",
+        },
+        align: {
+            control: {
+                type: "select",
+                options: ["left", "center", "right"],
+            },
+            description: "Alignement du texte",
+        },
+        height: {
+            control: "text",
+            description: "Hauteur du conteneur",
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#f5f5f5" },
+                { name: "dark", value: "#333333" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(EmptyMessage, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    message: "Aucun élément à afficher",
+};
+export var WithIcon = Template.bind({});
+WithIcon.args = {
+    message: "Aucun document trouvé",
+    icon: "allaw-icon-file",
+};
+export var WithCalendarIcon = Template.bind({});
+WithCalendarIcon.args = {
+    message: "Aucun rendez-vous à venir",
+    icon: "allaw-icon-calendar",
+};
+export var WithUserIcon = Template.bind({});
+WithUserIcon.args = {
+    message: "Aucun client trouvé",
+    icon: "allaw-icon-user",
+};
+export var DarkGrey = Template.bind({});
+DarkGrey.args = {
+    message: "Aucune donnée disponible",
+    color: "dark-grey",
+    variant: "semiBold14",
+};
+export var LeftAligned = Template.bind({});
+LeftAligned.args = {
+    message: "Liste vide",
+    align: "left",
+    icon: "allaw-icon-list",
+};
+export var CustomHeight = Template.bind({});
+CustomHeight.args = {
+    message: "Contenu indisponible",
+    height: "200px",
+    icon: "allaw-icon-warning",
+};
+export var SmallVariant = Template.bind({});
+SmallVariant.args = {
+    message: "Aucun résultat",
+    variant: "medium12",
+    color: "mid-grey",
+};
+export var BoldVariant = Template.bind({});
+BoldVariant.args = {
+    message: "Section vide",
+    variant: "bold14",
+    color: "dark-grey",
+    icon: "allaw-icon-folder",
+};

package/dist/components/molecules/emptyMessage/emptyMessage.module.css

@@ -0,0 +1,30 @@
+@import "../../../styles/colors.css";
+
+.noElement {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 1rem;
+  border: 1px solid #e6edf5;
+  border-radius: 0.5rem;
+  background: var(--Primary-Blanc, #fff);
+  min-height: 120px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .noElement {
+    padding: 0.75rem;
+    min-height: 100px;
+  }
+}
+
+@media (max-width: 480px) {
+  .noElement {
+    padding: 0.5rem;
+    min-height: 80px;
+  }
+}

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

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

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

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

package/dist/index.d.ts

@@ -125,3 +125,5 @@ export type { BlogTextImageBlockProps } from "./components/molecules/blogTextIma
 export { default as FileUploader } from "./components/molecules/fileUploader/FileUploader";
 export type { FileUploaderProps } from "./components/molecules/fileUploader/FileUploader";
 export { default as AvatarBubble } from "./components/molecules/proSwitch/AvatarBubble";
+export { default as EmptyMessage } from "./components/molecules/emptyMessage/EmptyMessage";
+export type { EmptyMessageProps } from "./components/molecules/emptyMessage/EmptyMessage";

package/dist/index.js

@@ -120,3 +120,5 @@ export { default as blogTextImageBlock } from "./components/molecules/blogTextIm
 // File Uploader
 export { default as FileUploader } from "./components/molecules/fileUploader/FileUploader";
 export { default as AvatarBubble } from "./components/molecules/proSwitch/AvatarBubble";
+// Empty Message
+export { default as EmptyMessage } from "./components/molecules/emptyMessage/EmptyMessage";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.6.5",
+  "version": "4.6.7",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",