allaw-ui 4.6.4 → 4.6.6

package/dist/components/molecules/appointmentCard/AppointmentCard.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface AppointmentCardProps {
+    appointment: {
+        id: string;
+        title: string;
+        description?: string;
+        formattedDate: string;
+        formattedTime: string;
+        state: "Confirmé" | "Planifié" | "En attente" | "Passé" | "Annulé";
+        meetingType: "INPERSON" | "VISIO" | "CALL" | "IMPORTED";
+        location?: string;
+        provider?: string;
+        attendees: Array<{
+            name: string;
+            role: "PROFESSIONAL" | "CLIENT";
+        }>;
+    };
+    onClick?: (appointment: AppointmentCardProps["appointment"]) => void;
+}
+declare const AppointmentCard: React.FC<AppointmentCardProps>;
+export default AppointmentCard;

package/dist/components/molecules/appointmentCard/AppointmentCard.js

@@ -0,0 +1,105 @@
+import React from "react";
+import styles from "./appointmentCard.module.css";
+import AppointementStatusTag from "../../atoms/tags/AppointementStatusTag";
+import Paragraph from "../../atoms/typography/Paragraph";
+import TinyInfo from "../../atoms/typography/TinyInfo";
+var mapStateToStatusTag = function (state) {
+    switch (state) {
+        case "Confirmé":
+            return "confirmed";
+        case "Planifié":
+            return "available";
+        case "En attente":
+            return "pending";
+        case "Passé":
+            return "passed";
+        case "Annulé":
+            return "cancelled";
+        default:
+            return "available";
+    }
+};
+var getCardVariant = function (state) {
+    switch (state) {
+        case "Confirmé":
+            return "confirmed";
+        case "Planifié":
+            return "scheduled";
+        case "En attente":
+            return "pending";
+        case "Passé":
+            return "past";
+        case "Annulé":
+            return "cancelled";
+        default:
+            return "scheduled";
+    }
+};
+var getMeetingTypeIcon = function (meetingType) {
+    switch (meetingType) {
+        case "INPERSON":
+            return (React.createElement(React.Fragment, null,
+                React.createElement("i", { className: "allaw-icon-map-pin" }),
+                React.createElement("span", null, "Pr\u00E9sentiel")));
+        case "VISIO":
+            return (React.createElement(React.Fragment, null,
+                React.createElement("i", { className: "allaw-icon-visio" }),
+                React.createElement("span", null, "Visio")));
+        case "CALL":
+            return (React.createElement(React.Fragment, null,
+                React.createElement("i", { className: "allaw-icon-phone" }),
+                React.createElement("span", null, "T\u00E9l\u00E9phone")));
+        case "IMPORTED":
+            return (React.createElement(React.Fragment, null,
+                React.createElement("i", { className: "allaw-icon-calendar" }),
+                React.createElement("span", null, "Calendrier connect\u00E9")));
+        default:
+            return (React.createElement(React.Fragment, null,
+                React.createElement("i", { className: "allaw-icon-calendar" }),
+                React.createElement("span", null, "Rendez-vous")));
+    }
+};
+var getPrimaryAttendee = function (attendees) {
+    if (attendees.length === 0)
+        return "";
+    // Chercher d'abord un professionnel
+    var professional = attendees.find(function (a) { return a.role === "PROFESSIONAL"; });
+    if (professional)
+        return professional.name;
+    // Sinon prendre le premier
+    return attendees[0].name;
+};
+var AppointmentCard = function (_a) {
+    var appointment = _a.appointment, onClick = _a.onClick;
+    var cardVariant = getCardVariant(appointment.state);
+    var statusTagVariant = mapStateToStatusTag(appointment.state);
+    var primaryAttendee = getPrimaryAttendee(appointment.attendees);
+    var handleClick = function () {
+        onClick === null || onClick === void 0 ? void 0 : onClick(appointment);
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+        }
+    };
+    return (React.createElement("div", { id: "appointmentCardWrapper", className: "".concat(styles.card, " ").concat(styles[cardVariant]), onClick: handleClick, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-label": "Rendez-vous ".concat(appointment.title, " le ").concat(appointment.formattedDate) },
+        React.createElement("div", { id: "appointmentCardHeader", className: styles.cardHeader },
+            React.createElement("div", { id: "appointmentDateTime", className: styles.dateTime },
+                React.createElement(TinyInfo, { variant: "semiBold14", color: "dark-grey", text: appointment.formattedDate, className: styles.date }),
+                React.createElement("div", { id: "appointmentTime", className: styles.time }, appointment.formattedTime)),
+            React.createElement("div", { id: "appointmentStatusBadge", className: styles.statusBadge },
+                React.createElement(AppointementStatusTag, { status: statusTagVariant, variant: "default" }))),
+        React.createElement("div", { id: "appointmentCardBody", className: styles.cardBody },
+            React.createElement(Paragraph, { variant: "semiBold", color: "dark-grey", text: appointment.title, className: styles.title }),
+            appointment.description && (React.createElement(Paragraph, { variant: "medium", color: "mid-grey", text: appointment.description, className: styles.description })),
+            primaryAttendee && (React.createElement("div", { id: "appointmentAttendee", className: styles.attendee },
+                React.createElement(TinyInfo, { variant: "medium14", color: "dark-grey", text: primaryAttendee, startIcon: "allaw-icon-user", align: "left" })))),
+        React.createElement("div", { id: "appointmentCardFooter", className: styles.cardFooter },
+            React.createElement("div", { id: "appointmentMeetingType", className: styles.meetingType }, getMeetingTypeIcon(appointment.meetingType)),
+            appointment.location && appointment.meetingType === "INPERSON" && (React.createElement("div", { id: "appointmentLocation", className: styles.location },
+                React.createElement(TinyInfo, { variant: "medium12", color: "mid-grey", text: appointment.location, align: "right" }))),
+            appointment.provider && (React.createElement("div", { id: "appointmentProvider", className: styles.provider },
+                React.createElement(TinyInfo, { variant: "medium12", color: "mid-grey", text: appointment.provider, align: "right" }))))));
+};
+export default AppointmentCard;

package/dist/components/molecules/appointmentCard/AppointmentCard.stories.d.ts

@@ -0,0 +1,37 @@
+declare namespace _default {
+    export let title: string;
+    export { AppointmentCard as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace appointment {
+            let control: string;
+        }
+        namespace onClick {
+            let action: string;
+        }
+    }
+    export namespace parameters {
+        namespace actions {
+            let handles: string[];
+        }
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Confirmed: any;
+export const Scheduled: any;
+export const Pending: any;
+export const Past: any;
+export const Cancelled: any;
+export const ImportedCalendar: any;
+export const OriginalDesign: any;
+export const WithoutDescription: any;
+export const WithoutAttendees: any;
+import AppointmentCard from "./AppointmentCard";

package/dist/components/molecules/appointmentCard/AppointmentCard.stories.js

@@ -0,0 +1,106 @@
+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 AppointmentCard from "./AppointmentCard";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/AppointmentCard",
+    component: AppointmentCard,
+    tags: ["autodocs"],
+    argTypes: {
+        appointment: {
+            control: "object",
+        },
+        onClick: {
+            action: "clicked",
+        },
+    },
+    parameters: {
+        actions: {
+            handles: ["click .appointment-card"],
+        },
+        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(AppointmentCard, __assign({}, args)); };
+var baseAppointment = {
+    id: "appointment-1",
+    title: "Consultation juridique",
+    description: "Première consultation pour étudier votre dossier",
+    formattedDate: "Lun. 8 Janvier 2024",
+    formattedTime: "14:30",
+    attendees: [
+        {
+            name: "Maître Dupont",
+            role: "PROFESSIONAL",
+        },
+        {
+            name: "Jean Martin",
+            role: "CLIENT",
+        },
+    ],
+};
+export var Confirmed = Template.bind({});
+Confirmed.args = {
+    appointment: __assign(__assign({}, baseAppointment), { state: "Confirmé", meetingType: "INPERSON", location: "15 Rue de la Paix, 75001 Paris", provider: "Cabinet Dupont & Associés" }),
+};
+export var Scheduled = Template.bind({});
+Scheduled.args = {
+    appointment: __assign(__assign({}, baseAppointment), { state: "Planifié", meetingType: "VISIO", provider: "Cabinet Dupont & Associés" }),
+};
+export var Pending = Template.bind({});
+Pending.args = {
+    appointment: __assign(__assign({}, baseAppointment), { state: "En attente", meetingType: "CALL", provider: "Cabinet Dupont & Associés" }),
+};
+export var Past = Template.bind({});
+Past.args = {
+    appointment: __assign(__assign({}, baseAppointment), { title: "Finalisation convention divorce", description: "Révision finale de la convention de divorce et préparation du dépôt", state: "Passé", meetingType: "INPERSON", location: "18 Rue du Faubourg Saint-Honoré, Paris", formattedDate: "Dim. 12 janv.", formattedTime: "17:00 - 18:30" }),
+};
+export var Cancelled = Template.bind({});
+Cancelled.args = {
+    appointment: __assign(__assign({}, baseAppointment), { state: "Annulé", meetingType: "VISIO", provider: "Cabinet Dupont & Associés" }),
+};
+export var ImportedCalendar = Template.bind({});
+ImportedCalendar.args = {
+    appointment: __assign(__assign({}, baseAppointment), { state: "Confirmé", meetingType: "IMPORTED", provider: "Google Calendar" }),
+};
+// Story basée sur la capture d'origine
+export var OriginalDesign = Template.bind({});
+OriginalDesign.args = {
+    appointment: {
+        id: "appointment-original",
+        title: "Finalisation convention divorce",
+        description: "Révision finale de la convention de divorce et préparation du dépôt",
+        formattedDate: "Dim. 12 janv.",
+        formattedTime: "17:00 - 18:30",
+        state: "Passé",
+        meetingType: "INPERSON",
+        location: "18 Rue du Faubourg Saint-Honoré, Paris",
+        attendees: [],
+    },
+};
+export var WithoutDescription = Template.bind({});
+WithoutDescription.args = {
+    appointment: __assign(__assign({}, baseAppointment), { description: undefined, state: "Confirmé", meetingType: "INPERSON", location: "15 Rue de la Paix, 75001 Paris", provider: "Cabinet Dupont & Associés" }),
+};
+export var WithoutAttendees = Template.bind({});
+WithoutAttendees.args = {
+    appointment: __assign(__assign({}, baseAppointment), { attendees: [], state: "Planifié", meetingType: "VISIO", provider: "Cabinet Dupont & Associés" }),
+};

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

@@ -0,0 +1,138 @@
+.card {
+  background: white;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #25beeb;
+}
+
+/* Variants de statut */
+.card.confirmed {
+  border-left: 4px solid #29a36a;
+}
+
+.card.scheduled {
+  border-left: 4px solid #25beeb;
+}
+
+.card.pending {
+  border-left: 4px solid #ff9f43;
+}
+
+.card.past {
+  border-left: 4px solid #a2b5c8;
+}
+
+.card.cancelled {
+  border-left: 4px solid #e15151;
+  opacity: 0.7;
+}
+
+/* Header */
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+  gap: 1rem;
+}
+
+.dateTime {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* .date - Styles gérés par TinyInfo */
+
+.time {
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
+    "Courier New", monospace;
+}
+
+/* .statusBadge - Styles gérés par AppointementStatusTag */
+
+/* Body */
+.cardBody {
+  margin-bottom: 1rem;
+}
+
+.title {
+  margin: 0 0 0.5rem 0;
+}
+
+.description {
+  margin: 0 0 0.75rem 0;
+}
+
+.attendee {
+  margin-bottom: 0.5rem;
+}
+
+/* Footer */
+.cardFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f3f4f6;
+}
+
+.meetingType {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: #25beeb;
+  font-family: var(--font-open-sans, "Open Sans");
+}
+
+.meetingType i {
+  font-size: 0.875rem;
+}
+
+.location,
+.provider {
+  flex: 1;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .card {
+    padding: 0.875rem;
+  }
+
+  .cardHeader {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .cardFooter {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .location,
+  .provider {
+    text-align: left;
+    align-self: stretch;
+  }
+}

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

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

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

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

package/dist/index.d.ts

@@ -58,6 +58,8 @@ export { default as ContactCardEdit } from "./components/molecules/contactCard/C
 export type { ContactCardEditProps } from "./components/molecules/contactCard/ContactCardEdit";
 export { default as DetailedContactCard } from "./components/molecules/contactCard/DetailedContactCard";
 export type { DetailedContactCardProps } from "./components/molecules/contactCard/DetailedContactCard";
+export { default as AppointmentCard } from "./components/molecules/appointmentCard/AppointmentCard";
+export type { AppointmentCardProps } from "./components/molecules/appointmentCard/AppointmentCard";
 export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
 export { default as ClientLinkCard } from "./components/molecules/clientLinkCard/ClientLinkCard";
 export { default as CaseCardCompact } from "./components/molecules/caseCardCompact/CaseCardCompact";

package/dist/index.js

@@ -62,6 +62,8 @@ export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
 export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
 export { default as ContactCardEdit } from "./components/molecules/contactCard/ContactCardEdit";
 export { default as DetailedContactCard } from "./components/molecules/contactCard/DetailedContactCard";
+// Appointment Card
+export { default as AppointmentCard } from "./components/molecules/appointmentCard/AppointmentCard";
 // Case Link Card
 export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
 // Client Link Card

package/package.json

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