@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/TranslationKey/TranslationKey.css

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

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

@@ -1,266 +0,0 @@
-import React, { useState } from 'react';
-import { Edit3, Trash2, X, ChevronDown, ChevronRight, Move } 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;
-  draggable?: boolean;
-}
-
-export const TranslationKey: React.FC<TranslationKeyProps> = ({
-  keyName,
-  translations,
-  availableLanguages,
-  onDeleteKey,
-  onEditKey,
-  onEditTranslation,
-  onDeleteTranslation,
-  onAddTranslation,
-  draggable = false,
-}) => {
-  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' style={{ position: 'relative' }}>
-      {/* Header toujours visible */}
-      <div className='card-header'>
-        <div className='header-left'>
-          <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 (overlay draggable si nécessaire) */}
-      <div className='translations-container' style={{ opacity: draggable ? 0 : 1 }}>
-        {!isCollapsed && !draggable && (
-          <>
-            {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>
-
-      {/* Overlay Move */}
-      {draggable && (
-        <div
-          style={{
-            position: 'absolute',
-            top: 40, // pour laisser le header visible
-            left: 0,
-            width: '100%',
-            height: 'calc(100% - 40px)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            pointerEvents: 'none',
-          }}
-        >
-          <Move size={32} strokeWidth={1.5} style={{ opacity: 0.8 }} />
-        </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

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

package/src/components/TrendItem/TrendItem.css

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