kelt-ui-kit-react 1.8.3 → 1.8.4

package/package/src/_core/hooks/useDateutils.ts

@@ -1,64 +0,0 @@
-export function FormatDate(date: Date, format: string): string {
-  const days = [
-    "Dimanche",
-    "Lundi",
-    "Mardi",
-    "Mercredi",
-    "Jeudi",
-    "Vendredi",
-    "Samedi",
-  ];
-  const months = [
-    "janvier",
-    "février",
-    "mars",
-    "avril",
-    "mai",
-    "juin",
-    "juillet",
-    "août",
-    "septembre",
-    "octobre",
-    "novembre",
-    "décembre",
-  ];
-
-  if (!date) return "";
-
-  const year = date.getFullYear().toString();
-  const month = String(date.getMonth() + 1).padStart(2, "0"); // Mois en chiffres
-  const day = String(date.getDate()).padStart(2, "0");
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  const seconds = String(date.getSeconds()).padStart(2, "0");
-
-  const dayName = days[date.getDay()];
-  const monthName = months[date.getMonth()];
-
-  return format
-    .replace("dddd", dayName) // Remplace d'abord "dddd"
-    .replace("MMMM", monthName) // Puis "MMMM" pour éviter de modifier "MM"
-    .replace("YYYY", year)
-    .replace("MM", month) // Enfin, "MM" pour éviter d'écraser les valeurs de "MMMM"
-    .replace("DD", day)
-    .replace("HH", hours)
-    .replace("mm", minutes)
-    .replace("ss", seconds);
-}
-export function LocalDateStringToUTC(dateStr: string): string {
-  const [year, month, day] = dateStr.split("-").map(Number);
-
-  // Crée une date en heure locale
-  const localDate = new Date(year, month - 1, day, 0, 0, 0);
-
-  // Convertit en UTC ISO
-  return localDate.toISOString();
-}
-export function localDateStartToUTC(dateStr: string): Date {
-  const [y, m, d] = dateStr.split("-").map(Number);
-  return new Date(y, m - 1, d, 0, 0, 0, 0);
-}
-export function localDateEndToUTC(dateStr: string): Date {
-  const [y, m, d] = dateStr.split("-").map(Number);
-  return new Date(y, m - 1, d, 23, 59, 59, 999);
-}

package/package/src/_core/hooks/useIsMobile.ts

@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-
-export const useIsMobile = (maxWidth: number = 768) => {
-  const [isMobile, setIsMobile] = useState(
-    typeof window !== "undefined" ? window.innerWidth <= maxWidth : false
-  );
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= maxWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [maxWidth]);
-
-  return isMobile;
-};

package/package/src/_core/hooks/useToken.tsx

@@ -1,19 +0,0 @@
-import { jwtDecode } from "jwt-decode";
-import { useCallback } from "react";
-
-export const useToken = () => {
-  const getTokenValidate = useCallback((): string | null => {
-    const token = localStorage.getItem("token");
-    if (!token) {
-      return null;
-    }
-    const decoded = jwtDecode(token);
-    const currentTime = Date.now() / 1000; // Convertir en secondes
-    if (!decoded.exp || decoded.exp < currentTime) {
-      return null;
-    }
-    return token;
-  }, []);
-
-  return { getTokenValidate };
-};

package/package/src/_core/hooks/useValidate.tsx

@@ -1,18 +0,0 @@
-export const useValidate = () => {
-  const isValidateEmail = (input: string): boolean => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(input);
-  };
-
-  const isValidateTel = (input: string): boolean => {
-    const emailRegex = /^\+?[0-9\s.-]{7,15}$/;
-    return emailRegex.test(input);
-  };
-
-  const isValidateCodePostal = (input: string): boolean => {
-    const emailRegex = /^[0-9]{5}$/;
-    return emailRegex.test(input);
-  };
-
-  return { isValidateEmail, isValidateTel, isValidateCodePostal };
-};

package/package/src/_core/hooks/widgetSupport.tsx

@@ -1,39 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export const WidgetSupport = () => {
-  const targetRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!targetRef.current) return;
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.innerHTML = `
-      !function(e,t,n){
-        function a(){
-          var e = t.getElementsByTagName("script")[0],
-              n = t.createElement("script");
-          n.type = "text/javascript";
-          n.async = true;
-          n.src = "https://beacon-v2.helpscout.net";
-          e.parentNode.insertBefore(n,e);
-        }
-        if(e.Beacon = n = function(t,n,a){
-          e.Beacon.readyQueue.push({method: t, options: n, data: a});
-        }, n.readyQueue = [], t.readyState === "complete") return a();
-        e.attachEvent ? e.attachEvent("onload", a) : e.addEventListener("load", a, false);
-      }(window, document, window.Beacon || function(){});
-
-      window.Beacon('init', '5deebca7-9d32-4a66-abba-f94a05fa0522');
-    `;
-    targetRef.current.appendChild(script);
-
-    return () => {
-      targetRef?.current?.removeChild(script);
-    };
-  }, []);
-
-  return (
-    <div>
-      <div ref={targetRef} />
-    </div>
-  );
-};

package/package/src/action/Action.view.tsx

@@ -1,21 +0,0 @@
-import { ButtonAction } from "./ButtonAction";
-
-export const ActionView = (): JSX.Element => {
-  return (
-    <div className="d-flex">
-      <ButtonAction
-        className="mr-2"
-        onClick={() => console.log("Envoyer")}
-        title="Envoyer"
-        classIcon="bi-send"
-        badge={{
-          className: "badge--primary",
-          title: "Badge",
-          sizeIcon: undefined,
-          classIcon: "bi-check-circle",
-          onClick: () => console.log("Badge clicked"),
-        }}
-      />
-    </div>
-  );
-};

package/package/src/action/ButtonAction.tsx

@@ -1,32 +0,0 @@
-import { Badge, BadgeInterface } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./action.css";
-
-export type ButtonActionProps = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title?: string;
-  classIcon?: string;
-  badge?: BadgeInterface;
-};
-export const ButtonAction = ({
-  className,
-  onClick,
-  title,
-  classIcon,
-  badge,
-}: ButtonActionProps) => {
-  const handleClick = (e: React.MouseEvent) => {
-    if (onClick) {
-      onClick(e);
-    }
-  };
-  return (
-    <div className={`action ${className}`} onClick={handleClick}>
-      {badge && <Badge {...badge} />}
-      {classIcon && <Icon classIcon={classIcon} size={IconSizeEnum.LARGE} />}
-      <small>{title}</small>
-    </div>
-  );
-};

package/package/src/action/action.css

@@ -1,20 +0,0 @@
-.action {
-  background-color: var(--tertiary-color);
-  color: #fff;
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0.5rem 0.5rem;
-  min-width: 120px;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 4px;
-  height: 100%;
-  .badge {
-    position: absolute;
-    right: 10px;
-    top: -10px;
-  }
-}

package/package/src/badge/Badge.tsx

@@ -1,34 +0,0 @@
-import { useCallback } from "react";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./badge.css";
-export type BadgeInterface = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title?: string;
-  sizeIcon?: IconSizeEnum;
-  classIcon?: string;
-};
-export const Badge = ({
-  className,
-  onClick,
-  title,
-  sizeIcon,
-  classIcon,
-}: BadgeInterface) => {
-  const handleClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (onClick) {
-      onClick(e);
-    }
-  }, []);
-  return (
-    <div
-      onClick={handleClick}
-      className={`badge ${className ? className : ""}`}
-    >
-      {classIcon && <Icon size={sizeIcon} classIcon={classIcon}></Icon>}
-      <span>{title}</span>
-    </div>
-  );
-};

package/package/src/badge/Badge.view.tsx

@@ -1,15 +0,0 @@
-import { Badge } from "./Badge";
-
-export const BadgeView = (): JSX.Element => {
-  return (
-    <>
-      <Badge
-        className="badge--primary"
-        title="Badge"
-        sizeIcon={undefined}
-        classIcon="bi-check-circle"
-        onClick={() => console.log("Badge clicked")}
-      />
-    </>
-  );
-};

package/package/src/badge/badge.css

@@ -1,55 +0,0 @@
-.badge {
-  display: flex;
-  align-items: center;
-  padding: 0.25em 0.4em;
-  font-size: 0.5rem;
-  font-weight: 700;
-  line-height: 1;
-  color: #fff;
-  width: fit-content;
-  text-transform: uppercase;
-  border-radius: 0.2rem;
-  background-color: #007bff;
-  border: 1px solid transparent;
-  .bi {
-    font-size: 0.8rem;
-    margin-right: 0.25rem;
-  }
-  &.badge-primary {
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
-  }
-  &.badge-secondary {
-    background-color: var(--secondary-color);
-    border-color: var(--secondary-color);
-  }
-  &.badge-success {
-    background-color: #28a745;
-    border-color: #28a745;
-  }
-  &.badge-danger {
-    background-color: #dc3545;
-    border-color: #dc3545;
-  }
-  &.badge-warning {
-    background-color: #ffc107;
-    border-color: #ffc107;
-  }
-  &.badge-info {
-    background-color: #17a2b8;
-    border-color: #17a2b8;
-  }
-  &.badge-light {
-    background-color: #f8f9fa;
-    border-color: #f8f9fa;
-    color: #212529;
-  }
-  &.badge-dark {
-    background-color: #343a40;
-    border-color: #343a40;
-  }
-  &.badge-link {
-    color: #007bff;
-    text-decoration: none;
-  }
-}

package/package/src/button/Button.tsx

@@ -1,46 +0,0 @@
-import { Badge } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
-import "./button.css";
-import { ButtonInterface } from "./button.interface";
-
-export const Button = ({
-  className,
-  onClick,
-  badge,
-  title,
-  sizeIcon,
-  id,
-  classIcon,
-  positionicon = 1,
-  disabled = false,
-}: ButtonInterface) => {
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (onClick) {
-      onClick(e);
-    }
-  };
-
-  return (
-    <button
-      id={id ?? ""}
-      disabled={disabled}
-      type="submit"
-      onClick={(e) => handleClick(e)}
-      className={className}
-    >
-      {badge && <Badge {...badge} />}
-      {classIcon && positionicon == 1 && (
-        <span className={`${title ? "mr-2" : ""}`}>
-          <Icon size={sizeIcon} classIcon={classIcon}></Icon>
-        </span>
-      )}
-      <span>{title}</span>
-      {classIcon && positionicon == 2 && (
-        <span className="ml-2">
-          <Icon classIcon={classIcon}></Icon>
-        </span>
-      )}
-    </button>
-  );
-};

package/package/src/button/Button.view.tsx

@@ -1,85 +0,0 @@
-import { useMemo } from "react";
-import { TypeInputEnum } from "../form/form.enum";
-import { FormInterface } from "../form/form.interface";
-import { Button } from "./Button";
-import { ButtonInterface } from "./button.interface";
-import {
-  ButtonActions,
-  ButtonActionsProps,
-} from "./buttonActions/ButtonActions";
-import { ButtonFilters } from "./buttonFilters/ButtonFilters";
-
-export const ButtonView = (): JSX.Element => {
-  const initialValues: FormInterface[] = [
-    {
-      value: false,
-      name: "test1",
-      label: "test 1",
-      type: TypeInputEnum.CHECKBOX,
-    },
-    {
-      value: false,
-      name: "test2",
-      label: "test 2",
-      type: TypeInputEnum.CHECKBOX,
-    },
-  ];
-  const mockButtonItems: ButtonInterface[] = [
-    {
-      title: "Envoyer",
-      onClick: () => console.log("Envoyer"),
-      classIcon: "bi-send",
-      disabled: true,
-      positionicon: 1,
-      badge: {
-        className: "badge--primary",
-        title: "Badge",
-        sizeIcon: undefined,
-        classIcon: "bi-check-circle",
-        onClick: () => console.log("Badge clicked"),
-      },
-    },
-    {
-      title: "Annuler",
-      onClick: () => console.log("Envoyer"),
-      className: "button--secondary",
-    },
-  ];
-  const mockButtonAction: ButtonActionsProps = useMemo(() => {
-    return {
-      title: "Supprimer",
-      onClick: () => console.log("Supprimer"),
-      className: "button--secondary",
-
-      actions: [
-        {
-          id: "1",
-          label: "Supprimer",
-          onClick: () => console.log("Supprimer action"),
-        },
-        {
-          id: "2",
-          label: "Supprimer définitivement",
-          onClick: () => console.log("Supprimer définitivement"),
-        },
-      ],
-    };
-  }, []);
-  return (
-    <div className="d-flex">
-      {mockButtonItems.map((item, index) => (
-        <div className="mr-2" key={index}>
-          <Button {...item} />
-        </div>
-      ))}
-      <ButtonActions {...mockButtonAction} />
-      <div className="ml-2">
-        <ButtonFilters
-          classIcon="bi-send"
-          {...mockButtonAction}
-          dataForm={initialValues}
-        />
-      </div>
-    </div>
-  );
-};

package/package/src/button/button.css

@@ -1,53 +0,0 @@
-button {
-  background-color: var(--primary-color);
-  color: white;
-  border: none;
-  padding: 10px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 500;
-  transition: background-color 0.3s;
-  display: flex;
-  max-height: 40px;
-  min-width: 150px;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  font-family: "Raleway", sans-serif !important;
-  .badge {
-    position: absolute;
-    right: 10px;
-    top: -10px;
-  }
-  &:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-  }
-  &.button--primary {
-    background-color: var(--primary-color);
-  }
-
-  &.button--secondary {
-    background-color: var(--secondary-color);
-  }
-  &.button--tertiary {
-    background-color: var(--tertiary-color);
-  }
-  &.button--transparent {
-    background-color: transparent;
-    color: var(--primary-color);
-    border: 1px solid;
-  }
-  &.button--success {
-    background-color: var(--success-color);
-  }
-
-  &.button--info {
-    background-color: var(--info-color);
-  }
-
-  &.button--warning {
-    background-color: var(--warning-color);
-  }
-}

package/package/src/button/button.interface.tsx

@@ -1,21 +0,0 @@
-import { BadgeInterface } from "../badge/Badge";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-
-export interface ButtonInterface {
-  className?: string;
-  badge?: BadgeInterface;
-  id?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title: string;
-  classIcon?: string;
-  positionicon?: number;
-  disabled?: boolean;
-  sizeIcon?: IconSizeEnum;
-}
-export interface buttonActionInterface {
-  icon?: string;
-  id?: number | string;
-  label: string;
-  disabled?: boolean;
-  onClick: (a: buttonActionInterface) => void;
-}

package/package/src/button/buttonActions/ButtonActions.tsx

@@ -1,104 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { Icon } from "../../icon/Icon";
-import { IconSizeEnum } from "../../icon/iconSize.enum";
-import { MenuInterface } from "../../menus/menu/menu.interface";
-import { Menus } from "../../menus/Menus";
-import { OverlayPanel, PositionOverlay } from "../../overlayPanel/OverlayPanel";
-import { Button } from "../Button";
-import { buttonActionInterface } from "../button.interface";
-
-export type ButtonActionsProps = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title: string;
-  actions?: buttonActionInterface[];
-  classIcon?: string;
-  positionActions?: PositionOverlay;
-  disabled?: boolean;
-  id?: string;
-};
-export const ButtonActions = ({
-  className,
-  onClick,
-  title,
-  actions,
-  positionActions = "topRight",
-  disabled = false,
-  id,
-}: ButtonActionsProps) => {
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (onClick) {
-      onClick(e);
-    }
-  };
-  const refButton = useRef<HTMLDivElement>(null);
-  const [openOverlay, setOpenOverlay] = useState(false);
-  const onClickActions = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (actions) setOpenOverlay(!openOverlay);
-    },
-    [openOverlay, setOpenOverlay],
-  );
-  const overlayMenu: MenuInterface[] = useMemo(() => {
-    if (!actions) return [];
-    return actions.map((a, index) => {
-      return {
-        id: a.id ?? index,
-        icon: a.icon,
-        name: a.label,
-        children: (
-          <Button
-            key={index}
-            classIcon={a.icon}
-            sizeIcon={IconSizeEnum.LARGE}
-            onClick={(e) => {
-              e.stopPropagation();
-              closeOverlay();
-              a.onClick && a.onClick(a);
-            }}
-            title={a.label || ""}
-          />
-        ),
-      };
-    }) as MenuInterface[];
-  }, [actions]);
-  const closeOverlay = useCallback(() => {
-    setOpenOverlay(false);
-  }, [setOpenOverlay]);
-  return (
-    <>
-      <button
-        id={id ?? ""}
-        disabled={disabled}
-        type="submit"
-        onClick={(e) => handleClick(e)}
-        className={` ${className} button-actions`}
-      >
-        <span className="mr-2 flex-1">{title}</span>
-
-        <span
-          className="ml-2"
-          ref={refButton}
-          onClick={(e) => onClickActions(e)}
-        >
-          <Icon classIcon="bi-chevron-up" />
-        </span>
-      </button>
-      {actions && openOverlay && refButton.current && (
-        <OverlayPanel
-          show={openOverlay}
-          position={positionActions}
-          closeOverlay={setOpenOverlay}
-          referenceElement={refButton.current}
-          children={
-            <div>
-              <Menus className="card-action-menu" items={overlayMenu} />
-            </div>
-          }
-        />
-      )}
-    </>
-  );
-};