allaw-ui 1.0.20 → 1.0.22

package/dist/components/atoms/buttons/TabNavigation.css

@@ -22,13 +22,13 @@
 }
 
 .tab-item.active {
-  border-bottom: 2px solid #000;
-  padding-bottom: 9px;
+  border-bottom: 3px solid #000;
+  padding-bottom: 10px;
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
 }
 
 .tab-item.inactive {
-  border-bottom: 1px solid var(--light-grey, #728ea7);
+  border-bottom: 3px solid var(--grey-venom, #e6edf5);
   color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
 }
 

package/dist/components/atoms/datepickers/datepicker.css

@@ -1,6 +1,6 @@
 .datepicker-container {
   position: relative;
-  width: fit-content;
+  width: 100%;
 }
 
 .datepicker {
@@ -16,6 +16,7 @@
   border: none;
   cursor: pointer;
   min-width: 200px;
+  width: 100%;
 }
 
 .datepicker:hover {

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

@@ -15,6 +15,7 @@ export interface InputProps {
     value?: string;
     error?: string;
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+    variant?: "bold" | "semiBold" | "medium";
 }
 export interface InputRef {
     validate: () => boolean;

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

@@ -6,11 +6,11 @@ import { commonRegex } from "../../../utils/regex";
 import TinyInfo from "../typography/TinyInfo";
 import Paragraph from "../typography/Paragraph";
 var Input = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.color, color = _d === void 0 ? "noir" : _d;
-    var _e = useState(false), isPasswordVisible = _e[0], setIsPasswordVisible = _e[1];
-    var _f = useState(propValue || ""), value = _f[0], setValue = _f[1];
-    var _g = useState(propError || ""), error = _g[0], setError = _g[1];
-    var _h = useState(false), isTouched = _h[0], setIsTouched = _h[1];
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.variant, variant = _e === void 0 ? "medium" : _e;
+    var _f = useState(false), isPasswordVisible = _f[0], setIsPasswordVisible = _f[1];
+    var _g = useState(propValue || ""), value = _g[0], setValue = _g[1];
+    var _h = useState(propError || ""), error = _h[0], setError = _h[1];
+    var _j = useState(false), isTouched = _j[0], setIsTouched = _j[1];
     var inputRef = useRef(null);
     useEffect(function () {
         setValue(propValue || "");
@@ -71,7 +71,7 @@ var Input = forwardRef(function (_a, ref) {
     };
     return (React.createElement("div", { className: "Input Input-".concat(style) },
         React.createElement("div", { className: "Input-title-container" },
-            React.createElement(Paragraph, { variant: "semiBold", color: color, text: title }),
+            React.createElement(Paragraph, { variant: variant, color: color, text: title }),
             isRequired && title && (React.createElement("span", { className: "Input-required" },
                 "\u00A0",
                 "*"))),

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

@@ -4,7 +4,7 @@
 .text-area {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 11px;
   /* field-sizing: content; */
 }
 

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

@@ -13,6 +13,8 @@ export interface TextAreaProps {
     value?: string;
     error?: string;
     maxHeight?: number;
+    variant?: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
 }
 export interface TextAreaRef {
     validate: () => boolean;

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

@@ -6,10 +6,10 @@ import { commonRegex } from "../../../utils/regex";
 import TinyInfo from "../typography/TinyInfo";
 import Paragraph from "../typography/Paragraph";
 var TextArea = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d;
-    var _e = useState(propValue || ""), value = _e[0], setValue = _e[1];
-    var _f = useState(propError || ""), error = _f[0], setError = _f[1];
-    var _g = useState(false), isTouched = _g[0], setIsTouched = _g[1];
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f;
+    var _g = useState(propValue || ""), value = _g[0], setValue = _g[1];
+    var _h = useState(propError || ""), error = _h[0], setError = _h[1];
+    var _j = useState(false), isTouched = _j[0], setIsTouched = _j[1];
     var textareaRef = useRef(null);
     useEffect(function () {
         setValue(propValue || "");
@@ -52,7 +52,7 @@ var TextArea = forwardRef(function (_a, ref) {
     };
     return (React.createElement("div", { className: "TextArea text-area-".concat(style) },
         React.createElement("div", { className: "text-area-title-container" },
-            React.createElement(Paragraph, { variant: "semiBold", color: "noir", text: title }),
+            React.createElement(Paragraph, { variant: variant, color: color, text: title }),
             isRequired && title && (React.createElement("span", { className: "text-area-required" },
                 "\u00A0",
                 "*"))),

package/dist/components/atoms/selects/Select.css

@@ -7,7 +7,7 @@
   padding: 8px 16px;
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 11px;
   border-radius: 8px;
   background: var(--secondary-light-grey, #f4f7fb);
   cursor: pointer;

package/dist/components/molecules/datepickerForm/DatepickerForm.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import "./datepickerForm.css";
+import "../../../styles/global.css";
+export interface DatepickerFormProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+    text?: string;
+    variant?: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+}
+declare const DatepickerForm: React.FC<DatepickerFormProps>;
+export default DatepickerForm;

package/dist/components/molecules/datepickerForm/DatepickerForm.js

@@ -0,0 +1,84 @@
+import React, { forwardRef, useState, useRef, useEffect } from "react";
+import ReactDatePicker from "react-datepicker";
+import ReactDOM from "react-dom";
+import "react-datepicker/dist/react-datepicker.css";
+import "./datepickerForm.css";
+import "../../../styles/global.css";
+import { fr } from "date-fns/locale";
+import { format } from "date-fns";
+import Paragraph from "../../atoms/typography/Paragraph";
+var CustomInput = forwardRef(function (_a, ref) {
+    var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder;
+    return (React.createElement("button", { type: "button", className: "datepicker-form", onClick: onClick, ref: ref },
+        React.createElement("span", { className: "datepicker-form-text" }, value || placeholder),
+        React.createElement("i", { className: "datepicker-form-icon allaw-icon-calendar" })));
+});
+CustomInput.displayName = "CustomInput";
+var DatepickerForm = function (_a) {
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d;
+    var _e = useState(value), selectedDate = _e[0], setSelectedDate = _e[1];
+    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = useState({ top: 0, left: 0 }), position = _g[0], setPosition = _g[1];
+    var buttonRef = useRef(null);
+    var calendarRef = useRef(null);
+    var updatePosition = function () {
+        if (buttonRef.current) {
+            var rect = buttonRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+            });
+        }
+    };
+    useEffect(function () {
+        if (isOpen) {
+            updatePosition();
+            window.addEventListener("scroll", updatePosition);
+            window.addEventListener("resize", updatePosition);
+        }
+        return function () {
+            window.removeEventListener("scroll", updatePosition);
+            window.removeEventListener("resize", updatePosition);
+        };
+    }, [isOpen]);
+    var handleDateChange = function (date) {
+        if (date) {
+            setSelectedDate(date);
+            onChange === null || onChange === void 0 ? void 0 : onChange(date);
+            setIsOpen(false);
+        }
+    };
+    var handleClickOutside = function (event) {
+        if (buttonRef.current &&
+            !buttonRef.current.contains(event.target) &&
+            calendarRef.current &&
+            !calendarRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    useEffect(function () {
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    var renderCalendar = function () { return (React.createElement("div", { ref: calendarRef, className: "datepicker-form-portal", style: {
+            position: "absolute",
+            top: "".concat(position.top, "px"),
+            left: "".concat(position.left, "px"),
+        } },
+        React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", yearItemNumber: 15, maxDate: new Date() }))); };
+    return (React.createElement("div", { className: "datepicker-form-wrapper" },
+        text && React.createElement(Paragraph, { text: text, variant: variant, color: color }),
+        React.createElement("div", { className: "datepicker-form-container", ref: buttonRef },
+            React.createElement(CustomInput, { value: selectedDate
+                    ? format(selectedDate, "dd MMMM yyyy", { locale: fr })
+                    : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder }),
+            isOpen && ReactDOM.createPortal(renderCalendar(), document.body))));
+};
+export default DatepickerForm;

package/dist/components/molecules/datepickerForm/datepickerForm.css

@@ -0,0 +1,217 @@
+.datepicker-form-container {
+  position: relative;
+  width: 100%;
+}
+
+.datepicker-form {
+  display: flex;
+  height: 40px;
+  padding: 8px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: var(--Primary-Light-grey, #f4f7fb);
+  border: none;
+  cursor: pointer;
+  min-width: 200px;
+  width: 100%;
+}
+
+.datepicker-form:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.datepicker-form-text {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.datepicker-form-icon {
+  color: var(--Primary-Dark-grey, #456073);
+  font-size: 16px;
+  padding-left: 6px;
+}
+
+/* Customisation du calendrier */
+.custom-calendar {
+  border: none !important;
+  font-family: "Open Sans";
+  font-size: 16px;
+  width: 300px !important;
+  padding: 16px;
+}
+
+.react-datepicker-form__month-container {
+  width: 100%;
+}
+
+.react-datepicker-form__header {
+  background: white;
+  border: none;
+  padding: 0;
+}
+
+.react-datepicker-form__day-names {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 8px;
+}
+
+.react-datepicker-form__day-name {
+  color: var(--Primary-Dark-grey, #456073);
+  font-weight: 600;
+  width: 36px;
+  margin: 0;
+}
+
+.react-datepicker-form__month {
+  margin: 0;
+  padding: 8px;
+}
+
+.react-datepicker-form__day {
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  margin: 0;
+  border-radius: 18px;
+  color: var(--Primary-Dark-grey, #456073);
+  font-family: "Open Sans";
+}
+
+.react-datepicker-form__day:hover {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 18px;
+}
+
+.react-datepicker-form__day--selected {
+  background: var(--bleu-allaw, #1985e8) !important;
+  border-radius: 18px !important;
+  color: white !important;
+}
+
+.react-datepicker-form__day--keyboard-selected {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 18px;
+  color: var(--Primary-Mid-black, #171e25);
+}
+
+.react-datepicker-form__day--keyboard-selected:not(
+    [aria-disabled="true"]
+  ):hover,
+.react-datepicker-form__month-text--keyboard-selected:not(
+    [aria-disabled="true"]
+  ):hover,
+.react-datepicker-form__quarter-text--keyboard-selected:not(
+    [aria-disabled="true"]
+  ):hover,
+.react-datepicker-form__year-text--keyboard-selected:not(
+    [aria-disabled="true"]
+  ):hover {
+  background-color: var(--bleu-allaw, #25beeb);
+  color: white;
+  border-radius: 18px;
+}
+
+.custom-header {
+  margin-bottom: 16px;
+}
+
+.year-dropdown,
+.month-dropdown {
+  padding: 8px;
+  min-width: 100px;
+}
+
+/* Style pour mobile */
+@media (max-width: 768px) {
+  .datepicker-form {
+    width: 100%;
+    min-width: unset;
+  }
+}
+
+.datepicker-form-portal {
+  position: absolute;
+  z-index: 9999;
+  background: white;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  border-radius: 8px;
+  box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
+}
+
+/* Customisation des flèches de navigation */
+.react-datepicker-form__navigation {
+  padding: 8px;
+  border-radius: 18px;
+  margin: 8px;
+}
+
+.react-datepicker-form__navigation--previous {
+  left: 1px;
+}
+
+.react-datepicker-form__navigation--next {
+  right: 1px;
+}
+
+.react-datepicker-form__navigation:hover {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 18px;
+}
+
+/* Padding pour le mois en cours */
+.react-datepicker-form__current-month {
+  padding-bottom: 18px;
+}
+
+.react-datepicker-form__current-month.react-datepicker-form__current-month--hasYearDropdown.react-datepicker-form__current-month--hasMonthDropdown {
+  padding-bottom: 16px;
+}
+
+.react-datepicker-form__month-select,
+.react-datepicker-form__year-select {
+  font-size: 16px;
+  font-family: "Open Sans";
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  background-color: white;
+  cursor: pointer;
+}
+
+.react-datepicker-form__month-select:hover,
+.react-datepicker-form__year-select:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.react-datepicker-form__navigation-icon.react-datepicker-form__navigation-icon--previous {
+  left: 1px;
+}
+
+.react-datepicker-form__navigation-icon.react-datepicker-form__navigation-icon--next {
+  right: 1px;
+}
+
+.react-datepicker-form__day:not([aria-disabled="true"]):hover,
+.react-datepicker-form__month-text:not([aria-disabled="true"]):hover,
+.react-datepicker-form__quarter-text:not([aria-disabled="true"]):hover,
+.react-datepicker-form__year-text:not([aria-disabled="true"]):hover {
+  border-radius: 18px;
+}
+
+.datepicker-form-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+  width: 100%;
+}

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

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

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

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

package/dist/components/molecules/selectForm/SelectForm.css

@@ -1,7 +1,7 @@
 .select-form {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 11px;
 }
 
 .select-form-required {

package/dist/components/molecules/selectForm/SelectForm.d.ts

@@ -10,6 +10,8 @@ export interface SelectFormProps {
     width?: number;
     selectedItem?: string | string[];
     onChange?: (selected: string | string[]) => void;
+    variant?: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
 }
 declare const SelectForm: React.FC<SelectFormProps>;
 export default SelectForm;

package/dist/components/molecules/selectForm/SelectForm.js

@@ -4,9 +4,9 @@ import "../../../styles/global.css";
 import Paragraph from "../../atoms/typography/Paragraph";
 import Select from "../../atoms/selects/Select";
 var SelectForm = function (_a) {
-    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.width, width = _b === void 0 ? 100 : _b, selectedItem = _a.selectedItem, onChange = _a.onChange;
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.width, width = _b === void 0 ? 100 : _b, selectedItem = _a.selectedItem, onChange = _a.onChange, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d;
     return (React.createElement("div", { className: "select-form" },
-        React.createElement(Paragraph, { variant: "medium", color: "noir", text: React.createElement(React.Fragment, null,
+        React.createElement(Paragraph, { variant: variant, color: color, text: React.createElement(React.Fragment, null,
                 label,
                 " ",
                 isRequired && React.createElement("span", { className: "select-form-required" }, "*")), size: "default" }),

package/dist/index.d.ts

@@ -23,6 +23,10 @@ export { default as Select } from "./components/atoms/selects/Select";
 export type { SelectItem, SelectProps, SelectRef, } from "./components/atoms/selects/Select";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";
 export type { ComboBoxProps, ComboBoxRef, } from "./components/atoms/selects/ComboBox";
+export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
+export type { DatepickerProps } from "./components/atoms/datepickers/Datepicker";
+export { default as DatepickerForm } from "./components/molecules/datepickerForm/DatepickerForm";
+export type { DatepickerFormProps } from "./components/molecules/datepickerForm/DatepickerForm";
 export { default as AppointementStatusTag } from "./components/atoms/tags/AppointementStatusTag";
 export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatusTag";
 export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTag";

package/dist/index.js

@@ -27,6 +27,10 @@ export { default as SingleFilter } from "./components/atoms/filters/SingleFilter
 // Selects
 export { default as Select } from "./components/atoms/selects/Select";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";
+// Datepickers
+export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
+// DatepickerForm
+export { default as DatepickerForm } from "./components/molecules/datepickerForm/DatepickerForm";
 // Tags
 export { default as AppointementStatusTag } from "./components/atoms/tags/AppointementStatusTag";
 export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatusTag";
@@ -48,9 +52,9 @@ export { default as AppointmentSlot } from "./components/molecules/appointmentSl
 export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
 // Contact Card
 export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
-// Case Link Card 
+// Case Link Card
 export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
-// Case Link Card 
+// Case Link Card
 export { default as ClientLinkCard } from "./components/molecules/clientLinkCard/ClientLinkCard";
 export { default as LoadingBox } from "./components/molecules/loadingBox/LoadingBox";
 // Document Card

package/package.json

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