kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/datePicker/DatePicker.tsx

@@ -1,110 +1,110 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import Calendar from "react-calendar";
-import { Value } from "react-calendar/dist/cjs/shared/types";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./datePicker.css"; // Assuming you have some styles for the DatePicker
-export type DatePickerProps = {
-  value?: Value;
-  maxDate?: Date;
-  onChange?: (date: Value) => void;
-  children?: React.ReactNode;
-};
-export const DatePicker = ({
-  value,
-  onChange,
-  maxDate,
-  children,
-}: DatePickerProps) => {
-  const [dateCalendar, setDateCalendar] = useState<Value>(value ?? new Date());
-  const [showCalendar, setShowCalendar] = useState(false);
-
-  const calendarRef = useRef<HTMLDivElement>(null);
-
-  const handleChange = useCallback(
-    (val: Value) => {
-      setDateCalendar(val);
-      if (onChange) {
-        onChange(val);
-      }
-      setShowCalendar(false);
-    },
-    [onChange]
-  );
-
-  const toggleCalendar = () => setShowCalendar(!showCalendar);
-
-  const handleClickOutside = useCallback((event: MouseEvent) => {
-    if (
-      calendarRef.current &&
-      !calendarRef.current.contains(event.target as Node)
-    ) {
-      setShowCalendar(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (showCalendar) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    // Nettoyage
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [showCalendar, handleClickOutside]);
-  const [currentMonth, setCurrentMonth] = useState<Value>();
-
-  const handleActiveStartDateChange = ({
-    activeStartDate,
-  }: {
-    activeStartDate: Value;
-  }) => {
-    setCurrentMonth(activeStartDate);
-  };
-  return (
-    <div>
-      <div className="calendar" ref={calendarRef}>
-        {children && <div onClick={toggleCalendar}>{children}</div>}
-        {!children && (
-          <button className="calendar-button" onClick={toggleCalendar}>
-            <Icon
-              classIcon=" bi-calendar4-event"
-              size={IconSizeEnum.EXTRA_LARGE}
-            />
-          </button>
-        )}
-        {showCalendar && (
-          <div className="calendar-popup">
-            <div
-              onClick={() => setShowCalendar(false)}
-              className="calendar-popup-close"
-            >
-              <Icon
-                classIcon="bi-x-lg close-icon"
-                size={IconSizeEnum.EXTRA_SMALL}
-              />
-            </div>
-            <Calendar
-              onActiveStartDateChange={handleActiveStartDateChange}
-              maxDate={maxDate ?? new Date()}
-              onChange={handleChange}
-              value={dateCalendar}
-              tileClassName={({ date: day, view }) => {
-                if (view === "month" && (currentMonth as Date)) {
-                  const curr = currentMonth as Date;
-                  return day.getMonth() !== curr?.getMonth()
-                    ? "out-of-month"
-                    : null;
-                }
-                return null;
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
+import { useCallback, useEffect, useRef, useState } from "react";
+import Calendar from "react-calendar";
+import { Value } from "react-calendar/dist/cjs/shared/types";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./datePicker.css"; // Assuming you have some styles for the DatePicker
+export type DatePickerProps = {
+  value?: Value;
+  maxDate?: Date;
+  onChange?: (date: Value) => void;
+  children?: React.ReactNode;
+};
+export const DatePicker = ({
+  value,
+  onChange,
+  maxDate,
+  children,
+}: DatePickerProps) => {
+  const [dateCalendar, setDateCalendar] = useState<Value>(value ?? new Date());
+  const [showCalendar, setShowCalendar] = useState(false);
+
+  const calendarRef = useRef<HTMLDivElement>(null);
+
+  const handleChange = useCallback(
+    (val: Value) => {
+      setDateCalendar(val);
+      if (onChange) {
+        onChange(val);
+      }
+      setShowCalendar(false);
+    },
+    [onChange]
+  );
+
+  const toggleCalendar = () => setShowCalendar(!showCalendar);
+
+  const handleClickOutside = useCallback((event: MouseEvent) => {
+    if (
+      calendarRef.current &&
+      !calendarRef.current.contains(event.target as Node)
+    ) {
+      setShowCalendar(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (showCalendar) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    // Nettoyage
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showCalendar, handleClickOutside]);
+  const [currentMonth, setCurrentMonth] = useState<Value>();
+
+  const handleActiveStartDateChange = ({
+    activeStartDate,
+  }: {
+    activeStartDate: Value;
+  }) => {
+    setCurrentMonth(activeStartDate);
+  };
+  return (
+    <div>
+      <div className="calendar" ref={calendarRef}>
+        {children && <div onClick={toggleCalendar}>{children}</div>}
+        {!children && (
+          <button className="calendar-button" onClick={toggleCalendar}>
+            <Icon
+              classIcon=" bi-calendar4-event"
+              size={IconSizeEnum.EXTRA_LARGE}
+            />
+          </button>
+        )}
+        {showCalendar && (
+          <div className="calendar-popup">
+            <div
+              onClick={() => setShowCalendar(false)}
+              className="calendar-popup-close"
+            >
+              <Icon
+                classIcon="bi-x-lg close-icon"
+                size={IconSizeEnum.EXTRA_SMALL}
+              />
+            </div>
+            <Calendar
+              onActiveStartDateChange={handleActiveStartDateChange}
+              maxDate={maxDate ?? new Date()}
+              onChange={handleChange}
+              value={dateCalendar}
+              tileClassName={({ date: day, view }) => {
+                if (view === "month" && (currentMonth as Date)) {
+                  const curr = currentMonth as Date;
+                  return day.getMonth() !== curr?.getMonth()
+                    ? "out-of-month"
+                    : null;
+                }
+                return null;
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/datePicker/DatePicker.view.tsx

@@ -1,9 +1,9 @@
-import { DatePicker } from "./DatePicker";
-
-export const DatePickerView = () => {
-  return (
-    <div>
-      <DatePicker />
-    </div>
-  );
-};
+import { DatePicker } from "./DatePicker";
+
+export const DatePickerView = () => {
+  return (
+    <div>
+      <DatePicker />
+    </div>
+  );
+};

package/src/datePicker/datePicker.css

@@ -1,77 +1,77 @@
-.calendar {
-  position: relative;
-  .calendar-button {
-    width: 40px;
-    max-width: 40px;
-    min-width: 40px;
-    background-color: transparent;
-    i {
-      color: #333;
-      font-size: 1.6rem;
-    }
-  }
-  .calendar-popup {
-    position: absolute;
-    z-index: 5;
-    border-color: #cfbdbd;
-    border-style: solid;
-    border-width: 1px;
-    max-width: 300px;
-    min-width: 250px;
-    background-color: #fff;
-    font-size: 0.8rem;
-    border-radius: 4px;
-    .out-of-month {
-      opacity: 0.4;
-    }
-    .calendar-popup-close {
-      display: flex;
-      justify-content: flex-end;
-      margin-right: 0.25rem;
-      margin-top: 0.35rem;
-      cursor: pointer;
-      i {
-        line-height: 0;
-        font-size: 0.8rem;
-      }
-    }
-    .react-calendar {
-      border: 0px;
-      button {
-        background-color: #fff;
-        color: #333;
-        min-width: auto;
-        width: auto;
-        font-size: 0.8rem;
-        padding: 0.5rem;
-      }
-      .react-calendar__month-view__weekdays__weekday {
-        text-align: center;
-      }
-      .react-calendar__navigation {
-        display: flex;
-      }
-
-      .react-calendar__tile--active {
-        background-color: #007bff;
-        color: #fff;
-      }
-      .react-calendar__tile--now {
-        background-color: #f0f0f0;
-        color: #000;
-      }
-      .react-calendar__tile--active:hover {
-        background-color: #0056b3;
-        color: #fff;
-      }
-      .react-calendar__tile--now:hover {
-        background-color: #e0e0e0;
-        color: #000;
-      }
-      .react-calendar__tile--disabled {
-        background-color: #f8f9fa;
-        color: #6c757d;
-      }
-    }
-  }
-}
+.calendar {
+  position: relative;
+  .calendar-button {
+    width: 40px;
+    max-width: 40px;
+    min-width: 40px;
+    background-color: transparent;
+    i {
+      color: #333;
+      font-size: 1.6rem;
+    }
+  }
+  .calendar-popup {
+    position: absolute;
+    z-index: 5;
+    border-color: #cfbdbd;
+    border-style: solid;
+    border-width: 1px;
+    max-width: 300px;
+    min-width: 250px;
+    background-color: #fff;
+    font-size: 0.8rem;
+    border-radius: 4px;
+    .out-of-month {
+      opacity: 0.4;
+    }
+    .calendar-popup-close {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 0.25rem;
+      margin-top: 0.35rem;
+      cursor: pointer;
+      i {
+        line-height: 0;
+        font-size: 0.8rem;
+      }
+    }
+    .react-calendar {
+      border: 0px;
+      button {
+        background-color: #fff;
+        color: #333;
+        min-width: auto;
+        width: auto;
+        font-size: 0.8rem;
+        padding: 0.5rem;
+      }
+      .react-calendar__month-view__weekdays__weekday {
+        text-align: center;
+      }
+      .react-calendar__navigation {
+        display: flex;
+      }
+
+      .react-calendar__tile--active {
+        background-color: #007bff;
+        color: #fff;
+      }
+      .react-calendar__tile--now {
+        background-color: #f0f0f0;
+        color: #000;
+      }
+      .react-calendar__tile--active:hover {
+        background-color: #0056b3;
+        color: #fff;
+      }
+      .react-calendar__tile--now:hover {
+        background-color: #e0e0e0;
+        color: #000;
+      }
+      .react-calendar__tile--disabled {
+        background-color: #f8f9fa;
+        color: #6c757d;
+      }
+    }
+  }
+}

package/src/docs/ComponentDocs.tsx

@@ -0,0 +1,156 @@
+import { KeyboardEvent, useRef, useState } from "react";
+import documentation from "virtual:ui-docs";
+import { catalog, matchesSearch } from "./catalog";
+import { DocumentedComponent } from "./documentation.types";
+
+const tabs = [
+  { name: "Aperçu", icon: "play-circle" },
+  { name: "API & types", icon: "braces" },
+  { name: "Code", icon: "code-slash" },
+];
+
+function ApiReference({ component, filter }: { component: DocumentedComponent; filter: string }) {
+  const props = component.props.filter((prop) => matchesSearch(`${prop.name} ${prop.type} ${prop.description}`, filter));
+  return (
+    <section className="docs-api-section">
+      <div className="docs-section-heading">
+        <h2>{component.name}</h2>
+        <span className="docs-pill">{component.props.length} paramètres</span>
+      </div>
+      <p className="docs-source">{component.source}</p>
+      <details className="docs-type-detail">
+        <summary>Signature TypeScript</summary>
+        <pre><code>{component.signature}</code></pre>
+      </details>
+      {component.name === "showToast" && (
+        <p className="docs-note">Le premier argument est le titre (string). Les paramètres ci-dessous constituent le second argument, options. Monter &lt;Toaster /&gt; et un élément #toaster-root dans votre application.</p>
+      )}
+      {component.props.length === 0 ? (
+        <p className="docs-empty">Ce composant ne prend aucune prop. Consultez le code pour son utilisation.</p>
+      ) : props.length === 0 ? (
+        <p className="docs-empty">Aucun paramètre ne correspond à votre recherche.</p>
+      ) : (
+        <div className="docs-table-scroll">
+          <table className="docs-props-table">
+            <caption className="docs-sr-only">Paramètres de {component.name}</caption>
+            <thead><tr><th scope="col">Paramètre</th><th scope="col">Type</th><th scope="col">Requis</th><th scope="col">Défaut</th><th scope="col">Description</th></tr></thead>
+            <tbody>{props.map((prop) => (
+              <tr key={prop.name}>
+                <th scope="row"><code>{prop.name}</code></th>
+                <td><code className="docs-prop-type">{prop.type}</code></td>
+                <td><span className={`docs-requirement ${prop.required ? "is-required" : ""}`}>{prop.required ? "Oui" : "Non"}</span></td>
+                <td><code>{prop.defaultValue ?? "—"}</code></td>
+                <td>{prop.description || "—"}</td>
+              </tr>
+            ))}</tbody>
+          </table>
+        </div>
+      )}
+      {component.types.length > 0 && (
+        <div className="docs-related-types">
+          <h3>Structures & types associés</h3>
+          <p>Dépliez un type pour consulter ses champs, unions et valeurs possibles.</p>
+          {component.types.map((type, index) => (
+            <details className="docs-type-detail" key={`${type.name}-${index}`}>
+              <summary><i className="bi bi-braces" aria-hidden="true" /> {type.name}</summary>
+              <pre><code>{type.declaration}</code></pre>
+            </details>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+export function ComponentDocs({ path, name, children }: { path: string; name: string; children: React.ReactNode }) {
+  const [active, setActive] = useState(0);
+  const [filter, setFilter] = useState("");
+  const [mobile, setMobile] = useState(false);
+  const [grid, setGrid] = useState(true);
+  const [revision, setRevision] = useState(0);
+  const [copyStatus, setCopyStatus] = useState("");
+  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const docs = documentation[path];
+  const info = catalog[path];
+  const prefix = `docs-${path.slice(1)}`;
+
+  function onTabKey(event: KeyboardEvent<HTMLButtonElement>, index: number) {
+    let next: number;
+    switch (event.key) {
+      case "ArrowRight": next = (index + 1) % tabs.length; break;
+      case "ArrowLeft": next = (index + tabs.length - 1) % tabs.length; break;
+      case "Home": next = 0; break;
+      case "End": next = tabs.length - 1; break;
+      default: return;
+    }
+    event.preventDefault();
+    setActive(next);
+    tabRefs.current[next]?.focus();
+  }
+
+  async function copyExample() {
+    try {
+      await navigator.clipboard.writeText(docs.example);
+      setCopyStatus("Code copié !");
+    } catch (error) {
+      setCopyStatus(`Copie impossible : ${error instanceof Error ? error.message : String(error)}. Sélectionnez le code pour le copier manuellement.`);
+    }
+  }
+
+  return (
+    <div className="docs-component">
+      <div className="docs-breadcrumb">Composants <span>/</span> {info.category} <span>/</span> {name}</div>
+      <header className="docs-page-heading">
+        <div className="docs-component-icon"><i className={`bi bi-${info.icon}`} aria-hidden="true" /></div>
+        <div><span className="docs-eyebrow">{info.category}</span><h1>{name}</h1><p>{info.description}</p></div>
+        <span className="docs-pill docs-live"><span /> React + TypeScript</span>
+      </header>
+      <div className="docs-workbench">
+        <div className="docs-tablist" role="tablist" aria-label={`Documentation de ${name}`}>
+          {tabs.map((tab, index) => (
+            <button type="button" role="tab" key={tab.name}
+              ref={(element) => { tabRefs.current[index] = element; }}
+              id={`${prefix}-tab-${index}`} aria-controls={`${prefix}-panel-${index}`}
+              aria-selected={active === index} tabIndex={active === index ? 0 : -1}
+              onKeyDown={(event) => onTabKey(event, index)} onClick={() => setActive(index)}>
+              <i className={`bi bi-${tab.icon}`} aria-hidden="true" />{tab.name}
+              {index === 1 && <span className="docs-tab-count">{docs.components.reduce((count, component) => count + component.props.length, 0)}</span>}
+            </button>
+          ))}
+        </div>
+        <section role="tabpanel" id={`${prefix}-panel-0`} aria-labelledby={`${prefix}-tab-0`} hidden={active !== 0} tabIndex={0}>
+          <div className="docs-preview-toolbar">
+            <span><span className="docs-status-dot" />Démo interactive</span>
+            <div className="docs-toolbar-actions">
+              <button type="button" aria-pressed={grid} onClick={() => setGrid(!grid)} title="Afficher la grille"><i className="bi bi-grid-3x3" aria-hidden="true" /><span className="docs-sr-only">Grille de fond</span></button>
+              <button type="button" aria-pressed={mobile} onClick={() => setMobile(!mobile)}><i className={`bi bi-${mobile ? "phone" : "display"}`} aria-hidden="true" />{mobile ? "Mobile" : "Desktop"}</button>
+              <button type="button" onClick={() => setRevision(revision + 1)} title="Réinitialiser la démo"><i className="bi bi-arrow-clockwise" aria-hidden="true" /><span className="docs-sr-only">Réinitialiser</span></button>
+            </div>
+          </div>
+          <div className={`docs-preview ${grid ? "docs-preview-grid" : ""}`}>
+            <div className={`docs-preview-frame ${mobile ? "is-mobile" : ""}`} key={revision}>{children}</div>
+          </div>
+          <div className="docs-preview-footer"><i className="bi bi-info-circle" aria-hidden="true" />Les composants ci-dessus sont les vrais composants du kit. Explorez leur API dans l'onglet suivant.</div>
+        </section>
+        <section role="tabpanel" id={`${prefix}-panel-1`} aria-labelledby={`${prefix}-tab-1`} hidden={active !== 1} tabIndex={0}>
+          {active === 1 && <div className="docs-api">
+            <div className="docs-api-intro">
+              <div><h2>Référence API</h2><p>Types extraits du code TypeScript. « — » indique un défaut non déclaré dans la signature.</p></div>
+              <label className="docs-search"><i className="bi bi-search" aria-hidden="true" /><span className="docs-sr-only">Filtrer les paramètres</span><input value={filter} onChange={(event) => setFilter(event.target.value)} placeholder="Chercher un paramètre..." /></label>
+            </div>
+            {docs.components.map((component) => <ApiReference component={component} filter={filter} key={`${component.source}-${component.name}`} />)}
+          </div>}
+        </section>
+        <section role="tabpanel" id={`${prefix}-panel-2`} aria-labelledby={`${prefix}-tab-2`} hidden={active !== 2} tabIndex={0}>
+          {active === 2 && <div className="docs-code-panel">
+            <div className="docs-code-toolbar"><span><i className="bi bi-filetype-tsx" aria-hidden="true" /> Exemple complet · TSX</span><button type="button" onClick={copyExample}><i className="bi bi-copy" aria-hidden="true" />Copier le code</button></div>
+            <p className="docs-note">Source exacte de la démo. Pour l'intégrer à votre projet, importez les composants publics depuis kelt-ui-kit-react.</p>
+            <p role="status" className="docs-copy-status">{copyStatus}</p>
+            <pre className="docs-code"><code>{docs.example}</code></pre>
+          </div>}
+        </section>
+      </div>
+      <p className="docs-page-footnote"><i className="bi bi-arrow-repeat" aria-hidden="true" />Documentation synchronisée avec les sources du kit.</p>
+    </div>
+  );
+}

package/src/docs/catalog.ts

@@ -0,0 +1,40 @@
+export const categories = ["Actions", "Formulaires", "Navigation", "Affichage", "Feedback"] as const;
+export type Category = typeof categories[number];
+
+export const catalog: Record<string, { category: Category; description: string; icon: string }> = {
+  "/buttons": { category: "Actions", icon: "cursor", description: "Des actions claires, avec icones, badges et menus contextuels." },
+  "/action": { category: "Actions", icon: "lightning", description: "Une action compacte et ses interactions." },
+  "/button-file": { category: "Actions", icon: "upload", description: "Selectionner un fichier depuis un bouton dedie." },
+  "/form": { category: "Formulaires", icon: "ui-checks", description: "Composer des formulaires dynamiques, sections et champs responsives." },
+  "/address-search": { category: "Formulaires", icon: "geo-alt", description: "Rechercher une adresse et exploiter ses donnees geographiques." },
+  "/select": { category: "Formulaires", icon: "chevron-expand", description: "Choisir une valeur parmi des options." },
+  "/text-area": { category: "Formulaires", icon: "textarea-t", description: "Saisir du texte sur plusieurs lignes." },
+  "/date-picker": { category: "Formulaires", icon: "calendar3", description: "Selectionner une date avec un calendrier." },
+  "/input-number": { category: "Formulaires", icon: "123", description: "Saisir et ajuster une valeur numerique." },
+  "/input-price": { category: "Formulaires", icon: "currency-euro", description: "Un champ dedie aux montants et aux prix." },
+  "/search": { category: "Formulaires", icon: "search", description: "Rechercher et filtrer des donnees." },
+  "/menus": { category: "Navigation", icon: "list", description: "Organiser les destinations de votre application." },
+  "/headers": { category: "Navigation", icon: "window", description: "Structurer l'en-tete et la navigation de retour." },
+  "/sidebar": { category: "Navigation", icon: "layout-sidebar", description: "Afficher un panneau lateral." },
+  "/sidebar-data": { category: "Navigation", icon: "layout-sidebar-inset", description: "Presenter des informations dans un panneau lateral." },
+  "/fil-ariane": { category: "Navigation", icon: "signpost", description: "Visualiser le chemin de navigation courant." },
+  "/tabs": { category: "Navigation", icon: "segmented-nav", description: "Repartir le contenu dans des onglets controles ou autonomes." },
+  "/expands": { category: "Affichage", icon: "arrows-expand", description: "Deplier des sections et organiser des contenus denses." },
+  "/grid": { category: "Affichage", icon: "grid-3x3", description: "Construire une mise en page avec des colonnes responsives." },
+  "/card": { category: "Affichage", icon: "card-heading", description: "Regrouper contenu, informations et actions dans une carte." },
+  "/damier": { category: "Affichage", icon: "grid", description: "Presenter des elements dans une grille de cellules." },
+  "/carousel": { category: "Affichage", icon: "images", description: "Parcourir une collection de contenus." },
+  "/badge": { category: "Affichage", icon: "patch-check", description: "Mettre en valeur un statut ou une information courte." },
+  "/data-table": { category: "Affichage", icon: "table", description: "Afficher des donnees, selections, colonnes et actions." },
+  "/icons": { category: "Affichage", icon: "stars", description: "Utiliser les icones Bootstrap et leurs tailles." },
+  "/toasters": { category: "Feedback", icon: "bell", description: "Declencher des notifications temporaires depuis le store." },
+  "/messages": { category: "Feedback", icon: "chat-square-text", description: "Communiquer un message et son niveau de severite." },
+  "/loader": { category: "Feedback", icon: "arrow-repeat", description: "Indiquer une operation en cours." },
+  "/modal": { category: "Feedback", icon: "window-stack", description: "Ouvrir un dialogue de confirmation ou de saisie." },
+  "/overlay": { category: "Feedback", icon: "layers", description: "Afficher un contenu contextuel avec OverlayProvider." },
+};
+
+export function matchesSearch(value: string, search: string) {
+  const normalize = (text: string) => text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+  return normalize(value).includes(normalize(search.trim()));
+}

package/src/docs/documentation.types.ts

@@ -0,0 +1,20 @@
+export type DocumentedProp = {
+  name: string;
+  type: string;
+  required: boolean;
+  defaultValue?: string;
+  description: string;
+};
+
+export type DocumentedComponent = {
+  name: string;
+  source: string;
+  signature: string;
+  props: DocumentedProp[];
+  types: { name: string; declaration: string }[];
+};
+
+export type ComponentDocumentation = {
+  components: DocumentedComponent[];
+  example: string;
+};

package/src/docs/virtual.d.ts

@@ -0,0 +1,7 @@
+declare module "virtual:ui-docs" {
+  const documentation: Record<
+    string,
+    import("./documentation.types").ComponentDocumentation
+  >;
+  export default documentation;
+}