Remove I18nProvider in favor of GrunnmurenProvider (#746)

alexanbj · web-flow · commit 60d6d9efab30 · 2024-03-04T11:54:14.000+01:00
* rename I18nProvider to GrunnmurenProvider
* Explicity support nb, sv, and en locales.
* Add `@react-aria/optimize-locales-plugin` to Storybook
diff --git a/.changeset/honest-items-tap.md b/.changeset/honest-items-tap.md
@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-react": minor
+---
+
+Rename `<I18nProvider />` to `<GrunnmurenProvider />`. Explicitly set supported languages to `nb,`, `sv` and `en`, with `nb` as the default.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,5 +1,6 @@
-const path = require('path');
-const { mergeConfig } = require('vite');
+import { mergeConfig } from 'vite';
+import path from 'path';
+import optimizeLocales from '@react-aria/optimize-locales-plugin';
 
 module.exports = {
   stories: ['../packages/react/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
@@ -22,6 +23,15 @@ module.exports = {
   async viteFinal(config) {
     // Merge custom configuration into the default config
     return mergeConfig(config, {
+      plugins: [
+        {
+          ...optimizeLocales.vite({
+            // Keep only the supported locales
+            locales: ['nb', 'sv', 'en'],
+          }),
+          enforce: 'pre',
+        },
+      ],
       resolve: {
         alias: {
           '@': path.resolve(__dirname, '../src/'),
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Preview } from '@storybook/react';
-import { I18nProvider } from '../packages/react/src/index';
+import { GrunnmurenProvider } from '../packages/react/src';
 
 import './storybook.css';
 
 const preview: Preview = {
   decorators: [
     (Story) => (
-      <I18nProvider locale="nb">
+      <GrunnmurenProvider locale="nb">
         <Story />
-      </I18nProvider>
+      </GrunnmurenProvider>
     ),
   ],
 };
diff --git a/form-demo/app/layout.tsx b/form-demo/app/layout.tsx
@@ -1,3 +1,4 @@
+import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
 import './globals.css';
 
 export const metadata = {
@@ -9,11 +10,15 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const locale = 'nb';
+
   return (
-    <html lang="no">
-      <body>
-        <main className="container-prose">{children}</main>
-      </body>
-    </html>
+    <GrunnmurenProvider locale={locale}>
+      <html lang={locale}>
+        <body>
+          <main className="container-prose">{children}</main>
+        </body>
+      </html>
+    </GrunnmurenProvider>
   );
 }
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "@changesets/cli": "2.27.1",
     "@obosbbl/grunnmuren-tailwind": "workspace:*",
+    "@react-aria/optimize-locales-plugin": "1.0.2",
     "@storybook/addon-actions": "7.6.17",
     "@storybook/addon-controls": "7.6.17",
     "@storybook/addon-docs": "7.6.17",
diff --git a/packages/react/README.md b/packages/react/README.md
@@ -14,19 +14,19 @@ npm install @obosbbl/grunnmuren-react@canary
 pnpm add @obosbbl/grunnmuren-react@canary
 ```
 
-## Localization configuration
+## Setup
 
 Grunnmuren uses [React Aria Components](https://react-spectrum.adobe.com/react-aria/) under the hood. RAC has built in translation strings for non visible content (for accessibility reasons). It also automatically detects the language based on the browser or system language.
 
-To ensure that the language of the page content matches the accessibility strings you should wrap your application in a `I18nProvider`. This will override RAC's automatic locale selection.
+To ensure that the language of the page content matches the accessibility strings you must wrap your application in a `GrunnmurenProvider` with a `locale` prop. This will override RAC's automatic locale selection.
 
 In [Next.js](https://nextjs.org/) you can do this in the root [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
 
-Valid locales for Norwegian are `nb-NO` or `nb`, Swedish is `sv-SE` or `sv`.
+Valid locales are `nb`, `sv` or `en`. The provider defaults to `nb` if unspecified.
 
 ```js
 // app/layout.tsx
-import { I18nProvider } from '@obosbbl/grunnmuren-react';
+import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
 
 
 export default function RootLayout({
@@ -35,15 +35,15 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
 
-  // Either 'nb' or 'sv'
+  // Either 'nb', 'sv' or 'en'
   const locale = 'nb';
 
   return (
-    <I18nProvider locale={locale}>
+    <GrunnmurenProvider locale={locale}>
       <html lang={locale}>
         <body>{children}</body>
       </html>
-    </I18nProvider>
+    </GrunnmurenProvider>
   )
 }
 ```
@@ -76,7 +76,7 @@ module.exports = {
       optimizeLocales.webpack({
         // If you have a multitenant app, include both Norwegian and Swedish
         // If your app only serves one language, adjust accordingly
-        locales: ['nb-NO', 'sv-SE'],
+        locales: ['nb', 'sv'],
       }),
     );
     return config;
diff --git a/packages/react/src/GrunnmurenProvider.tsx b/packages/react/src/GrunnmurenProvider.tsx
@@ -0,0 +1,20 @@
+'use client';
+import { I18nProvider } from 'react-aria-components';
+
+type GrunnmurenProviderProps = {
+  children: React.ReactNode;
+  /**
+   *  The locale to apply to the children.
+   *  @default nb
+   */
+  locale?: 'nb' | 'sv' | 'en';
+};
+
+function GrunnmurenProvider({
+  children,
+  locale = 'nb',
+}: GrunnmurenProviderProps) {
+  return <I18nProvider locale={locale}>{children}</I18nProvider>;
+}
+
+export { type GrunnmurenProviderProps, GrunnmurenProvider };
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -1,5 +1,6 @@
-export { Form, I18nProvider } from 'react-aria-components';
+export { Form } from 'react-aria-components';
 
+export * from './GrunnmurenProvider';
 export * from './button';
 export * from './checkbox';
 export * from './combobox';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
