kelt-ui-kit-react 0.9.2 → 0.9.4

package/package.json

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

package/src/App.menu.tsx

@@ -6,6 +6,7 @@ import { CardView } from "./card/Card.view";
 import { CarouselView } from "./carousel/Carousel.view";
 import { DamierView } from "./damier/Damier.view";
 import { DataTableView } from "./dataTable/DataTable.view";
+import { DatePickerView } from "./datePicker/DatePicker.view";
 import { ExpandsView } from "./expands/Expands.view";
 import { FilArianeView } from "./filAriane/FilAriane.view";
 import { FormView } from "./form/Form.view";
@@ -194,6 +195,13 @@ export const MenuList: MenuProps[] = [
     children: <NavLink to="/text-area">Text</NavLink>,
     element: <TextAreaView />,
   },
+  {
+    id: 24,
+    name: "Date picker",
+    link: "/date-picker",
+    children: <NavLink to="/date-picker">Date picker</NavLink>,
+    element: <DatePickerView />,
+  },
 ];
 
 export const AppMenu = (): JSX.Element => {

package/src/datePicker/DatePicker.tsx

@@ -0,0 +1,25 @@
+import { format } from "date-fns";
+import { useState } from "react";
+import { DayPicker } from "react-day-picker";
+
+export const DatePicker = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
+
+  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>
+  );
+};

package/src/datePicker/DatePicker.view.tsx

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

package/src/modal/Modal.tsx

@@ -11,6 +11,8 @@ interface ModalProps {
   titleButton?: string;
   children: ReactNode;
   title?: string;
+  styleContainer?: React.CSSProperties;
+  classNameContainer?: string;
 }
 
 export const Modal: React.FC<ModalProps> = ({
@@ -20,12 +22,18 @@ export const Modal: React.FC<ModalProps> = ({
   onSubmit,
   titleButton,
   title,
+  styleContainer = {},
+  classNameContainer = "",
 }) => {
   if (!isOpen) return null;
 
   return createPortal(
     <div className="modal-overlay" onMouseDown={onClose}>
-      <div className="modal-container" onMouseDown={(e) => e.stopPropagation()}>
+      <div
+        className={`modal-container ${classNameContainer}`}
+        style={styleContainer}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
         <div className="modal-header">
           {title && <h2 className="modal-title">{title}</h2>}
           <div className="modal-close-button" onClick={onClose}>

package/src/quantity/Quantity.tsx

@@ -6,6 +6,7 @@ import "./Quantity.css";
 export interface QuantityProps {
   setQuantity?: (item: CardInterface, qte: number) => void;
   item: CardInterface;
+  onClickQuantity?: (item: CardInterface) => void;
   pas: number;
   disabled?: boolean;
   disabledPlus?: boolean;
@@ -14,6 +15,7 @@ export interface QuantityProps {
 export const Quantity = ({
   setQuantity,
   item,
+  onClickQuantity,
   disabled,
   disabledPlus,
   disabledMinus,
@@ -65,6 +67,16 @@ export const Quantity = ({
       setQte(item.quantity);
     }
   }, [item.quantity, setQte]);
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+      e.stopPropagation();
+      if (onClickQuantity) {
+        onClickQuantity(item);
+      }
+    },
+    [onClickQuantity, item]
+  );
+
   return (
     <div className="qte ">
       <div
@@ -75,7 +87,9 @@ export const Quantity = ({
       >
         <Icon size={IconSizeEnum.LARGE} classIcon="bi bi-dash-square" />
       </div>
-      <span className="qte-label">{qte}</span>
+      <span onClick={(e) => handleClick(e)} className="qte-label">
+        {qte}
+      </span>
       <div
         onClick={(e) => incrementQte(e)}
         className={`qte-action qte-action--plus ${