@okam/directus-next-component 1.0.0 → 1.1.0

package/.eslintrc.js

@@ -0,0 +1,21 @@
+const { getDefaultIgnorePatterns } = require("../../../linter/helpers");
+
+module.exports = {
+  extends: ['plugin:@nx/react', '../../../.eslintrc.js', '../../../linter/bases/typescript', '../../../linter/bases/regexp', '../../../linter/bases/jest', '../../../linter/bases/rtl', '../../../linter/bases/storybook', '../../../linter/bases/react', '../../../linter/bases/prettier', 'plugin:storybook/recommended'],
+  ignorePatterns: ['!**/*', ...getDefaultIgnorePatterns()],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+      // We set parserOptions.project for the project to allow TypeScript to create the type-checker behind the scenes when we run linting
+      parserOptions: {
+        project: `${__dirname}/tsconfig.*?.json`,
+      },
+      rules: {
+        "@nx/dependency-checks": "error"
+      }
+    },
+  ],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+}

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+## 1.1.0 (2024-06-28)
+
+
+### 🚀 Features
+
+- add new libs ([#71](https://github.com/OKAMca/stack/pull/71))
+
+- add dynamic page routing from directus page settings ([#97](https://github.com/OKAMca/stack/pull/97))
+
+
+### 🩹 Fixes
+
+- publishing for new libs ([#125](https://github.com/OKAMca/stack/pull/125))
+
+- publishing for new libs ([#126](https://github.com/OKAMca/stack/pull/126))
+
+
+### ❤️  Thank You
+
+- Marie-Maxime Tanguay @marie-maxime

package/README.md

@@ -4,19 +4,26 @@ This library was generated with [Nx](https://nx.dev).
 
 ## directusRouteMiddleware usage
 
-Create a middleware.js file in your project and add the following code to it.
+Create a middleware.ts file in the project, in the `/src/app` directory of the next application, and add the following code to it.
 
 ```jsx
-// middleware.js
+// middleware.ts
 
-import  {directusRouteMiddleware, directusRouteMiddlewareConfig} from @okam/directus-next-component
+import {
+  directusRouteMiddleware,
+  config as directusRouteMiddlewareConfig,
+} from '@okam/directus-next-component/src/server'
+import type { NextRequest } from 'next/server'
 
-export function middleware(request) {
-  return directusRouteMiddleware(request);
+export function middleware(request: NextRequest) {
+  const { locale } = request.nextUrl
+  return directusRouteMiddleware(request, [locale])
 }
 
-export config = {
-  ...directusRouteMiddlewareConfig
+export const config = {
+  ...directusRouteMiddlewareConfig,
 }
+
 ```
 
+After, modify the `next.config.js` file to add `withDirectus` in the plugins.

package/package.json

@@ -1,7 +1,4 @@
 {
   "name": "@okam/directus-next-component",
-  "version": "1.0.0",
-  "module": "./index.esm.js",
-  "type": "module",
-  "main": "./index.esm.js"
+  "version": "1.1.0"
 }

package/project.json

@@ -0,0 +1,32 @@
+{
+  "name": "directus-next-component",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/directus/directus-next-component/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/directus/directus-next-component",
+        "tsConfig": "libs/directus/directus-next-component/tsconfig.lib.json",
+        "project": "libs/directus/directus-next-component/package.json",
+        "entryFile": "libs/directus/directus-next-component/src/index.ts",
+        "external": "all",
+        "rollupConfig": "@nx/react/plugins/bundle-rollup",
+        "compiler": "swc",
+        "assets": [
+          {
+            "glob": "libs/directus/directus-next-component/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+// Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities

package/src/lib/directus-next-rewrite.ts

@@ -0,0 +1,106 @@
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+import { get } from 'radash'
+
+export async function fetchPageSettings(pathName: string, lang = 'fr-CA') {
+  const graphqlEndpoint = process.env.NEXT_PUBLIC_GRAPHQL_URL
+  const graphqlApiKey = process.env.NEXT_PUBLIC_API_TOKEN
+
+  if (!graphqlEndpoint || !graphqlApiKey) {
+    throw new Error('Missing graphql configuration: NEXT_PUBLIC_GRAPHQL_URL or NEXT_API_TOKEN_ADMIN')
+  }
+
+  let langCodeFilter = '_eq'
+
+  if (lang.length === 2) {
+    langCodeFilter = '_contains'
+  }
+
+  const query = `
+    query PageSettings($path: String = null, $lang: String = "fr-CA") {
+      page_settings(
+        filter: { translations: { path: { _eq: $path }, languages_code: {code: {${langCodeFilter}: $lang}} }},
+        limit: 1
+      ) {
+          belongs_to_key
+          belongs_to_collection
+      }
+    }
+  `
+
+  const graphqlBody = {
+    query,
+    variables: {
+      lang,
+      path: pathName,
+    },
+  }
+
+  try {
+    // console.info(`Fetching redirects on ${graphqlEndpoint}`)
+    const response = await fetch(graphqlEndpoint, {
+      method: 'POST',
+      headers: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${graphqlApiKey}`,
+      },
+      body: JSON.stringify(graphqlBody),
+    })
+
+    const { data } = await response.json()
+
+    const key = get<string>(data, 'page_settings.0.belongs_to_key')
+    const collection = get<string>(data, 'page_settings.0.belongs_to_collection')
+
+    if (key == null || collection == null) {
+      throw new Error('No page settings found')
+    }
+
+    return `/${collection}/${key}`
+  } catch (e) {
+    console.error('GraphQL Error', (e as Error).message)
+    return null
+  }
+}
+
+function removeLocaleFromPathName(pathName: string, locale: string) {
+  if (pathName.includes(locale)) {
+    return pathName.replace(`/${locale}`, '')
+  }
+  return pathName
+}
+
+export async function directusRouteMiddleware(request: NextRequest, locales: string[]) {
+  const { pathname } = request.nextUrl
+
+  const locale = locales.find((l) => pathname.startsWith(`/${l}`))
+
+  const pathNameWithoutLocale = locale ? removeLocaleFromPathName(pathname, locale) : pathname
+
+  // Fetch page settings based on the request path.
+  const route = await fetchPageSettings(pathNameWithoutLocale, locale)
+
+  if (route === null) {
+    return NextResponse.next()
+  }
+
+  // Perform a rewrite to the new path.
+  const url = request.nextUrl.clone()
+  url.pathname = route
+
+  return NextResponse.rewrite(url)
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     */
+    '/((?!api|_next/static|_next/image|favicon.ico).*)',
+  ],
+}

package/src/lib/hello-server.tsx

@@ -0,0 +1,4 @@
+// React server components are async so you make database or API calls.
+export async function HelloServer() {
+  return <h1>Hello Server</h1>
+}

package/src/lib/withDirectus.ts

@@ -0,0 +1,20 @@
+import type { NextConfig } from 'next'
+
+interface CustomPluginOptions {
+  [key: string]: string
+}
+
+const withDirectus = (nextConfig: NextConfig = {}, pluginOptions: CustomPluginOptions = {}): NextConfig => {
+  // Create a new object for the combined environment variables
+  const combinedEnv = {
+    ...nextConfig.env,
+    ...pluginOptions,
+  }
+
+  return {
+    ...nextConfig,
+    env: combinedEnv,
+  }
+}
+
+export default withDirectus

package/src/server.ts

@@ -0,0 +1,4 @@
+// Use this file to export React server components
+export * from './lib/hello-server'
+export { default as withDirectus } from './lib/withDirectus'
+export * from './lib/directus-next-rewrite'

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "next",
+      "@nx/next/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/index.esm.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";

package/index.esm.js

@@ -1 +0,0 @@
-

package/src/lib/directus-next-rewrite.d.ts

@@ -1,7 +0,0 @@
-import type { NextRequest } from 'next/server';
-import { NextResponse } from 'next/server';
-export declare function fetchPageSettings(pathName: string, lang?: string): Promise<string | null>;
-export declare function directusRouteMiddleware(request: NextRequest, locales: string[]): Promise<NextResponse<unknown>>;
-export declare const config: {
-    matcher: string[];
-};

package/src/lib/hello-server.d.ts

@@ -1 +0,0 @@
-export declare function HelloServer(): Promise<import("react/jsx-runtime").JSX.Element>;

package/src/lib/withDirectus.d.ts

@@ -1,6 +0,0 @@
-import type { NextConfig } from 'next';
-interface CustomPluginOptions {
-    [key: string]: string;
-}
-declare const withDirectus: (nextConfig?: NextConfig, pluginOptions?: CustomPluginOptions) => NextConfig;
-export default withDirectus;

package/src/server.d.ts

@@ -1,3 +0,0 @@
-export * from './lib/hello-server';
-export { default as withDirectus } from './lib/withDirectus';
-export * from './lib/directus-next-rewrite';