@tsiky/components-r19 1.0.0

package/src/components/TranslationKey/TranslationKey.css

@@ -0,0 +1,272 @@
+.translation-card {
+  background: var(--color-card-background);
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  border: 1px solid var(--color-border);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+}
+
+.card-title {
+  font-family: var(--font-primary);
+  font-weight: var(--font-medium);
+  font-size: var(--text-paragraph);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.action-button {
+  font-family: var(--font-primary);
+  font-weight: var(--font-normal);
+  font-size: var(--text-small);
+  padding: 0.375rem;
+  color: #9ca3af;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.action-button:hover {
+  color: #6b7280;
+}
+
+.action-button.delete:hover {
+  color: #ef4444;
+}
+
+.action-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.translations-container {
+  padding: 1.5rem;
+}
+
+.translation-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--color-content-background);
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.language-code {
+  font-family: var(--font-primary);
+  font-weight: var(--font-medium);
+  font-size: var(--text-small);
+  width: 2rem;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.translation-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.translation-text {
+  font-family: var(--font-primary);
+  font-weight: var(--font-normal);
+  font-size: var(--text-small);
+  flex: 1;
+}
+
+.edit-input,
+.translation-input,
+.language-select {
+  font-family: var(--font-primary);
+  font-weight: var(--font-normal);
+  font-size: var(--text-small);
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  outline: none;
+  background-color: var(--color-content-background);
+  color: var(--color-text);
+}
+.save-button,
+.add-button,
+.show-add-button {
+  font-family: var(--font-primary);
+  font-weight: var(--font-medium);
+  font-size: var(--text-xs);
+}
+
+.save-button {
+  padding: 0.375rem 0.75rem;
+  background-color: var(--color-primary);
+  color: var(--color-text-on-primary);
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.save-button:hover {
+  background-color: var(--color-primary);
+}
+
+.cancel-button,
+.edit-button,
+.delete-translation-button {
+  font-family: var(--font-primary);
+  font-weight: var(--font-normal);
+  font-size: var(--text-small);
+}
+
+.cancel-button {
+  padding: 0.375rem;
+  color: #9ca3af;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.cancel-button:hover,
+.edit-button:hover {
+  color: #6b7280;
+}
+
+.edit-button {
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s;
+  opacity: 0;
+}
+
+.translation-row:hover .edit-button {
+  opacity: 1;
+}
+
+.delete-translation-button {
+  padding: 0.25rem;
+  color: #9ca3af;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.delete-translation-button:hover {
+  color: #ef4444;
+}
+
+.add-language-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.add-language-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.language-select-container {
+  position: relative;
+  flex: 1;
+  min-width: 150px;
+}
+
+.select-chevron {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  color: #9ca3af;
+  pointer-events: none;
+}
+
+.plus-icon {
+  font-family: var(--font-primary);
+  font-size: var(--text-lg);
+}
+
+@media (max-width: 640px) {
+  .add-language-content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .language-select-container,
+  .translation-input {
+    min-width: 100%;
+  }
+}
+.show-add-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+}
+
+.show-add-button:hover {
+  border-bottom: 1px solid var(--color-primary);
+}
+
+input {
+  color: var(--color-text);
+}
+
+.collapse-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  margin-right: 0.5rem;
+  display: flex;
+  align-items: center;
+  color: #9ca3af;
+  transition: color 0.2s;
+}
+
+.collapse-button:hover {
+  color: #6b7280;
+}
+
+.collapse-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}

package/src/components/TranslationKey/TranslationKey.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TranslationKey } from './TranslationKey';
+
+const meta: Meta<typeof TranslationKey> = {
+  title: 'Components/TranslationKey',
+  component: TranslationKey,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TranslationKey>;
+
+const sampleTranslations = [
+  { language: 'en', value: 'Hello' },
+  { language: 'fr', value: 'Bonjour' },
+];
+
+const sampleLanguages = [
+  { code: 'en', name: 'English' },
+  { code: 'fr', name: 'Français' },
+  { code: 'es', name: 'Español' },
+];
+
+export const Default: Story = {
+  args: {
+    keyName: 'greeting',
+    translations: sampleTranslations,
+    availableLanguages: sampleLanguages,
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    keyName: 'welcome_message',
+    translations: sampleTranslations,
+    availableLanguages: sampleLanguages,
+    onDeleteKey: (key) => alert(`Deleted key: ${key}`),
+    onEditTranslation: (key, lang, value) => alert(`Edited ${lang} in ${key}: ${value}`),
+    onDeleteTranslation: (key, lang) => alert(`Deleted translation ${lang} in ${key}`),
+    onAddTranslation: (key, lang, value) => alert(`Added ${lang} in ${key}: ${value}`),
+  },
+};
+
+export const EmptyTranslations: Story = {
+  args: {
+    keyName: 'new_key',
+    translations: [],
+    availableLanguages: sampleLanguages,
+  },
+};

package/src/components/TranslationKey/TranslationKey.tsx

@@ -0,0 +1,245 @@
+import React, { useState } from 'react';
+import { Edit3, Trash2, X, ChevronDown, ChevronRight } from 'lucide-react';
+import './TranslationKey.css';
+import { AddItemModal } from '../AddItemModal/AddItemModal';
+
+export interface Translation {
+  language: string;
+  value: string;
+}
+
+interface TranslationKeyProps {
+  keyName: string;
+  translations: Translation[];
+  availableLanguages: { code: string; name: string }[];
+  onDeleteKey?: (keyName: string) => void;
+  onEditKey?: (oldKey: string, newKey: string) => void; // <- nouvelle prop
+  onEditTranslation?: (keyName: string, language: string, newValue: string) => void;
+  onDeleteTranslation?: (keyName: string, language: string) => void;
+  onAddTranslation?: (keyName: string, language: string, value: string) => void;
+}
+
+export const TranslationKey: React.FC<TranslationKeyProps> = ({
+  keyName,
+  translations,
+  availableLanguages,
+  onDeleteKey,
+  onEditKey,
+  onEditTranslation,
+  onDeleteTranslation,
+  onAddTranslation,
+}) => {
+  const [showAddLanguage, setShowAddLanguage] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] = useState('');
+  const [editingTranslation, setEditingTranslation] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+  const [newTranslationValue, setNewTranslationValue] = useState('');
+
+  // état pour le modal de renommage de la clé
+  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);
+
+  // état pour replier/déplier
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const usedLanguages = translations.map((t) => t.language);
+  const availableToAdd = availableLanguages.filter((lang) => !usedLanguages.includes(lang.code));
+
+  const handleAddTranslation = () => {
+    if (selectedLanguage && newTranslationValue.trim()) {
+      onAddTranslation?.(keyName, selectedLanguage, newTranslationValue.trim());
+      setSelectedLanguage('');
+      setNewTranslationValue('');
+      setShowAddLanguage(false);
+    }
+  };
+
+  const handleEditStart = (language: string, currentValue: string) => {
+    setEditingTranslation(language);
+    setEditValue(currentValue);
+  };
+
+  const handleEditSave = (language: string) => {
+    onEditTranslation?.(keyName, language, editValue);
+    setEditingTranslation(null);
+    setEditValue('');
+  };
+
+  const handleEditCancel = () => {
+    setEditingTranslation(null);
+    setEditValue('');
+  };
+
+  const handleRenameSave = (values: Record<string, string | number>) => {
+    const newName = (values.name as string)?.trim();
+    if (!newName) return;
+    if (newName === keyName) {
+      setIsRenameModalOpen(false);
+      return;
+    }
+    onEditKey?.(keyName, newName);
+    setIsRenameModalOpen(false);
+  };
+
+  return (
+    <div className='translation-card'>
+      {/* Header */}
+      <div className='card-header'>
+        <div className='header-left'>
+          {/* Toggle button aligné à gauche */}
+          <button
+            className='collapse-button'
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            title={isCollapsed ? 'Déplier' : 'Replier'}
+          >
+            {isCollapsed ? (
+              <ChevronRight className='collapse-icon' />
+            ) : (
+              <ChevronDown className='collapse-icon' />
+            )}
+          </button>
+
+          <h3 className='card-title'>{keyName}</h3>
+        </div>
+
+        <div className='header-actions'>
+          <button
+            className='action-button'
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsRenameModalOpen(true);
+            }}
+            title='Renommer la clé'
+          >
+            <Edit3 className='action-icon' />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onDeleteKey?.(keyName);
+            }}
+            className='action-button delete'
+            title='Supprimer la clé'
+          >
+            <Trash2 className='action-icon' />
+          </button>
+        </div>
+      </div>
+
+      {/* Contenu (masqué si replié) */}
+      {!isCollapsed && (
+        <div className='translations-container'>
+          {translations.map((translation) => (
+            <div key={translation.language} className='translation-row'>
+              <div className='language-code'>{translation.language}</div>
+              <div className='translation-content'>
+                {editingTranslation === translation.language ? (
+                  <>
+                    <input
+                      type='text'
+                      value={editValue}
+                      onChange={(e) => setEditValue(e.target.value)}
+                      className='edit-input'
+                      autoFocus
+                    />
+                    <button
+                      onClick={() => handleEditSave(translation.language)}
+                      className='save-button'
+                    >
+                      Enregistrer
+                    </button>
+                    <button onClick={handleEditCancel} className='cancel-button'>
+                      <X className='action-icon' />
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <span className='translation-text'>{translation.value}</span>
+                    <button
+                      onClick={() => handleEditStart(translation.language, translation.value)}
+                      className='edit-button'
+                      title='Éditer la traduction'
+                    >
+                      <Edit3 className='action-icon' />
+                    </button>
+                    <button
+                      onClick={() => onDeleteTranslation?.(keyName, translation.language)}
+                      className='delete-translation-button'
+                      title='Supprimer la traduction'
+                    >
+                      <X className='action-icon' />
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          ))}
+
+          {/* Add language */}
+          {showAddLanguage ? (
+            <div className='add-language-row'>
+              <div className='language-code'></div>
+              <div className='add-language-content'>
+                <div className='language-select-container'>
+                  <select
+                    value={selectedLanguage}
+                    onChange={(e) => setSelectedLanguage(e.target.value)}
+                    className='language-select'
+                  >
+                    <option value=''>Sélectionnez la langue</option>
+                    {availableToAdd.map((lang) => (
+                      <option key={lang.code} value={lang.code}>
+                        {lang.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                {selectedLanguage && (
+                  <input
+                    type='text'
+                    value={newTranslationValue}
+                    onChange={(e) => setNewTranslationValue(e.target.value)}
+                    placeholder='Entrez la traduction...'
+                    className='translation-input'
+                  />
+                )}
+                <button
+                  onClick={handleAddTranslation}
+                  disabled={!selectedLanguage || !newTranslationValue.trim()}
+                  className='show-add-button'
+                >
+                  <span className='plus-icon'>+</span>
+                  Ajouter
+                </button>
+                <button
+                  onClick={() => {
+                    setShowAddLanguage(false);
+                    setSelectedLanguage('');
+                    setNewTranslationValue('');
+                  }}
+                  className='cancel-button'
+                >
+                  <X className='action-icon' />
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button onClick={() => setShowAddLanguage(true)} className='show-add-button'>
+              <span className='plus-icon'>+</span>
+              Ajouter
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Modal pour renommer la clé */}
+      <AddItemModal
+        isOpen={isRenameModalOpen}
+        onClose={() => setIsRenameModalOpen(false)}
+        onSave={handleRenameSave}
+        title='Renommer la clé'
+        initialValues={{ name: keyName }}
+        fields={[{ name: 'name', label: 'Nom de la clé', placeholder: 'Nom de la clé' }]}
+      />
+    </div>
+  );
+};

package/src/components/TranslationKey/index.ts

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

package/src/components/TrendItem/TrendItem.css

@@ -0,0 +1,36 @@
+.trend-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: 8px;
+  min-height: 40px;
+}
+
+.trend-item:last-child {
+  border-bottom: none;
+}
+
+.trend-texts {
+  display: flex;
+  flex-direction: column;
+}
+
+.trend-title {
+  font-weight: var(--font-medium);
+  font-size: var(--text-paragraph);
+}
+
+.trend-subtitle {
+  font-weight: var(--font-normal);
+  font-size: var(--text-small);
+  color: gray;
+}
+
+.trend-right {
+  font-weight: var(--font-semibold);
+  font-size: var(--text-small);
+}
+.trend-right-right {
+  font-weight: var(--font-bold);
+}