feat(repo): add support for translations

.github/workflows/storybook.yml

@@ -0,0 +1,28 @@
+name: Build and Deploy Storybook
+on:
+  push: 
+    main
+jobs:
+  deploy-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+      - name: Init 🖥
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build Storybook
+        run: pnpm build-storybook
+      # - name: Deploy 🚀
+      #   uses: JamesIves/github-pages-deploy-action@v4
+      #   with:
+      #     folder: dist/storybook/shared-storybook
+      #     branch: feat/bootstrap

README.md

@@ -1,22 +1,17 @@
-# Origin
+# Origin Defi
 
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+## Start any the app
 
-✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
+To start the development server run `nx serve ousd` or `nx serve oeth`. Open your browser and navigate to http://localhost:4200/. Happy coding!
 
+## Storybook
 
-## Start the app
+There is a shared storybook aggregator that can run all the stories across all the libraries, run
+`pnpm storybook`. If you want to run storybook for one individual library (eg: ousd) simply run `pnpm nx storybook defi-ousd` (basically the command is `pnpm nx storybook name-of-the-lib`).
 
-To start the development server run `nx serve origin`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+## Translations
 
-
-## Generate code
-
-If you happen to use Nx plugins, you can leverage code generators that might come with it.
-
-Run `nx list` to get a list of available plugins and whether they have generators. Then run `nx list <plugin-name>` to see what generators are available.
-
-Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).
+Basic translation setup was added to the repo. It might require some changes depending on how we would structure our translations and our modules, but for now it extracts and compiles translations available in the `apps` folder and the appropriate module in in `libs/defi/module-name`.
 
 ## Running tasks
 
@@ -39,25 +34,3 @@ nx run-many -t <target1> <target2> -p <proj1> <proj2>
 ```
 
 Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).
-
-## Want better Editor Integration?
-
-Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
-
-## Ready to deploy?
-
-Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.
-
-## Set up CI!
-
-Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.
-
-- [Set up remote caching](https://nx.dev/core-features/share-your-cache)
-- [Set up task distribution across multiple machines](https://nx.dev/core-features/distribute-task-execution)
-- [Learn more how to setup CI](https://nx.dev/recipes/ci)
-
-## Connect with us!
-
-- [Join the community](https://nx.dev/community)
-- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
-- [Follow us on Twitter](https://twitter.com/nxdevtools)

apps/oeth/project.json

@@ -67,6 +67,18 @@
       "options": {
         "lintFilePatterns": ["apps/oeth/**/*.{ts,tsx,js,jsx}"]
       }
+    },
+    "i18n-extract": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm formatjs extract '{apps/oeth,libs/defi/oeth}/**/!(*.d).{ts,tsx}' --out-file apps/oeth/src/lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'"
+      }
+    },
+    "i18n-compile": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm formatjs compile 'apps/oeth/src/lang/en.json' --out-file apps/oeth/src/lang/enUS.json"
+      }
     }
   },
   "tags": []

apps/oeth/src/lang/en.json

@@ -0,0 +1,8 @@
+{
+  "xomxyH": {
+    "defaultMessage": "Welcome to DefiOeth!"
+  },
+  "y6cogA": {
+    "defaultMessage": "test OEth"
+  }
+}

apps/oeth/src/lang/enUS.json

@@ -0,0 +1,4 @@
+{
+  "xomxyH": "Welcome to DefiOeth!",
+  "y6cogA": "test OEth"
+}

apps/oeth/src/lang/index.ts

@@ -0,0 +1,3 @@
+import * as en from './enUS.json';
+
+export { en };

apps/oeth/src/main.tsx

@@ -5,21 +5,27 @@ import { OethRoot } from './views/root';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '@origin/shared/data-access';
 import { theme } from '@origin/shared/theme';
-import { CssBaseline, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';
-
+import {
+  CssBaseline,
+  Experimental_CssVarsProvider as CssVarsProvider,
+} from '@mui/material';
+import { IntlProvider } from 'react-intl';
+import { en } from './lang';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <StrictMode>
-    <BrowserRouter>
-      <QueryClientProvider client={queryClient}>
-        <CssVarsProvider theme={theme} defaultMode="dark">
-          <CssBaseline />
-          <OethRoot />
-        </CssVarsProvider>
-      </QueryClientProvider>
-    </BrowserRouter>
+    <IntlProvider messages={en} locale="en" defaultLocale="en">
+      <BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+          <CssVarsProvider theme={theme} defaultMode="dark">
+            <CssBaseline />
+            <OethRoot />
+          </CssVarsProvider>
+        </QueryClientProvider>
+      </BrowserRouter>
+    </IntlProvider>
   </StrictMode>
 );

apps/oeth/src/views/root/index.tsx

@@ -1,8 +1,13 @@
 // placeholder component until we actually start migration
-import {DefiOeth} from '@origin/defi/oeth';
+import { DefiOeth } from '@origin/defi/oeth';
+import { useIntl } from 'react-intl';
 
 export function OethRoot() {
-    return <><h1>test OEth</h1>
-    <DefiOeth />
+  const intl = useIntl();
+  return (
+    <>
+      <h1>{intl.formatMessage({ defaultMessage: 'test OEth' })}</h1>
+      <DefiOeth />
     </>
-}
+  );
+}

apps/oeth/vite.config.ts

@@ -17,7 +17,19 @@ export default defineConfig({
   },
 
   plugins: [
-    react(),
+    react({
+      babel: {
+        plugins: [
+          [
+            'formatjs',
+            {
+              idInterpolationPattern: '[sha512:contenthash:base64:6]',
+              ast: true,
+            },
+          ],
+        ],
+      },
+    }),
     viteTsConfigPaths({
       root: '../../',
     }),

apps/ousd/project.json

@@ -67,6 +67,18 @@
       "options": {
         "lintFilePatterns": ["apps/ousd/**/*.{ts,tsx,js,jsx}"]
       }
+    },
+    "i18n-extract": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm formatjs extract '{apps/ousd,libs/defi/ousd}/**/!(*.d).{ts,tsx}' --out-file apps/ousd/src/lang/en-aggregated.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'"
+      }
+    },
+    "i18n-compile": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm formatjs compile 'apps/ousd/src/lang/en.json' --out-file apps/ousd/src/lang/enUS.json"
+      }
     }
   },
   "tags": []

apps/ousd/src/components/index.tsx

@@ -1,6 +1,13 @@
 // placeholder component until we actually start migration
-import {DefiOusd} from '@origin/defi/ousd';
+import { DefiOusd } from '@origin/defi/ousd';
+import { useIntl } from 'react-intl';
 
 export function OUSDRoot() {
-    return <><h1>test OUSD</h1><DefiOusd/></>
-}
+  const intl = useIntl();
+  return (
+    <>
+      <h1>{intl.formatMessage({ defaultMessage: 'test OUSD' })}</h1>
+      <DefiOusd />
+    </>
+  );
+}

apps/ousd/src/lang/en.json

@@ -0,0 +1,8 @@
+{
+  "47v1cE": {
+    "defaultMessage": "test OUSD"
+  },
+  "SFRdeA": {
+    "defaultMessage": "Welcome to DefiOusd!"
+  }
+}

apps/ousd/src/lang/enUS.json

@@ -0,0 +1,4 @@
+{
+  "47v1cE": "test OUSD",
+  "SFRdeA": "Welcome to DefiOusd!"
+}

apps/ousd/src/lang/index.ts

@@ -0,0 +1,3 @@
+import * as en from './enUS.json';
+
+export { en };

apps/ousd/src/main.tsx

@@ -3,20 +3,26 @@ import * as ReactDOM from 'react-dom/client';
 import { OUSDRoot } from './components';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '@origin/shared/data-access';
-import { CssBaseline, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';
+import {
+  CssBaseline,
+  Experimental_CssVarsProvider as CssVarsProvider,
+} from '@mui/material';
 import { theme } from '@origin/shared/theme';
-
+import { IntlProvider } from 'react-intl';
+import { en } from './lang';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <CssVarsProvider theme={theme} defaultMode="dark">
-        <CssBaseline />
-        <OUSDRoot />
-      </CssVarsProvider>
-    </QueryClientProvider>
+    <IntlProvider messages={en} locale="en" defaultLocale="en">
+      <QueryClientProvider client={queryClient}>
+        <CssVarsProvider theme={theme} defaultMode="dark">
+          <CssBaseline />
+          <OUSDRoot />
+        </CssVarsProvider>
+      </QueryClientProvider>
+    </IntlProvider>
   </StrictMode>
 );

apps/ousd/vite.config.ts

@@ -17,7 +17,19 @@ export default defineConfig({
   },
 
   plugins: [
-    react(),
+    react({
+      babel: {
+        plugins: [
+          [
+            'formatjs',
+            {
+              idInterpolationPattern: '[sha512:contenthash:base64:6]',
+              ast: true,
+            },
+          ],
+        ],
+      },
+    }),
     viteTsConfigPaths({
       root: '../../',
     }),

libs/defi/oeth/.storybook/main.js → libs/defi/oeth/.storybook/main.ts

@@ -1,11 +1,19 @@
 const config = {
-  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: ['@storybook/addon-essentials'],
   framework: {
     name: '@storybook/react-vite',
     options: {
       builder: {
-        viteConfigPath: '',
+        viteConfigPath: `${__dirname}/../../../shared/storybook/vite.config.ts`,
+      },
+    },
+  },
+  typescript: {
+    check: true,
+    checkOptions: {
+      typescript: {
+        configFile: `${__dirname}/../tsconfig.storybook.json`,
       },
     },
   },

libs/defi/oeth/.storybook/preview.tsx

@@ -0,0 +1,3 @@
+import preview from '@origin/shared/storybook';
+
+export default preview;

libs/defi/oeth/src/components/defi-oeth.tsx

@@ -1,10 +1,13 @@
+import { useIntl } from 'react-intl';
+
 /* eslint-disable-next-line */
 export interface DefiOethProps {}
 
 export function DefiOeth(props: DefiOethProps) {
+  const intl = useIntl();
   return (
     <div>
-      <h1>Welcome to DefiOeth!</h1>
+      <h1>{intl.formatMessage({ defaultMessage: 'Welcome to DefiOeth!' })}</h1>
     </div>
   );
 }

libs/defi/oeth/tsconfig.storybook.json

@@ -27,5 +27,5 @@
     "src/**/*.stories.mdx",
     ".storybook/*.js",
     ".storybook/*.ts"
-  ]
+, ".storybook/preview.tsx"  ]
 }

libs/defi/ousd/.storybook/main.js → libs/defi/ousd/.storybook/main.ts

@@ -1,11 +1,19 @@
 const config = {
-  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: ['@storybook/addon-essentials'],
   framework: {
     name: '@storybook/react-vite',
     options: {
       builder: {
-        viteConfigPath: '',
+        viteConfigPath: `${__dirname}/../../../shared/storybook/vite.config.ts`,
+      },
+    },
+  },
+  typescript: {
+    check: true,
+    checkOptions: {
+      typescript: {
+        configFile: `${__dirname}/../tsconfig.storybook.json`,
       },
     },
   },

libs/defi/ousd/.storybook/preview.tsx

@@ -0,0 +1,3 @@
+import preview from '@origin/shared/storybook';
+
+export default preview;