kelt-ui-kit-react 1.0.2 → 1.0.3

package/dist/datePicker/DatePicker.d.ts

@@ -1 +1,7 @@
-export declare const DatePicker: () => import("react/jsx-runtime").JSX.Element;
+import { Value } from 'react-calendar/dist/cjs/shared/types';
+
+export type DatePickerProps = {
+    value?: Value;
+    onChange?: (date: Value) => void;
+};
+export declare const Datepicker: ({ value, onChange }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
     "@types/node": "^22.5.5",
     "@vitejs/plugin-react": "^4.3.1",
     "bootstrap-icons": "^1.11.3",
-    "react-day-picker": "^9.7.0",
+    "react-date-picker": "^11.0.0",
     "styled-components": "^6.1.13",
     "vite": "^5.4.6",
     "vite-plugin-dts": "^4.2.2",

package/src/datePicker/DatePicker.tsx

@@ -1,25 +1,69 @@
-import { format } from "date-fns";
-import { useState } from "react";
-import { DayPicker } from "react-day-picker";
+import { useCallback, useEffect, useRef, useState } from "react";
+import Calendar from "react-calendar";
+import { Value } from "react-calendar/dist/cjs/shared/types";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./datePicker.css"; // Assuming you have some styles for the DatePicker
+export type DatePickerProps = {
+  value?: Value;
+  onChange?: (date: Value) => void;
+};
+export const Datepicker = ({ value, onChange }: DatePickerProps) => {
+  const [date, setDate] = useState<Value>(value ?? new Date());
+  const [showCalendar, setShowCalendar] = useState(false);
+
+  const calendarRef = useRef<HTMLDivElement>(null);
+
+  const handleChange = useCallback(
+    (val: Value) => {
+      setDate(val);
+      if (onChange) {
+        onChange(val);
+      }
+      setShowCalendar(false);
+    },
+    [onChange]
+  );
 
-export const DatePicker = () => {
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
+  const toggleCalendar = () => setShowCalendar(!showCalendar);
+
+  const handleClickOutside = useCallback((event: MouseEvent) => {
+    if (
+      calendarRef.current &&
+      !calendarRef.current.contains(event.target as Node)
+    ) {
+      setShowCalendar(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (showCalendar) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    // Nettoyage
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showCalendar, handleClickOutside]);
 
   return (
     <div>
-      <h2>Sélectionnez une date :</h2>
-      <DayPicker
-        mode="single"
-        selected={selectedDate}
-        onSelect={setSelectedDate}
-      />
-
-      {selectedDate && (
-        <p>
-          Date sélectionnée :{" "}
-          <strong>{format(selectedDate, "dd/MM/yyyy")}</strong>
-        </p>
-      )}
+      <div className="calendar" ref={calendarRef}>
+        <button className="calendar-button" onClick={toggleCalendar}>
+          <Icon
+            classIcon=" bi-calendar4-event"
+            size={IconSizeEnum.EXTRA_LARGE}
+          />
+        </button>
+        {showCalendar && (
+          <div className="calendar-popup">
+            <Calendar onChange={handleChange} value={date} />
+          </div>
+        )}
+      </div>
     </div>
   );
 };

package/src/datePicker/DatePicker.view.tsx

@@ -1,9 +1,9 @@
-import { DatePicker } from "./DatePicker";
+import { Datepicker } from "./DatePicker";
 
 export const DatePickerView = () => {
   return (
     <div>
-      <DatePicker />
+      <Datepicker />
     </div>
   );
 };

package/src/datePicker/datePicker.css

@@ -0,0 +1,59 @@
+.calendar {
+  position: relative;
+  .calendar-button {
+    width: 40px;
+    max-width: 40px;
+    min-width: 40px;
+    background-color: #fff;
+    i {
+      color: #333;
+      font-size: 1.6rem;
+    }
+  }
+  .calendar-popup {
+    position: absolute;
+    z-index: 5;
+    .react-calendar {
+      border-color: #dedede;
+      border-style: solid;
+      border-width: 1px;
+      max-width: 300px;
+      font-size: 0.8rem;
+      button {
+        background-color: #fff;
+        color: #333;
+        min-width: auto;
+        width: auto;
+        font-size: 0.8rem;
+        padding: 0.5rem;
+      }
+      .react-calendar__month-view__weekdays__weekday {
+        text-align: center;
+      }
+      .react-calendar__navigation {
+        display: flex;
+      }
+
+      .react-calendar__tile--active {
+        background-color: #007bff;
+        color: #fff;
+      }
+      .react-calendar__tile--now {
+        background-color: #f0f0f0;
+        color: #000;
+      }
+      .react-calendar__tile--active:hover {
+        background-color: #0056b3;
+        color: #fff;
+      }
+      .react-calendar__tile--now:hover {
+        background-color: #e0e0e0;
+        color: #000;
+      }
+      .react-calendar__tile--disabled {
+        background-color: #f8f9fa;
+        color: #6c757d;
+      }
+    }
+  }
+}