feat: translations for actions main and viewer components

Author: david-roper

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import { Button, DropdownMenu } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { EllipsisVerticalIcon } from 'lucide-react';
 
 import { useAppStore } from '@/store';
@@ -21,6 +22,7 @@ export const ActionsDropdown = () => {
   const [showStorageUsageDialog, setShowStorageUsageDialog] = useState(false);
 
   const selectedInstrument = useAppStore((store) => store.selectedInstrument);
+  const { t } = useTranslation();
 
   return (
     <React.Fragment>
@@ -43,22 +45,22 @@ export const ActionsDropdown = () => {
           </DropdownMenu.Item>
           <DropdownMenu.Item asChild onSelect={() => setShowLoginDialog(true)}>
             <button className="w-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50" type="button">
-              Login
+              {t({ en: 'Login', fr: 'Se connecter' })}
             </button>
           </DropdownMenu.Item>
           <DropdownMenu.Item asChild onSelect={() => setShowUploadBundleDialog(true)}>
             <button className="w-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50" type="button">
-              Upload Bundle
+              {t({ en: 'Upload Bundle', fr: 'Téléverser le paquet' })}
             </button>
           </DropdownMenu.Item>
           <DropdownMenu.Item asChild onSelect={() => setShowUserSettingsDialog(true)}>
             <button className="w-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50" type="button">
-              User Settings
+              {t({ en: 'User Settings', fr: 'Paramètres utilisateur' })}
             </button>
           </DropdownMenu.Item>
           <DropdownMenu.Item asChild onSelect={() => setShowStorageUsageDialog(true)}>
             <button className="w-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50" type="button">
-              Storage Usage
+              {t({ en: 'Storage Usage', fr: 'Utilisation du stockage' })}
             </button>
           </DropdownMenu.Item>
           <DropdownMenu.Separator />
@@ -68,15 +70,15 @@ export const ActionsDropdown = () => {
               disabled={selectedInstrument.category !== 'Saved'}
               type="button"
             >
-              Delete Instrument
+              {t({ en: 'Delete Instrument', fr: "Supprimer l'instrument" })}
             </button>
           </DropdownMenu.Item>
           <DropdownMenu.Item asChild onSelect={() => setShowRestoreDefaultsDialog(true)}>
             <button
               className="w-full cursor-pointer text-red-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-red-400"
               type="button"
             >
-              Restore Defaults
+              {t({ en: 'Restore Defaults', fr: 'Restaurer les paramètres par défaut' })}
             </button>
           </DropdownMenu.Item>
         </DropdownMenu.Content>

apps/playground/src/components/MainContent/MainContent.tsx

@@ -1,12 +1,13 @@
 import { Tabs } from '@douglasneuroinformatics/libui/components';
-import { useMediaQuery } from '@douglasneuroinformatics/libui/hooks';
+import { useMediaQuery, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 
 import { Editor } from '../Editor';
 import { Resizable } from '../Resizable';
 import { Viewer } from '../Viewer';
 
 export const MainContent = () => {
   const isDesktop = useMediaQuery('(min-width: 768px)');
+  const { t } = useTranslation();
   return (
     <main className="flex grow flex-col overflow-hidden py-4">
       {isDesktop ? (
@@ -22,8 +23,8 @@ export const MainContent = () => {
       ) : (
         <Tabs className="flex grow flex-col overflow-hidden" defaultValue="editor">
           <Tabs.List className="grid w-full grid-cols-2">
-            <Tabs.Trigger value="editor">Editor</Tabs.Trigger>
-            <Tabs.Trigger value="viewer">Viewer</Tabs.Trigger>
+            <Tabs.Trigger value="editor">{t({ en: 'Editor', fr: 'Éditeur' })}</Tabs.Trigger>
+            <Tabs.Trigger value="viewer">{t({ en: 'Viewer', fr: 'Aperçu' })}</Tabs.Trigger>
           </Tabs.List>
           <Tabs.Content className="grow" value="editor">
             <Editor />

apps/playground/src/components/Viewer/Viewer.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 
 import { Spinner } from '@douglasneuroinformatics/libui/components';
-import { useInterval } from '@douglasneuroinformatics/libui/hooks';
+import { useInterval, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { BundlerInput } from '@opendatacapture/instrument-bundler';
 import { bundle } from '@opendatacapture/instrument-bundler';
 import { ScalarInstrumentRenderer } from '@opendatacapture/react-core';
@@ -25,6 +25,7 @@ export const Viewer = () => {
   const key = useAppStore((store) => store.viewer.key);
   const state = useAppStore((store) => store.transpilerState);
   const setState = useAppStore((store) => store.setTranspilerState);
+  const { t } = useTranslation();
 
   const transpile = useCallback(async (files: EditorFile[]) => {
     setState({ status: 'building' });
@@ -33,7 +34,10 @@ export const Viewer = () => {
       setState({ bundle: await bundle({ inputs }), status: 'built' });
     } catch (err) {
       setState({
-        error: err instanceof Error ? err : new Error('Unexpected Error', { cause: err }),
+        error:
+          err instanceof Error
+            ? err
+            : new Error(t({ en: 'Unexpected Error', fr: 'Erreur inattendue' }), { cause: err }),
         status: 'error'
       });
     } finally {
@@ -71,7 +75,19 @@ export const Viewer = () => {
               onCompileError={(error) => setState({ error, status: 'error' })}
               onSubmit={({ data }) => {
                 // eslint-disable-next-line no-alert
-                alert(JSON.stringify({ _message: 'The following data will be submitted', data }, null, 2));
+                alert(
+                  JSON.stringify(
+                    {
+                      _message: t({
+                        en: 'The following data will be submitted',
+                        fr: 'Les données suivantes seront soumises'
+                      }),
+                      data
+                    },
+                    null,
+                    2
+                  )
+                );
               }}
             />
           </ErrorBoundary>