Working template translations with MicroI18n

locales/de/common.yml

@@ -1,7 +1,8 @@
 formError:
   alreadyUsed: Bereits vergeben.
   invalidChars: "Enthält ungültige Zeichen. Erlaubt: {{chars}}"
-  reservedKeyword: "Reserviertes Schlüsselwort."
+  invalidLocale: Ungültiges Sprachschema.
+  reservedKeyword: Reserviertes Schlüsselwort.
   tooLong: Zu lang. Maximal {{max}} Zeichen.
   tooShort: Zu kurz. Mindestens {{min}} Zeichen.
   unexpected: "Ein unerwarteter Fehler ist aufgetreten: "

locales/en/common.yml

@@ -1,7 +1,8 @@
 formError:
   alreadyUsed: Already in use.
   invalidChars: "Contains invalid characters. Allowed: {{chars}}"
-  reservedKeyword: "Reserved keyword."
+  invalidLocale: Invalid locale name.
+  reservedKeyword: Reserved keyword.
   tooLong: Too long. Maximum {{max}} characters.
   tooShort: Too short. Minimum {{min}} characters.
   unexpected: "An unexpected error occurred: "

src/components/common/FlagIcon.tsx

@@ -22,5 +22,8 @@ interface FlagImageProps {
 
 export const FlagIcon = ({ language, size = 18 }: FlagImageProps) => {
   const Img = flagIcons[language]
+  if (!Img) {
+    throw new Error(`Missing flag for language: ${language}`)
+  }
   return <Img width={size} height={size} />
 }

src/components/common/SiteTranslationProvider.tsx

@@ -1,9 +1,10 @@
 import { i18n } from "i18next"
 import { useRouter } from "next/router"
+import { Locale } from "nextjs-routes"
 import { ReactNode, useCallback, useRef, useState } from "react"
 import { I18nSiteContextProvider } from "~/contexts/I18nSiteContext"
 import { useOnRouteChange } from "~/hooks/useOnRouteChange"
-import { I18nSite, SiteLanguageOption } from "~/types/general"
+import { I18nSite } from "~/types/general"
 import { createClient } from "~/utils/i18nBrowserClient"
 import { registerInstance } from "~/utils/i18nextReloader"
 
@@ -16,7 +17,7 @@ export const SiteTranslationProvider = ({
   i18nSiteProps,
   children,
 }: SiteTranslationProviderProps) => {
-  const [currentSiteLanguage, _setCurrentSiteLanguage] = useState<SiteLanguageOption>(
+  const [currentSiteLanguage, _setCurrentSiteLanguage] = useState(
     i18nSiteProps.initialSiteLanguage!
   )
 
@@ -44,7 +45,7 @@ export const SiteTranslationProvider = ({
   })
 
   const setCurrentSiteLanguage = useCallback(
-    (language: SiteLanguageOption) => {
+    (language: string) => {
       i18nInstance.current!.i18nSite.changeLanguage(language, () => {
         if (language !== "cimode") {
           router.push(
@@ -55,7 +56,7 @@ export const SiteTranslationProvider = ({
               },
             },
             undefined,
-            { shallow: true, locale: language }
+            { shallow: true, locale: language as Locale }
           )
         }
         _setCurrentSiteLanguage(language)

src/components/inputs/MeasurementsInput.stories.tsx

@@ -3,7 +3,6 @@ import { ComponentProps, useState } from "react"
 import { calcStats, createEmptyMeasurements, createStatsText } from "~/utils/measurementsUtils"
 import { MeasurementsData } from "../../types/measurements"
 import { SiteTranslations } from "../storybook/SiteTranslations"
-import { StructuredReportTranslations } from "../storybook/StructuredReportTranslations"
 import { MeasurementsInput } from "./MeasurementsInput"
 
 const meta: Meta<typeof MeasurementsInput> = {
@@ -25,14 +24,12 @@ const MeasurementsInputWithState = ({
 
   return (
     <SiteTranslations>
-      <StructuredReportTranslations>
-        <MeasurementsInput
-          value={value}
-          onChange={setValue}
-          footer={footer}
-          {...{ label, extras, disabled }}
-        />
-      </StructuredReportTranslations>
+      <MeasurementsInput
+        value={value}
+        onChange={setValue}
+        footer={footer}
+        {...{ label, extras, disabled }}
+      />
     </SiteTranslations>
   )
 }

src/components/inputs/MeasurementsInput/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Stack } from "@mantine/core"
 import { ReactNode, useCallback, useRef } from "react"
-import { useStructureTranslation } from "~/hooks/useStructureTranslation"
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
 import { MeasurementsAction, MeasurementsData } from "~/types/measurements"
 import { getMeasurementsDataParams, measurementsReducer } from "~/utils/measurementsUtils"
 import { InputLabel } from "../InputLabel"
@@ -38,7 +38,8 @@ export const MeasurementsInput = ({
     [onChange]
   )
 
-  const { t } = useStructureTranslation()
+  const { t } = useSiteTranslation()
+  // TODO: make label configurable props
   const labels = {
     clearAll: t("MeasurementsInput.toolClearAll"),
     clearReferences: t("MeasurementsInput.toolClearReferences"),

src/components/outputs/MeasurementsOutput.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react"
-import { useReportTranslation } from "~/hooks/useReportTranslation"
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
 import { useStructureLink } from "~/hooks/useStructureLink"
 import { selectOutputFormat } from "~/state/displaySlice"
 import { useAppSelector } from "~/state/store"
@@ -31,7 +31,7 @@ export const MeasurementsOutput = ({
 }: MeasurementsOutputProps) => {
   const { activateLink } = useStructureLink({ fieldId })
   const outputFormat = useAppSelector(selectOutputFormat)
-  const { t } = useReportTranslation()
+  const { t } = useSiteTranslation()
 
   const labels = {
     previous: previousLabel || t("MeasurementsOutput.columnPrevious"),

src/components/storybook/SiteTranslations.tsx

@@ -1,12 +1,11 @@
 import { ReactNode, Suspense, useMemo } from "react"
 import { I18nSiteContextProvider } from "~/contexts/I18nSiteContext"
-import { SiteLanguageOption } from "~/types/general"
 import { createClient } from "~/utils/i18nStorybookClient"
 
 const DEFAULT_ADDITIONAL_NAMESPACES: string[] = []
 
 interface SiteTranslationsProps {
-  language?: SiteLanguageOption
+  language?: string
   additionalNamespaces?: string[]
   children: ReactNode
 }

src/components/template/TemplateTranslationProvider.tsx

@@ -25,7 +25,9 @@ export const TemplateTranslationProvider = ({
   const setStructureLanguage = useCallback(
     (language: TemplateLanguage) => {
       i18nStructure.options = { debugKeys: language === "cimode" }
-      i18nStructure.changeLanguage(language === "asSite" ? currentSiteLanguage : language)
+      if (language !== "cimode") {
+        i18nStructure.changeLanguage(language === "asSite" ? currentSiteLanguage : language)
+      }
       _setStructureLanguage(language)
     },
     [i18nStructure, currentSiteLanguage]
@@ -34,17 +36,19 @@ export const TemplateTranslationProvider = ({
   const setReportLanguage = useCallback(
     (language: TemplateLanguage) => {
       i18nReport.options = { debugKeys: language === "cimode" }
-      i18nReport.changeLanguage(language === "asSite" ? currentSiteLanguage : language)
+      if (language !== "cimode") {
+        i18nReport.changeLanguage(language === "asSite" ? currentSiteLanguage : language)
+      }
       _setReportLanguage(language)
     },
     [i18nReport, currentSiteLanguage]
   )
 
   useSiteLanguageListener((language) => {
-    if (structureLanguage === "asSite") {
+    if (structureLanguage === "asSite" && language !== "cimode") {
       i18nStructure.changeLanguage(language)
     }
-    if (reportLanguage === "asSite") {
+    if (reportLanguage === "asSite" && language !== "cimode") {
       i18nReport.changeLanguage(language)
     }
   })

src/contexts/I18nSiteContext.ts

@@ -1,12 +1,11 @@
 import { i18n } from "i18next"
-import { SiteLanguageOption } from "~/types/general"
 import { createRequiredContext } from "~/utils/createRequiredContext"
 
 export interface I18nSiteContext {
   i18nSite: i18n
-  supportedSiteLanguages: SiteLanguageOption[]
-  currentSiteLanguage: SiteLanguageOption
-  setCurrentSiteLanguage: (language: SiteLanguageOption) => void
+  supportedSiteLanguages: string[]
+  currentSiteLanguage: string
+  setCurrentSiteLanguage: (language: string) => void
 }
 
 export const [useI18nSite, I18nSiteContextProvider] =

src/hocs/withTranslations.tsx

@@ -1,7 +1,6 @@
 import hoistNonReactStatics from "hoist-non-react-statics"
 import { ComponentType } from "react"
 import { SiteTranslationProvider } from "~/components/common/SiteTranslationProvider"
-import { StructuredReportTranslationProvider } from "~/components/common/StructuredReportTranslationProvider"
 import { ServerSideProps } from "~/types/general"
 
 interface AppProps {
@@ -13,33 +12,16 @@ export const withTranslations = <T extends AppProps>(
 ): ComponentType<T> => {
   const WithTranslations = (props: AppProps) => {
     const i18nSiteProps = props.pageProps?.i18nSite
-    const i18nStructuredReportProps = props.pageProps?.i18nStructuredReport
 
-    if (!i18nSiteProps && !i18nStructuredReportProps) {
+    if (!i18nSiteProps) {
       return <WrappedComponent {...(props as T)} />
     }
 
-    if (i18nSiteProps && !i18nStructuredReportProps) {
-      return (
-        <SiteTranslationProvider i18nSiteProps={i18nSiteProps}>
-          <WrappedComponent {...(props as T)} />
-        </SiteTranslationProvider>
-      )
-    }
-
-    if (i18nSiteProps && i18nStructuredReportProps) {
-      return (
-        <SiteTranslationProvider i18nSiteProps={i18nSiteProps}>
-          <StructuredReportTranslationProvider
-            i18nStructuredReportProps={i18nStructuredReportProps}
-          >
-            <WrappedComponent {...(props as T)} />
-          </StructuredReportTranslationProvider>
-        </SiteTranslationProvider>
-      )
-    }
-
-    throw new Error("Invalid translations setup.")
+    return (
+      <SiteTranslationProvider i18nSiteProps={i18nSiteProps}>
+        <WrappedComponent {...(props as T)} />
+      </SiteTranslationProvider>
+    )
   }
 
   return hoistNonReactStatics(WithTranslations, WrappedComponent)

src/hooks/useSiteLanguageListener.ts

@@ -1,8 +1,7 @@
 import { useEffect } from "react"
-import { SiteLanguageOption } from "../types/general"
 import { useSiteTranslation } from "./useSiteTranslation"
 
-type Callback = (language: SiteLanguageOption) => void
+type Callback = (language: string) => void
 
 export const useSiteLanguageListener = (callback: Callback) => {
   const { i18n } = useSiteTranslation()

src/pages/tools/adrenal-mri.tsx

@@ -16,7 +16,7 @@ export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
 }) => ({
   props: {
     session: await getServerSideSession(req, res),
-    i18nSite: await getServerSideSiteTranslations(locale, locales),
+    i18nSite: await getServerSideSiteTranslations(locale, locales, ["template"]),
     preloadedReduxState: {},
   },
 })

src/pages/tools/adrenal-washout.tsx

@@ -16,7 +16,7 @@ export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
 }) => ({
   props: {
     session: await getServerSideSession(req, res),
-    i18nSite: await getServerSideSiteTranslations(locale, locales),
+    i18nSite: await getServerSideSiteTranslations(locale, locales, ["template"]),
     preloadedReduxState: {},
   },
 })

src/pages/tools/fleischner2017.tsx

@@ -16,7 +16,7 @@ export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
 }) => ({
   props: {
     session: await getServerSideSession(req, res),
-    i18nSite: await getServerSideSiteTranslations(locale, locales),
+    i18nSite: await getServerSideSiteTranslations(locale, locales, ["template"]),
     preloadedReduxState: {},
   },
 })

src/pages/tools/gfr.tsx

@@ -16,7 +16,7 @@ export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
 }) => ({
   props: {
     session: await getServerSideSession(req, res),
-    i18nSite: await getServerSideSiteTranslations(locale, locales),
+    i18nSite: await getServerSideSiteTranslations(locale, locales, ["template"]),
     preloadedReduxState: {},
   },
 })

src/pages/tools/kidney-volume.tsx

@@ -16,7 +16,7 @@ export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
 }) => ({
   props: {
     session: await getServerSideSession(req, res),
-    i18nSite: await getServerSideSiteTranslations(locale, locales),
+    i18nSite: await getServerSideSiteTranslations(locale, locales, ["template"]),
     preloadedReduxState: {},
   },
 })

src/pages/tools/measurements-table.tsx

@@ -16,7 +16,7 @@ export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
 }) => ({
   props: {
     session: await getServerSideSession(req, res),
-    i18nSite: await getServerSideSiteTranslations(locale, locales),
+    i18nSite: await getServerSideSiteTranslations(locale, locales, ["template"]),
     preloadedReduxState: {},
   },
 })

src/pages/tools/sandbox.tsx

@@ -15,7 +15,7 @@ export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
 }) => ({
   props: {
     session: await getServerSideSession(req, res),
-    i18nSite: await getServerSideSiteTranslations(locale, locales),
+    i18nSite: await getServerSideSiteTranslations(locale, locales, ["template"]),
     preloadedReduxState: {},
   },
 })

src/server/utils/figureUtils.ts

@@ -1,9 +1,6 @@
-import { JSDOM } from "jsdom"
 import { optimize } from "svgo"
-import { FigureDocument } from "~/types/resources"
-import { extractMetadata } from "~/utils/figureUtils"
 
-function optimizeSvg(source: string) {
+export function optimizeSvg(source: string) {
   const { data } = optimize(source, {
     plugins: [
       {
@@ -20,13 +17,3 @@ function optimizeSvg(source: string) {
 
   return data
 }
-
-export function createFigureDocument(source: string): FigureDocument {
-  const dom = new JSDOM(source, { contentType: "image/svg+xml" })
-  const meta = extractMetadata(dom.window.document, "med")
-
-  return {
-    svg: optimizeSvg(source),
-    meta,
-  }
-}

src/server/utils/siteTranslations.ts

@@ -1,15 +1,15 @@
 import { Resource } from "i18next"
 import { GetServerSidePropsContext } from "next"
-import { I18nSite, SiteLanguageOption } from "~/types/general"
+import { I18nSite } from "~/types/general"
 import { createClient } from "./i18nServerClient"
 
 export const getServerSideSiteTranslations = async (
   locale: GetServerSidePropsContext["locale"],
   locales: GetServerSidePropsContext["locales"],
   additionalSiteNamespaces: string[] = []
 ): Promise<I18nSite> => {
-  const initialSiteLanguage = locale! as SiteLanguageOption
-  const supportedSiteLanguages = locales! as SiteLanguageOption[]
+  const initialSiteLanguage = locale!
+  const supportedSiteLanguages = locales!
   const siteNamespaces = [...additionalSiteNamespaces, "common"]
 
   const { i18n, initPromise } = createClient({