feat: add tranlations to edito components

Author: david-roper

apps/playground/src/components/Editor/Editor.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { extractInputFileExtension } from '@opendatacapture/instrument-bundler';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { Columns3Icon, FilePlusIcon, FileUpIcon } from 'lucide-react';
 import { motion } from 'motion/react';
 import { useShallow } from 'zustand/react/shallow';
@@ -29,6 +30,7 @@ export const Editor = () => {
 
   const [isFileUploadDialogOpen, setIsFileUploadDialogOpen] = useState(false);
   const [isDeleteFileDialogOpen, setIsDeleteFileDialogOpen] = useState(false);
+  const { t } = useTranslation();
 
   const addFile = useAppStore((store) => store.addFile);
   const addFiles = useAppStore((store) => store.addFiles);
@@ -77,18 +79,22 @@ export const Editor = () => {
   return (
     <div className="flex h-full w-full flex-col border border-r-0 bg-slate-50 dark:bg-slate-800">
       <div className="flex w-full border-b">
-        <EditorButton icon={<Columns3Icon />} tip="View Files" onClick={() => setIsSidebarOpen(!isSidebarOpen)} />
+        <EditorButton
+          icon={<Columns3Icon />}
+          tip={t({ en: 'View Files', fr: 'Voir les fichiers' })}
+          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+        />
         <EditorButton
           icon={<FilePlusIcon />}
-          tip="Add File"
+          tip={t({ en: 'Add File', fr: 'Ajouter un fichier' })}
           onClick={() => {
             setIsSidebarOpen(true);
             setIsAddingFile(true);
           }}
         />
         <EditorButton
           icon={<FileUpIcon />}
-          tip="Upload Files"
+          tip={t({ en: 'Upload Files', fr: 'Téléverser des fichiers' })}
           onClick={() => {
             setIsFileUploadDialogOpen(true);
           }}
@@ -135,7 +141,9 @@ export const Editor = () => {
         {openFilenames.length ? (
           <EditorPane ref={editorPaneRef} onEditorMount={() => setIsEditorMounted(true)} />
         ) : (
-          <EditorPanePlaceholder>No File Selected</EditorPanePlaceholder>
+          <EditorPanePlaceholder>
+            {t({ en: 'No File Selected', fr: 'Aucun fichier sélectionné' })}
+          </EditorPanePlaceholder>
         )}
       </div>
       <DeleteFileDialog
@@ -157,7 +165,7 @@ export const Editor = () => {
         }}
         isOpen={isFileUploadDialogOpen}
         setIsOpen={setIsFileUploadDialogOpen}
-        title="Upload Files"
+        title={t({ en: 'Upload Files', fr: 'Téléverser des fichiers' })}
         onSubmit={async (files) => {
           const editorFiles = await loadEditorFilesFromNative(files);
           addFiles(editorFiles);
@@ -166,7 +174,10 @@ export const Editor = () => {
         onValidate={(files: File[]) => {
           for (const file of files) {
             if (filenames.includes(file.name)) {
-              return { message: `File already exists: ${file.name}`, result: 'error' };
+              return {
+                message: t({ en: `File already exists: ${file.name}`, fr: `Le fichier existe déjà : ${file.name}` }),
+                result: 'error'
+              };
             }
           }
           return { result: 'success' };

apps/playground/src/components/Editor/EditorFileButton.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { useOnClickOutside } from '@douglasneuroinformatics/libui/hooks';
+import { useOnClickOutside, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { cn } from '@douglasneuroinformatics/libui/utils';
 import { PencilIcon, TrashIcon } from 'lucide-react';
 
@@ -23,6 +23,7 @@ export const EditorFileButton = ({ filename, isActive, onDelete }: EditorFileBut
   const [displayFilename, setDisplayFilename] = useState(filename);
   const [isRenaming, setIsRenaming] = useState(false);
   const renameFile = useAppStore((store) => store.renameFile);
+  const { t } = useTranslation();
 
   const rename = () => {
     renameFile(filename, displayFilename);
@@ -79,15 +80,15 @@ export const EditorFileButton = ({ filename, isActive, onDelete }: EditorFileBut
           }}
         >
           <TrashIcon />
-          <span className="ml-2 text-sm">Delete</span>
+          <span className="ml-2 text-sm">{t({ en: 'Delete', fr: 'Supprimer' })}</span>
         </ContextMenu.Item>
         <ContextMenu.Item
           onSelect={() => {
             setIsRenaming(true);
           }}
         >
           <PencilIcon />
-          <span className="ml-2 text-sm">Rename</span>
+          <span className="ml-2 text-sm">{t({ en: 'Rename', fr: 'Renommer' })}</span>
         </ContextMenu.Item>
       </ContextMenu.Content>
     </ContextMenu>

apps/playground/src/components/Editor/EditorPane.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 
-import { useTheme } from '@douglasneuroinformatics/libui/hooks';
+import { useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import MonacoEditor from '@monaco-editor/react';
 
 import { useFilesRef } from '@/hooks/useFilesRef';
@@ -29,6 +29,7 @@ export const EditorPane = React.forwardRef<EditorPaneRef, EditorPaneProps>(funct
 
   const [theme] = useTheme();
   const [isMounted, setIsMounted] = useState(false);
+  const { t } = useTranslation();
   const { libs } = useRuntime('v1');
 
   const editorRef = useRef<MonacoEditorType | null>(null);
@@ -112,12 +113,18 @@ export const EditorPane = React.forwardRef<EditorPaneRef, EditorPaneProps>(funct
   };
 
   if (!defaultFile) {
-    return <EditorPanePlaceholder>No File Selected</EditorPanePlaceholder>;
+    return (
+      <EditorPanePlaceholder>{t({ en: 'No File Selected', fr: 'Aucun fichier sélectionné' })}</EditorPanePlaceholder>
+    );
   }
 
   const fileType = inferFileType(defaultFile.name);
   if (!fileType) {
-    return <EditorPanePlaceholder>{`Error: Invalid file type "${fileType}"`}</EditorPanePlaceholder>;
+    return (
+      <EditorPanePlaceholder>
+        {t({ en: `Error: Invalid file type "${fileType}"`, fr: `Erreur : Type de fichier invalide "${fileType}"` })}
+      </EditorPanePlaceholder>
+    );
   } else if (fileType === 'asset') {
     if (isBase64EncodedFileType(defaultFile.name)) {
       return (
@@ -130,7 +137,11 @@ export const EditorPane = React.forwardRef<EditorPaneRef, EditorPaneProps>(funct
         </div>
       );
     }
-    return <EditorPanePlaceholder>Cannot Display Binary Asset</EditorPanePlaceholder>;
+    return (
+      <EditorPanePlaceholder>
+        {t({ en: 'Cannot Display Binary Asset', fr: "Impossible d'afficher l'actif binaire" })}
+      </EditorPanePlaceholder>
+    );
   }
 
   return (