allaw-ui 1.0.19 → 1.0.21

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.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import "./datepicker.css";
+import "../../../styles/global.css";
+export interface DatepickerProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+}
+declare const Datepicker: React.FC<DatepickerProps>;
+export default Datepicker;

package/dist/components/atoms/datepickers/Datepicker.js

@@ -0,0 +1,81 @@
+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 "./datepicker.css";
+import "../../../styles/global.css";
+import { fr } from "date-fns/locale";
+import { format } from "date-fns";
+var CustomInput = forwardRef(function (_a, ref) {
+    var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder;
+    return (React.createElement("button", { type: "button", className: "datepicker", onClick: onClick, ref: ref },
+        React.createElement("span", { className: "datepicker-text" }, value || placeholder),
+        React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" })));
+});
+CustomInput.displayName = "CustomInput";
+var Datepicker = function (_a) {
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b;
+    var _c = useState(value), selectedDate = _c[0], setSelectedDate = _c[1];
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = useState({ top: 0, left: 0 }), position = _e[0], setPosition = _e[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-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-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 Datepicker;

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

@@ -0,0 +1,207 @@
+.datepicker-container {
+  position: relative;
+  width: fit-content;
+}
+
+.datepicker {
+  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;
+}
+
+.datepicker:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.datepicker-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-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__month-container {
+  width: 100%;
+}
+
+.react-datepicker__header {
+  background: white;
+  border: none;
+  padding: 0;
+}
+
+.react-datepicker__day-names {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 8px;
+}
+
+.react-datepicker__day-name {
+  color: var(--Primary-Dark-grey, #456073);
+  font-weight: 600;
+  width: 36px;
+  margin: 0;
+}
+
+.react-datepicker__month {
+  margin: 0;
+  padding: 8px;
+}
+
+.react-datepicker__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__day:hover {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 18px;
+}
+
+.react-datepicker__day--selected {
+  background: var(--bleu-allaw, #1985e8) !important;
+  border-radius: 18px !important;
+  color: white !important;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 18px;
+  color: var(--Primary-Mid-black, #171e25);
+}
+
+.react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text--keyboard-selected:not(
+    [aria-disabled="true"]
+  ):hover,
+.react-datepicker__quarter-text--keyboard-selected:not(
+    [aria-disabled="true"]
+  ):hover,
+.react-datepicker__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 {
+    width: 100%;
+    min-width: unset;
+  }
+}
+
+.datepicker-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__navigation {
+  padding: 8px;
+  border-radius: 18px;
+  margin: 8px;
+}
+
+.react-datepicker__navigation--previous {
+  left: 1px;
+}
+
+.react-datepicker__navigation--next {
+  right: 1px;
+}
+
+.react-datepicker__navigation:hover {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 18px;
+}
+
+/* Padding pour le mois en cours */
+.react-datepicker__current-month {
+  padding-bottom: 18px;
+}
+
+.react-datepicker__current-month.react-datepicker__current-month--hasYearDropdown.react-datepicker__current-month--hasMonthDropdown {
+  padding-bottom: 16px;
+}
+
+.react-datepicker__month-select,
+.react-datepicker__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__month-select:hover,
+.react-datepicker__year-select:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.react-datepicker__navigation-icon.react-datepicker__navigation-icon--previous {
+  left: 1px;
+}
+
+.react-datepicker__navigation-icon.react-datepicker__navigation-icon--next {
+  right: 1px;
+}
+
+.react-datepicker__day:not([aria-disabled="true"]):hover,
+.react-datepicker__month-text:not([aria-disabled="true"]):hover,
+.react-datepicker__quarter-text:not([aria-disabled="true"]):hover,
+.react-datepicker__year-text:not([aria-disabled="true"]):hover {
+  border-radius: 18px;
+}

package/dist/components/atoms/datepickers/index.d.ts

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

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

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

package/dist/index.d.ts

@@ -23,6 +23,8 @@ 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 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,8 @@ 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";
 // Tags
 export { default as AppointementStatusTag } from "./components/atoms/tags/AppointementStatusTag";
 export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatusTag";
@@ -48,9 +50,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.19",
+  "version": "1.0.21",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -40,8 +40,11 @@
     "access": "public"
   },
   "dependencies": {
+    "@types/react-datepicker": "^7.0.0",
+    "date-fns": "^4.1.0",
     "next": "14.2.5",
     "react": "^17.0.0 || ^18.0.0",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-hook-form": "^7.53.0",
     "typeface-open-sans": "^1.1.13"