i18n: use automatic type inference of translation keys

Finally figured out a way to make typescript strongly type translation
keys so we can avoid the tedium of creating enums of translation keys.

src/components/HelpButton.tsx

@@ -7,7 +7,7 @@ import { OverlayContainer } from 'react-aria';
 import { useBoolean } from 'usehooks-ts';
 import { Button } from './Button';
 import HelpDialog from './HelpDialog';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 type HelpButtonProps = {
     /** The label of the control this button provides help for. */
@@ -49,9 +49,9 @@ const HelpButton: React.VoidFunctionComponent<HelpButtonProps> = ({
     return (
         <>
             <Button
-                label={i18n.translate(I18nId.HelpButtonLabel)}
+                label={i18n.translate('helpButton.label')}
                 hideLabel
-                description={i18n.translate(I18nId.HelpButtonDescription, {
+                description={i18n.translate('helpButton.description', {
                     helpForLabel,
                 })}
                 minimal
@@ -62,7 +62,7 @@ const HelpButton: React.VoidFunctionComponent<HelpButtonProps> = ({
             {isDialogMounted && (
                 <OverlayContainer className={Classes.PORTAL}>
                     <HelpDialog
-                        title={i18n.translate(I18nId.HelpDialogTitle)}
+                        title={i18n.translate('helpDialog.title')}
                         isOpen={isDialogOpen}
                         openButton={openButton}
                         onClose={setIsDialogOpenFalse}

src/components/HelpDialog.tsx

@@ -20,7 +20,7 @@ import {
     useOverlay,
 } from 'react-aria';
 import { usePopper } from 'react-popper';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 type HelpDialogProps = {
     /** The title of the dialog. */
@@ -147,7 +147,7 @@ const HelpDialog: React.FunctionComponent<HelpDialogProps> = ({
                                 <DismissButton
                                     id={dismissId}
                                     aria-label={i18n.translate(
-                                        I18nId.HelpDialogCloseButtonLabel,
+                                        'helpDialog.closeButton.label',
                                     )}
                                     onDismiss={onClose}
                                 />

src/components/i18n.en.test.ts

@@ -1,12 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
-
-import { lookup } from '../../test';
-import { I18nId } from './i18n';
-import en from './translations/en.json';
-
-describe('Ensure .json file has matches for I18nId', () => {
-    test.each(Object.values(I18nId))('%s', (id) => {
-        expect(lookup(en, id)).toBeDefined();
-    });
-});

src/components/i18n.ts

@@ -1,17 +1,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-import { I18n, useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import type { TypedI18n } from '../i18n';
+import type translations from './translations/en.json';
 
-export function useI18n(): I18n {
+export function useI18n(): TypedI18n<typeof translations> {
     // istanbul ignore next: babel-loader rewrites this line
     const [i18n] = useShopifyI18n();
     return i18n;
 }
-
-export enum I18nId {
-    HelpButtonLabel = 'helpButton.label',
-    HelpButtonDescription = 'helpButton.description',
-    HelpDialogTitle = 'helpDialog.title',
-    HelpDialogCloseButtonLabel = 'helpDialog.closeButton.label',
-}