allaw-ui 3.9.4 → 3.9.6

package/dist/components/atoms/inputs/Input.css

@@ -7,6 +7,10 @@
   gap: 8px;
 }
 
+.Input-no-title {
+  gap: 0;
+}
+
 .Input-title-container {
   display: flex;
   align-items: center;
@@ -82,7 +86,7 @@
   border: none;
   outline: none;
   color: var(--noir);
-  padding-right: 30px;
+  padding-right: 4px;
 }
 
 /* Style variation */

package/dist/components/atoms/inputs/Input.d.ts

@@ -4,7 +4,7 @@ import "../../../styles/global.css";
 import "../../../styles/icons.css";
 import { commonRegex } from "../../../utils/regex";
 export interface InputProps {
-    title: string;
+    title?: string;
     style?: "default" | "variation" | "password";
     placeholder: string;
     endIcon?: string;

package/dist/components/atoms/inputs/Input.js

@@ -93,10 +93,11 @@ var Input = forwardRef(function (_a, ref) {
         }
         return null;
     };
-    return (React.createElement("div", { className: "Input Input-".concat(style) },
-        React.createElement("div", { className: "Input-title-container" },
+    var hasTitle = title && title.trim() !== "";
+    return (React.createElement("div", { className: "Input Input-".concat(style, " ").concat(!hasTitle ? "Input-no-title" : "") },
+        hasTitle && (React.createElement("div", { className: "Input-title-container" },
             React.createElement(Paragraph, { variant: variant, color: color, text: title }),
-            isRequired && title && (React.createElement("span", { className: "Input-required" },
+            isRequired && React.createElement("span", { className: "Input-required" },
                 "\u00A0",
                 "*"))),
         React.createElement("div", { className: "Input-wrapper" },

package/dist/components/molecules/contactCard/ContactCardEdit.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export interface ContactCardEditProps {
+    name: string;
+    status: string;
+    phone: string;
+    email: string;
+    clientOfStudy?: boolean;
+    officeName?: "du cabinet" | "de l'étude";
+    birthDate?: Date;
+    onSave?: (data: {
+        firstName: string;
+        lastName: string;
+        status: string;
+        clientType: string;
+        phone: string;
+        email: string;
+        birthDate?: Date;
+    }) => void;
+    onCancel?: () => void;
+}
+declare const ContactCardEdit: React.FC<ContactCardEditProps>;
+export default ContactCardEdit;

package/dist/components/molecules/contactCard/ContactCardEdit.js

@@ -0,0 +1,107 @@
+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, { useState, useEffect } from "react";
+import styles from "./contactCardEdit.module.css";
+import Input from "../../atoms/inputs/Input";
+import Select from "../../atoms/selects/Select";
+import Datepicker from "../../atoms/datepickers/Datepicker";
+import IconButton from "../../atoms/buttons/IconButton";
+var ContactCardEdit = function (_a) {
+    var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, _b = _a.clientOfStudy, clientOfStudy = _b === void 0 ? false : _b, _c = _a.officeName, officeName = _c === void 0 ? "du cabinet" : _c, birthDate = _a.birthDate, onSave = _a.onSave, onCancel = _a.onCancel;
+    var _d = useState({
+        firstName: "",
+        lastName: "",
+        status: status,
+        clientType: clientOfStudy ? "Client ".concat(officeName) : "Non client",
+        phone: phone,
+        email: email,
+        birthDate: birthDate,
+    }), editData = _d[0], setEditData = _d[1];
+    // Options pour les selects
+    var statusOptions = [
+        { label: "Client actif", value: "Client actif" },
+        { label: "Prospect", value: "Prospect" },
+        { label: "Ancien client", value: "Ancien client" },
+        { label: "Contact", value: "Contact" },
+    ];
+    var clientTypeOptions = [
+        { label: "Client du cabinet", value: "Client du cabinet" },
+        { label: "Client de l'étude", value: "Client de l'étude" },
+        { label: "Non client", value: "Non client" },
+    ];
+    // Initialisation des données d'édition
+    useEffect(function () {
+        if (name) {
+            var nameParts_1 = name.split(" ");
+            setEditData(function (prev) { return (__assign(__assign({}, prev), { firstName: nameParts_1[0] || "", lastName: nameParts_1.slice(1).join(" ") || "", status: status, clientType: clientOfStudy ? "Client ".concat(officeName) : "Non client", phone: phone, email: email, birthDate: birthDate })); });
+        }
+    }, [name, status, phone, email, birthDate, clientOfStudy, officeName]);
+    var handleSave = function () {
+        onSave === null || onSave === void 0 ? void 0 : onSave(editData);
+    };
+    var handleCancel = function () {
+        // Reset des données
+        var nameParts = name.split(" ");
+        setEditData({
+            firstName: nameParts[0] || "",
+            lastName: nameParts.slice(1).join(" ") || "",
+            status: status,
+            clientType: clientOfStudy ? "Client ".concat(officeName) : "Non client",
+            phone: phone,
+            email: email,
+            birthDate: birthDate,
+        });
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    return (React.createElement("div", { className: styles.contactCardEdit },
+        React.createElement("div", { className: styles.contentContainer },
+            React.createElement("div", { className: styles.nameTagContainer },
+                React.createElement("div", { className: styles.nameInputsContainer },
+                    React.createElement(Input, { title: "", placeholder: "Pr\u00E9nom", value: editData.firstName, onChange: function (value) {
+                            return setEditData(function (prev) { return (__assign(__assign({}, prev), { firstName: value })); });
+                        }, disableAutofill: true }),
+                    React.createElement(Input, { title: "", placeholder: "Nom", value: editData.lastName, onChange: function (value) {
+                            return setEditData(function (prev) { return (__assign(__assign({}, prev), { lastName: value })); });
+                        }, disableAutofill: true })),
+                React.createElement(Select, { items: statusOptions, selectedItem: editData.status, placeholder: "Statut", onChange: function (value) {
+                        return setEditData(function (prev) { return (__assign(__assign({}, prev), { status: value })); });
+                    } })),
+            React.createElement("div", { className: styles.infoContainer },
+                React.createElement("div", { className: styles.infoItem },
+                    React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
+                    React.createElement("div", { className: styles.clientTypeSelectContainer },
+                        React.createElement(Select, { items: clientTypeOptions, selectedItem: editData.clientType, placeholder: "Type de client", onChange: function (value) {
+                                return setEditData(function (prev) { return (__assign(__assign({}, prev), { clientType: value })); });
+                            } }))),
+                React.createElement("div", { className: styles.telephoneEmailItems },
+                    React.createElement("div", { className: styles.infoItem },
+                        React.createElement("i", { className: "allaw-icon-phone ".concat(styles.infoIcon) }),
+                        React.createElement("div", { className: styles.phoneInputContainer },
+                            React.createElement(Input, { title: "", placeholder: "T\u00E9l\u00E9phone", type: "tel", value: editData.phone, onChange: function (value) {
+                                    return setEditData(function (prev) { return (__assign(__assign({}, prev), { phone: value })); });
+                                }, disableAutofill: true }))),
+                    React.createElement("div", { className: styles.infoItem },
+                        React.createElement("i", { className: "allaw-icon-mail ".concat(styles.infoIcon) }),
+                        React.createElement(Input, { title: "", placeholder: "Email", type: "email", value: editData.email, onChange: function (value) {
+                                return setEditData(function (prev) { return (__assign(__assign({}, prev), { email: value })); });
+                            }, disableAutofill: true })),
+                    birthDate && (React.createElement("div", { className: styles.infoItem },
+                        React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
+                        React.createElement(Datepicker, { value: editData.birthDate, onChange: function (date) {
+                                return setEditData(function (prev) { return (__assign(__assign({}, prev), { birthDate: date })); });
+                            }, placeholder: "Date de naissance" })))))),
+        React.createElement("div", { className: styles.actionsContainer },
+            React.createElement("div", { className: styles.editActionsContainer },
+                React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-check", onClick: handleSave, color: "#29a36a" }),
+                React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-close", onClick: handleCancel, color: "#728ea7" })))));
+};
+export default ContactCardEdit;

package/dist/components/molecules/contactCard/ContactCardEdit.stories.d.ts

@@ -0,0 +1,72 @@
+declare namespace _default {
+    export let title: string;
+    export { ContactCardEdit as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace name {
+            let control: string;
+        }
+        namespace status {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace phone {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace email {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace clientOfStudy {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        namespace officeName {
+            export namespace control_5 {
+                let type: string;
+                let options: string[];
+            }
+            export { control_5 as control };
+        }
+        namespace birthDate {
+            let control_6: string;
+            export { control_6 as control };
+        }
+    }
+    export namespace args {
+        let name_1: string;
+        export { name_1 as name };
+        let status_1: string;
+        export { status_1 as status };
+        let phone_1: string;
+        export { phone_1 as phone };
+        let email_1: string;
+        export { email_1 as email };
+        let clientOfStudy_1: boolean;
+        export { clientOfStudy_1 as clientOfStudy };
+        let officeName_1: string;
+        export { officeName_1 as officeName };
+        export function onSave(data: any): void;
+        export function onCancel(): void;
+    }
+    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 WithBirthDate: any;
+export const WithoutBirthDate: any;
+export const NonClient: any;
+export const ClientEtude: any;
+export const ClientCabinet: any;
+export const EmptyFields: any;
+import ContactCardEdit from "./ContactCardEdit";

package/dist/components/molecules/contactCard/ContactCardEdit.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 ContactCardEdit from "./ContactCardEdit";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/ContactCardEdit",
+    component: ContactCardEdit,
+    tags: ["autodocs"],
+    argTypes: {
+        name: { control: "text" },
+        status: { control: "text" },
+        phone: { control: "text" },
+        email: { control: "text" },
+        clientOfStudy: { control: "boolean" },
+        officeName: {
+            control: {
+                type: "select",
+                options: ["du cabinet", "de l'étude"],
+            },
+        },
+        birthDate: { control: "date" },
+    },
+    args: {
+        name: "Jane DOE",
+        status: "Client actif",
+        phone: "06 63 90 59 25",
+        email: "enzo@quarantesoixante.com",
+        clientOfStudy: false,
+        officeName: "du cabinet",
+        onSave: function (data) {
+            console.log("Données sauvegardées:", data);
+            alert("Sauvegarde: ".concat(data.firstName, " ").concat(data.lastName));
+        },
+        onCancel: function () {
+            console.log("Édition annulée");
+            alert("Édition annulée");
+        },
+    },
+    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(ContactCardEdit, __assign({}, args)); };
+export var Default = Template.bind({});
+export var WithBirthDate = Template.bind({});
+WithBirthDate.args = {
+    birthDate: new Date("1990-05-15"),
+};
+export var WithoutBirthDate = Template.bind({});
+WithoutBirthDate.args = {
+    birthDate: undefined,
+};
+export var NonClient = Template.bind({});
+NonClient.args = {
+    clientOfStudy: false,
+    status: "Prospect",
+};
+export var ClientEtude = Template.bind({});
+ClientEtude.args = {
+    clientOfStudy: true,
+    officeName: "de l'étude",
+};
+export var ClientCabinet = Template.bind({});
+ClientCabinet.args = {
+    clientOfStudy: true,
+    officeName: "du cabinet",
+};
+export var EmptyFields = Template.bind({});
+EmptyFields.args = {
+    phone: "",
+    email: "",
+};

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

@@ -12,6 +12,7 @@
   align-items: stretch;
   align-self: stretch;
   border-radius: 16px;
+  min-height: 147px;
 }
 
 .actionsContainer {

package/dist/components/molecules/contactCard/contactCardEdit.module.css

@@ -0,0 +1,145 @@
+@import "../../../styles/colors.module.css";
+
+.contactCardEdit {
+  font-family: "Open Sans", sans-serif;
+  border-radius: 16px;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  background: var(--pure-white, #fff);
+  display: flex;
+  padding: 24px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: stretch;
+  align-self: stretch;
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 24px;
+}
+
+.nameTagContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  width: 300px;
+  min-width: 300px;
+  max-width: 300px;
+}
+
+.nameInputsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  width: 100%;
+  min-width: 200px;
+}
+
+.nameInputsContainer > div {
+  flex: 1;
+}
+
+.infoContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  padding-left: 6px;
+}
+
+.infoItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.infoItem i {
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.infoIcon {
+  width: 24px;
+  height: 24px;
+  color: var(--bleu-allaw, #25beeb);
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.telephoneEmailItems {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+.actionsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  justify-content: end;
+}
+
+.editActionsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  padding: 1rem;
+}
+
+.phoneInputContainer {
+  width: 140px;
+  min-width: 140px;
+  max-width: 140px;
+}
+
+.clientTypeSelectContainer {
+  padding-left: 0px;
+}
+
+/* Media queries responsive */
+@media (max-width: 1000px) {
+  .phoneInputContainer {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 900px) {
+  .telephoneEmailItems {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .nameInputsContainer {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .contentContainer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .nameTagContainer {
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .clientTypeSelectContainer {
+    min-width: 188px;
+  }
+
+  .infoItem {
+    min-width: 219px;
+  }
+}

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

@@ -1,4 +1,6 @@
 export { default as ContactCard } from "./ContactCard";
 export type { ContactCardProps } from "./ContactCard";
+export { default as ContactCardEdit } from "./ContactCardEdit";
+export type { ContactCardEditProps } from "./ContactCardEdit";
 export { default as DetailedContactCard } from "./DetailedContactCard";
 export type { DetailedContactCardProps } from "./DetailedContactCard";

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

@@ -1,2 +1,3 @@
 export { default as ContactCard } from "./ContactCard";
+export { default as ContactCardEdit } from "./ContactCardEdit";
 export { default as DetailedContactCard } from "./DetailedContactCard";

package/dist/index.d.ts

@@ -50,6 +50,8 @@ export { default as BillingCount } from "./components/molecules/billingCount/Bil
 export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
 export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
 export type { ContactCardProps } from "./components/molecules/contactCard/ContactCard";
+export { default as ContactCardEdit } from "./components/molecules/contactCard/ContactCardEdit";
+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 CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";

package/dist/index.js

@@ -57,6 +57,7 @@ export { default as BillingCount } from "./components/molecules/billingCount/Bil
 export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
 // Contact Cards
 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";
 // Case Link Card
 export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";

package/package.json

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