move useI18n to i18n.ts

Since we are using the react-i18n babel loader plugin, useI18n can only
be used once per file. Also we have to remember to add the istanbul
ignore next comment each time we use it. By moving this to a common
file, it can be easily copied and pasted when a new submodule is
created and we don't have to remember the rules when calling it.

src/components/HelpButton.tsx

@@ -2,13 +2,12 @@
 // Copyright (c) 2022 The Pybricks Authors
 
 import { Classes } from '@blueprintjs/core';
-import { useI18n } from '@shopify/react-i18n';
 import React, { useCallback, useEffect, useState } from 'react';
 import { OverlayContainer } from 'react-aria';
 import { useBoolean } from 'usehooks-ts';
 import { Button } from './Button';
 import HelpDialog from './HelpDialog';
-import { I18nId } from './i18n';
+import { I18nId, useI18n } from './i18n';
 
 type HelpButtonProps = {
     /** The label of the control this button provides help for. */
@@ -21,8 +20,7 @@ const HelpButton: React.VoidFunctionComponent<HelpButtonProps> = ({
     helpForLabel,
     content,
 }) => {
-    // istanbul ignore next: babel-loader rewrites this line
-    const [i18n] = useI18n();
+    const i18n = useI18n();
 
     const {
         value: isDialogOpen,

src/components/HelpDialog.tsx

@@ -8,7 +8,6 @@ import {
     POPOVER_ARROW_SVG_SIZE,
     Popover2Arrow,
 } from '@blueprintjs/popover2/lib/cjs/popover2Arrow';
-import { useI18n } from '@shopify/react-i18n';
 import classNames from 'classnames';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -21,7 +20,7 @@ import {
     useOverlay,
 } from 'react-aria';
 import { usePopper } from 'react-popper';
-import { I18nId } from './i18n';
+import { I18nId, useI18n } from './i18n';
 
 type HelpDialogProps = {
     /** The title of the dialog. */
@@ -45,8 +44,7 @@ const HelpDialog: React.FunctionComponent<HelpDialogProps> = ({
     onAnimationEnd,
     children,
 }) => {
-    // istanbul ignore next: babel-loader rewrites this line
-    const [i18n] = useI18n();
+    const i18n = useI18n();
 
     // this is the dialog element and the popper element
     const ref = useRef<HTMLDivElement>(null);

src/components/i18n.ts

@@ -1,6 +1,14 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
+import { I18n, useI18n as useShopifyI18n } from '@shopify/react-i18n';
+
+export function useI18n(): I18n {
+    // istanbul ignore next: babel-loader rewrites this line
+    const [i18n] = useShopifyI18n();
+    return i18n;
+}
+
 export enum I18nId {
     HelpButtonLabel = 'helpButton.label',
     HelpButtonDescription = 'helpButton.description',