feat: add locales for composite components

packages/app-elements/src/locales/en.ts

@@ -187,36 +187,62 @@ const en = {
     add_up_to: 'You can add up to {{limit}} {{resource}}.',
     all_items: 'All items',
     amount: 'Amount',
+    apply: 'Apply',
     back: 'Back',
+    cancel: 'Cancel',
+    clear_text: 'Clear text',
     close: 'Close',
     continue: 'Continue',
+    create_resource: 'Create {{resource}}',
+    download_file: 'Download file',
+    download_json: 'Download JSON',
     edit: 'Edit',
+    edit_resource: 'Edit {{resource}}',
     filters: 'Filters',
     limit_reached: 'Limit reached',
     manage_resource: 'Manage {{resource}}',
     metadata: 'Metadata',
     new: 'New',
     no_items: 'No items',
     not_authorized: 'Not authorized',
+    not_found: 'Not found',
     not_handled: 'Not handled',
     search: 'Search...',
-    timeline: 'Timeline',
+    select_resource: 'Select {{resource}}',
+
     update: 'Update',
     updated: 'Updated',
-    cancel: 'Cancel',
-    apply: 'Apply',
-    not_found: 'Not found',
+    view_logs: 'View logs',
     generic_resource_not_found:
       'We could not find the resource you are looking for.',
     empty_state_resource_title: 'No {{resource}} found!',
     empty_state_resource_description:
       'No {{resource}} found for this organization.',
     empty_state_resource_filtered:
       "We didn't find any {{resources}} matching the current filters selection.",
-    create_resource: 'Create {{resource}}',
     generic_select_autocomplete_hint: 'Type to search for more options.',
-    select_resource: 'Select {{resource}}',
-    edit_resource: 'Edit {{resource}}'
+    routes: {
+      missing_configuration:
+        'Missing configuration when defining {{component}}',
+      loading_app_page: 'Loading app page...',
+      page_not_found: 'Page not found',
+      invalid_resource: 'Invalid {{resource}}',
+      we_could_not_find_page: 'We could not find the page you are looking for.',
+      we_could_not_find_resource:
+        'We could not find the {{resource}} you are looking for.',
+      go_home: 'Go home'
+    },
+    table: {
+      and_another_record: 'and another record',
+      and_other_records: 'and {{count}} other records',
+      record: '1 record',
+      record_other: '{{count}} records'
+    },
+    timeline: {
+      name: 'Timeline',
+      leave_a_note: 'Leave a note or comment',
+      only_staff_can_see: 'Only you and other staff can see comments'
+    }
   },
   resources,
   apps: {

packages/app-elements/src/locales/it.ts

@@ -3,38 +3,65 @@ import type en from './en'
 const it: typeof en = {
   common: {
     add_resource: 'Aggiungi {{resource}}',
+    add_up_to: 'Puoi aggiungere fino a {{limit}} {{resource}}.',
     all_items: 'Tutti gli elementi',
     amount: 'Importo',
-    not_handled: 'Non gestito',
+    apply: 'Applica',
     back: 'Torna indietro',
+    cancel: 'Annulla',
     close: 'Chiudi',
+    clear_text: 'Svuota testo',
     continue: 'Continua',
-    new: 'Nuovo',
-    not_authorized: 'Non autorizzato',
-    no_items: 'Nessun elemento',
+    create_resource: 'Crea {{resource}}',
+    download_file: 'Scarica file',
+    download_json: 'Scarica JSON',
     edit: 'Modifica',
-    manage_resource: 'Gestisci {{resource}}',
-    updated: 'Aggiornato',
-    timeline: 'Storico',
+    edit_resource: 'Modifica {{resource}}',
     filters: 'Filtri',
+    limit_reached: 'Limite raggiunto',
+    manage_resource: 'Gestisci {{resource}}',
     metadata: 'Metadati',
+    new: 'Nuovo',
+    no_items: 'Nessun elemento',
+    not_authorized: 'Non autorizzato',
+    not_found: 'Non trovato',
+    not_handled: 'Non gestito',
     search: 'Cerca...',
-    limit_reached: 'Limite raggiunto',
-    add_up_to: 'Puoi aggiungere fino a {{limit}} {{resource}}.',
+    select_resource: 'Seleziona {{resource}}',
     update: 'Aggiorna',
-    cancel: 'Annulla',
-    apply: 'Applica',
-    not_found: 'Non trovato',
+    updated: 'Aggiornato',
+    view_logs: 'Visualizza i log',
     generic_resource_not_found: 'La risorsa che cercavi non è esiste.',
     empty_state_resource_title: 'Nessun {{resource}} trovato!',
     empty_state_resource_description:
       'Nessun {{resource}} trovato found per questa organizzazione.',
     empty_state_resource_filtered:
       "Non c'è {{resources}} che corrisponde ai filtri selezionati.",
-    create_resource: 'Crea {{resource}}',
     generic_select_autocomplete_hint: 'Digita per cercare più opzioni.',
-    select_resource: 'Seleziona {{resource}}',
-    edit_resource: 'Modifica {{resource}}'
+    routes: {
+      missing_configuration:
+        'Configurazione mancante durante la definizione di {{component}}',
+      loading_app_page: 'Caricamento pagina app...',
+      page_not_found: 'Pagina non trovata',
+      invalid_resource: '{{resource}} non valida',
+      we_could_not_find_page:
+        'Non abbiamo trovato la pagina che stavi cercando.',
+      we_could_not_find_resource:
+        'Non abbiamo trovato la risorsa {{resource}} che stavi cercando.',
+      go_home: 'Vai alla home'
+    },
+    table: {
+      and_another_record: 'e un altro elemento',
+      and_other_records: 'e altri {{count}} elementi',
+      record: '1 elemento',
+      record_other: '{{count}} elementi'
+    },
+    timeline: {
+      name: 'Storico',
+      leave_a_note: 'Lascia una nota o un commento',
+      only_staff_can_see:
+        'Solo tu e altri membri dello staff possono vedere i commenti'
+    }
   },
   resources: {
     addresses: {

packages/app-elements/src/ui/composite/Report.tsx

@@ -1,4 +1,5 @@
 import { downloadJsonAsFile } from '#helpers/downloadJsonAsFile'
+import { t } from '#providers/I18NProvider'
 import { SkeletonTemplate } from '#ui/atoms/SkeletonTemplate'
 import { Stack } from '#ui/atoms/Stack'
 import { Label } from '#ui/forms/Label'
@@ -38,7 +39,7 @@ function renderItem(item: ReportItem, key: Key): JSX.Element {
           className='text-sm font-bold text-primary hover:underline'
           data-testid={`report-item-${item.label}-link`}
         >
-          {item.linkLabel ?? 'Download file'}
+          {item.linkLabel ?? t('common.download_file')}
         </a>
       ) : item.downloadJsonAsFile != null ? (
         <button
@@ -51,7 +52,7 @@ function renderItem(item: ReportItem, key: Key): JSX.Element {
           }}
           data-testid={`report-item-${item.label}-button`}
         >
-          {item.linkLabel ?? 'Download JSON'}
+          {item.linkLabel ?? t('common.download_json')}
         </button>
       ) : null}
     </div>
@@ -69,7 +70,7 @@ export function Report({
       count: 500,
       label: 'Record imported',
       linkUrl: 'https://example.com',
-      linkLabel: 'View logs'
+      linkLabel: t('common.view_logs')
     })
     .map(renderItem)
 

packages/app-elements/src/ui/composite/Routes/Routes.tsx

@@ -1,4 +1,5 @@
 import { formatResourceName } from '#helpers/resources'
+import { t } from '#providers/I18NProvider'
 import { useTokenProvider } from '#providers/TokenProvider'
 import { Button } from '#ui/atoms/Button'
 import { EmptyState } from '#ui/atoms/EmptyState'
@@ -65,7 +66,9 @@ export function Routes<T extends Record<string, { path: string }>>({
 
         if (route?.path == null) {
           throw new Error(
-            'Missing configuration when defining <Routes routes=".." list=".." />'
+            t('common.routes.missing_configuration', {
+              component: '<Routes routes=".." list=".." />'
+            })
           )
         }
 
@@ -114,7 +117,9 @@ function LoadingPage({ overlay = false }: { overlay?: boolean }): JSX.Element {
       <SkeletonTemplate isLoading>
         <PageLayout
           title={
-            <SkeletonTemplate isLoading>Loading app page...</SkeletonTemplate>
+            <SkeletonTemplate isLoading>
+              {t('common.routes.loading_app_page')}
+            </SkeletonTemplate>
           }
           mode={mode}
           gap='only-top'
@@ -141,19 +146,23 @@ export function GenericPageNotFound({
       <EmptyState
         title={
           resource == null
-            ? 'Page Not found'
-            : `Invalid ${formatResourceName({
-                resource,
-                count: 'singular'
-              })}`
+            ? t('common.routes.page_not_found')
+            : t('common.routes.invalid_resource', {
+                resource: formatResourceName({
+                  resource,
+                  count: 'singular'
+                })
+              })
         }
         description={
           resource == null
-            ? 'We could not find the page you are looking for.'
-            : `We could not find the ${formatResourceName({
-                resource,
-                count: 'singular'
-              })} you are looking for.`
+            ? t('common.routes.we_could_not_find_page')
+            : t('common.routes.we_could_not_find_resource', {
+                resource: formatResourceName({
+                  resource,
+                  count: 'singular'
+                })
+              })
         }
         action={
           <Button
@@ -162,7 +171,7 @@ export function GenericPageNotFound({
               setLocation('/')
             }}
           >
-            Go home
+            {t('common.routes.go_home')}
           </Button>
         }
       />

packages/app-elements/src/ui/composite/SearchBar.tsx

@@ -1,3 +1,4 @@
+import { t } from '#providers/I18NProvider'
 import {
   SkeletonTemplate,
   type SkeletonTemplateProps
@@ -122,7 +123,7 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
                 'rounded outline-none ring-0 border-0',
                 'focus-within:shadow-focus focus:text-black'
               )}
-              aria-label='Clear text'
+              aria-label={t('common.clear_text')}
               onClick={() => {
                 setSearchValue('')
                 onClear()

packages/app-elements/src/ui/composite/TableData.test.tsx

@@ -89,7 +89,7 @@ describe('TableData', () => {
   })
 
   test('Should limit results', () => {
-    const { getAllByTestId, getByText } = setup({
+    const { getAllByTestId } = setup({
       data: [
         {
           first_name: 'George',
@@ -112,6 +112,6 @@ describe('TableData', () => {
       showOthers: true
     })
     expect(getAllByTestId('table-row-content').length).toBe(2)
-    expect(getByText('and others 2 records')).toBeVisible()
+    expect(getAllByTestId('table-others-string-multiple').length).toBe(1)
   })
 })

packages/app-elements/src/ui/composite/TableData.tsx

@@ -1,3 +1,4 @@
+import { t } from '#providers/I18NProvider'
 import { Table, Td, Th, Tr } from '#ui/atoms/Table'
 import { extractHeaders } from '#utils/extractHeaders'
 import { isJsonPrimitive } from '#utils/text'
@@ -40,9 +41,9 @@ export function TableData({
     <div className={cn('', className)} {...rest}>
       <div className='flex justify-between items-center mb-2'>
         {title != null ? <h2 className='font-semibold'>{title}</h2> : <div />}
-        {showTotal === true ? (
+        {showTotal === true && data != null ? (
           <div className='text-sm' data-testid='table-total-string'>
-            {data.length} records
+            {t('common.table.record', { count: data.length })}
           </div>
         ) : null}
       </div>
@@ -81,9 +82,15 @@ export function TableData({
           className='py-1 text-sm text-right'
           data-testid='table-others-string'
         >
-          {othersCount === 1
-            ? 'and another record'
-            : `and others ${othersCount} records`}
+          {othersCount === 1 ? (
+            <span data-testid='table-others-string-single'>
+              {t('common.table.and_another_record')}
+            </span>
+          ) : (
+            <span data-testid='table-others-string-multiple'>
+              {t('common.table.and_other_records', { count: othersCount })}
+            </span>
+          )}
         </div>
       ) : null}
     </div>

packages/app-elements/src/ui/composite/Timeline.tsx

@@ -1,4 +1,5 @@
 import { formatDate, sortAndGroupByDate } from '#helpers/date'
+import { t } from '#providers/I18NProvider'
 import { Badge } from '#ui/atoms/Badge'
 import { Card } from '#ui/atoms/Card'
 import { withSkeletonTemplate } from '#ui/atoms/SkeletonTemplate'
@@ -43,11 +44,11 @@ export const Timeline = withSkeletonTemplate<TimelineProps>(
           onKeyDown={onKeyDown}
           onChange={onChange}
           className='relative bg-gray-50'
-          placeholder='Leave a note or comment'
+          placeholder={t('common.timeline.leave_a_note')}
         />
         <div className='border-gray-100 border-l-2 ml-[13px]'>
           <div className='pt-2 pb-4 text-right text-sm text-gray-400'>
-            Only you and other staff can see comments
+            {t('common.timeline.only_staff_can_see')}
           </div>
           {Object.entries(groupedEvents).map(([date, eventsByDate]) => (
             <div key={date}>

packages/docs/src/stories/composite/Report.stories.tsx

@@ -1,3 +1,4 @@
+import { I18NProvider } from '#providers/I18NProvider'
 import { Report } from '#ui/composite/Report'
 
 import { type Meta, type StoryFn } from '@storybook/react'
@@ -11,7 +12,11 @@ const setup: Meta<typeof Report> = {
 }
 export default setup
 
-const Template: StoryFn<typeof Report> = (args) => <Report {...args} />
+const Template: StoryFn<typeof Report> = (args) => (
+  <I18NProvider localeCode='it'>
+    <Report {...args} />
+  </I18NProvider>
+)
 
 export const Default = Template.bind({})
 Default.args = {

packages/docs/src/stories/composite/SearchBar.stories.tsx

@@ -1,11 +1,25 @@
+import { I18NProvider } from '#providers/I18NProvider'
 import { SearchBar } from '#ui/composite/SearchBar'
+import { Description, Primary, Subtitle, Title } from '@storybook/blocks'
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof SearchBar> = {
   title: 'Composite/SearchBar',
   component: SearchBar,
   parameters: {
-    layout: 'padded'
+    layout: 'padded',
+    docs: {
+      page: () => (
+        <>
+          <I18NProvider localeCode='it'>
+            <Title />
+            <Subtitle />
+            <Description />
+            <Primary />
+          </I18NProvider>
+        </>
+      )
+    }
   }
 }
 
@@ -17,6 +31,9 @@ export const Default: Story = {
     placeholder: 'Type something here...',
     onSearch(hint) {
       console.log(hint)
+    },
+    onClear() {
+      console.log('clear')
     }
   }
 }