kelt-ui-kit-react 2.0.8 → 2.1.0

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",
+}