kelt-ui-kit-react 1.8.3 → 1.8.5

package/package/src/pdfViewer/PdfViewer.tsx

@@ -1,73 +0,0 @@
-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

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

package/package/src/quantity/Quantity.tsx

@@ -1,103 +0,0 @@
-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

@@ -1,26 +0,0 @@
-.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

@@ -1,161 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,59 +0,0 @@
-.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

@@ -1,103 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,69 +0,0 @@
-.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

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