@tsiky/components-r19 1.3.0 → 1.3.1

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

@@ -1,39 +0,0 @@
-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/ModuleHeader/ModuleHeader.css

@@ -1,37 +0,0 @@
-.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

@@ -1,37 +0,0 @@
-// 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

@@ -1,42 +0,0 @@
-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

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

package/src/components/ModuleSideBar/ModuleSideBar.css

@@ -1,227 +0,0 @@
-/* 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

@@ -1,40 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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

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

package/src/components/NavBar/NavBar.css

@@ -1,58 +0,0 @@
-.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;
-}