@tsiky/components-r19 1.0.0 → 1.1.0

package/src/components/TranslationKey/TranslationKey.tsx

@@ -1,245 +1,265 @@
-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>
-  );
-};
+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/TrendList/TrendList.tsx

@@ -1,45 +1,72 @@
-import React from 'react';
-import './TrendList.css';
-import { TrendItem } from '../TrendItem/TrendItem';
-import type { TrendItemProps } from '../TrendItem/TrendItem';
-
-type TrendListProps = {
-  items: TrendItemProps[];
-  header?: string;
-  headerStyle?: React.CSSProperties;
-  listStyle?: React.CSSProperties;
-  size?: number | string;
-  gap?: number;
-  className?: string;
-  background?: string; // Nouvelle prop pour le background
-};
-
-export const TrendList: React.FC<TrendListProps> = ({
-  items,
-  header = 'Tendance',
-  headerStyle,
-  listStyle,
-  size,
-  gap,
-  className = '',
-  background = 'var(--color-card-background)',
-}) => {
-  return (
-    <div
-      className={`trend-list ${className}`}
-      style={{
-        width: size,
-        gap: `${gap}px`,
-        background,
-        ...listStyle,
-      }}
-    >
-      <h3 className='trend-header' style={headerStyle}>
-        {header}
-      </h3>
-      {items.map((item, idx) => (
-        <TrendItem key={idx} {...item} />
-      ))}
-    </div>
-  );
-};
+import React from 'react';
+import './TrendList.css';
+import { TrendItem } from '../TrendItem/TrendItem';
+import type { TrendItemProps } from '../TrendItem/TrendItem';
+import { Move } from 'lucide-react';
+
+type TrendListProps = {
+  items: TrendItemProps[];
+  header?: string;
+  headerStyle?: React.CSSProperties;
+  listStyle?: React.CSSProperties;
+  size?: number | string;
+  gap?: number;
+  className?: string;
+  background?: string;
+  draggable?: boolean; // nouvelle prop
+};
+
+export const TrendList: React.FC<TrendListProps> = ({
+  items,
+  header = 'Tendance',
+  headerStyle,
+  listStyle,
+  size,
+  gap = 0,
+  className = '',
+  background = 'var(--color-card-background)',
+  draggable = false,
+}) => {
+  return (
+    <div
+      className={`trend-list ${className}`}
+      style={{
+        width: size,
+        gap: `${gap}px`,
+        background,
+        position: 'relative', // nécessaire pour overlay
+        ...listStyle,
+      }}
+    >
+      <h3 className='trend-header' style={headerStyle}>
+        {header}
+      </h3>
+
+      {/* Liste réelle */}
+      <div style={{ opacity: draggable ? 0 : 1 }}>
+        {items.map((item, idx) => (
+          <TrendItem key={idx} {...item} />
+        ))}
+      </div>
+
+      {/* Overlay Move */}
+      {draggable && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none', // laisse passer les événements si nécessaire
+          }}
+        >
+          <Move size={48} strokeWidth={1.5} style={{ opacity: 0.8 }} />
+        </div>
+      )}
+    </div>
+  );
+};