kelt-ui-kit-react 1.8.2 → 1.8.3

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

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

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

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

package/package/src/menus/menus.css

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

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

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

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

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

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

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

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

package/package/src/overlayPanel/OverlayPanel.tsx

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

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

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

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

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