allaw-ui 4.3.5 → 4.3.7

package/dist/components/atoms/buttons/FilterButtonPrimary.stories.d.ts

@@ -4,4 +4,4 @@ declare namespace _default {
 }
 export default _default;
 export const Default: any;
-import FilterButtonPrimary from './FilterButtonPrimary';
+import FilterButtonPrimary from "./FilterButtonPrimary";

package/dist/components/atoms/buttons/FilterButtonPrimary.stories.js

@@ -10,17 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 // FilterButtonPrimary.stories.js
-import React from 'react';
-import FilterButtonPrimary from './FilterButtonPrimary';
+// import React from 'react';
+import FilterButtonPrimary from "./FilterButtonPrimary";
 import "../../../styles/global.css";
 export default {
-    title: 'Components/Atoms/Buttons/FilterButtonPrimary',
+    title: "Components/Atoms/Buttons/FilterButtonPrimary",
     component: FilterButtonPrimary,
 };
 var Template = function (args) { return React.createElement(FilterButtonPrimary, __assign({}, args)); };
 export var Default = Template.bind({});
 Default.args = {
-    onClick: function () { return alert('Button clicked!'); },
-    zIndex: '100',
-    children: 'Filter Button',
+    onClick: function () { return alert("Button clicked!"); },
+    zIndex: "100",
+    children: "Filter Button",
 };

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

@@ -11,6 +11,7 @@ export interface DatepickerProps {
     minDate?: Date;
     maxDate?: Date;
     disableFutur?: Boolean;
+    mode?: "button" | "input";
 }
 declare const Datepicker: React.FC<DatepickerProps>;
 export default Datepicker;

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { forwardRef, useState, useRef, useEffect, useMemo } from "react";
+import React, { forwardRef, useState, useRef, useEffect, useMemo, useImperativeHandle, } from "react";
 import ReactDatePicker from "react-datepicker";
 import ReactDOM from "react-dom";
 import "react-datepicker/dist/react-datepicker.css";
@@ -18,6 +18,7 @@ import "./datepicker.css";
 import "../../../styles/global.css";
 import { fr } from "date-fns/locale";
 import { format } from "date-fns";
+import TinyInfo from "../typography/TinyInfo";
 var CustomInput = forwardRef(function (_a, ref) {
     var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder;
     var _b = useState(placeholder), displayedPlaceholder = _b[0], setDisplayedPlaceholder = _b[1];
@@ -47,14 +48,72 @@ var CustomInput = forwardRef(function (_a, ref) {
         React.createElement("span", { className: "datepicker-test-text", ref: testRef, "aria-hidden": "true" })));
 });
 CustomInput.displayName = "CustomInput";
+var CustomInputField = forwardRef(function (_a, ref) {
+    var value = _a.value, onChange = _a.onChange, onCalendarClick = _a.onCalendarClick, placeholder = _a.placeholder, onBlur = _a.onBlur, error = _a.error;
+    var _b = useState(value || ""), inputValue = _b[0], setInputValue = _b[1];
+    var _c = useState(false), isTouched = _c[0], setIsTouched = _c[1];
+    var _d = useState(error || ""), localError = _d[0], setLocalError = _d[1];
+    var inputRef = useRef(null);
+    useEffect(function () {
+        setInputValue(value || "");
+    }, [value]);
+    useEffect(function () {
+        setLocalError(error || "");
+    }, [error]);
+    useImperativeHandle(ref, function () { return inputRef.current; });
+    var handleInput = function (e) {
+        var val = e.target.value.replace(/[^0-9/]/g, "");
+        if (val.length === 2 && inputValue.length === 1)
+            val += "/";
+        if (val.length === 5 && inputValue.length === 4)
+            val += "/";
+        setInputValue(val);
+        setLocalError("");
+        onChange === null || onChange === void 0 ? void 0 : onChange(val);
+    };
+    var validateDate = function (val) {
+        if (!/^\d{2}\/\d{2}\/\d{4}$/.test(val))
+            return "Format invalide";
+        var _a = val.split("/").map(Number), jj = _a[0], mm = _a[1], aaaa = _a[2];
+        var now = new Date();
+        var minYear = now.getFullYear() - 120;
+        var maxYear = now.getFullYear() - 15;
+        if (jj < 1 || jj > 31)
+            return "Jour invalide";
+        if (mm < 1 || mm > 12)
+            return "Mois invalide";
+        if (aaaa < minYear || aaaa > maxYear)
+            return "Ann\u00E9e entre ".concat(minYear, " et ").concat(maxYear);
+        var d = new Date(aaaa, mm - 1, jj);
+        if (d.getFullYear() !== aaaa ||
+            d.getMonth() !== mm - 1 ||
+            d.getDate() !== jj)
+            return "Date incohérente";
+        return "";
+    };
+    var handleBlur = function () {
+        setIsTouched(true);
+        var err = validateDate(inputValue);
+        setLocalError(err);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    return (React.createElement("div", { style: { width: "100%" } },
+        React.createElement("div", { className: "datepicker-input-wrapper" },
+            React.createElement("input", { ref: inputRef, type: "text", inputMode: "numeric", pattern: "\\d{2}/\\d{2}/\\d{4}", maxLength: 10, className: "datepicker-input ".concat(localError && isTouched ? "datepicker-input-error" : ""), placeholder: placeholder, value: inputValue, onChange: handleInput, onBlur: handleBlur, autoComplete: "off" }),
+            React.createElement("button", { type: "button", className: "datepicker-input-icon", tabIndex: -1, onClick: onCalendarClick },
+                React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" }))),
+        localError && isTouched && (React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: localError }))));
+});
+CustomInputField.displayName = "CustomInputField";
 var Datepicker = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _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 value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d, _e = _a.mode, mode = _e === void 0 ? "button" : _e;
+    var _f = useState(value), selectedDate = _f[0], setSelectedDate = _f[1];
+    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = useState({ top: 0, left: 0 }), position = _h[0], setPosition = _h[1];
     var buttonRef = useRef(null);
     var calendarRef = useRef(null);
-    var _h = useState("bottom"), placement = _h[0], setPlacement = _h[1];
+    var _j = useState("bottom"), placement = _j[0], setPlacement = _j[1];
+    var _k = useState(""), inputError = _k[0], setInputError = _k[1];
     useEffect(function () {
         setSelectedDate(value);
     }, [value]);
@@ -100,12 +159,10 @@ var Datepicker = function (_a) {
         };
     }, [isOpen]);
     var handleDateChange = function (date) {
-        // console.log("Avant l'appel à onChange :", date);
         setSelectedDate(date || undefined);
         if (date) {
             onChange === null || onChange === void 0 ? void 0 : onChange(date);
         }
-        // console.log("Après l'appel à onChange :", date);
         setIsOpen(false);
     };
     var handleClickOutside = function (event) {
@@ -139,11 +196,26 @@ var Datepicker = function (_a) {
         return new Date(new Date().setFullYear(new Date().getFullYear() - yearDropdownItemNumber));
     }, [minDate, maxDaysInPast, yearDropdownItemNumber]);
     return (React.createElement("div", { className: "datepicker-container", ref: buttonRef },
-        React.createElement(CustomInput, { value: selectedDate
+        mode === "input" ? (React.createElement(CustomInputField, { value: selectedDate ? format(selectedDate, "dd/MM/yyyy") : "", onChange: function (val) {
+                setInputError("");
+                if (/^\d{2}\/\d{2}\/\d{4}$/.test(val)) {
+                    var _a = val.split("/").map(Number), jj = _a[0], mm = _a[1], aaaa = _a[2];
+                    var d = new Date(aaaa, mm - 1, jj);
+                    if (d.getFullYear() === aaaa &&
+                        d.getMonth() === mm - 1 &&
+                        d.getDate() === jj) {
+                        setSelectedDate(d);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(d);
+                    }
+                }
+            }, onCalendarClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder, error: inputError, onBlur: function () {
+                if (!selectedDate)
+                    setInputError("Date invalide");
+            } })) : (React.createElement(CustomInput, { value: selectedDate
                 ? format(selectedDate, "dd MMMM yyyy", { locale: fr })
-                : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder }),
+                : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder })),
         isOpen &&
-            ReactDOM.createPortal(React.createElement("div", { ref: calendarRef, className: "datepicker-portal ".concat(placement), style: __assign({ left: "".concat(position.left, "px") }, (placement === "bottom"
+            ReactDOM.createPortal(React.createElement("div", { ref: calendarRef, className: "datepicker-portal ".concat(placement, " datepicker-portal-animated"), style: __assign({ left: "".concat(position.left, "px") }, (placement === "bottom"
                     ? { top: "".concat(position.top, "px") }
                     : { top: "".concat(position.top, "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", maxDate: maxDate || (disableFutur ? new Date() : undefined), minDate: calculatedMinDate })), document.body)));

package/dist/components/atoms/datepickers/Datepicker.stories.d.ts

@@ -38,6 +38,18 @@ declare namespace _default {
             let description_2: string;
             export { description_2 as description };
         }
+        namespace mode {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+                export let options: string[];
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
     }
 }
 export default _default;
@@ -87,4 +99,13 @@ export namespace WithBothConstraints {
     }
     export { args_4 as args };
 }
+export namespace InputMode {
+    export namespace args_5 {
+        let mode_1: string;
+        export { mode_1 as mode };
+        let placeholder_5: string;
+        export { placeholder_5 as placeholder };
+    }
+    export { args_5 as args };
+}
 import Datepicker from "./Datepicker";

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

@@ -31,6 +31,11 @@ export default {
             control: { type: "date" },
             description: "Date minimale sélectionnable",
         },
+        mode: {
+            control: { type: "select", options: ["button", "input"] },
+            description: "Mode d'affichage du sélecteur (bouton ou champ de saisie)",
+            defaultValue: "button",
+        },
     },
 };
 export var Default = {
@@ -65,3 +70,9 @@ export var WithBothConstraints = {
         minDate: new Date("2024-01-01"),
     },
 };
+export var InputMode = {
+    args: {
+        mode: "input",
+        placeholder: "jj/mm/aaaa",
+    },
+};

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

@@ -245,3 +245,92 @@
   background: none !important;
   cursor: not-allowed;
 }
+
+.datepicker-input-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  background: var(--Primary-Blanc, #fff);
+  border-radius: 8px;
+  border: 2px solid var(--grey-venom, #e6edf5);
+  padding: 10px;
+  min-width: 120px;
+  height: 43px;
+}
+.datepicker-input-wrapper:focus-within {
+  border-color: var(--mid-grey, #728ea7);
+}
+.datepicker-input-wrapper:hover {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}
+.datepicker-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--noir);
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-weight: 400;
+  line-height: normal;
+  padding-right: 36px;
+}
+.datepicker-input::placeholder {
+  color: var(--Tags-Mid-grey, rgba(114, 142, 167, 1));
+  opacity: 0.8;
+  font-weight: 400;
+}
+.datepicker-input-icon {
+  position: absolute;
+  right: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 30px;
+  padding: 0px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+.datepicker-input-icon .datepicker-icon {
+  color: var(--Primary-Dark-grey, #456073);
+  font-size: 18px;
+}
+.datepicker-input-icon:hover {
+  background: var(--grey-venom, #e6edf5);
+  transition: background-color 0.2s;
+}
+.datepicker-input-error {
+  border-color: var(--actions-error, #e15151) !important;
+  /* background-color: rgba(225, 81, 81, 0.1) !important; */
+}
+.datepicker-input-error-message {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  color: var(--actions-error, #e15151);
+  font-size: 12px;
+  margin-top: 2px;
+  padding-left: 2px;
+}
+
+.datepicker-portal-animated {
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/components/atoms/filter/Filter.stories.d.ts

@@ -6,4 +6,4 @@ export default _default;
 export const Default: any;
 export const SingleSelect: any;
 export const WithoutIcon: any;
-import BaseFilter from './Filter';
+import BaseFilter from "./Filter";

package/dist/components/atoms/filter/Filter.stories.js

@@ -1,3 +1,5 @@
+// BaseFilter.stories.js
+// import React from 'react';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,69 +11,67 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-// BaseFilter.stories.js
-import React from 'react';
 import "../../../styles/global.css";
-import BaseFilter from './Filter';
+import BaseFilter from "./Filter";
 export default {
-    title: 'Components/Atoms/Filters/Filter',
+    title: "Components/Atoms/Filters/Filter",
     component: BaseFilter,
 };
 var Template = function (args) { return React.createElement(BaseFilter, __assign({}, args)); };
 export var Default = Template.bind({});
 Default.args = {
-    tooltipContent: 'This is a tooltip',
-    tooltipId: 'tooltip-1',
+    tooltipContent: "This is a tooltip",
+    tooltipId: "tooltip-1",
     showIcon: true,
-    defaultSelectedValues: ['confirmed'],
+    defaultSelectedValues: ["confirmed"],
     filterData: [
-        { value: 'confirmed', name: 'Confirmed' },
-        { value: 'pending', name: 'Pending' },
-        { value: 'available', name: 'Available' },
-        { value: 'unavailable', name: 'Unavailable' },
-        { value: 'cancelled', name: 'Cancelled' },
-        { value: 'passed', name: 'Passed' },
-        { value: 'refused', name: 'Refused' },
+        { value: "confirmed", name: "Confirmed" },
+        { value: "pending", name: "Pending" },
+        { value: "available", name: "Available" },
+        { value: "unavailable", name: "Unavailable" },
+        { value: "cancelled", name: "Cancelled" },
+        { value: "passed", name: "Passed" },
+        { value: "refused", name: "Refused" },
     ],
-    setFilters: function (values) { return console.log('Selected values:', values); },
+    setFilters: function (values) { return console.log("Selected values:", values); },
     multiselect: true,
-    iconName: 'fa fa-filter', // Replace with your actual icon class
-    children: 'Filter Button',
+    iconName: "fa fa-filter", // Replace with your actual icon class
+    children: "Filter Button",
     showNumIndic: true,
     isStatusTag: true,
 };
 export var SingleSelect = Template.bind({});
 SingleSelect.args = {
-    tooltipContent: 'This is a tooltip',
-    tooltipId: 'tooltip-2',
+    tooltipContent: "This is a tooltip",
+    tooltipId: "tooltip-2",
     showIcon: true,
-    defaultSelectedValues: ['confirmed'],
+    defaultSelectedValues: ["confirmed"],
     filterData: [
-        { value: 'confirmed', name: 'Confirmed' },
-        { value: 'pending', name: 'Pending' },
-        { value: 'available', name: 'Available' },
+        { value: "confirmed", name: "Confirmed" },
+        { value: "pending", name: "Pending" },
+        { value: "available", name: "Available" },
     ],
-    setFilters: function (values) { return console.log('Selected values:', values); },
+    setFilters: function (values) { return console.log("Selected values:", values); },
     multiselect: false,
-    iconName: 'fa fa-filter', // Replace with your actual icon class
-    children: 'Single Select Filter Button',
+    iconName: "fa fa-filter", // Replace with your actual icon class
+    children: "Single Select Filter Button",
     showNumIndic: true,
     isStatusTag: false,
 };
 export var WithoutIcon = Template.bind({});
 WithoutIcon.args = {
-    tooltipContent: 'This is a tooltip',
-    tooltipId: 'tooltip-3',
+    tooltipContent: "This is a tooltip",
+    tooltipId: "tooltip-3",
     showIcon: false,
-    defaultSelectedValues: ['confirmed'],
+    defaultSelectedValues: ["confirmed"],
     filterData: [
-        { value: 'confirmed', name: 'Confirmed' },
-        { value: 'pending', name: 'Pending' },
-        { value: 'available', name: 'Available' },
+        { value: "confirmed", name: "Confirmed" },
+        { value: "pending", name: "Pending" },
+        { value: "available", name: "Available" },
     ],
-    setFilters: function (values) { return console.log('Selected values:', values); },
+    setFilters: function (values) { return console.log("Selected values:", values); },
     multiselect: true,
-    children: 'Filter Button Without Icon',
+    children: "Filter Button Without Icon",
     showNumIndic: true,
     isStatusTag: true,
 };

package/package.json

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