kelt-ui-kit-react 1.8.2 → 1.8.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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