refactor(i18n): make components prop required for <Translate>

Rationale: We prefer that people use the `useTranslation` hook instead,
as it has a lower overhead. The only two use cases we're tailoring for
is when you need to use React components as part of the translation resource,
or you are using a non-functional component and thus cannot use hooks.

packages/sanity/src/core/i18n/Translate.tsx

@@ -10,7 +10,7 @@ type ComponentMap = Record<string, ComponentType<{children?: ReactNode}>>
 export interface TranslationProps {
   t: TFunction
   i18nKey: string
-  components?: ComponentMap
+  components: ComponentMap
   values?: Record<string, string | string[]>
 }
 

packages/sanity/src/core/i18n/__tests__/Translate.test.tsx

@@ -59,15 +59,15 @@ describe('Translate component', () => {
   it('it translates a key', async () => {
     const {findByTestId} = render(
       <TestProviders bundles={[createBundle({title: 'English title'})]}>
-        <TestComponent i18nKey="title" />
+        <TestComponent i18nKey="title" components={{}} />
       </TestProviders>,
     )
     expect((await findByTestId('output')).innerHTML).toEqual('English title')
   })
   it('it renders the key as-is if translation is missing', async () => {
     const {findByTestId} = render(
       <TestProviders bundles={[createBundle({title: 'English title'})]}>
-        <TestComponent i18nKey="does-not-exist" />
+        <TestComponent i18nKey="does-not-exist" components={{}} />
       </TestProviders>,
     )
     expect((await findByTestId('output')).innerHTML).toEqual('does-not-exist')