@tsiky/components-r19 1.0.0

package/src/components/MetricsPanel/tools/chooseDefaultRender.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* chooseDefaultRender.ts
+   Retourne une fonction de rendu (RenderFn) compatible .ts (pas de JSX).
+*/
+import React from 'react';
+import ImageCard from '../renderers/ImageCard';
+import PertinenceCard from '../renderers/PertinenceCard';
+import CompactRenderer from '../renderers/CompactRenderer';
+import type { Preset } from './MetricsPanelTypes';
+import type { MetricsItem as ItemType } from './MetricsPanelTypes';
+
+export type RenderFn = (item: ItemType, index?: number) => React.ReactNode;
+
+const callCompactRenderer = (renderer: any, item: ItemType): React.ReactNode => {
+  try {
+    if (typeof renderer === 'function') {
+      const res = (renderer as any)(item);
+      if (res !== undefined) return res;
+    }
+  } catch {
+    /* empty */
+  }
+  try {
+    return React.createElement(renderer as any, { item });
+  } catch (e) {
+    console.warn('chooseDefaultRender: impossible de rendre CompactRenderer', e);
+    return null;
+  }
+};
+
+const chooseDefaultRender = (preset?: Preset): RenderFn | undefined => {
+  switch (preset) {
+    case 'image':
+      // React.createElement pour éviter le JSX dans un fichier .ts
+      return (item: ItemType) => React.createElement(ImageCard as any, { item });
+    case 'pertinence':
+      return (item: ItemType) => React.createElement(PertinenceCard as any, { item });
+    case 'alternateHorizontal':
+      return (item: ItemType) => callCompactRenderer(CompactRenderer as any, item);
+    case 'compact':
+      return (item: ItemType) => callCompactRenderer(CompactRenderer as any, item);
+    case 'summary':
+      return undefined;
+    case 'default':
+    default:
+      return undefined;
+  }
+};
+
+export default chooseDefaultRender;

package/src/components/MetricsPanel/tools/colorUtils.ts

@@ -0,0 +1,39 @@
+export const hexToRgba = (color: string | undefined | null, alpha = 1): string => {
+  if (!color || typeof color !== 'string') {
+    return `rgba(124, 58, 237, ${alpha})`;
+  }
+
+  const val = color.trim();
+
+  if (val.toLowerCase() === 'transparent') return 'rgba(0,0,0,0)';
+
+  if (/^rgba?\(/i.test(val)) {
+    if (/^rgba\(/i.test(val)) {
+      return val.replace(/rgba\(([^)]+),\s*([0-9.]+)\s*\)$/, (_, rgb) => {
+        const parts = rgb
+          .split(',')
+          .map((p: string) => p.trim())
+          .slice(0, 3)
+          .join(', ');
+        return `rgba(${parts}, ${alpha})`;
+      });
+    }
+    return val;
+  }
+
+  let cleaned = val.replace('#', '').toLowerCase();
+  if (cleaned.length === 3)
+    cleaned = cleaned
+      .split('')
+      .map((c) => c + c)
+      .join('');
+  if (!/^[0-9a-f]{6}$/i.test(cleaned)) {
+    return `rgba(124, 58, 237, ${alpha})`;
+  }
+
+  const r = parseInt(cleaned.slice(0, 2), 16);
+  const g = parseInt(cleaned.slice(2, 4), 16);
+  const b = parseInt(cleaned.slice(4, 6), 16);
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};

package/src/components/MetricsPanel/tools/index.ts

@@ -0,0 +1,2 @@
+export * from './colorUtils';
+export * from './MetricsPanelTypes';

package/src/components/ModuleHeader/ModuleHeader.css

@@ -0,0 +1,37 @@
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-info h1 {
+  font-size: var(--h3);
+  font-weight: var(--font-medium);
+  margin: 0 0 0.25rem 0;
+}
+
+.header-info p {
+  font-size: var(--text-small);
+  color: #6b7280;
+  margin: 0;
+}
+
+.add-key-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-primary);
+  border: none;
+  border-radius: 9999px;
+  font-weight: var(--font-medium);
+  font-size: var(--text-small);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  color: var(--color-text-on-primary);
+}
+
+.add-key-icon {
+  width: 1rem;
+  height: 1rem;
+}

package/src/components/ModuleHeader/ModuleHeader.stories.tsx

@@ -0,0 +1,37 @@
+// ModuleHeader.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { ModuleHeader } from './ModuleHeader';
+
+const meta: Meta<typeof ModuleHeader> = {
+  title: 'Components/ModuleHeader',
+  component: ModuleHeader,
+  tags: ['autodocs'],
+  args: {
+    title: 'Interface utilisateur',
+    keyCount: 5,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ModuleHeader>;
+
+export const Default: Story = {};
+
+export const WithManyKeys: Story = {
+  args: {
+    keyCount: 42,
+  },
+};
+
+export const CustomTitle: Story = {
+  args: {
+    title: 'Paramètres',
+    keyCount: 8,
+  },
+};
+
+export const WithAddKeyHandler: Story = {
+  args: {
+    onAddKey: () => alert('Nouvelle clé ajoutée 🚀'),
+  },
+};

package/src/components/ModuleHeader/ModuleHeader.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Plus } from 'lucide-react';
+import './ModuleHeader.css';
+import { AddItemModal } from '../AddItemModal/AddItemModal';
+
+interface ModuleHeaderProps {
+  title: string;
+  keyCount: number;
+  onAddKey?: (keyName: string) => void;
+}
+
+export const ModuleHeader: React.FC<ModuleHeaderProps> = ({ title, keyCount, onAddKey }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleSave = (values: Record<string, string | number>) => {
+    const keyName = values.key as string;
+    if (onAddKey && keyName) {
+      onAddKey(keyName);
+    }
+  };
+
+  return (
+    <div className='header-container'>
+      <div className='header-info'>
+        <h1>{title}</h1>
+        <p>{keyCount} clés</p>
+      </div>
+      <button onClick={() => setIsModalOpen(true)} className='add-key-button'>
+        <Plus className='add-key-icon' />
+        Clé
+      </button>
+
+      <AddItemModal
+        isOpen={isModalOpen}
+        title='Ajouter une clé'
+        onClose={() => setIsModalOpen(false)}
+        onSave={handleSave}
+        fields={[{ name: 'key', label: 'Nouvelle clé', placeholder: 'Entrer une nouvelle clé' }]}
+      />
+    </div>
+  );
+};

package/src/components/ModuleHeader/index.ts

@@ -0,0 +1 @@
+export * from './ModuleHeader';

package/src/components/ModuleSideBar/ModuleSideBar.css

@@ -0,0 +1,227 @@
+/* ModuleSideBar.css */
+
+/* Conteneur principal de la sidebar */
+.module-sidebar {
+  width: 100%;
+  min-height: 100vh;
+  background: var(--color-card-background);
+  border-radius: 6px;
+  padding: 8px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+  transition:
+    width 0.25s ease,
+    min-height 0.25s ease;
+}
+
+/* Header de la sidebar */
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--text-small);
+  font-weight: var(--font-semibold, var(--font-medium));
+  padding: 4px 2px;
+}
+
+/* Actions dans l'entête (FolderPlus + Menu) */
+.header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* Séparateur */
+.divider {
+  border: none;
+  border-top: 1px solid #ddd;
+  margin: 6px 0 10px;
+}
+
+/* Liste des modules */
+.module-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 8px;
+}
+
+/* Item individuel de la liste
+   largeur FIXE pour empêcher le débordement, box-sizing inclus */
+.module-item {
+  width: 100%; /* largeur fixe souhaitée */
+  box-sizing: border-box; /* inclut padding/border dans la largeur */
+  min-height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 10px;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+  overflow: hidden; /* évite tout débordement visuel */
+  background: transparent;
+}
+
+/* Hover / sélection */
+.module-item:hover {
+  border-color: var(--color-primary);
+}
+
+.module-item.selected {
+  border-color: var(--color-primary);
+  background-color: rgba(0, 143, 187, 0.08);
+}
+
+/* Partie gauche de l’item (icône + info)
+   min-width:0 et flex:1 permettent au contenu texte de shrink correctement */
+.module-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0; /* crucial pour permettre au texte de Wrap/Shrink */
+}
+
+/* Icône dossier : taille fixe */
+.item-folder {
+  flex: 0 0 auto;
+  margin-right: 8px;
+}
+
+/* Zone texte : autorise le retour à la ligne même sur mots longs */
+.module-info {
+  display: flex;
+  flex-direction: column;
+  overflow-wrap: anywhere; /* autorise le cassage sur mots sans espace */
+  word-break: break-word; /* fallback pour anciens navigateurs */
+  min-width: 0; /* permet au texte de shrink à l'intérieur */
+}
+
+/* Titre : autorise le wrap et garde la mise en forme */
+.module-title {
+  font-size: var(--text-small);
+  font-weight: var(--font-semibold, var(--font-medium));
+  white-space: normal; /* autorise retours à la ligne */
+  margin: 0;
+  line-height: 1.2;
+}
+
+/* Compteur à côté du titre */
+.module-title .count {
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  margin-left: 6px;
+}
+
+/* Sous-titre */
+.module-subtitle {
+  font-size: 0.75rem;
+  color: var(--color-muted, #6b7280);
+  margin-top: 4px;
+  line-height: 1.1;
+}
+
+/* Actions (icônes) : ne prennent pas trop d'espace */
+.module-actions {
+  display: flex;
+  gap: 6px;
+  flex: 0 0 auto;
+  margin-left: 8px;
+}
+
+/* Boutons d'action génériques */
+.action-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  transition: color 0.2s;
+}
+
+.action-btn:hover {
+  color: #2979ff;
+}
+
+/* petite marge entre icônes et texte pour lucide-react si besoin */
+.header-folder,
+.header-menu,
+.item-folder,
+.module-actions svg {
+  vertical-align: middle;
+}
+
+/* vue compacte (collapsed) : sidebar très étroite */
+.module-sidebar.collapsed {
+  width: 2.5rem; /* taille du panneau lorsqu'il devient juste un bouton */
+  min-height: auto;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+/* Contenu affiché en vue compacte (icone menu centrée) */
+.module-sidebar.collapsed .module-list,
+.module-sidebar.collapsed .sidebar-header + .divider,
+.module-sidebar.collapsed .sidebar-header .header-text {
+  display: none;
+}
+
+/* Icône de toggle dans la vue compacte */
+.menu-toggle {
+  cursor: pointer;
+  margin-top: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Règles responsive */
+
+/* Desktop (par défaut) : garde la min-height complète */
+@media (min-width: 769px) {
+  .module-sidebar {
+    min-height: 100vh;
+  }
+}
+
+/* Mobile : réduit la hauteur et supprime min-height casse */
+@media (max-width: 768px) {
+  .module-sidebar {
+    min-height: auto;
+    width: 100%;
+  }
+
+  /* Les module-items peuvent être moins larges sur mobile */
+  .module-item {
+    width: 100%; /* occupe la largeur disponible sur mobile */
+  }
+
+  .module-actions {
+    margin-left: 6px;
+  }
+
+  .module-title .count {
+    margin-left: 4px;
+  }
+}
+
+/* petites optimisations pour très petits écrans */
+@media (max-width: 420px) {
+  .module-subtitle {
+    font-size: 0.7rem;
+  }
+
+  .module-item {
+    padding: 8px;
+  }
+}

package/src/components/ModuleSideBar/ModuleSideBar.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ModuleSideBar } from './ModuleSideBar';
+import type { ModuleItem } from './ModuleSideBar';
+
+const meta: Meta<typeof ModuleSideBar> = {
+  title: 'Components/ModuleSideBar',
+  component: ModuleSideBar,
+};
+
+export default meta;
+type Story = StoryObj<typeof ModuleSideBar>;
+
+const modules: ModuleItem[] = [
+  {
+    id: '1',
+    title: 'Interface Utilisateur',
+    subtitle: 'Traductions pour l’interface principale',
+    count: 2,
+  },
+  {
+    id: '2',
+    title: 'Messages d’erreur',
+    subtitle: 'Messages d’erreur du système',
+    count: 1,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    modules,
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    modules,
+    onEdit: (id) => alert('Edit ' + id),
+    onDelete: (id) => alert('Delete ' + id),
+  },
+};

package/src/components/ModuleSideBar/ModuleSideBar.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { Folder, FolderPlus, Pencil, Trash2, Menu } from 'lucide-react';
+import { AddItemModal } from '../AddItemModal/AddItemModal';
+import './ModuleSideBar.css';
+import type { Translation } from '../TranslationKey';
+
+export interface TranslationData {
+  [key: string]: Translation[];
+}
+
+export interface ModuleItem {
+  id: string;
+  title: string;
+  subtitle: string;
+  translations: TranslationData;
+}
+
+interface ModuleSideBarProps {
+  modules: ModuleItem[];
+  onEdit?: (module: ModuleItem) => void;
+  onDelete?: (id: string) => void;
+  onAddModule?: (module: ModuleItem) => void;
+  onSelectModule?: (module: ModuleItem) => void;
+}
+
+export const ModuleSideBar: React.FC<ModuleSideBarProps> = ({
+  modules,
+  onEdit,
+  onDelete,
+  onAddModule,
+  onSelectModule,
+}) => {
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const [editingModule, setEditingModule] = useState<ModuleItem | null>(null);
+  const [selectedModuleId, setSelectedModuleId] = useState<string | null>(null);
+
+  // nouvel état pour "vue compacte"
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  // --- ADD ---
+  const handleAddClick = () => setIsAddModalOpen(true);
+  const handleCloseAddModal = () => setIsAddModalOpen(false);
+  const handleSaveAdd = (values: Record<string, string | number>) => {
+    if (onAddModule) {
+      const maxId = modules.reduce((max, m) => Math.max(max, parseInt(m.id, 10)), 0);
+      const newModule: ModuleItem = {
+        id: (maxId + 1).toString(),
+        title: values.title as string,
+        subtitle: values.subtitle as string,
+        translations: {},
+      };
+      onAddModule(newModule);
+    }
+    handleCloseAddModal();
+  };
+
+  // --- EDIT ---
+  const handleEditClick = (mod: ModuleItem) => setEditingModule(mod);
+  const handleCloseEditModal = () => setEditingModule(null);
+  const handleSaveEdit = (values: Record<string, string | number>) => {
+    if (editingModule && onEdit) {
+      const updatedModule: ModuleItem = {
+        ...editingModule,
+        title: values.title as string,
+        subtitle: values.subtitle as string,
+      };
+      onEdit(updatedModule);
+    }
+    handleCloseEditModal();
+  };
+
+  // --- SELECT ---
+  const handleSelect = (mod: ModuleItem) => {
+    setSelectedModuleId(mod.id);
+    if (onSelectModule) onSelectModule(mod);
+  };
+
+  if (isCollapsed) {
+    return (
+      <div className='module-sidebar collapsed'>
+        <Menu size={20} className='menu-toggle' onClick={() => setIsCollapsed(false)} />
+      </div>
+    );
+  }
+
+  return (
+    <div className='module-sidebar'>
+      {/* Header */}
+      <div className='sidebar-header'>
+        <span className='header-text'>Modules ({modules.length})</span>
+        <div className='header-actions'>
+          <FolderPlus size={18} className='header-folder' onClick={handleAddClick} />
+          <Menu size={18} className='header-menu' onClick={() => setIsCollapsed(true)} />
+        </div>
+      </div>
+      <hr className='divider' />
+
+      {/* Liste des modules */}
+      <div className='module-list'>
+        {modules.map((mod) => (
+          <div
+            key={mod.id}
+            className={`module-item ${mod.id === selectedModuleId ? 'selected' : ''}`}
+            onClick={() => handleSelect(mod)}
+          >
+            <div className='module-left'>
+              <Folder size={16} className='item-folder' />
+              <div className='module-info'>
+                <div className='module-title'>
+                  {mod.title} <span className='count'>{Object.keys(mod.translations).length}</span>
+                </div>
+                <div className='module-subtitle'>{mod.subtitle}</div>
+              </div>
+            </div>
+
+            <div className='module-actions'>
+              {onEdit && <Pencil onClick={() => handleEditClick(mod)} color='#777' size={16} />}
+              {onDelete && <Trash2 onClick={() => onDelete(mod.id)} color='#777' size={16} />}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Modal d'ajout */}
+      <AddItemModal
+        isOpen={isAddModalOpen}
+        onClose={handleCloseAddModal}
+        onSave={handleSaveAdd}
+        title='Ajouter un module'
+        fields={[
+          { name: 'title', label: 'Titre', placeholder: 'Titre du module' },
+          { name: 'subtitle', label: 'Sous-titre', placeholder: 'Sous-titre' },
+        ]}
+      />
+
+      {/* Modal d'édition */}
+      {editingModule && (
+        <AddItemModal
+          isOpen={!!editingModule}
+          onClose={handleCloseEditModal}
+          onSave={handleSaveEdit}
+          title='Éditer le module'
+          initialValues={{
+            title: editingModule.title,
+            subtitle: editingModule.subtitle,
+          }}
+          fields={[
+            { name: 'title', label: 'Titre', placeholder: 'Titre du module' },
+            { name: 'subtitle', label: 'Sous-titre', placeholder: 'Sous-titre' },
+          ]}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/ModuleSideBar/index.ts

@@ -0,0 +1 @@
+export * from './ModuleSideBar';

package/src/components/NavBar/NavBar.css

@@ -0,0 +1,58 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.navbar-mobile {
+  position: relative;
+}
+
+.navbar-dropdown-toggle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: none;
+}
+
+.dropdown-arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid currentColor;
+  transition: transform 0.3s ease;
+}
+
+.dropdown-arrow.open {
+  transform: rotate(180deg);
+}
+
+.navbar-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-top: none;
+  border-radius: 8px;
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.navbar-dropdown .nav-item {
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #eee;
+  box-sizing: border-box;
+  border-radius: 0;
+}
+
+.navbar-dropdown .nav-item:last-child {
+  border-bottom: none;
+}