kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/grid/col/Col.tsx

@@ -1,24 +1,24 @@
-import { useContext } from "react";
-import { ColStyled } from "./colStyled/ColStyled";
-import { GridBreakpoints } from "../grid.interface";
-import { RowResponsiveContext } from "../row/Row";
-import "./col.css"
-type ColProps = GridBreakpoints & {
-  children: React.ReactNode;
-};
-export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children }) => {
-  const responsive = useContext(RowResponsiveContext);
-  return (
-    <ColStyled
-      className="col"
-      $responsive={responsive}
-      $xs={xs}
-      $sm={sm}
-      $md={md}
-      $lg={lg}
-      $xl={xl}
-    >
-      {children}
-    </ColStyled>
-  );
-};
+import { useContext } from "react";
+import { ColStyled } from "./colStyled/ColStyled";
+import { GridBreakpoints } from "../grid.interface";
+import { RowResponsiveContext } from "../row/Row";
+import "./col.css"
+type ColProps = GridBreakpoints & {
+  children: React.ReactNode;
+};
+export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children }) => {
+  const responsive = useContext(RowResponsiveContext);
+  return (
+    <ColStyled
+      className="col"
+      $responsive={responsive}
+      $xs={xs}
+      $sm={sm}
+      $md={md}
+      $lg={lg}
+      $xl={xl}
+    >
+      {children}
+    </ColStyled>
+  );
+};

package/src/grid/col/col.css

@@ -1,3 +1,3 @@
-.col {
-    padding: 0;
-}
+.col {
+    padding: 0;
+}

package/src/grid/col/colStyled/ColStyled.tsx

@@ -1,59 +1,59 @@
-import styled, { css } from "styled-components";
-import { GridColumnSpan, GridResponsive } from "../../grid.interface";
-
-// Largeur = part de la ligne moins la part des gaps qui revient à la colonne.
-// Pour une ligne dont les spans font 12, la somme des largeurs + les gaps = 100%.
-const getColWidth = (size: number) =>
-  `calc(${(size / 12) * 100}% - var(--grid-gutter, 0px) * ${1 - size / 12})`;
-
-// "auto" : base 0 et grow 1, les colonnes "auto" d'une ligne se partagent
-// la place restante (gaps déduits) à parts égales.
-const colSize = (size: GridColumnSpan = 12) =>
-  size === "auto"
-    ? `flex: 1 1 0; max-width: 100%;`
-    : `flex: 0 0 ${getColWidth(size)}; max-width: ${getColWidth(size)};`;
-
-// Règle de breakpoint selon la largeur de référence choisie sur la Row
-const breakpoint = (responsive: GridResponsive, minWidth: number) => {
-  switch (responsive) {
-    case "viewport":
-      return `@media (min-width: ${minWidth}px)`;
-    case "row":
-      return `@container kelt-grid (min-width: ${minWidth}px)`;
-    default:
-      return `@container app-container (min-width: ${minWidth}px)`;
-  }
-};
-
-type ColStyledProps = {
-  $responsive: GridResponsive;
-  $xs?: GridColumnSpan;
-  $sm?: GridColumnSpan;
-  $md?: GridColumnSpan;
-  $lg?: GridColumnSpan;
-  $xl?: GridColumnSpan;
-};
-
-const colAt = (
-  responsive: GridResponsive,
-  minWidth: number,
-  size?: GridColumnSpan
-) =>
-  size &&
-  css`
-    ${breakpoint(responsive, minWidth)} {
-      ${colSize(size)}
-    }
-  `;
-
-export const ColStyled = styled.div<ColStyledProps>`
-  box-sizing: border-box;
-  min-width: 0;
-  ${({ $xs }) => colSize($xs)}
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  ${({ $responsive, $sm }) => colAt($responsive, 576, $sm)}
-  ${({ $responsive, $md }) => colAt($responsive, 768, $md)}
-  ${({ $responsive, $lg }) => colAt($responsive, 992, $lg)}
-  ${({ $responsive, $xl }) => colAt($responsive, 1200, $xl)}
-`;
+import styled, { css } from "styled-components";
+import { GridColumnSpan, GridResponsive } from "../../grid.interface";
+
+// Largeur = part de la ligne moins la part des gaps qui revient à la colonne.
+// Pour une ligne dont les spans font 12, la somme des largeurs + les gaps = 100%.
+const getColWidth = (size: number) =>
+  `calc(${(size / 12) * 100}% - var(--grid-gutter, 0px) * ${1 - size / 12})`;
+
+// "auto" : base 0 et grow 1, les colonnes "auto" d'une ligne se partagent
+// la place restante (gaps déduits) à parts égales.
+const colSize = (size: GridColumnSpan = 12) =>
+  size === "auto"
+    ? `flex: 1 1 0; max-width: 100%;`
+    : `flex: 0 0 ${getColWidth(size)}; max-width: ${getColWidth(size)};`;
+
+// Règle de breakpoint selon la largeur de référence choisie sur la Row
+const breakpoint = (responsive: GridResponsive, minWidth: number) => {
+  switch (responsive) {
+    case "viewport":
+      return `@media (min-width: ${minWidth}px)`;
+    case "row":
+      return `@container kelt-grid (min-width: ${minWidth}px)`;
+    default:
+      return `@container app-container (min-width: ${minWidth}px)`;
+  }
+};
+
+type ColStyledProps = {
+  $responsive: GridResponsive;
+  $xs?: GridColumnSpan;
+  $sm?: GridColumnSpan;
+  $md?: GridColumnSpan;
+  $lg?: GridColumnSpan;
+  $xl?: GridColumnSpan;
+};
+
+const colAt = (
+  responsive: GridResponsive,
+  minWidth: number,
+  size?: GridColumnSpan
+) =>
+  size &&
+  css`
+    ${breakpoint(responsive, minWidth)} {
+      ${colSize(size)}
+    }
+  `;
+
+export const ColStyled = styled.div<ColStyledProps>`
+  box-sizing: border-box;
+  min-width: 0;
+  ${({ $xs }) => colSize($xs)}
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  ${({ $responsive, $sm }) => colAt($responsive, 576, $sm)}
+  ${({ $responsive, $md }) => colAt($responsive, 768, $md)}
+  ${({ $responsive, $lg }) => colAt($responsive, 992, $lg)}
+  ${({ $responsive, $xl }) => colAt($responsive, 1200, $xl)}
+`;

package/src/grid/container/Container.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import "./container.css";
-type ContainerProps = {
-  children: React.ReactNode;
-};
-export const Container: React.FC<ContainerProps> = ({ children }) => (
-  <div className="container">{children}</div>
-);
+import React from "react";
+import "./container.css";
+type ContainerProps = {
+  children: React.ReactNode;
+};
+export const Container: React.FC<ContainerProps> = ({ children }) => (
+  <div className="container">{children}</div>
+);

package/src/grid/container/container.css

@@ -1,5 +1,5 @@
-.container {
-  width: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
+.container {
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
 }

package/src/grid/grid.interface.tsx

@@ -1,27 +1,27 @@
-/**
- * Largeur de référence pour les breakpoints des Col :
- * - "app" (défaut) : le conteneur app-container
- * - "viewport" : la fenêtre (@media)
- * - "row" : la Row elle-même (utile pour une grid dans une card, un panneau...)
- */
-export type GridResponsive = "app" | "viewport" | "row";
-
-/**
- * Nombre de colonnes sur 12, ou "auto" : la colonne partage la place restante
- * de la ligne à parts égales avec les autres "auto" (ex. 5 champs sur une ligne).
- */
-export type GridColumnSpan =
-  | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-  | "auto";
-
-export interface GridBreakpoints {
-  xs?: GridColumnSpan;
-  sm?: GridColumnSpan;
-  md?: GridColumnSpan;
-  lg?: GridColumnSpan;
-  xl?: GridColumnSpan;
-}
-
-export interface GridInterface extends GridBreakpoints {
-  children: React.ReactNode;
-}
+/**
+ * Largeur de référence pour les breakpoints des Col :
+ * - "app" (défaut) : le conteneur app-container
+ * - "viewport" : la fenêtre (@media)
+ * - "row" : la Row elle-même (utile pour une grid dans une card, un panneau...)
+ */
+export type GridResponsive = "app" | "viewport" | "row";
+
+/**
+ * Nombre de colonnes sur 12, ou "auto" : la colonne partage la place restante
+ * de la ligne à parts égales avec les autres "auto" (ex. 5 champs sur une ligne).
+ */
+export type GridColumnSpan =
+  | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  | "auto";
+
+export interface GridBreakpoints {
+  xs?: GridColumnSpan;
+  sm?: GridColumnSpan;
+  md?: GridColumnSpan;
+  lg?: GridColumnSpan;
+  xl?: GridColumnSpan;
+}
+
+export interface GridInterface extends GridBreakpoints {
+  children: React.ReactNode;
+}

package/src/grid/row/Row.tsx

@@ -1,49 +1,49 @@
-import { createContext } from "react";
-import { GridResponsive } from "../grid.interface";
-import "./row.css";
-
-export type GridGap = boolean | number | string;
-
-export const RowResponsiveContext = createContext<GridResponsive>("app");
-
-type RowProps = {
-  children: React.ReactNode;
-  className?: string;
-  scroll?: boolean;
-  /** true (défaut) : gap par défaut, false : pas de gap, number : px, string : valeur CSS ("1rem") */
-  gap?: GridGap;
-  /** Largeur sur laquelle se basent les breakpoints des Col (défaut : "app") */
-  responsive?: GridResponsive;
-};
-
-const getGutter = (gap: GridGap) => {
-  if (gap === true) return undefined; // garde la valeur par défaut du CSS
-  if (gap === false) return "0px";
-  return typeof gap === "number" ? `${gap}px` : gap;
-};
-
-export const Row: React.FC<RowProps> = ({
-  children,
-  className,
-  scroll,
-  gap = true,
-  responsive = "app",
-}) => {
-  const gutter = getGutter(gap);
-  return (
-    <RowResponsiveContext.Provider value={responsive}>
-      <div
-        className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""} ${
-          responsive === "row" ? "grid-row--responsive" : ""
-        }`}
-        style={
-          gutter
-            ? ({ "--grid-gutter": gutter } as React.CSSProperties)
-            : undefined
-        }
-      >
-        {children}
-      </div>
-    </RowResponsiveContext.Provider>
-  );
-};
+import { createContext } from "react";
+import { GridResponsive } from "../grid.interface";
+import "./row.css";
+
+export type GridGap = boolean | number | string;
+
+export const RowResponsiveContext = createContext<GridResponsive>("app");
+
+type RowProps = {
+  children: React.ReactNode;
+  className?: string;
+  scroll?: boolean;
+  /** true (défaut) : gap par défaut, false : pas de gap, number : px, string : valeur CSS ("1rem") */
+  gap?: GridGap;
+  /** Largeur sur laquelle se basent les breakpoints des Col (défaut : "app") */
+  responsive?: GridResponsive;
+};
+
+const getGutter = (gap: GridGap) => {
+  if (gap === true) return undefined; // garde la valeur par défaut du CSS
+  if (gap === false) return "0px";
+  return typeof gap === "number" ? `${gap}px` : gap;
+};
+
+export const Row: React.FC<RowProps> = ({
+  children,
+  className,
+  scroll,
+  gap = true,
+  responsive = "app",
+}) => {
+  const gutter = getGutter(gap);
+  return (
+    <RowResponsiveContext.Provider value={responsive}>
+      <div
+        className={`grid-row ${className ?? ""} ${scroll ? "scroll" : ""} ${
+          responsive === "row" ? "grid-row--responsive" : ""
+        }`}
+        style={
+          gutter
+            ? ({ "--grid-gutter": gutter } as React.CSSProperties)
+            : undefined
+        }
+      >
+        {children}
+      </div>
+    </RowResponsiveContext.Provider>
+  );
+};

package/src/grid/row/row.css

@@ -1,26 +1,26 @@
-.grid-row {
-  --grid-gutter: 15px;
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: var(--grid-gutter);
-
-  /* responsive="row" : les breakpoints des Col se basent sur la largeur de la Row.
-     Attention : la Row a alors une largeur min de contenu de 0 dans un parent flex. */
-  &.grid-row--responsive {
-    container: kelt-grid / inline-size;
-  }
-
-  &.scroll {
-    overflow-x: auto;
-    flex-wrap: nowrap;
-  }
-}
-
-@container app-container (min-width: 998px) {
-  .grid-row {
-    &.scroll {
-      overflow-x: auto;
-      flex-wrap: wrap;
-    }
-  }
+.grid-row {
+  --grid-gutter: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--grid-gutter);
+
+  /* responsive="row" : les breakpoints des Col se basent sur la largeur de la Row.
+     Attention : la Row a alors une largeur min de contenu de 0 dans un parent flex. */
+  &.grid-row--responsive {
+    container: kelt-grid / inline-size;
+  }
+
+  &.scroll {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+  }
+}
+
+@container app-container (min-width: 998px) {
+  .grid-row {
+    &.scroll {
+      overflow-x: auto;
+      flex-wrap: wrap;
+    }
+  }
 }

package/src/header/Header.tsx

@@ -1,64 +1,64 @@
-import { useCallback, useRef, useState } from "react";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import { OverlayPanel } from "../overlayPanel/OverlayPanel";
-import "./header.css";
-import { HeaderInterface } from "./header.interface";
-
-export const Header = ({
-  children,
-  logo,
-  onClickMenu,
-  userChildren,
-  positionFixed,
-  overlayClassName,
-  onClickLogo,
-  showBackNavigation,
-  onClickBackNavigation,
-}: HeaderInterface): JSX.Element => {
-  const refButton = useRef<HTMLDivElement>(null);
-  const [openOverlay, setOpenOverlay] = useState(false);
-  const onClickUser = useCallback(() => {
-    setOpenOverlay(!openOverlay);
-  }, [openOverlay, setOpenOverlay]);
-  return (
-    <div className={`header ${positionFixed ? "header--fixed" : ""}`}>
-      <div className="flex-1 d-flex align-items-center">
-        <span className="header-menu-btn" onClick={onClickMenu}>
-          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-list"></Icon>
-        </span>
-        {showBackNavigation && (
-          <span className="chevron-back" onClick={onClickBackNavigation}>
-            <Icon
-              size={IconSizeEnum.EXTRA_SMALL}
-              classIcon="bi-caret-left-fill"
-            ></Icon>
-          </span>
-        )}
-
-        <span
-          className={`header-logo ${onClickLogo && "cursor-pointer"} `}
-          onClick={onClickLogo}
-        >
-          {logo && logo}
-        </span>
-      </div>
-      <div className="d-flex align-items-center">
-        {children}
-        <div ref={refButton} onClick={onClickUser}>
-          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-person-circle"></Icon>
-        </div>
-        {openOverlay && refButton.current && (
-          <OverlayPanel
-            className={overlayClassName}
-            position="bottomRight"
-            show={openOverlay}
-            closeOverlay={setOpenOverlay}
-            referenceElement={refButton.current}
-            children={userChildren}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
+import { useCallback, useRef, useState } from "react";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import { OverlayPanel } from "../overlayPanel/OverlayPanel";
+import "./header.css";
+import { HeaderInterface } from "./header.interface";
+
+export const Header = ({
+  children,
+  logo,
+  onClickMenu,
+  userChildren,
+  positionFixed,
+  overlayClassName,
+  onClickLogo,
+  showBackNavigation,
+  onClickBackNavigation,
+}: HeaderInterface): JSX.Element => {
+  const refButton = useRef<HTMLDivElement>(null);
+  const [openOverlay, setOpenOverlay] = useState(false);
+  const onClickUser = useCallback(() => {
+    setOpenOverlay(!openOverlay);
+  }, [openOverlay, setOpenOverlay]);
+  return (
+    <div className={`header ${positionFixed ? "header--fixed" : ""}`}>
+      <div className="flex-1 d-flex align-items-center">
+        <span className="header-menu-btn" onClick={onClickMenu}>
+          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-list"></Icon>
+        </span>
+        {showBackNavigation && (
+          <span className="chevron-back" onClick={onClickBackNavigation}>
+            <Icon
+              size={IconSizeEnum.EXTRA_SMALL}
+              classIcon="bi-caret-left-fill"
+            ></Icon>
+          </span>
+        )}
+
+        <span
+          className={`header-logo ${onClickLogo && "cursor-pointer"} `}
+          onClick={onClickLogo}
+        >
+          {typeof logo === "string" ? <img src={logo} alt="Logo" /> : logo}
+        </span>
+      </div>
+      <div className="d-flex align-items-center">
+        {children}
+        <div ref={refButton} onClick={onClickUser}>
+          <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-person-circle"></Icon>
+        </div>
+        {openOverlay && refButton.current && (
+          <OverlayPanel
+            className={overlayClassName}
+            position="bottomRight"
+            show={openOverlay}
+            closeOverlay={setOpenOverlay}
+            referenceElement={refButton.current}
+            children={userChildren}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/header/Header.view.tsx

@@ -1,5 +1,5 @@
-import { Header } from "./Header";
-
-export const HeaderView = (): JSX.Element => {
-  return <Header showBackNavigation={true} />;
-};
+import { Header } from "./Header";
+
+export const HeaderView = (): JSX.Element => {
+  return <Header showBackNavigation={true} />;
+};

package/src/header/header.css

@@ -1,43 +1,43 @@
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  height: 50px;
-  border-bottom: 1px solid #cfbdbd;
-  background-color: #fff;
-  width: 100%;
-
-  &.header--fixed {
-    position: fixed;
-  }
-
-  .header-logo {
-    margin-left: 1rem;
-
-    img {
-      width: 50px;
-    }
-  }
-
-  .bi {
-    cursor: pointer;
-  }
-
-  .header-menu-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    cursor: pointer;
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: -15px;
-      bottom: -15px;
-      left: -15px;
-      right: -15px;
-    }
-  }
-}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  height: 50px;
+  border-bottom: 1px solid #cfbdbd;
+  background-color: #fff;
+  width: 100%;
+
+  &.header--fixed {
+    position: fixed;
+  }
+
+  .header-logo {
+    margin-left: 1rem;
+
+    img {
+      width: 50px;
+    }
+  }
+
+  .bi {
+    cursor: pointer;
+  }
+
+  .header-menu-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -15px;
+      bottom: -15px;
+      left: -15px;
+      right: -15px;
+    }
+  }
+}

package/src/header/header.interface.tsx

@@ -1,11 +1,11 @@
-export interface HeaderInterface {
-  logo?: React.ReactNode;
-  children?: React.ReactNode;
-  positionFixed?: boolean;
-  onClickMenu?: () => void;
-  userChildren?: React.ReactNode;
-  onClickLogo?: () => void;
-  overlayClassName?: string;
-  showBackNavigation?: boolean;
-  onClickBackNavigation?: () => void;
-}
+export interface HeaderInterface {
+  logo?: React.ReactNode;
+  children?: React.ReactNode;
+  positionFixed?: boolean;
+  onClickMenu?: () => void;
+  userChildren?: React.ReactNode;
+  onClickLogo?: () => void;
+  overlayClassName?: string;
+  showBackNavigation?: boolean;
+  onClickBackNavigation?: () => void;
+}