kelt-ui-kit-react 2.0.6 → 2.0.9

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.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;
+}

package/src/home/Home.tsx

@@ -1,3 +1,40 @@
-export const Home = (): JSX.Element => {
-  return <h1>Home</h1>;
-};
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { MenuList } from "../App.menu";
+import { catalog, categories, Category, matchesSearch } from "../docs/catalog";
+
+export const Home = (): JSX.Element => {
+  const [search, setSearch] = useState("");
+  const [category, setCategory] = useState<Category | "Tous">("Tous");
+  const items = MenuList.filter((menu) =>
+    (category === "Tous" || catalog[menu.link].category === category) &&
+    matchesSearch(`${menu.name} ${catalog[menu.link].description}`, search)
+  ).sort((a, b) => a.name.localeCompare(b.name));
+  return (
+    <div className="docs-home">
+      <section className="docs-hero">
+        <div className="docs-hero-copy">
+          <span className="docs-eyebrow"><span className="docs-status-dot" />LE KIT, CÔTÉ DÉVELOPPEUR</span>
+          <h1>De belles interfaces.<br /><span>Une API claire.</span></h1>
+          <p>Explorez les composants Kelt, testez leurs interactions et retrouvez chaque paramètre, son type et son exemple. Tout le kit, au même endroit.</p>
+          <div className="docs-hero-actions"><Link className="docs-primary-link" to="/buttons">Explorer le kit<i className="bi bi-arrow-right" aria-hidden="true" /></Link><Link to="/toasters">Voir les notifications<i className="bi bi-arrow-up-right" aria-hidden="true" /></Link></div>
+        </div>
+        <div className="docs-hero-visual" aria-hidden="true">
+          <div className="docs-mini-window"><div className="docs-window-dots"><span /><span /><span /><code>Button.tsx</code></div><pre><span>import</span> {"{ Button }"}<br /><span>from</span> "kelt-ui-kit-react";<br /><br />{"<Button"}<br />{"  title="}<em>"Creer quelque chose"</em><br />{"  classIcon="}<em>"bi-stars"</em><br />{"/>"}</pre><div className="docs-mini-preview"><span><i className="bi bi-stars" />Creer quelque chose</span><small>Apercu en direct</small></div></div>
+          <div className="docs-floating-label"><i className="bi bi-braces" /> TypeScript ready</div>
+        </div>
+      </section>
+      <div className="docs-stats"><div><strong>{MenuList.length}</strong><span>composants à explorer</span></div><div><strong>3 onglets</strong><span>aperçu, API et code</span></div><div><strong>100% source</strong><span>types et exemples synchronisés</span></div></div>
+      <section className="docs-catalog" aria-labelledby="catalog-title">
+        <div className="docs-catalog-heading"><div><span className="docs-eyebrow">LA BIBLIOTHÈQUE</span><h2 id="catalog-title">Trouvez votre prochain composant.</h2></div><label className="docs-search"><i className="bi bi-search" aria-hidden="true" /><span className="docs-sr-only">Filtrer le catalogue</span><input placeholder="Nom, usage..." value={search} onChange={(event) => setSearch(event.target.value)} /></label></div>
+        <div className="docs-category-filters" role="group" aria-label="Catégories">{(["Tous", ...categories] as const).map((item) => <button type="button" key={item} aria-pressed={category === item} onClick={() => setCategory(item)}>{item}</button>)}</div>
+        <p className="docs-result-count" role="status">{items.length} composant{items.length > 1 ? "s" : ""}</p>
+        <div className="docs-card-grid">{items.map((menu) => {
+          const info = catalog[menu.link];
+          return <Link className="docs-catalog-card" to={menu.link} key={menu.id}><div className="docs-card-top"><span className="docs-component-icon"><i className={`bi bi-${info.icon}`} aria-hidden="true" /></span><span className="docs-pill">{info.category}</span></div><h3>{menu.name}</h3><p>{info.description}</p><span className="docs-card-link">Aperçu & documentation<i className="bi bi-arrow-up-right" aria-hidden="true" /></span></Link>;
+        })}</div>
+        {items.length === 0 && <p className="docs-empty">Aucun résultat. Essayez un autre nom ou une autre catégorie.</p>}
+      </section>
+    </div>
+  );
+};

package/src/icon/Icon.tsx

@@ -1,6 +1,6 @@
-import "./icon.css";
-import { IconInterface } from "./icon.interface";
-
-export const Icon = ({ classIcon, size }: IconInterface): JSX.Element => {
-  return <i className={`bi ${classIcon} ${size ?? "sm"}`} />;
-};
+import "./icon.css";
+import { IconInterface } from "./icon.interface";
+
+export const Icon = ({ classIcon, size, onClick }: IconInterface): JSX.Element => {
+  return <i className={`bi ${classIcon} ${size ?? "sm"}`} onClick={onClick} />;
+};

package/src/icon/Icons.view.tsx

@@ -1,29 +1,29 @@
-import { Icon } from "./Icon";
-import { IconInterface } from "./icon.interface";
-
-export const IconsView = (): JSX.Element => {
-  const mockItems: IconInterface[] = [
-    {
-      classIcon: "bi-list",
-    },
-    {
-      classIcon: "bi-person-circle",
-    },
-    {
-      classIcon: "bi-volume-mute-fill",
-    },
-  ];
-
-  return (
-    <>
-      <p>
-        <a href="https://icons.getbootstrap.com/#usage" target="_blank">
-          Liste des icons utilisables
-        </a>
-      </p>
-      {mockItems.map((item, idx) => (
-        <Icon key={idx} classIcon={item.classIcon} />
-      ))}
-    </>
-  );
-};
+import { Icon } from "./Icon";
+import { IconInterface } from "./icon.interface";
+
+export const IconsView = (): JSX.Element => {
+  const mockItems: IconInterface[] = [
+    {
+      classIcon: "bi-list",
+    },
+    {
+      classIcon: "bi-person-circle",
+    },
+    {
+      classIcon: "bi-volume-mute-fill",
+    },
+  ];
+
+  return (
+    <>
+      <p>
+        <a href="https://icons.getbootstrap.com/#usage" target="_blank">
+          Liste des icons utilisables
+        </a>
+      </p>
+      {mockItems.map((item, idx) => (
+        <Icon key={idx} classIcon={item.classIcon} />
+      ))}
+    </>
+  );
+};

package/src/icon/icon.css

@@ -1,20 +1,20 @@
-.bi {
-  &.xs {
-    font-size: 1rem;
-  }
-  &.sm {
-    font-size: 1.2rem;
-  }
-
-  &.md {
-    font-size: 1.4rem;
-  }
-
-  &.xl {
-    font-size: 1.6rem;
-  }
-
-  &.xxl {
-    font-size: 2rem;
-  }
-}
+.bi {
+  &.xs {
+    font-size: 1rem;
+  }
+  &.sm {
+    font-size: 1.2rem;
+  }
+
+  &.md {
+    font-size: 1.4rem;
+  }
+
+  &.xl {
+    font-size: 1.6rem;
+  }
+
+  &.xxl {
+    font-size: 2rem;
+  }
+}

package/src/icon/icon.interface.tsx

@@ -1,6 +1,7 @@
-import { IconSizeEnum } from "./iconSize.enum";
-
-export interface IconInterface {
-  classIcon: string;
-  size?: IconSizeEnum;
-}
+import { IconSizeEnum } from "./iconSize.enum";
+
+export interface IconInterface {
+  classIcon: string;
+  size?: IconSizeEnum;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}

package/src/icon/iconSize.enum.ts

@@ -1,7 +1,7 @@
-export enum IconSizeEnum {
-  EXTRA_SMALL = "xs",
-  SMALL = "sm",
-  MEDIUM = "md",
-  LARGE = "xl",
-  EXTRA_LARGE = "xxl",
-}
+export enum IconSizeEnum {
+  EXTRA_SMALL = "xs",
+  SMALL = "sm",
+  MEDIUM = "md",
+  LARGE = "xl",
+  EXTRA_LARGE = "xxl",
+}