feat: add translations to dialogs in playground

Author: david-roper

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

@@ -1,4 +1,5 @@
 import { Button, Dialog } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 
 import { useAppStore } from '@/store';
 
@@ -10,12 +11,23 @@ export type DeleteFileDialogProps = {
 
 export const DeleteFileDialog = ({ filename, isOpen, setIsOpen }: DeleteFileDialogProps) => {
   const deleteFile = useAppStore((store) => store.deleteFile);
+  const { t } = useTranslation();
   return filename ? (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Content>
         <Dialog.Header>
-          <Dialog.Title>{`Are you sure you want to delete "${filename}"?`}</Dialog.Title>
-          <Dialog.Description>Once deleted, this file cannot be restored</Dialog.Description>
+          <Dialog.Title>
+            {t({
+              en: `Are you sure you want to delete "${filename}"?`,
+              fr: `Êtes-vous sûr de vouloir supprimer "${filename}" ?`
+            })}
+          </Dialog.Title>
+          <Dialog.Description>
+            {t({
+              en: 'Once deleted, this file cannot be restored',
+              fr: 'Une fois supprimé, ce fichier ne peut plus être restauré'
+            })}
+          </Dialog.Description>
         </Dialog.Header>
         <Dialog.Footer>
           <Button
@@ -25,10 +37,10 @@ export const DeleteFileDialog = ({ filename, isOpen, setIsOpen }: DeleteFileDial
               setIsOpen(false);
             }}
           >
-            Delete
+            {t({ en: 'Delete', fr: 'Supprimer' })}
           </Button>
           <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
-            Cancel
+            {t({ en: 'Cancel', fr: 'Annuler' })}
           </Button>
         </Dialog.Footer>
       </Dialog.Content>

apps/playground/src/components/FileUploadDialog/FileUploadDialog.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 
 import { Button, Dialog } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { CloudUploadIcon } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 import type { FileRejection } from 'react-dropzone';
@@ -20,11 +21,12 @@ export type FileUploadDialogProps = {
 export const FileUploadDialog = ({ accept, isOpen, onSubmit, onValidate, setIsOpen, title }: FileUploadDialogProps) => {
   const [files, setFiles] = useState<File[]>([]);
   const [errorMessage, setErrorMessage] = useState<null | string>(null);
+  const { t } = useTranslation();
 
   const handleDrop = useCallback(
     (acceptedFiles: File[], rejections: FileRejection[]) => {
       for (const { errors, file } of rejections) {
-        setErrorMessage(`Invalid file type: ${file.name} `);
+        setErrorMessage(t({ en: `Invalid file type: ${file.name} `, fr: `Type de fichier invalide : ${file.name} ` }));
         console.error(errors);
         return;
       }
@@ -65,9 +67,15 @@ export const FileUploadDialog = ({ accept, isOpen, onSubmit, onValidate, setIsOp
   } else if (files.length === 1) {
     dropzoneText = files[0]!.name;
   } else if (isDragActive) {
-    dropzoneText = 'Release your cursor to upload file(s)';
+    dropzoneText = t({
+      en: 'Release your cursor to upload file(s)',
+      fr: 'Relâchez votre curseur pour téléverser le(s) fichier(s)'
+    });
   } else {
-    dropzoneText = 'Click here to upload, or drag and drop files into this area';
+    dropzoneText = t({
+      en: 'Click here to upload, or drag and drop files into this area',
+      fr: 'Cliquez ici pour téléverser, ou glissez et déposez des fichiers dans cette zone'
+    });
   }
 
   return (
@@ -94,7 +102,7 @@ export const FileUploadDialog = ({ accept, isOpen, onSubmit, onValidate, setIsOp
             type="button"
             onClick={() => void submitFiles(files)}
           >
-            Submit
+            {t({ en: 'Submit', fr: 'Soumettre' })}
           </Button>
         </Dialog.Footer>
       </Dialog.Content>

apps/playground/src/components/Header/ActionsDropdown/DeleteInstrumentDialog.tsx

@@ -1,5 +1,5 @@
 import { Button, Dialog } from '@douglasneuroinformatics/libui/components';
-import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import { useNotificationsStore, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 
 import { useAppStore } from '@/store';
 
@@ -12,27 +12,36 @@ export const DeleteInstrumentDialog = ({ isOpen, setIsOpen }: DeleteInstrumentDi
   const addNotification = useNotificationsStore((store) => store.addNotification);
   const removeInstrument = useAppStore((store) => store.removeInstrument);
   const selectedInstrument = useAppStore((store) => store.selectedInstrument);
+  const { t } = useTranslation();
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Content>
         <Dialog.Header>
-          <Dialog.Title>Are you absolutely sure?</Dialog.Title>
-          <Dialog.Description>This instrument will be deleted from local storage.</Dialog.Description>
+          <Dialog.Title>{t({ en: 'Are you absolutely sure?', fr: 'Êtes-vous absolument sûr ?' })}</Dialog.Title>
+          <Dialog.Description>
+            {t({
+              en: 'This instrument will be deleted from local storage.',
+              fr: 'Cet instrument sera supprimé du stockage local.'
+            })}
+          </Dialog.Description>
         </Dialog.Header>
         <Dialog.Footer>
           <Button
             variant="danger"
             onClick={() => {
               removeInstrument(selectedInstrument.id);
-              addNotification({ message: 'This instrument has been deleted', type: 'success' });
+              addNotification({
+                message: t({ en: 'This instrument has been deleted', fr: 'Cet instrument a été supprimé' }),
+                type: 'success'
+              });
               setIsOpen(false);
             }}
           >
-            Delete
+            {t({ en: 'Delete', fr: 'Supprimer' })}
           </Button>
           <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
-            Cancel
+            {t({ en: 'Cancel', fr: 'Annuler' })}
           </Button>
         </Dialog.Footer>
       </Dialog.Content>

apps/playground/src/components/Header/ActionsDropdown/LoginDialog.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 
 import { asyncResultify } from '@douglasneuroinformatics/libjs';
 import { Dialog, Form } from '@douglasneuroinformatics/libui/components';
-import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import { useNotificationsStore, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { $LoginCredentials } from '@opendatacapture/schemas/auth';
 import axios from 'axios';
 import { CheckIcon, XIcon } from 'lucide-react';
@@ -35,6 +35,7 @@ export const LoginDialog = ({ isOpen, setIsOpen }: LoginDialogProps) => {
   const revalidateToken = useAppStore((store) => store.revalidateToken);
 
   const addNotification = useNotificationsStore((store) => store.addNotification);
+  const { t } = useTranslation();
 
   useEffect(() => {
     revalidateToken();
@@ -88,7 +89,11 @@ export const LoginDialog = ({ isOpen, setIsOpen }: LoginDialogProps) => {
     updateSettings({ apiBaseUrl });
     const adminTokenResult = await getAdminToken(credentials, apiBaseUrl);
     if (adminTokenResult.isErr()) {
-      addNotification({ type: 'error', title: 'Login Failed', message: adminTokenResult.error });
+      addNotification({
+        type: 'error',
+        title: t({ en: 'Login Failed', fr: 'Échec de la connexion' }),
+        message: adminTokenResult.error
+      });
       return;
     }
 
@@ -97,7 +102,11 @@ export const LoginDialog = ({ isOpen, setIsOpen }: LoginDialogProps) => {
     } else {
       const limitedTokenResult = await getLimitedToken(adminTokenResult.value.accessToken, apiBaseUrl);
       if (limitedTokenResult.isErr()) {
-        addNotification({ type: 'error', title: 'Failed to Get Limited Token', message: limitedTokenResult.error });
+        addNotification({
+          type: 'error',
+          title: t({ en: 'Failed to Get Limited Token', fr: "Échec de l'obtention d'un jeton limité" }),
+          message: limitedTokenResult.error
+        });
         return;
       }
       login(limitedTokenResult.value.accessToken);
@@ -110,25 +119,27 @@ export const LoginDialog = ({ isOpen, setIsOpen }: LoginDialogProps) => {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Content onOpenAutoFocus={(event) => event.preventDefault()}>
         <Dialog.Header>
-          <Dialog.Title>Login</Dialog.Title>
+          <Dialog.Title>{t({ en: 'Login', fr: 'Connexion' })}</Dialog.Title>
           <Dialog.Description>
-            Login to your Open Data Capture instance. A special access token is used that grants permissions to create
-            instruments only. You must have permission to create instruments to use this functionality.
+            {t({
+              en: 'Login to your Open Data Capture instance. A special access token is used that grants permissions to create instruments only. You must have permission to create instruments to use this functionality.',
+              fr: "Connectez-vous à votre instance Open Data Capture. Un jeton d'accès spécial est utilisé pour accorder l'autorisation de créer uniquement des instruments. Vous devez avoir la permission de créer des instruments pour utiliser cette fonctionnalité."
+            })}
           </Dialog.Description>
           <div className="mt-2 flex items-center gap-1 text-sm font-medium">
             {isAuthorized ? (
               <>
                 <div className="flex h-4 w-4 items-center justify-center rounded-full bg-green-600">
                   <CheckIcon className="text-white" style={{ height: '12px', width: '12px' }} />
                 </div>
-                <span>You are already logged in</span>
+                <span>{t({ en: 'You are already logged in', fr: 'Vous êtes déjà connecté' })}</span>
               </>
             ) : (
               <>
                 <div className="flex h-4 w-4 items-center justify-center rounded-full bg-red-600">
                   <XIcon className="text-white" style={{ height: '12px', width: '12px' }} />
                 </div>
-                <span>You are not currently logged in</span>
+                <span>{t({ en: 'You are not currently logged in', fr: "Vous n'êtes actuellement pas connecté" })}</span>
               </>
             )}
           </div>
@@ -137,42 +148,48 @@ export const LoginDialog = ({ isOpen, setIsOpen }: LoginDialogProps) => {
           <Form
             content={[
               {
-                title: 'Instance Settings',
+                title: t({ en: 'Instance Settings', fr: "Paramètres de l'instance" }),
                 fields: {
                   apiBaseUrl: {
-                    description: 'The base path for your Open Data Capture REST API.',
+                    description: t({
+                      en: 'The base path for your Open Data Capture REST API.',
+                      fr: 'Le chemin de base de votre API REST Open Data Capture.'
+                    }),
                     kind: 'string',
                     placeholder: 'e.g., https://demo.opendatacapture.org/api',
-                    label: 'API Base URL',
+                    label: t({ en: 'API Base URL', fr: "URL de base de l'API" }),
                     variant: 'input'
                   },
                   legacyLogin: {
-                    description: [
-                      "Use the user's full access token instead of a granular access token.",
-                      'Note that this can introduce security risks and should not be used on shared machines.',
-                      'It is required only for ODC versions prior to v1.12.0.'
-                    ].join(''),
+                    description: t({
+                      en: [
+                        "Use the user's full access token instead of a granular access token.",
+                        'Note that this can introduce security risks and should not be used on shared machines.',
+                        'It is required only for ODC versions prior to v1.12.0.'
+                      ].join(' '),
+                      fr: "Utilisez le jeton d'accès complet de l'utilisateur au lieu d'un jeton d'accès granulaire. Notez que cela peut introduire des risques de sécurité et ne doit pas être utilisé sur des machines partagées. Cela n'est requis que pour les versions d'ODC antérieures à v1.12.0."
+                    }),
                     kind: 'boolean',
-                    label: 'Legacy Login Mode',
+                    label: t({ en: 'Legacy Login Mode', fr: 'Mode de connexion hérité' }),
                     variant: 'radio',
                     options: {
-                      false: 'No (Recommended)',
-                      true: 'Yes'
+                      false: t({ en: 'No (Recommended)', fr: 'Non (Recommandé)' }),
+                      true: t({ en: 'Yes', fr: 'Oui' })
                     }
                   }
                 }
               },
               {
-                title: 'Login Credentials',
+                title: t({ en: 'Login Credentials', fr: 'Identifiants de connexion' }),
                 fields: {
                   username: {
                     kind: 'string',
-                    label: 'Username',
+                    label: t({ en: 'Username', fr: "Nom d'utilisateur" }),
                     variant: 'input'
                   },
                   password: {
                     kind: 'string',
-                    label: 'Password',
+                    label: t({ en: 'Password', fr: 'Mot de passe' }),
                     variant: 'password'
                   }
                 }

apps/playground/src/components/Header/ActionsDropdown/RestoreDefaultsDialog.tsx

@@ -1,5 +1,5 @@
 import { Button, Dialog } from '@douglasneuroinformatics/libui/components';
-import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import { useNotificationsStore, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 
 import { useAppStore } from '@/store';
 
@@ -12,15 +12,25 @@ export const RestoreDefaultsDialog = ({ isOpen, setIsOpen }: RestoreDefaultsDial
   const addNotification = useNotificationsStore((store) => store.addNotification);
   const resetInstruments = useAppStore((store) => store.resetInstruments);
   const resetSettings = useAppStore((store) => store.resetSettings);
+  const { t } = useTranslation();
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Content>
         <Dialog.Header>
-          <Dialog.Title>Are you absolutely sure?</Dialog.Title>
+          <Dialog.Title>{t({ en: 'Are you absolutely sure?', fr: 'Êtes-vous absolument sûr ?' })}</Dialog.Title>
           <Dialog.Description>
-            This action will <span className="font-bold uppercase">delete all user-defined instruments</span> in local
-            storage and restore the default configuration.
+            {t({ en: 'This action will ', fr: 'Cette action va ' })}
+            <span className="font-bold uppercase">
+              {t({
+                en: 'delete all user-defined instruments',
+                fr: "supprimer tous les instruments définis par l'utilisateur"
+              })}
+            </span>{' '}
+            {t({
+              en: 'in local storage and restore the default configuration.',
+              fr: 'dans le stockage local et restaurer la configuration par défaut.'
+            })}
           </Dialog.Description>
         </Dialog.Header>
         <Dialog.Footer>
@@ -33,10 +43,10 @@ export const RestoreDefaultsDialog = ({ isOpen, setIsOpen }: RestoreDefaultsDial
               setIsOpen(false);
             }}
           >
-            Reset
+            {t({ en: 'Reset', fr: 'Réinitialiser' })}
           </Button>
           <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
-            Cancel
+            {t({ en: 'Cancel', fr: 'Annuler' })}
           </Button>
         </Dialog.Footer>
       </Dialog.Content>