21 web handle currency

.env.local

@@ -108,5 +108,6 @@ KV_REST_API_TOKEN="example_token"
 ## timezone
 TZ=UTC
 
-
-# NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=test
+## currency
+FIXER_CURRENCY_API_KEY='0f0ab52ebe369b4693f500cd98188313'
+EXCHANGE_RATE_API_KEY='6c9a453dde30336217525dad'

.github/workflows/preview-apps.yml

@@ -5,7 +5,6 @@ on:
     types: [opened, reopened, synchronize]
     branches-ignore:
       - main
-      - staging
 
 env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

apps/back-office/app/[locale]/layout.tsx

@@ -1,12 +1,13 @@
-import { type AppNavLayoutProps } from '@features/appNav/ui';
 import { AuthProvider, NextAuthProvider } from '@next/auth';
 import { getMessages, locales } from '@next/i18n';
 import { ReactQueryProviders } from '@next/react-query';
 import { UploaderProvider } from '@next/uploader-provider';
 import { Toaster } from '@ui/components';
 import { cn } from '@ui/shared';
 import { ThemeProvider } from '@ui/theme';
-import { Analytics } from '@web/components/Analytics';
+import { Analytics } from '@back-office/components/Analytics';
+import { siteConfig } from '@back-office/config/site';
+import { Metadata } from 'next';
 import { createTranslator } from 'next-intl';
 import { Inter as FontSans } from 'next/font/google';
 import localFont from 'next/font/local';
@@ -24,16 +25,24 @@ const fontHeading = localFont({
   variable: '--font-heading',
 });
 
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s - ${siteConfig.name}`,
+  },
+};
+
 // Error: Usage of next-intl APIs in Server Components is currently only available for dynamic rendering (i.e. no `generateStaticParams`).
 // Support for static rendering is under consideration, please refer to the roadmap: https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components#roadmap
 // export async function generateStaticParams() {
 //   return locales.map((locale) => ({ locale }));
 // }
 
-interface RootLayoutProps extends AppNavLayoutProps {
+interface RootLayoutProps {
   params: {
     locale: string;
   };
+  children: React.ReactNode;
 }
 
 // export async function generateStaticParams() {

apps/back-office/next.config.js

@@ -108,7 +108,6 @@ const nextConfig = {
     // If use with serverActions is desired
     serverActions: true,
     useDeploymentIdServerActions: true,
-    appDir: true,
     typedRoutes: false, // no solution found to get it working with nx monorepo (not accessible from external libs like feature)
   },
   sentry: {

apps/web/.storybook/env-nextjs.mock.js

@@ -0,0 +1,3 @@
+module.exports = {
+  createEnv: (env) => env.runtimeEnv,
+};

apps/web/.storybook/main.ts

@@ -57,6 +57,10 @@ module.exports = {
       test: /\.svg$/,
       use: ['@svgr/webpack', 'url-loader'],
     });
+    config.resolve.alias['@t3-oss/env-nextjs'] = path.resolve(
+      __dirname,
+      './env-nextjs.mock.js'
+    );
     //
     // Add tsconfig-paths-webpack-plugin to the resolve.plugins array
     config.resolve.plugins = [

apps/web/.storybook/preview.tsx

@@ -1,11 +1,12 @@
-import '../styles/globals.css';
-import { Preview, Decorator } from '@storybook/react';
-import { useEffect, useState } from 'react';
-import { parameters } from '../../../storybook.preview.base';
-import { NextIntlClientProvider } from 'next-intl';
+import { CurrencyProvider } from '@next/currency';
 import { defaultLocale } from '@next/i18n';
+import { Decorator, Preview } from '@storybook/react';
+import { NextIntlClientProvider } from 'next-intl';
+import { useEffect, useState } from 'react';
 import messagesEn from '../../../libs/next/i18n/src/messages/en.json';
 import messagesfr from '../../../libs/next/i18n/src/messages/fr.json';
+import { parameters } from '../../../storybook.preview.base';
+import '../styles/globals.css';
 
 window.STORYBOOK_ENV = true;
 
@@ -68,6 +69,10 @@ const I18nextStoryDecorator: Decorator = (Story, context) => {
   );
 };
 
+const CurrencyDecorator: Decorator = (Story, context) => {
+  return <CurrencyProvider>{Story(context)}</CurrencyProvider>;
+};
+
 document.body.classList.add('font-sans');
 
 const preview: Preview = {
@@ -81,6 +86,7 @@ const preview: Preview = {
     DarkModeDecorator,
     I18nextStoryDecorator,
     localStorageResetDecorator,
+    CurrencyDecorator,
   ],
 };
 export default preview;

apps/web/app/[locale]/layout.tsx

@@ -1,4 +1,5 @@
 import { AuthProvider, NextAuthProvider } from '@next/auth';
+import { CurrencyProvider } from '@next/currency';
 import { getMessages, locales } from '@next/i18n';
 import { ReactQueryProviders } from '@next/react-query';
 import { Toaster } from '@ui/components';
@@ -129,8 +130,10 @@ export default async function RootLayout({
               }}
             >
               <ReactQueryProviders>
-                <AppNavLayout {...appNavLayout}>{children}</AppNavLayout>
-                <Toaster />
+                <CurrencyProvider>
+                  <AppNavLayout {...appNavLayout}>{children}</AppNavLayout>
+                  <Toaster />
+                </CurrencyProvider>
               </ReactQueryProviders>
             </AuthProvider>
           </NextAuthProvider>

apps/web/app/api/currency/rates/route.ts

@@ -0,0 +1,27 @@
+import { getRates } from '@next/currency-cache';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(req: NextRequest) {
+  try {
+    const rates = await getRates();
+
+    return new NextResponse(JSON.stringify(rates), {
+      status: 200,
+      headers: {
+        'content-type': 'application/json',
+      },
+    });
+  } catch (error) {
+    console.error(error);
+
+    return new NextResponse(
+      JSON.stringify({ error: 'Failed to fetch rates' }),
+      {
+        status: 500,
+        headers: {
+          'content-type': 'application/json',
+        },
+      }
+    );
+  }
+}

apps/web/sentry.client.config.ts

@@ -5,12 +5,8 @@
 import * as Sentry from '@sentry/nextjs';
 
 import env from '@env/client';
-import envServer from '@env/server';
-
 //
-const SENTRY_DSN = envServer.SENTRY_AUTH_TOKEN
-  ? null
-  : envServer.SENTRY_DSN || env.NEXT_PUBLIC_SENTRY_DSN;
+const SENTRY_DSN = env.NEXT_PUBLIC_SENTRY_DSN;
 
 Sentry.init({
   environment: process.env.NEXT_PUBLIC_VERCEL_ENV || 'development',

jest.preset.js

@@ -28,6 +28,22 @@ module.exports = {
         },
       },
     ],
+    // avoid issue with import.meta
+    '^.+\\.[tj]s$': [
+      'ts-jest',
+      {
+        diagnostics: {
+          ignoreCodes: [1343],
+        },
+        astTransformers: {
+          before: [
+            {
+              path: 'ts-jest-mock-import-meta', // or 'node_modules/ts-jest-mock-import-meta'
+            },
+          ],
+        },
+      },
+    ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'mjs'],
   coverageThreshold: {

libs/currency/api/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/currency/api/README.md

@@ -0,0 +1,11 @@
+# currency-api
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build currency-api` to build the library.
+
+## Running unit tests
+
+Run `nx test currency-api` to execute the unit tests via [Jest](https://jestjs.io).

libs/currency/api/jest.config.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+export default {
+  displayName: 'currency-api',
+  preset: '../../../jest.preset.js',
+  testEnvironment: 'node',
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../../coverage/libs/currency/api',
+};

libs/currency/api/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@currency/api",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/currency/api/project.json

@@ -0,0 +1,43 @@
+{
+  "name": "currency-api",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/currency/api/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/currency/api",
+        "main": "libs/currency/api/src/index.ts",
+        "tsConfig": "libs/currency/api/tsconfig.lib.json",
+        "assets": ["libs/currency/api/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/currency/api/**/*.ts",
+          "libs/currency/api/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/currency/api/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": []
+}