kelt-ui-kit-react 1.8.3 → 1.8.5

package/package/src/menus/Menus.view.tsx

@@ -1,39 +0,0 @@
-import { NavLink } from "react-router-dom";
-import { MenuInterface } from "./menu/menu.interface";
-import { Menus } from "./Menus";
-import { Button } from "../button/Button";
-import { useCallback } from "react";
-
-export const MenusView = (): JSX.Element => {
-  const buttonAction = useCallback((e: React.MouseEvent) => {
-    console.log("Button clicked", e);
-  }, []);
-  const mockItems: MenuInterface[] = [
-    {
-      id: 1,
-      name: "Menu 1",
-      children: "Menu 1",
-      active: true,
-      subMenu : [{
-          id: 1,
-        name: "Menu 1",
-        children: <NavLink to="/expands">Menu 1</NavLink>,
-        active: true,
-      }]
-    },
-    {
-      id: 2,
-      name: "Menu 2",
-      children: <Button onClick={buttonAction} title={"deconnexion"} />,
-      active: false,
-    },
-    {
-      id: 3,
-      children: <NavLink to="/expands">Menu 1</NavLink>,
-      name: "Menu 3",
-      active: false,
-    },
-  ];
-
-  return <Menus items={mockItems} />;
-};

package/package/src/menus/menu/Menu.tsx

@@ -1,17 +0,0 @@
-import { MenuInterface } from "./menu.interface";
-
-export type MenuProps = {
-  active: boolean;
-  item: MenuInterface;
-  onChange: (item: MenuInterface) => void;
-};
-export const Menu = (props: MenuProps): JSX.Element => {
-  return (
-    <div
-      onClick={() => props.onChange(props.item)}
-      className={props.active ? "expand expand--active" : "expand"}
-    >
-      {props.item.children}
-    </div>
-  );
-};

package/package/src/menus/menu/menu.interface.tsx

@@ -1,9 +0,0 @@
-export interface MenuInterface {
-  id?: number;
-  name: string;
-  icon?: string;
-  active?: boolean;
-  disabled?: boolean;
-  children?: React.ReactNode;
-  subMenu?: MenuInterface[];
-}

package/package/src/menus/menus.css

@@ -1,47 +0,0 @@
-.menu {
-  width: 200px;
-  padding: 2rem;
-  .submenu{
-    li{
-      a{
-        font-size : 0.9rem;
-      }
-    }
-  }
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      button {
-        background: transparent;
-        color: #000;
-        font-weight: 300;
-        padding: 0px;
-        border-radius: 0px;
-        min-width: auto;
-        margin: 0;
-        justify-content: normal;
-
-        &:hover {
-          color: #f00;
-        }
-      }
-
-      a {
-        text-decoration: none;
-        color: #000;
-        font-weight: 300;
-
-        &:hover {
-          color: #f00;
-        }
-      }
-    }
-  }
-}

package/package/src/message/Message.tsx

@@ -1,30 +0,0 @@
-import { useMemo } from "react";
-import { Icon } from "../icon/Icon";
-import "./message.css";
-export type MessageProps = {
-  text: string;
-  severity: string;
-  className?: string;
-};
-export const Message = ({ text, severity, className }: MessageProps) => {
-  const icon = useMemo(() => {
-    switch (severity) {
-      case "info":
-        return "bi-info-circle";
-      case "warning":
-        return "bi-exclamation-triangle";
-      case "error":
-        return "bi-x-circle";
-      case "success":
-        return "bi-check-circle";
-      default:
-        return "bi-info-circle";
-    }
-  }, [severity]);
-  return (
-    <div className={`message message--${severity} ${className ?? ""}`}>
-      <Icon classIcon={icon} />
-      <span className="message-text">{text}</span>
-    </div>
-  );
-};

package/package/src/message/Message.view.tsx

@@ -1,22 +0,0 @@
-import { Message } from "./Message";
-
-export const MessageView = () => {
-  const messages = [
-    { text: "Information message", severity: "info" },
-    { text: "Warning message", severity: "warning" },
-    { text: "Error message", severity: "error" },
-    { text: "Success message", severity: "success" },
-  ];
-  return (
-    <div>
-      {messages.map((msg, index) => (
-        <Message
-          className="mb-2"
-          key={index}
-          text={msg.text}
-          severity={msg.severity}
-        />
-      ))}
-    </div>
-  );
-};

package/package/src/message/message.css

@@ -1,29 +0,0 @@
-.message {
-  padding: 0.75rem 1rem;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  .message-text {
-    margin-left: 0.5rem;
-  }
-  &.message--info {
-    background-color: #d9edf7;
-    color: #31708f;
-  }
-  &.message--success {
-    background-color: #dff0d8;
-    color: #3c763d;
-  }
-  &.message--warning {
-    background-color: #fcf8e3;
-    color: #8a6d3b;
-  }
-  &.message--error {
-    background-color: #f2dede;
-    color: #a94442;
-  }
-  &.message--default {
-    background-color: #f5f5f5;
-    color: #333333;
-  }
-}

package/package/src/modal/Modal.tsx

@@ -1,59 +0,0 @@
-import React, { ReactNode } from "react";
-import { createPortal } from "react-dom";
-import { Button } from "../button/Button";
-import { Icon } from "../icon/Icon";
-import "./modal.css";
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit?: () => void;
-  titleButton?: string;
-  children: ReactNode;
-  title?: string;
-  styleContainer?: React.CSSProperties;
-  classNameContainer?: string;
-  closeOnOverlayClick?: boolean;
-}
-
-export const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  children,
-  onSubmit,
-  titleButton,
-  title,
-  styleContainer = {},
-  classNameContainer = "",
-  closeOnOverlayClick = true,
-}) => {
-  if (!isOpen) return null;
-  const handleOverlayMouseDown = () => {
-    if (closeOnOverlayClick) {
-      onClose();
-    }
-  };
-  return createPortal(
-    <div className="modal-overlay" onMouseDown={handleOverlayMouseDown}>
-      <div
-        className={`modal-container ${classNameContainer}`}
-        style={styleContainer}
-        onMouseDown={(e) => e.stopPropagation()}
-      >
-        <div className="modal-header">
-          {title && <h2 className="modal-title">{title}</h2>}
-          <div className="modal-close-button" onClick={onClose}>
-            <Icon classIcon="bi-x-lg" />
-          </div>
-        </div>
-        <div className="modal-content">{children}</div>
-        {onSubmit && (
-          <div className="d-flex justify-content-end">
-            <Button onClick={onSubmit} title={titleButton ?? ""} />
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body,
-  );
-};

package/package/src/modal/Modal.view.tsx

@@ -1,26 +0,0 @@
-import { useCallback, useState } from "react";
-import { Button } from "../button/Button";
-import { Modal } from "./Modal";
-
-export const ModalView = (): JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false);
-  const openModal = useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen, true]);
-
-  return (
-    <div>
-      <Button onClick={openModal} title="Open Modal" />
-      <Modal
-        onSubmit={() => setIsOpen(false)}
-        title={"test"}
-        titleButton="Submit"
-        closeOnOverlayClick={false}
-        onClose={() => setIsOpen(false)}
-        isOpen={isOpen}
-      >
-        test
-      </Modal>
-    </div>
-  );
-};

package/package/src/modal/modal.css

@@ -1,71 +0,0 @@
-/* Modal.css */
-
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-}
-
-.modal-container {
-  background: white;
-  border-radius: 8px;
-  max-width: 500px;
-  width: 90%;
-  max-height: 90%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  position: relative;
-  animation: fadeIn 0.3s ease;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.modal-title {
-  font-size: 1.25rem;
-  margin: 0;
-}
-
-.modal-close-button {
-  background: transparent;
-  border: none;
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-}
-
-.modal-close-button:hover {
-  color: red;
-}
-
-.modal-content {
-  margin-top: 10px;
-  flex: 1;
-  overflow: hidden;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}

package/package/src/notFound/NotFound.tsx

@@ -1,3 +0,0 @@
-export const NotFound = (): JSX.Element => {
-  return <h1>404 - Page Not Found</h1>;
-};

package/package/src/overlayPanel/OverlayPanel.tsx

@@ -1,195 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import ReactDOM from "react-dom";
-
-import { Icon } from "../icon/Icon";
-import { useOverlayContext } from "./overlay.context";
-import "./overlayPanel.css";
-import { OverlayPanelStyled } from "./overlayPanelStyled/OverlayPanelStyled";
-
-export type PositionOverlay =
-  | "left"
-  | "right"
-  | "topLeft"
-  | "topRight"
-  | "bottomLeft"
-  | "bottomRight";
-
-export type OverlayPanelProps = {
-  referenceElement?: HTMLElement;
-  coordonnees?: { top: number; left: number };
-  position?: PositionOverlay;
-  children: React.ReactNode;
-  show?: boolean;
-  id?: string;
-  closeOverlay?: (close: boolean) => void;
-};
-
-export const OverlayPanel = forwardRef(
-  (
-    {
-      referenceElement,
-      position,
-      coordonnees,
-      children,
-      show,
-      id,
-      closeOverlay,
-    }: OverlayPanelProps,
-    ref: React.Ref<{
-      setCoords?: (coords: { top: number; left: number }) => void;
-    }>
-  ) => {
-    const { activeOverlayId, setActiveOverlay } = useOverlayContext();
-    const [isShow, setIsShow] = useState(show || false);
-    const [coords, setCoords] = useState<{ top: number; left: number }>(
-      coordonnees ?? { top: 0, left: 0 }
-    );
-    const boxRef = useRef<HTMLDivElement>(null);
-    const overlayId = useId();
-    useImperativeHandle(ref, () => ({
-      setCoords,
-    }));
-
-    useEffect(() => {
-      if (activeOverlayId !== overlayId) {
-        setIsShow(false);
-      }
-    }, [activeOverlayId, overlayId]);
-
-    useEffect(() => {
-      const updatePosition = () => {
-        if (!position && coordonnees) {
-          setCoords(coordonnees);
-        } else if (referenceElement) {
-          const rect = referenceElement.getBoundingClientRect();
-          const boxRect = boxRef.current?.getBoundingClientRect();
-          const { innerWidth, innerHeight } = window;
-
-          if (boxRect) {
-            // Positions par défaut si définies
-            let top, left;
-            const positions = {
-              topRight: () => ({
-                top: rect.top - boxRect.height,
-                left: rect.right - boxRect.width,
-              }),
-              topLeft: () => ({
-                top: rect.top - boxRect.height,
-                left: rect.left,
-              }),
-              bottomRight: () => ({
-                top: rect.bottom,
-                left: rect.right - boxRect.width,
-              }),
-              bottomLeft: () => ({
-                top: rect.bottom,
-                left: rect.left,
-              }),
-              left: () => ({
-                top: rect.top + rect.height / 2 - boxRect.height / 2,
-                left: rect.left - boxRect.width,
-              }),
-              right: () => ({
-                top: rect.top + rect.height / 2 - boxRect.height / 2,
-                left: rect.right,
-              }),
-            };
-
-            if (position && positions[position]) {
-              // Si une position est définie, on tente de l'appliquer
-              ({ top, left } = positions[position]());
-            } else {
-              // Sinon, on adapte dynamiquement
-              left = rect.right;
-              top = rect.bottom;
-
-              if (rect.right + boxRect.width > innerWidth) {
-                left = rect.left - boxRect.width; // Manque d'espace à droite → afficher à gauche
-              }
-
-              if (rect.bottom + boxRect.height > innerHeight) {
-                top = rect.top - boxRect.height; // Manque d'espace en bas → afficher en haut
-              }
-            }
-
-            setCoords({ top, left: left < 0 ? 0 : left });
-          }
-        }
-      };
-
-      if (isShow) {
-        updatePosition();
-        window.addEventListener("resize", updatePosition);
-      }
-
-      return () => window.removeEventListener("resize", updatePosition);
-    }, [referenceElement, isShow, position]);
-
-    const openOverlay = () => {
-      setIsShow(true);
-      setActiveOverlay(overlayId);
-    };
-
-    const closeOverlayHandler = useCallback(
-      (e: any) => {
-        e.stopPropagation();
-        setIsShow(false);
-        setActiveOverlay(null);
-        if (closeOverlay) {
-          closeOverlay(false);
-        }
-      },
-      [closeOverlay, setActiveOverlay]
-    );
-    useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
-          closeOverlayHandler(event);
-        }
-      };
-
-      if (isShow) {
-        document.addEventListener("mousedown", handleClickOutside);
-      }
-
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }, [isShow, closeOverlayHandler]);
-    useEffect(() => {
-      if (show) {
-        openOverlay();
-      }
-    }, [show]);
-
-    if (!isShow) return null;
-
-    return ReactDOM.createPortal(
-      <OverlayPanelStyled ref={boxRef} $top={coords.top} $left={coords.left}>
-        <div
-          className={`overlayPanel ${
-            coords.top > 0 || coords.left > 0 ? "visible" : "hide"
-          }`}
-        >
-          <button
-            id={id ?? ""}
-            className="toggle-btn"
-            onClick={closeOverlayHandler}
-          >
-            <Icon classIcon="bi-x-lg" />
-          </button>
-          {children}
-        </div>
-      </OverlayPanelStyled>,
-      document.body
-    );
-  }
-);

package/package/src/overlayPanel/OverlayPanel.view.tsx

@@ -1,25 +0,0 @@
-import { useRef, useState } from "react";
-import { Icon } from "../icon/Icon";
-import { OverlayPanel } from "./OverlayPanel";
-
-export const OverlayPanelView = () => {
-  const refButton = useRef<HTMLDivElement>(null);
-  const [openOverlay, setOpenOverlay] = useState(false);
-
-  return (
-    <>
-      <div ref={refButton} onClick={() => setOpenOverlay(!openOverlay)}>
-        <Icon classIcon="bi-list" />
-      </div>
-      {refButton.current && (
-        <OverlayPanel
-          position="bottomRight"
-          show={openOverlay}
-          closeOverlay={setOpenOverlay}
-          referenceElement={refButton.current}
-          children={<div>boom</div>}
-        />
-      )}
-    </>
-  );
-};

package/package/src/overlayPanel/overlay.context.tsx

@@ -1,28 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-interface OverlayContextType {
-  activeOverlayId: string | null;
-  setActiveOverlay: (id: string | null) => void;
-}
-
-const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
-
-export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const [activeOverlayId, setActiveOverlay] = useState<string | null>(null);
-
-  return (
-    <OverlayContext.Provider value={{ activeOverlayId, setActiveOverlay }}>
-      {children}
-    </OverlayContext.Provider>
-  );
-};
-
-export const useOverlayContext = () => {
-  const context = useContext(OverlayContext);
-  if (!context) {
-    throw new Error("useOverlayContext must be used within an OverlayProvider");
-  }
-  return context;
-};

package/package/src/overlayPanel/overlayPanel.css

@@ -1,35 +0,0 @@
-.overlayPanel {
-  position: relative;
-
-  &.hide {
-    visibility: hidden;
-  }
-  &.visible {
-    visibility: visible !important;
-  }
-  button {
-    span {
-      text-align: left;
-    }
-  }
-  .toggle-btn {
-    display: flex;
-    justify-content: flex-end;
-    background-color: transparent;
-    border: none;
-    color: #333;
-    cursor: pointer;
-    font-size: 18px;
-    margin: 0;
-    min-width: 10px;
-    right: 0;
-    padding: 0;
-    position: absolute;
-    padding: 0px;
-    z-index: 2;
-
-    i {
-      font-size: 1rem;
-    }
-  }
-}

package/package/src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-
-interface OverlayPanelStyledProps {
-  $top?: number;
-  $left?: number;
-}
-
-export const OverlayPanelStyled = styled.div<OverlayPanelStyledProps>`
-  position: absolute;
-  z-index: 5;
-  top: ${({ $top }) => $top}px;
-  left: ${({ $left }) => $left}px;
-  background-color: white;
-  padding: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
-  border: 1px solid #ede;
-`;