kelt-ui-kit-react 1.2.4 → 1.2.5

package/src/quantity/Quantity.tsx

@@ -1,103 +1,103 @@
-import { useCallback, useEffect, useState } from "react";
-import { CardInterface } from "../card/card.interface";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./quantity.css";
-export interface QuantityProps {
-  setQuantity?: (item: CardInterface, qte: number) => void;
-  item: CardInterface;
-  onClickQuantity?: (item: CardInterface) => void;
-  pas: number;
-  disabled?: boolean;
-  disabledPlus?: boolean;
-  disabledMinus?: boolean;
-}
-export const Quantity = ({
-  setQuantity,
-  item,
-  onClickQuantity,
-  disabled,
-  disabledPlus,
-  disabledMinus,
-  pas,
-}: QuantityProps) => {
-  const [qte, setQte] = useState(pas);
-
-  const changeQuantity = useCallback(
-    (qte: number) => {
-      if (disabled) {
-        return;
-      }
-      setQte(qte);
-      if (setQuantity) {
-        setQuantity(item, qte);
-      }
-    },
-    [setQte, setQuantity]
-  );
-
-  const incrementQte = useCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      e.stopPropagation();
-      if (disabled || disabledPlus) {
-        return;
-      }
-      const newQuantity = qte + pas;
-      changeQuantity(Math.round(newQuantity * 100) / 100);
-    },
-    [qte, changeQuantity]
-  );
-
-  const decrementQte = useCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      e.stopPropagation();
-      if (disabled || disabledMinus) {
-        return;
-      }
-      if (qte === 0) {
-        return qte;
-      }
-      const newQuantity = qte - pas;
-      changeQuantity(Math.round(newQuantity * 100) / 100);
-    },
-    [changeQuantity, qte]
-  );
-  useEffect(() => {
-    if (item.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
-        onClick={(e) => decrementQte(e)}
-        className={`qte-action qte-action--minus ${
-          disabled || disabledMinus ? "disabled" : ""
-        } `}
-      >
-        <Icon size={IconSizeEnum.LARGE} classIcon="bi bi-dash-square" />
-      </div>
-      <span onClick={(e) => handleClick(e)} className="qte-label">
-        {qte}
-      </span>
-      <div
-        onClick={(e) => incrementQte(e)}
-        className={`qte-action qte-action--plus ${
-          disabled || disabledPlus ? "disabled" : ""
-        }`}
-      >
-        <Icon size={IconSizeEnum.LARGE} classIcon="bi bi-plus-square" />
-      </div>
-    </div>
-  );
-};
+import { useCallback, useEffect, useState } from "react";
+import { CardInterface } from "../card/card.interface";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./quantity.css";
+export interface QuantityProps {
+  setQuantity?: (item: CardInterface, qte: number) => void;
+  item: CardInterface;
+  onClickQuantity?: (item: CardInterface) => void;
+  pas: number;
+  disabled?: boolean;
+  disabledPlus?: boolean;
+  disabledMinus?: boolean;
+}
+export const Quantity = ({
+  setQuantity,
+  item,
+  onClickQuantity,
+  disabled,
+  disabledPlus,
+  disabledMinus,
+  pas,
+}: QuantityProps) => {
+  const [qte, setQte] = useState(pas);
+
+  const changeQuantity = useCallback(
+    (qte: number) => {
+      if (disabled) {
+        return;
+      }
+      setQte(qte);
+      if (setQuantity) {
+        setQuantity(item, qte);
+      }
+    },
+    [setQte, setQuantity]
+  );
+
+  const incrementQte = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+      if (disabled || disabledPlus) {
+        return;
+      }
+      const newQuantity = qte + pas;
+      changeQuantity(Math.round(newQuantity * 100) / 100);
+    },
+    [qte, changeQuantity]
+  );
+
+  const decrementQte = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+      if (disabled || disabledMinus) {
+        return;
+      }
+      if (qte === 0) {
+        return qte;
+      }
+      const newQuantity = qte - pas;
+      changeQuantity(Math.round(newQuantity * 100) / 100);
+    },
+    [changeQuantity, qte]
+  );
+  useEffect(() => {
+    if (item.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
+        onClick={(e) => decrementQte(e)}
+        className={`qte-action qte-action--minus ${
+          disabled || disabledMinus ? "disabled" : ""
+        } `}
+      >
+        <Icon size={IconSizeEnum.LARGE} classIcon="bi bi-dash-square" />
+      </div>
+      <span onClick={(e) => handleClick(e)} className="qte-label">
+        {qte}
+      </span>
+      <div
+        onClick={(e) => incrementQte(e)}
+        className={`qte-action qte-action--plus ${
+          disabled || disabledPlus ? "disabled" : ""
+        }`}
+      >
+        <Icon size={IconSizeEnum.LARGE} classIcon="bi bi-plus-square" />
+      </div>
+    </div>
+  );
+};

package/src/quantity/quantity.css

@@ -1,26 +1,26 @@
-.qte {
-  display: flex;
-  align-items: center;
-  .qte-label {
-    width: 20px;
-    text-align: center;
-  }
-  .qte-action {
-    cursor: pointer;
-    margin-right: 1.5rem;
-    &.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    .bi {
-      color: #333;
-    }
-    &.qte-action--plus {
-      margin-left: 0.5rem;
-      margin-right: 0rem;
-    }
-    &.qte-action--minus {
-      margin-right: 0.5rem;
-    }
-  }
-}
+.qte {
+  display: flex;
+  align-items: center;
+  .qte-label {
+    width: 20px;
+    text-align: center;
+  }
+  .qte-action {
+    cursor: pointer;
+    margin-right: 1.5rem;
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .bi {
+      color: #333;
+    }
+    &.qte-action--plus {
+      margin-left: 0.5rem;
+      margin-right: 0rem;
+    }
+    &.qte-action--minus {
+      margin-right: 0.5rem;
+    }
+  }
+}

package/src/search/Search.tsx

@@ -1,161 +1,161 @@
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { DynamicForm } from "../form/Form";
-import { TypeInputEnum } from "../form/form.enum";
-import { FormInterface, FormValuesInterface } from "../form/form.interface";
-import { Icon } from "../icon/Icon";
-import "./search.css";
-
-interface SearchProps {
-  children?: JSX.Element;
-  placeholder?: string;
-  isVisible?: boolean;
-  focus?: boolean;
-  name?: string;
-  id?: string;
-  debounceTime?: number;
-  handleChange?: (values: FormValuesInterface<FormData>) => void;
-  setIsVisible?: (visible: boolean) => void;
-}
-
-interface FormData {
-  recherche: string;
-  [key: string]: string | number | boolean | Date;
-}
-
-export const Search = forwardRef<
-  {
-    clearInput: (name: string) => void;
-    resetForm: () => void;
-    focusInitialElement: () => void;
-  },
-  SearchProps
->(
-  (
-    {
-      children,
-      name,
-      placeholder,
-      isVisible,
-      focus,
-      debounceTime,
-      handleChange,
-      setIsVisible,
-      id,
-    },
-    ref
-  ) => {
-    const [isOpen, setIsOpen] = useState(isVisible ?? false);
-    const debounceRef = useRef<NodeJS.Timeout | null>(null);
-    const formRef = useRef<{
-      clearInput: (name: string) => void;
-      resetForm: () => void;
-      focusInitialElement: () => void;
-    }>(null);
-
-    const initialValues: FormInterface[] = useMemo(
-      () => [
-        {
-          value: "",
-          id: id,
-          name: name ?? "recherche",
-          placeholder: placeholder ?? "Recherche",
-          type: TypeInputEnum.TEXT,
-          focus: focus,
-          icon: "bi-search",
-          className: "search-input",
-          autoComplete: "off",
-        },
-      ],
-      [placeholder, focus]
-    );
-
-    useEffect(() => {
-      if (isVisible !== undefined) {
-        setIsOpen(isVisible);
-      }
-    }, [isVisible]);
-
-    const setShowSearch = useCallback(
-      (value: boolean) => {
-        if (setIsVisible) {
-          setIsVisible(value);
-        }
-        setIsOpen(value);
-      },
-      [setIsVisible]
-    );
-
-    const onChange = useCallback(
-      (values: FormValuesInterface<FormData>) => {
-        if (!values || !values[name ?? "recherche"]) {
-          return setShowSearch(false);
-        }
-        setShowSearch(true);
-
-        if (debounceRef.current) {
-          clearTimeout(debounceRef.current);
-        }
-
-        debounceRef.current = setTimeout(() => {
-          if (handleChange) {
-            handleChange(values);
-          }
-        }, debounceTime ?? 500);
-      },
-      [setShowSearch, handleChange, debounceTime]
-    );
-
-    const handleSubmit = useCallback(
-      (values: FormValuesInterface<FormData>) => {
-        console.log("Form Submitted: ", values);
-      },
-      []
-    );
-
-    // Expose clearInput et resetForm via le ref du parent
-    useImperativeHandle(ref, () => ({
-      clearInput: (name: string) => {
-        formRef.current?.clearInput(name);
-      },
-      resetForm: () => {
-        formRef.current?.resetForm();
-      },
-      focusInitialElement: () => {
-        formRef.current?.focusInitialElement();
-      },
-    }));
-
-    return (
-      <div className="search">
-        <DynamicForm
-          ref={formRef}
-          onSubmit={handleSubmit}
-          onChange={onChange}
-          hideSubmit={true}
-          initialForm={initialValues}
-        />
-        {isOpen && (
-          <div className="search-result">
-            <div className="search-result-close">
-              <button
-                className="toggle-btn"
-                onClick={() => setShowSearch(false)}
-              >
-                <Icon classIcon="bi-x-lg" />
-              </button>
-            </div>
-            <div className="search-result-content">{children}</div>
-          </div>
-        )}
-      </div>
-    );
-  }
-);
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { DynamicForm } from "../form/Form";
+import { TypeInputEnum } from "../form/form.enum";
+import { FormInterface, FormValuesInterface } from "../form/form.interface";
+import { Icon } from "../icon/Icon";
+import "./search.css";
+
+interface SearchProps {
+  children?: JSX.Element;
+  placeholder?: string;
+  isVisible?: boolean;
+  focus?: boolean;
+  name?: string;
+  id?: string;
+  debounceTime?: number;
+  handleChange?: (values: FormValuesInterface<FormData>) => void;
+  setIsVisible?: (visible: boolean) => void;
+}
+
+interface FormData {
+  recherche: string;
+  [key: string]: string | number | boolean | Date;
+}
+
+export const Search = forwardRef<
+  {
+    clearInput: (name: string) => void;
+    resetForm: () => void;
+    focusInitialElement: () => void;
+  },
+  SearchProps
+>(
+  (
+    {
+      children,
+      name,
+      placeholder,
+      isVisible,
+      focus,
+      debounceTime,
+      handleChange,
+      setIsVisible,
+      id,
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(isVisible ?? false);
+    const debounceRef = useRef<NodeJS.Timeout | null>(null);
+    const formRef = useRef<{
+      clearInput: (name: string) => void;
+      resetForm: () => void;
+      focusInitialElement: () => void;
+    }>(null);
+
+    const initialValues: FormInterface[] = useMemo(
+      () => [
+        {
+          value: "",
+          id: id,
+          name: name ?? "recherche",
+          placeholder: placeholder ?? "Recherche",
+          type: TypeInputEnum.TEXT,
+          focus: focus,
+          icon: "bi-search",
+          className: "search-input",
+          autoComplete: "off",
+        },
+      ],
+      [placeholder, focus]
+    );
+
+    useEffect(() => {
+      if (isVisible !== undefined) {
+        setIsOpen(isVisible);
+      }
+    }, [isVisible]);
+
+    const setShowSearch = useCallback(
+      (value: boolean) => {
+        if (setIsVisible) {
+          setIsVisible(value);
+        }
+        setIsOpen(value);
+      },
+      [setIsVisible]
+    );
+
+    const onChange = useCallback(
+      (values: FormValuesInterface<FormData>) => {
+        if (!values || !values[name ?? "recherche"]) {
+          return setShowSearch(false);
+        }
+        setShowSearch(true);
+
+        if (debounceRef.current) {
+          clearTimeout(debounceRef.current);
+        }
+
+        debounceRef.current = setTimeout(() => {
+          if (handleChange) {
+            handleChange(values);
+          }
+        }, debounceTime ?? 500);
+      },
+      [setShowSearch, handleChange, debounceTime]
+    );
+
+    const handleSubmit = useCallback(
+      (values: FormValuesInterface<FormData>) => {
+        console.log("Form Submitted: ", values);
+      },
+      []
+    );
+
+    // Expose clearInput et resetForm via le ref du parent
+    useImperativeHandle(ref, () => ({
+      clearInput: (name: string) => {
+        formRef.current?.clearInput(name);
+      },
+      resetForm: () => {
+        formRef.current?.resetForm();
+      },
+      focusInitialElement: () => {
+        formRef.current?.focusInitialElement();
+      },
+    }));
+
+    return (
+      <div className="search">
+        <DynamicForm
+          ref={formRef}
+          onSubmit={handleSubmit}
+          onChange={onChange}
+          hideSubmit={true}
+          initialForm={initialValues}
+        />
+        {isOpen && (
+          <div className="search-result">
+            <div className="search-result-close">
+              <button
+                className="toggle-btn"
+                onClick={() => setShowSearch(false)}
+              >
+                <Icon classIcon="bi-x-lg" />
+              </button>
+            </div>
+            <div className="search-result-content">{children}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);

package/src/search/Search.view.tsx

@@ -1,14 +1,14 @@
-import { FormValuesInterface } from "../form/form.interface";
-import { Search } from "./Search";
-interface FormData {
-  recherche: string;
-  [key: string]: string | number | boolean | Date; // Signature d'index ajoutée
-}
-export const SearchView = (): JSX.Element => {
-  const onChange = (values: FormValuesInterface<FormData>) => {
-    console.log(values);
-  };
-  return (
-    <Search focus={true} handleChange={onChange} children={<div>test</div>} />
-  );
-};
+import { FormValuesInterface } from "../form/form.interface";
+import { Search } from "./Search";
+interface FormData {
+  recherche: string;
+  [key: string]: string | number | boolean | Date; // Signature d'index ajoutée
+}
+export const SearchView = (): JSX.Element => {
+  const onChange = (values: FormValuesInterface<FormData>) => {
+    console.log(values);
+  };
+  return (
+    <Search focus={true} handleChange={onChange} children={<div>test</div>} />
+  );
+};