kelt-ui-kit-react 1.8.2 → 1.8.3

package/package/src/index.css

@@ -0,0 +1,502 @@
+/* variables couleur */
+:root {
+  --primary-color: #004aad;
+  --secondary-color: #ff914d;
+  --tertiary-color: #00ada1;
+  --quaternary-color: #0082ad;
+  --success-color: #28a745;
+  --info-color: #17a2b8;
+  --warning-color: #ec942c;
+  --danger-color: #dc3545;
+  --light-color: #f8f9fa;
+  --dark-color: #343a40;
+  --white-color: #fff;
+  --black-color: #000;
+}
+
+html,
+body {
+  margin: 0;
+  font-family: "Raleway", sans-serif !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100%;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+}
+.app {
+  container: app-container/ inline-size;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none; /* Chrome, Safari, Edge */
+  margin: 0;
+}
+/* flex properties */
+
+.d-flex {
+  display: flex;
+}
+.justify-content-start {
+  justify-content: start;
+}
+.justify-content-end {
+  justify-content: end;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-between {
+  justify-content: space-between;
+}
+.justify-content-around {
+  justify-content: space-around;
+}
+.justify-content-evenly {
+  justify-content: space-evenly;
+}
+.align-items-start {
+  align-items: start;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-2 {
+  flex: 2;
+}
+
+.flex-3 {
+  flex: 3;
+}
+
+.flex-4 {
+  flex: 4;
+}
+
+.flex-5 {
+  flex: 5;
+}
+
+.flex-6 {
+  flex: 6;
+}
+
+.flex-7 {
+  flex: 7;
+}
+
+.flex-8 {
+  flex: 8;
+}
+
+.flex-9 {
+  flex: 9;
+}
+
+.flex-10 {
+  flex: 10;
+}
+
+.flex-11 {
+  flex: 11;
+}
+
+.flex-12 {
+  flex: 12;
+}
+
+/* Reset CSS */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+p {
+  margin: 0;
+}
+
+ul {
+  list-style: none;
+
+  & li {
+    margin: 0;
+  }
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* helper */
+.h-100 {
+  height: 100%;
+}
+
+/* Text */
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-underline {
+  text-decoration: underline;
+}
+
+.text-line-through {
+  text-decoration: line-through;
+}
+
+.text-white {
+  color: var(--white-color);
+}
+
+.text-black {
+  color: var(--black-color);
+}
+
+.text-primary {
+  color: var(--primary-color);
+}
+
+.text-secondary {
+  color: var(--secondary-color);
+}
+
+.text-success {
+  color: var(--success-color);
+}
+
+.text-info {
+  color: var(--info-color);
+}
+
+.text-warning {
+  color: var(--warning-color);
+}
+
+/* Margin et padding  */
+.m-0 {
+  margin: 0;
+}
+
+.m-1 {
+  margin: 0.25rem;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-3 {
+  margin: 1rem;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-3 {
+  margin-right: 1rem;
+}
+
+.ml-0 {
+  margin-left: 0;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-3 {
+  margin-left: 1rem;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 1rem;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 1rem;
+}
+.pb-0 {
+  padding-bottom: 0;
+}
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+.pb-3 {
+  padding-bottom: 1rem;
+}
+.pt-0 {
+  padding-top: 0;
+}
+.pt-1 {
+  padding-top: 0.25rem;
+}
+.pt-2 {
+  padding-top: 0.5rem;
+}
+.pt-3 {
+  padding-top: 1rem;
+}
+.pl-0 {
+  padding-left: 0;
+}
+.pl-1 {
+  padding-left: 0.25rem;
+}
+.pl-2 {
+  padding-left: 0.5rem;
+}
+.pl-3 {
+  padding-left: 1rem;
+}
+.pr-0 {
+  padding-right: 0;
+}
+.pr-1 {
+  padding-right: 0.25rem;
+}
+.pr-2 {
+  padding-right: 0.5rem;
+}
+.pr-3 {
+  padding-right: 1rem;
+}
+.p-0 {
+  padding: 0;
+}
+.p-1 {
+  padding: 0.25rem;
+}
+.p-2 {
+  padding: 0.5rem;
+}
+.p-3 {
+  padding: 1rem;
+}
+
+/* border */
+.border-bottom {
+  border-bottom: 1px solid #cfbdbd;
+}
+.border-top {
+  border-top: 1px solid #cfbdbd;
+}
+.border-left {
+  border-left: 1px solid #cfbdbd;
+}
+.border-right {
+  border-right: 1px solid #cfbdbd;
+}
+/* fonts */
+.font-weight-bold {
+  font-weight: 600;
+}
+.font-weight-light {
+  font-weight: 300;
+}
+.font-weight-normal {
+  font-weight: 400;
+}
+.font-weight-italic {
+  font-style: italic;
+}
+
+/* class generique*/
+.visible {
+  visibility: visible;
+}
+.hidden {
+  visibility: hidden;
+}
+.position-relative {
+  position: relative;
+}
+.position-absolute {
+  position: absolute;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.w-100 {
+  width: 100%;
+}
+.min-width-auto {
+  min-width: auto;
+}
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.overflow-auto {
+  overflow: auto;
+}
+.toggle-btn {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  background-color: transparent;
+  border: none;
+  color: #333;
+  cursor: pointer;
+  margin: 0;
+  min-width: 10px;
+  width: auto;
+  padding: 0px;
+
+  &.toggle-btn-round {
+    border: 1px solid #cfbdbd;
+    border-radius: 50%;
+    padding: 0.1rem;
+    width: 25px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .bi {
+    font-size: 0.8rem;
+  }
+
+  &.toggle-btn--absolute {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+}
+
+/* scrollbar */
+/* Style pour les navigateurs modernes */
+::-webkit-scrollbar {
+  width: 2px;
+  /* Largeur de la barre verticale */
+  height: 2px;
+  /* Hauteur de la barre horizontale */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: grey;
+  /* Couleur de la barre de défilement */
+  border-radius: 10px;
+  /* Arrondir les bords */
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+  /* Couleur du fond de la zone de défilement */
+}
+
+/* Style pour Firefox */
+* {
+  scrollbar-width: thin;
+  /* Réduit la largeur */
+  scrollbar-color: grey transparent;
+  /* Couleurs : gris pour la barre, transparent pour le fond */
+}
+
+@media (min-width: 576px) {
+}
+
+@media (min-width: 768px) {
+}
+
+@media (min-width: 992px) {
+}

package/package/src/index.ts

@@ -0,0 +1,58 @@
+import "bootstrap-icons/font/bootstrap-icons.css";
+import "./index.css";
+export {
+  HistoryProvider,
+  useHistoryDepth,
+} from "./_core/hooks/HistoryProvider";
+export { ImageChecker } from "./_core/hooks/ImageChecker";
+export { ImageExist } from "./_core/hooks/imageExist";
+export { isValidEAN13 } from "./_core/hooks/isEAN13";
+export { objectToQueryParams } from "./_core/hooks/objectToQueryParams";
+export { useCurrency } from "./_core/hooks/useCurrency";
+export {
+  FormatDate,
+  localDateEndToUTC,
+  localDateStartToUTC,
+  LocalDateStringToUTC,
+} from "./_core/hooks/useDateutils";
+export { useIsMobile } from "./_core/hooks/useIsMobile";
+export { useToken } from "./_core/hooks/useToken";
+export { useValidate } from "./_core/hooks/useValidate";
+export { WidgetSupport } from "./_core/hooks/widgetSupport";
+export { ButtonAction } from "./action/ButtonAction";
+export { Badge } from "./badge/Badge";
+export { Button } from "./button/Button";
+export { ButtonActions } from "./button/buttonActions/ButtonActions";
+export { ButtonFile } from "./button/buttonFile/ButtonFile";
+export { Card } from "./card/Card";
+export { Carousel } from "./carousel/Carousel";
+export { Damier } from "./damier/Damier";
+export { DataTable } from "./dataTable/DataTable";
+export { DatePicker } from "./datePicker/DatePicker";
+export { Expands } from "./expands/Expands";
+export { FilAriane } from "./filAriane/FilAriane";
+export { DynamicForm } from "./form/Form";
+export { TypeInputEnum } from "./form/form.enum";
+export { Input } from "./form/input/Input";
+export { InputNumber } from "./form/inputNumber/InputNumber";
+export { InputPrice } from "./form/inputPrice/InputPrice";
+export { TextArea } from "./form/textArea/TextArea";
+export { Grid } from "./grid/Grid";
+export { Header } from "./header/Header";
+export { Icon } from "./icon/Icon";
+export { IconSizeEnum } from "./icon/iconSize.enum";
+export { Loader } from "./loader/Loader";
+export { Menus } from "./menus/Menus";
+export { Message } from "./message/Message";
+export { Modal } from "./modal/Modal";
+export { OverlayProvider } from "./overlayPanel/overlay.context";
+export { OverlayPanel } from "./overlayPanel/OverlayPanel";
+export { PdfViewer } from "./pdfViewer/PdfViewer";
+export { Quantity } from "./quantity/Quantity";
+export { Search } from "./search/Search";
+export { Select } from "./select/Select";
+export { Sidebar } from "./sidebar/Sidebar";
+export { SidebarData } from "./sidebarData/SidebarData";
+export { Tabs } from "./tabs/Tabs";
+export { useToasterStore } from "./toaster/store/useToasterStore";
+export { Toaster } from "./toaster/Toaster";

package/package/src/loader/Loader.tsx

@@ -0,0 +1,37 @@
+import { createPortal } from "react-dom";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./loader.css";
+export type LoaderProps = {
+  display: boolean;
+  message?: string;
+  size?: IconSizeEnum;
+  full?: true;
+};
+export const Loader = ({ display, full, message }: LoaderProps) => (
+  <>
+    {display && !full && (
+      <div className={`d-flex flex-column align-items-center`}>
+        {message && <span className="mb-3">{message}</span>}
+        <div className="position-relative">
+          <span className="loader"></span>
+        </div>
+      </div>
+    )}
+
+    {display &&
+      full &&
+      createPortal(
+        <div className="loader-overlay">
+          <div>
+            <div className={`d-flex flex-column align-items-center`}>
+              {message && <span className="mb-3">{message}</span>}
+              <div className="position-relative">
+                <span className="loader"></span>
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+  </>
+);

package/package/src/loader/Loader.view.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+import { Button } from "../button/Button";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import { Loader } from "./Loader";
+
+export const LoaderView = () => {
+  const [display, setDisplay] = useState(false);
+
+  return (
+    <>
+      <Button title={"loader-overlay"} onClick={() => setDisplay(!display)} />
+      <Loader
+        size={IconSizeEnum.EXTRA_LARGE}
+        display={!display}
+        message={"Loading..."}
+      />
+      <Loader display={display} message={"Loading..."} full={true} />
+    </>
+  );
+};

package/package/src/loader/loader.css

@@ -0,0 +1,30 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid var(--primary-color);
+  border-right: 3px solid transparent;
+  -webkit-animation: rotation 1s linear infinite;
+  animation: rotation 1s linear infinite;
+}
+.loader-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: 1000;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/package/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

package/package/src/main.tsx

@@ -0,0 +1,10 @@
+import "bootstrap-icons/font/bootstrap-icons.css";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/package/src/menus/Menus.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useState } from "react";
+import { Menu } from "./menu/Menu";
+import { MenuInterface } from "./menu/menu.interface";
+import "./menus.css";
+
+export type ExpandProps = {
+  items: MenuInterface[];
+  className?: string;
+};
+
+export const Menus = (props: ExpandProps) => {
+  const [currentItem, setCurrentItem] = useState<MenuInterface | null>(null);
+
+  const onChange = useCallback((item: MenuInterface) => {
+    setCurrentItem(item);
+  }, []);
+
+  const renderMenuItems = (items: MenuInterface[]) => (
+    <ul>
+      {items.map((item) => (
+        <li key={item.id}>
+          <Menu
+            item={item}
+            onChange={onChange}
+            active={currentItem?.id === item.id}
+          />
+          {item.subMenu && item.subMenu.length > 0 && (
+            <div className="ml-3 mt-1 submenu">
+              {renderMenuItems(item.subMenu)}
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+
+  return (
+    <div className={`menu ${props.className || ""}`}>
+      {renderMenuItems(props.items)}
+    </div>
+  );
+};