kelt-ui-kit-react 1.8.2 → 1.8.3

package/package/src/pdfViewer/PdfViewer.tsx

@@ -0,0 +1,73 @@
+import { forwardRef, useCallback, useEffect, useState } from "react";
+export type PdfViewerProps = {
+  arrayBuffer: ArrayBuffer;
+  displayToolBar?: boolean;
+  height?: string;
+  width?: string;
+  className?: string;
+  title?: string;
+  id?: string;
+  ref?: React.Ref<HTMLIFrameElement>;
+};
+export const PdfViewer = forwardRef<HTMLIFrameElement, PdfViewerProps>(
+  (
+    {
+      arrayBuffer,
+      displayToolBar = false,
+      height = "600px",
+      width = "100%",
+      className,
+      title,
+      id,
+    }: PdfViewerProps,
+    ref
+  ) => {
+    const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+
+    const handleLoadPDF = useCallback(async () => {
+      // Créer un Blob depuis le buffer
+      const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+      const url = URL.createObjectURL(blob);
+      if (!displayToolBar) {
+        // Ajouter des paramètres pour afficher la barre d'outils
+        const pdfUrlWithoutToolbar = `${url}#toolbar=0&navpanes=0&scrollbar=0`;
+        setPdfUrl(pdfUrlWithoutToolbar);
+        return;
+      }
+
+      setPdfUrl(url);
+    }, [arrayBuffer, displayToolBar, setPdfUrl]);
+
+    useEffect(() => {
+      handleLoadPDF();
+    }, [arrayBuffer, handleLoadPDF]);
+    // Nettoyer l'URL quand le composant se démonte
+    useEffect(() => {
+      return () => {
+        if (pdfUrl) {
+          URL.revokeObjectURL(pdfUrl);
+        }
+      };
+    }, [pdfUrl]);
+
+    return (
+      <>
+        {pdfUrl && (
+          <iframe
+            ref={ref}
+            className={className}
+            src={pdfUrl}
+            width={width}
+            height={height}
+            title={title}
+            id={id}
+            style={{
+              border: "none",
+              pointerEvents: "auto", // Permet le scroll
+            }}
+          />
+        )}
+      </>
+    );
+  }
+);

package/package/src/pdfViewer/PdfViewer.view.tsx

@@ -0,0 +1,5 @@
+import { PdfViewer } from "./PdfViewer";
+
+export const PdfViewerView = (): JSX.Element => {
+  return <PdfViewer arrayBuffer={new ArrayBuffer(0)} />;
+};

package/package/src/quantity/Quantity.tsx

@@ -0,0 +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>
+  );
+};

package/package/src/quantity/quantity.css

@@ -0,0 +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;
+    }
+  }
+}

package/package/src/search/Search.tsx

@@ -0,0 +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 | string[]; // Signature d'index ajoutée
+}
+
+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/package/src/search/Search.view.tsx

@@ -0,0 +1,14 @@
+import { FormValuesInterface } from "../form/form.interface";
+import { Search } from "./Search";
+interface FormData {
+  recherche: string;
+  [key: string]: string | number | boolean | Date | string[]; // 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>} />
+  );
+};

package/package/src/search/search.css

@@ -0,0 +1,59 @@
+.search {
+  position: relative;
+  .search-input {
+    border: 0px;
+    background-color: #ebe8e8;
+    border-radius: 4px;
+    padding: 0.75rem;
+    flex-direction: row;
+    align-items: center;
+    .bi {
+      color: #868585;
+      font-size: 1rem;
+    }
+    input {
+      border: none;
+      background-color: transparent;
+      border-radius: 0px;
+      padding: 0px;
+      margin-left: 0.25rem;
+      padding: 0.25rem 0.5rem;
+      width: 100%;
+      outline: none;
+      min-width: auto;
+    }
+  }
+  .search-result {
+    position: absolute;
+    width: 100%;
+    top: 70px;
+    border: 1px solid #cfbdbd;
+    min-height: 100px;
+    z-index: 3;
+    background-color: #fff;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
+    padding: 0rem 1rem;
+    .search-result-close {
+      position: relative;
+
+      .toggle-btn {
+        position: absolute;
+        right: -10px;
+        top: 10px;
+
+        .bi {
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .search-result-content {
+      margin-right: 1rem;
+      padding: 1rem 0rem;
+      & > div {
+        max-height: 350px;
+        overflow: auto;
+      }
+    }
+  }
+}

package/package/src/select/Select.tsx

@@ -0,0 +1,103 @@
+import { useCallback, useRef } from "react";
+import { Icon } from "../icon/Icon";
+import "./select.css";
+import { SelectOptionInterface } from "./selectOption.interface";
+
+export interface SelectProps {
+  id?: string;
+  label?: string;
+  title?: string;
+  disabled?: boolean;
+  name?: string;
+  defaultValue?: string | string[];
+  multiple?: boolean;
+  required?: boolean;
+  value?: string | string[];
+  className?: string;
+  options: SelectOptionInterface[];
+  onChangeMultiple?: (value: string[]) => void;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+}
+
+export const Select = ({
+  id,
+  label,
+  options,
+  className,
+  disabled,
+  multiple = false,
+  required = false,
+  defaultValue,
+  name,
+  onChange,
+  onChangeMultiple,
+  value,
+  placeholder,
+}: SelectProps): JSX.Element => {
+  const inputRefs = useRef<{ [key: string]: HTMLSelectElement | null }>({});
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    let selectedValue: string | string[];
+    if (multiple) {
+      selectedValue = Array.from(
+        event.target.selectedOptions,
+        (opt) => opt.value
+      );
+      if (onChangeMultiple) {
+        onChangeMultiple(selectedValue as string[]);
+      }
+    } else {
+      selectedValue = event.target.value;
+      if (onChange) {
+        onChange(selectedValue);
+      }
+    }
+  };
+  const resetValue = useCallback(() => {
+    if (onChange) {
+      onChange("");
+    }
+  }, [onChange]);
+  return (
+    <div id={id} className={`select-container ${className ? className : ""}`}>
+      {label && (
+        <label htmlFor={`select-${id}`} className="select-container-label">
+          {label}
+        </label>
+      )}
+      <select
+        defaultValue=""
+        required={required}
+        name={name}
+        disabled={disabled}
+        id={`select-${id}`}
+        className="select-container-select"
+        value={value ?? defaultValue ?? (multiple ? [] : "")}
+        onChange={handleChange}
+        multiple={multiple}
+        ref={(el) => (inputRefs.current[id ?? "select"] = el)}
+      >
+        {placeholder && !defaultValue && !multiple && (
+          <option selected disabled hidden value="">
+            {placeholder}
+          </option>
+        )}
+        {options.map((option, index) => (
+          <option key={index} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {value !== "" && placeholder && (
+        <div
+          className="clear-btn"
+          onClick={resetValue}
+          aria-label="Réinitialiser"
+        >
+          <Icon classIcon="bi-x" />
+        </div>
+      )}
+    </div>
+  );
+};

package/package/src/select/Select.view.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from "react";
+import { Select } from "./Select";
+
+export const SelectView = () => {
+  const selectData = useMemo(() => {
+    return [
+      {
+        id: "select",
+        title: "Select",
+        className: "select-component",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-disabled",
+        title: "Select Disabled",
+        className: "select-component",
+        disabled: true,
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-placeholder",
+        title: "Select Placeholder",
+        className: "select-component",
+        placeholder: "Select an option",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-default-value",
+        title: "Select Default Value",
+        className: "select-component",
+        defaultValue: "option2",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-value",
+        title: "Select Value",
+        className: "select-component",
+        value: "option3",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+    ];
+  }, []);
+
+  return (
+    <>
+      {selectData.map((data) => (
+        <Select key={data.id} {...data} />
+      ))}
+    </>
+  );
+};

package/package/src/select/select.css

@@ -0,0 +1,69 @@
+.select-container {
+  position: relative;
+  &::after,
+  &::before {
+    --size: 0.3rem;
+    content: "";
+    position: absolute;
+    right: 1rem;
+    pointer-events: none;
+  }
+  select:has(option[value=""]:checked) {
+    color: gray;
+  }
+  option {
+    color: #000;
+  }
+  .clear-btn {
+    position: absolute;
+    top: 2px;
+    display: flex;
+    align-items: center;
+    z-index: 2;
+    justify-content: center;
+    bottom: 0;
+    right: 30px;
+    cursor: pointer;
+  }
+  &::before {
+    border-left: var(--size) solid transparent;
+    border-right: var(--size) solid transparent;
+    border-bottom: var(--size) solid black;
+    top: 40%;
+  }
+
+  &::after {
+    border-left: var(--size) solid transparent;
+    border-right: var(--size) solid transparent;
+    border-top: var(--size) solid black;
+    top: 55%;
+  }
+  .select-container-label {
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 2px;
+  }
+  .select-container-select {
+    appearance: none;
+    width: 100%;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    margin: 0.25rem 0;
+    background-color: #fff;
+    border: 1px solid #b2a1a1;
+    border-radius: 0.25rem;
+    color: #000;
+    cursor: pointer;
+    font-size: 0.8rem;
+    &:disabled {
+      background-color: #e9ecef;
+      color: #6c757d;
+      cursor: not-allowed;
+    }
+    &:focus {
+      border-color: #007bff;
+      outline: none;
+      background-color: #fff;
+    }
+  }
+}

package/package/src/select/selectOption.interface.ts

@@ -0,0 +1,4 @@
+export interface SelectOptionInterface {
+  value: string;
+  label: string;
+}