kelt-ui-kit-react 1.2.4 → 1.2.5

package/src/dataTable/dataTable.interface.ts

@@ -1,29 +1,29 @@
-import { HTMLInputTypeAttribute } from "react";
-
-export interface dataTableColumnsInterface<T> {
-  id: string;
-  label: string;
-  minWidth?: number;
-  maxWidth?: number;
-  width?: number;
-  align?: "right" | "left" | "center";
-  format?: (value: any) => string;
-  sortable?: boolean;
-  filterable?: boolean;
-  filterValue?: string;
-  editable?: boolean;
-  options?: { label: string; value: string }[];
-  onEdit?: (value: any, row: T) => void;
-  type: HTMLInputTypeAttribute | "select";
-}
-export interface dataTableActionsInterface<T> {
-  id: string;
-  label: string;
-  type: "button" | "link" | "icon";
-  classIcon?: string;
-  onClick: (row: T) => void;
-  shouldDisplay?: (row: T) => boolean;
-  disabled?: boolean;
-  labelButton?: (row: T) => string;
-  visible?: boolean;
-}
+import { HTMLInputTypeAttribute } from "react";
+
+export interface dataTableColumnsInterface<T> {
+  id: string;
+  label: string;
+  minWidth?: number;
+  maxWidth?: number;
+  width?: number;
+  align?: "right" | "left" | "center";
+  format?: (value: any) => string;
+  sortable?: boolean;
+  filterable?: boolean;
+  filterValue?: string;
+  editable?: boolean;
+  options?: { label: string; value: string }[];
+  onEdit?: (value: any, row: T) => void;
+  type: HTMLInputTypeAttribute | "select";
+}
+export interface dataTableActionsInterface<T> {
+  id: string;
+  label: string;
+  type: "button" | "link" | "icon";
+  classIcon?: string;
+  onClick: (row: T) => void;
+  shouldDisplay?: (row: T) => boolean;
+  disabled?: boolean;
+  labelButton?: (row: T) => string;
+  visible?: boolean;
+}

package/src/datePicker/DatePicker.tsx

@@ -1,110 +1,110 @@
-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;
-  maxDate?: Date;
-  onChange?: (date: Value) => void;
-  children?: React.ReactNode;
-};
-export const DatePicker = ({
-  value,
-  onChange,
-  maxDate,
-  children,
-}: DatePickerProps) => {
-  const [dateCalendar, setDateCalendar] = useState<Value>(value ?? new Date());
-  const [showCalendar, setShowCalendar] = useState(false);
-
-  const calendarRef = useRef<HTMLDivElement>(null);
-
-  const handleChange = useCallback(
-    (val: Value) => {
-      setDateCalendar(val);
-      if (onChange) {
-        onChange(val);
-      }
-      setShowCalendar(false);
-    },
-    [onChange]
-  );
-
-  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]);
-  const [currentMonth, setCurrentMonth] = useState<Value>();
-
-  const handleActiveStartDateChange = ({
-    activeStartDate,
-  }: {
-    activeStartDate: Value;
-  }) => {
-    setCurrentMonth(activeStartDate);
-  };
-  return (
-    <div>
-      <div className="calendar" ref={calendarRef}>
-        {children && <div onClick={toggleCalendar}>{children}</div>}
-        {!children && (
-          <button className="calendar-button" onClick={toggleCalendar}>
-            <Icon
-              classIcon=" bi-calendar4-event"
-              size={IconSizeEnum.EXTRA_LARGE}
-            />
-          </button>
-        )}
-        {showCalendar && (
-          <div className="calendar-popup">
-            <div
-              onClick={() => setShowCalendar(false)}
-              className="calendar-popup-close"
-            >
-              <Icon
-                classIcon="bi-x-lg close-icon"
-                size={IconSizeEnum.EXTRA_SMALL}
-              />
-            </div>
-            <Calendar
-              onActiveStartDateChange={handleActiveStartDateChange}
-              maxDate={maxDate ?? new Date()}
-              onChange={handleChange}
-              value={dateCalendar}
-              tileClassName={({ date: day, view }) => {
-                if (view === "month" && (currentMonth as Date)) {
-                  const curr = currentMonth as Date;
-                  return day.getMonth() !== curr?.getMonth()
-                    ? "out-of-month"
-                    : null;
-                }
-                return null;
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
+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;
+  maxDate?: Date;
+  onChange?: (date: Value) => void;
+  children?: React.ReactNode;
+};
+export const DatePicker = ({
+  value,
+  onChange,
+  maxDate,
+  children,
+}: DatePickerProps) => {
+  const [dateCalendar, setDateCalendar] = useState<Value>(value ?? new Date());
+  const [showCalendar, setShowCalendar] = useState(false);
+
+  const calendarRef = useRef<HTMLDivElement>(null);
+
+  const handleChange = useCallback(
+    (val: Value) => {
+      setDateCalendar(val);
+      if (onChange) {
+        onChange(val);
+      }
+      setShowCalendar(false);
+    },
+    [onChange]
+  );
+
+  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]);
+  const [currentMonth, setCurrentMonth] = useState<Value>();
+
+  const handleActiveStartDateChange = ({
+    activeStartDate,
+  }: {
+    activeStartDate: Value;
+  }) => {
+    setCurrentMonth(activeStartDate);
+  };
+  return (
+    <div>
+      <div className="calendar" ref={calendarRef}>
+        {children && <div onClick={toggleCalendar}>{children}</div>}
+        {!children && (
+          <button className="calendar-button" onClick={toggleCalendar}>
+            <Icon
+              classIcon=" bi-calendar4-event"
+              size={IconSizeEnum.EXTRA_LARGE}
+            />
+          </button>
+        )}
+        {showCalendar && (
+          <div className="calendar-popup">
+            <div
+              onClick={() => setShowCalendar(false)}
+              className="calendar-popup-close"
+            >
+              <Icon
+                classIcon="bi-x-lg close-icon"
+                size={IconSizeEnum.EXTRA_SMALL}
+              />
+            </div>
+            <Calendar
+              onActiveStartDateChange={handleActiveStartDateChange}
+              maxDate={maxDate ?? new Date()}
+              onChange={handleChange}
+              value={dateCalendar}
+              tileClassName={({ date: day, view }) => {
+                if (view === "month" && (currentMonth as Date)) {
+                  const curr = currentMonth as Date;
+                  return day.getMonth() !== curr?.getMonth()
+                    ? "out-of-month"
+                    : null;
+                }
+                return null;
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/datePicker/DatePicker.view.tsx

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

package/src/datePicker/datePicker.css

@@ -1,77 +1,77 @@
-.calendar {
-  position: relative;
-  .calendar-button {
-    width: 40px;
-    max-width: 40px;
-    min-width: 40px;
-    background-color: transparent;
-    i {
-      color: #333;
-      font-size: 1.6rem;
-    }
-  }
-  .calendar-popup {
-    position: absolute;
-    z-index: 5;
-    border-color: #cfbdbd;
-    border-style: solid;
-    border-width: 1px;
-    max-width: 300px;
-    min-width: 250px;
-    background-color: #fff;
-    font-size: 0.8rem;
-    border-radius: 4px;
-    .out-of-month {
-      opacity: 0.4;
-    }
-    .calendar-popup-close {
-      display: flex;
-      justify-content: flex-end;
-      margin-right: 0.25rem;
-      margin-top: 0.35rem;
-      cursor: pointer;
-      i {
-        line-height: 0;
-        font-size: 0.8rem;
-      }
-    }
-    .react-calendar {
-      border: 0px;
-      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;
-      }
-    }
-  }
-}
+.calendar {
+  position: relative;
+  .calendar-button {
+    width: 40px;
+    max-width: 40px;
+    min-width: 40px;
+    background-color: transparent;
+    i {
+      color: #333;
+      font-size: 1.6rem;
+    }
+  }
+  .calendar-popup {
+    position: absolute;
+    z-index: 5;
+    border-color: #cfbdbd;
+    border-style: solid;
+    border-width: 1px;
+    max-width: 300px;
+    min-width: 250px;
+    background-color: #fff;
+    font-size: 0.8rem;
+    border-radius: 4px;
+    .out-of-month {
+      opacity: 0.4;
+    }
+    .calendar-popup-close {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 0.25rem;
+      margin-top: 0.35rem;
+      cursor: pointer;
+      i {
+        line-height: 0;
+        font-size: 0.8rem;
+      }
+    }
+    .react-calendar {
+      border: 0px;
+      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;
+      }
+    }
+  }
+}

package/src/expands/Expands.tsx

@@ -1,42 +1,42 @@
-import { useCallback, useEffect, useState } from "react";
-import { Expand } from "./expand/expand";
-import { ExpandInterface } from "./expand/expand.interface";
-import "./expands.css";
-
-type ExpandProps = {
-  items: ExpandInterface[];
-  className?: string;
-  onChange?: (item: ExpandInterface) => void;
-  currentItem?: ExpandInterface;
-  showArrow?: boolean;
-};
-
-export const Expands = (props: ExpandProps) => {
-  const [currentExpand, setCurrentExpand] = useState<ExpandInterface>();
-  const onChangeExpand = useCallback(
-    (item: ExpandInterface) => {
-      if (props.onChange) {
-        props.onChange(item);
-      }
-      setCurrentExpand(item);
-    },
-    [setCurrentExpand, props.onChange]
-  );
-  useEffect(() => {
-    setCurrentExpand(props.currentItem);
-  }, [props.currentItem, setCurrentExpand, document.activeElement]);
-  return (
-    <div className={`expands ${props.className || ""}`}>
-      {props.items.map((item: ExpandInterface) => (
-        <Expand
-          key={item.id}
-          item={item}
-          showArrow={props.showArrow}
-          onChange={onChangeExpand}
-          currentExpand={currentExpand}
-        />
-      ))}
-    </div>
-  );
-};
-export type { ExpandProps };
+import { useCallback, useEffect, useState } from "react";
+import { Expand } from "./expand/expand";
+import { ExpandInterface } from "./expand/expand.interface";
+import "./expands.css";
+
+type ExpandProps = {
+  items: ExpandInterface[];
+  className?: string;
+  onChange?: (item: ExpandInterface) => void;
+  currentItem?: ExpandInterface;
+  showArrow?: boolean;
+};
+
+export const Expands = (props: ExpandProps) => {
+  const [currentExpand, setCurrentExpand] = useState<ExpandInterface>();
+  const onChangeExpand = useCallback(
+    (item: ExpandInterface) => {
+      if (props.onChange) {
+        props.onChange(item);
+      }
+      setCurrentExpand(item);
+    },
+    [setCurrentExpand, props.onChange]
+  );
+  useEffect(() => {
+    setCurrentExpand(props.currentItem);
+  }, [props.currentItem, setCurrentExpand, document.activeElement]);
+  return (
+    <div className={`expands ${props.className || ""}`}>
+      {props.items.map((item: ExpandInterface) => (
+        <Expand
+          key={item.id}
+          item={item}
+          showArrow={props.showArrow}
+          onChange={onChangeExpand}
+          currentExpand={currentExpand}
+        />
+      ))}
+    </div>
+  );
+};
+export type { ExpandProps };