@okam/directus-next-component 1.1.0 → 1.2.0

package/components/DirectusLink/index.d.ts

@@ -0,0 +1,3 @@
+import type { TDirectusLinkProps } from './interface';
+declare const DirectusLink: (props: TDirectusLinkProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DirectusLink;

package/components/DirectusLink/index.js

@@ -0,0 +1,14 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const Link = require("next/link.js");
+const directusLink = require("../../hooks/directus-link.js");
+const DirectusLink = (props) => {
+  const { type, componentsConfig } = props;
+  const linkProps = directusLink(props);
+  if (!type || !linkProps.href) return null;
+  const LinkComponent = componentsConfig == null ? void 0 : componentsConfig[type];
+  if (!LinkComponent) return /* @__PURE__ */ jsxRuntime.jsx(stackUi.Anchor, { as: Link, ...linkProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { ...props });
+};
+module.exports = DirectusLink;

package/components/DirectusLink/index.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Anchor } from "@okam/stack-ui";
+import Link from "next/link.js";
+import useDirectusLink from "../../hooks/directus-link.mjs";
+const DirectusLink = (props) => {
+  const { type, componentsConfig } = props;
+  const linkProps = useDirectusLink(props);
+  if (!type || !linkProps.href) return null;
+  const LinkComponent = componentsConfig == null ? void 0 : componentsConfig[type];
+  if (!LinkComponent) return /* @__PURE__ */ jsx(Anchor, { as: Link, ...linkProps });
+  return /* @__PURE__ */ jsx(LinkComponent, { ...props });
+};
+export {
+  DirectusLink as default
+};

package/components/DirectusLink/interface.d.ts

@@ -0,0 +1,9 @@
+import type { TDefaultComponent, TAnchorProps } from '@okam/stack-ui';
+import type { ComponentType } from 'react';
+import type { TLinks } from '../../types/links';
+export interface TDirectusLinkProps extends Omit<TDefaultComponent, 'children'>, Omit<Partial<TLinks>, 'tokens'> {
+    componentsConfig?: TDirectusLinkComponentsConfig;
+    propsConfig?: TDirectusLinkPropsConfig;
+}
+export type TDirectusLinkComponentsConfig = Record<string, ComponentType<TDirectusLinkProps>>;
+export type TDirectusLinkPropsConfig<ReturnProps extends TAnchorProps = TAnchorProps> = Record<string, (props: TDirectusLinkProps) => ReturnProps>;

package/hooks/directus-file.d.ts

@@ -0,0 +1,3 @@
+import type { Nullable } from '@okam/stack-ui';
+import type { TFiles } from '../types/files';
+export default function useDirectusFile(file: Nullable<TFiles>, baseUrl?: URL): URL | null;

package/hooks/directus-file.js

@@ -0,0 +1,25 @@
+"use strict";
+const IMG_DOMAIN = process.env.NEXT_PUBLIC_IMG_DOMAIN;
+const IMG_PORT = process.env.NEXT_PUBLIC_IMG_PORT;
+const IMG_PROTOCOL = process.env.NEXT_PUBLIC_IMG_PROTOCOL;
+function getDirectusUrl(file, baseUrl) {
+  const { id, filename_download, filenameDownload } = file ?? {};
+  const { protocol = IMG_PROTOCOL, port = IMG_PORT, hostname = IMG_DOMAIN } = baseUrl ?? {};
+  if (!hostname || !id) return null;
+  try {
+    const url = new URL(
+      `/assets/${id}/${filename_download ?? filenameDownload ?? ""}`,
+      `${protocol ?? "https"}://${hostname}${port ? `:${port}` : ""}`
+    );
+    return url;
+  } catch (error) {
+    console.warn(error);
+    return null;
+  }
+}
+function useDirectusFile(file, baseUrl) {
+  if (!file) return null;
+  const url = getDirectusUrl(file, baseUrl);
+  return url;
+}
+module.exports = useDirectusFile;

package/hooks/directus-file.mjs

@@ -0,0 +1,26 @@
+const IMG_DOMAIN = process.env.NEXT_PUBLIC_IMG_DOMAIN;
+const IMG_PORT = process.env.NEXT_PUBLIC_IMG_PORT;
+const IMG_PROTOCOL = process.env.NEXT_PUBLIC_IMG_PROTOCOL;
+function getDirectusUrl(file, baseUrl) {
+  const { id, filename_download, filenameDownload } = file ?? {};
+  const { protocol = IMG_PROTOCOL, port = IMG_PORT, hostname = IMG_DOMAIN } = baseUrl ?? {};
+  if (!hostname || !id) return null;
+  try {
+    const url = new URL(
+      `/assets/${id}/${filename_download ?? filenameDownload ?? ""}`,
+      `${protocol ?? "https"}://${hostname}${port ? `:${port}` : ""}`
+    );
+    return url;
+  } catch (error) {
+    console.warn(error);
+    return null;
+  }
+}
+function useDirectusFile(file, baseUrl) {
+  if (!file) return null;
+  const url = getDirectusUrl(file, baseUrl);
+  return url;
+}
+export {
+  useDirectusFile as default
+};

package/hooks/directus-link.d.ts

@@ -0,0 +1,3 @@
+import type { TAnchorProps } from '@okam/stack-ui';
+import type { TDirectusLinkProps } from '../components/DirectusLink/interface';
+export default function useDirectusLink(props: TDirectusLinkProps): TAnchorProps;

package/hooks/directus-link.js

@@ -0,0 +1,47 @@
+"use strict";
+const directusFile = require("./directus-file.js");
+const defaultPropsConfig = {
+  collection: ({ collection, target }) => {
+    var _a, _b;
+    return {
+      href: ((_b = (_a = collection == null ? void 0 : collection.translations) == null ? void 0 : _a[0]) == null ? void 0 : _b.path) ?? void 0,
+      target: target ?? void 0
+    };
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  "external-link": ({ external_link: externalLink, target }) => ({
+    href: externalLink ?? void 0,
+    target: target ?? void 0
+  }),
+  file: ({ file }) => {
+    const { filename_download: filenameDownload } = file ?? {};
+    const href = directusFile(file);
+    return {
+      href: (href == null ? void 0 : href.toString()) ?? void 0,
+      download: filenameDownload ?? true
+    };
+  },
+  anchor: ({ anchor }) => ({ href: anchor ?? void 0 })
+};
+function useDirectusLink(props) {
+  const { type, label, prefetch, replace, scroll, variant, tokens, themeName, customTheme, propsConfig } = props;
+  if (!type) return {};
+  const finalConfig = { ...defaultPropsConfig, ...propsConfig ?? {} };
+  const { href, ...rest } = finalConfig[type](props);
+  if (!href) return {};
+  return {
+    themeName,
+    tokens: { ...tokens, ...variant ? { type: variant } : {} },
+    customTheme,
+    nextLinkProps: {
+      href,
+      prefetch: prefetch ?? void 0,
+      scroll: scroll ?? void 0,
+      replace: replace ?? void 0
+    },
+    href,
+    children: label,
+    ...rest
+  };
+}
+module.exports = useDirectusLink;

package/hooks/directus-link.mjs

@@ -0,0 +1,48 @@
+import useDirectusFile from "./directus-file.mjs";
+const defaultPropsConfig = {
+  collection: ({ collection, target }) => {
+    var _a, _b;
+    return {
+      href: ((_b = (_a = collection == null ? void 0 : collection.translations) == null ? void 0 : _a[0]) == null ? void 0 : _b.path) ?? void 0,
+      target: target ?? void 0
+    };
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  "external-link": ({ external_link: externalLink, target }) => ({
+    href: externalLink ?? void 0,
+    target: target ?? void 0
+  }),
+  file: ({ file }) => {
+    const { filename_download: filenameDownload } = file ?? {};
+    const href = useDirectusFile(file);
+    return {
+      href: (href == null ? void 0 : href.toString()) ?? void 0,
+      download: filenameDownload ?? true
+    };
+  },
+  anchor: ({ anchor }) => ({ href: anchor ?? void 0 })
+};
+function useDirectusLink(props) {
+  const { type, label, prefetch, replace, scroll, variant, tokens, themeName, customTheme, propsConfig } = props;
+  if (!type) return {};
+  const finalConfig = { ...defaultPropsConfig, ...propsConfig ?? {} };
+  const { href, ...rest } = finalConfig[type](props);
+  if (!href) return {};
+  return {
+    themeName,
+    tokens: { ...tokens, ...variant ? { type: variant } : {} },
+    customTheme,
+    nextLinkProps: {
+      href,
+      prefetch: prefetch ?? void 0,
+      scroll: scroll ?? void 0,
+      replace: replace ?? void 0
+    },
+    href,
+    children: label,
+    ...rest
+  };
+}
+export {
+  useDirectusLink as default
+};

package/hooks/navigation-items.d.ts

@@ -0,0 +1,9 @@
+import type { Nullable } from '@okam/stack-ui';
+import type { TDirectusLinkProps } from '../components/DirectusLink/interface';
+import type { TNavigationItems, TNavigationItemsTree } from '../types/navigation-items';
+/**
+ *
+ * @param navigationItems A tree of navigation items, with parents and children
+ * @returns A tree of navigation items with ready-to-use DirectusLink components
+ */
+export default function useNavigationItems<Depth extends number, Link, NavigationItems extends TNavigationItems<NavigationItems, Link, Depth> = TNavigationItems<unknown, Link, Depth>>(items: Nullable<Nullable<TNavigationItems<NavigationItems, Link, Depth>>[]>, onNavigationItem: (item: Nullable<TNavigationItems<NavigationItems, Link, Depth>>) => Nullable<TDirectusLinkProps>): Nullable<Nullable<TNavigationItemsTree>[]>;

package/hooks/navigation-items.js

@@ -0,0 +1,44 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../components/DirectusLink/index.js");
+function createParentTree(item, onNavigationItem, depth = -1) {
+  const { parent } = item ?? {};
+  const link = onNavigationItem(item);
+  const { id } = link ?? {};
+  if (!id) return null;
+  return {
+    link: /* @__PURE__ */ jsxRuntime.jsx(index, { ...link }),
+    linkProps: link,
+    parent: createParentTree(parent, onNavigationItem, depth - 1),
+    depth
+  };
+}
+function createChildrenTree(item, onNavigationItem, depth = 1) {
+  const { children } = item ?? {};
+  const link = onNavigationItem(item);
+  const { id } = link ?? {};
+  if (!id) return null;
+  return {
+    link: /* @__PURE__ */ jsxRuntime.jsx(index, { ...link }),
+    linkProps: link,
+    children: children == null ? void 0 : children.map((child) => createChildrenTree(child, onNavigationItem, depth + 1)),
+    depth
+  };
+}
+function useNavigationItems(items, onNavigationItem) {
+  const tree = items == null ? void 0 : items.map((item) => {
+    const { children, parent } = item ?? {};
+    const link = onNavigationItem(item);
+    const parentTree = createParentTree(parent, onNavigationItem);
+    const childrenTree = children == null ? void 0 : children.map((child) => createChildrenTree(child, onNavigationItem));
+    return {
+      depth: 0,
+      parent: parentTree,
+      children: childrenTree,
+      link: /* @__PURE__ */ jsxRuntime.jsx(index, { ...link }),
+      linkProps: link
+    };
+  });
+  return tree;
+}
+module.exports = useNavigationItems;

package/hooks/navigation-items.mjs

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import DirectusLink from "../components/DirectusLink/index.mjs";
+function createParentTree(item, onNavigationItem, depth = -1) {
+  const { parent } = item ?? {};
+  const link = onNavigationItem(item);
+  const { id } = link ?? {};
+  if (!id) return null;
+  return {
+    link: /* @__PURE__ */ jsx(DirectusLink, { ...link }),
+    linkProps: link,
+    parent: createParentTree(parent, onNavigationItem, depth - 1),
+    depth
+  };
+}
+function createChildrenTree(item, onNavigationItem, depth = 1) {
+  const { children } = item ?? {};
+  const link = onNavigationItem(item);
+  const { id } = link ?? {};
+  if (!id) return null;
+  return {
+    link: /* @__PURE__ */ jsx(DirectusLink, { ...link }),
+    linkProps: link,
+    children: children == null ? void 0 : children.map((child) => createChildrenTree(child, onNavigationItem, depth + 1)),
+    depth
+  };
+}
+function useNavigationItems(items, onNavigationItem) {
+  const tree = items == null ? void 0 : items.map((item) => {
+    const { children, parent } = item ?? {};
+    const link = onNavigationItem(item);
+    const parentTree = createParentTree(parent, onNavigationItem);
+    const childrenTree = children == null ? void 0 : children.map((child) => createChildrenTree(child, onNavigationItem));
+    return {
+      depth: 0,
+      parent: parentTree,
+      children: childrenTree,
+      link: /* @__PURE__ */ jsx(DirectusLink, { ...link }),
+      linkProps: link
+    };
+  });
+  return tree;
+}
+export {
+  useNavigationItems as default
+};

package/index.d.ts

@@ -0,0 +1,9 @@
+export { default as DirectusLink } from './components/DirectusLink';
+export { default as useDirectusFile } from './hooks/directus-file';
+export { default as useDirectusLink } from './hooks/directus-link';
+export { default as useNavigationItems } from './hooks/navigation-items';
+export type { TFiles } from './types/files';
+export type { TPageSettings } from './types/page-settings';
+export type { TNavigationItems, TNavigationItemsTree } from './types/navigation-items';
+export type { TLinks } from './types/links';
+export type { TDirectusLinkProps } from './components/DirectusLink/interface';

package/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./components/DirectusLink/index.js");
+const directusFile = require("./hooks/directus-file.js");
+const directusLink = require("./hooks/directus-link.js");
+const navigationItems = require("./hooks/navigation-items.js");
+exports.DirectusLink = index;
+exports.useDirectusFile = directusFile;
+exports.useDirectusLink = directusLink;
+exports.useNavigationItems = navigationItems;

package/index.mjs

@@ -0,0 +1,10 @@
+import { default as default2 } from "./components/DirectusLink/index.mjs";
+import { default as default3 } from "./hooks/directus-file.mjs";
+import { default as default4 } from "./hooks/directus-link.mjs";
+import { default as default5 } from "./hooks/navigation-items.mjs";
+export {
+  default2 as DirectusLink,
+  default3 as useDirectusFile,
+  default4 as useDirectusLink,
+  default5 as useNavigationItems
+};

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

@@ -0,0 +1,7 @@
+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/lib/directus-next-rewrite.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const server_js = require("next/server.js");
+const radash = require("radash");
+async function fetchPageSettings(pathName, 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 {
+    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 = radash.get(data, "page_settings.0.belongs_to_key");
+    const collection = radash.get(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.message);
+    return null;
+  }
+}
+function removeLocaleFromPathName(pathName, locale) {
+  if (pathName.includes(locale)) {
+    return pathName.replace(`/${locale}`, "");
+  }
+  return pathName;
+}
+async function directusRouteMiddleware(request, locales) {
+  const { pathname } = request.nextUrl;
+  const locale = locales.find((l) => pathname.startsWith(`/${l}`));
+  const pathNameWithoutLocale = locale ? removeLocaleFromPathName(pathname, locale) : pathname;
+  const route = await fetchPageSettings(pathNameWithoutLocale, locale);
+  if (route === null) {
+    return server_js.NextResponse.next();
+  }
+  const url = request.nextUrl.clone();
+  url.pathname = route;
+  return server_js.NextResponse.rewrite(url);
+}
+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).*)"
+  ]
+};
+exports.config = config;
+exports.directusRouteMiddleware = directusRouteMiddleware;
+exports.fetchPageSettings = fetchPageSettings;

package/lib/directus-next-rewrite.mjs

@@ -0,0 +1,87 @@
+import { NextResponse } from "next/server.js";
+import { get } from "radash";
+async function fetchPageSettings(pathName, 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 {
+    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(data, "page_settings.0.belongs_to_key");
+    const collection = get(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.message);
+    return null;
+  }
+}
+function removeLocaleFromPathName(pathName, locale) {
+  if (pathName.includes(locale)) {
+    return pathName.replace(`/${locale}`, "");
+  }
+  return pathName;
+}
+async function directusRouteMiddleware(request, locales) {
+  const { pathname } = request.nextUrl;
+  const locale = locales.find((l) => pathname.startsWith(`/${l}`));
+  const pathNameWithoutLocale = locale ? removeLocaleFromPathName(pathname, locale) : pathname;
+  const route = await fetchPageSettings(pathNameWithoutLocale, locale);
+  if (route === null) {
+    return NextResponse.next();
+  }
+  const url = request.nextUrl.clone();
+  url.pathname = route;
+  return NextResponse.rewrite(url);
+}
+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).*)"
+  ]
+};
+export {
+  config,
+  directusRouteMiddleware,
+  fetchPageSettings
+};

package/lib/hello-server.d.ts

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

package/lib/hello-server.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+async function HelloServer() {
+  return /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "Hello Server" });
+}
+exports.HelloServer = HelloServer;

package/lib/hello-server.mjs

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+async function HelloServer() {
+  return /* @__PURE__ */ jsx("h1", { children: "Hello Server" });
+}
+export {
+  HelloServer
+};

package/lib/withDirectus.d.ts

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

package/lib/withDirectus.js

@@ -0,0 +1,12 @@
+"use strict";
+const withDirectus = (nextConfig = {}, pluginOptions = {}) => {
+  const combinedEnv = {
+    ...nextConfig.env,
+    ...pluginOptions
+  };
+  return {
+    ...nextConfig,
+    env: combinedEnv
+  };
+};
+module.exports = withDirectus;

package/lib/withDirectus.mjs

@@ -0,0 +1,13 @@
+const withDirectus = (nextConfig = {}, pluginOptions = {}) => {
+  const combinedEnv = {
+    ...nextConfig.env,
+    ...pluginOptions
+  };
+  return {
+    ...nextConfig,
+    env: combinedEnv
+  };
+};
+export {
+  withDirectus as default
+};

package/package.json

@@ -1,4 +1,22 @@
 {
   "name": "@okam/directus-next-component",
-  "version": "1.1.0"
+  "version": "1.2.0",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    },
+    "./server": {
+      "import": "./server.mjs",
+      "require": "./server.js"
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "url": "https://github.com/OKAMca/stack.git"
+  }
 }

package/server.d.ts

@@ -0,0 +1,7 @@
+export * from './lib/hello-server';
+export { default as withDirectus } from './lib/withDirectus';
+export * from './lib/directus-next-rewrite';
+export { default as DirectusLink } from './components/DirectusLink';
+export { default as useDirectusFile } from './hooks/directus-file';
+export { default as useDirectusLink } from './hooks/directus-link';
+export { default as useNavigationItems } from './hooks/navigation-items';

package/server.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helloServer = require("./lib/hello-server.js");
+const withDirectus = require("./lib/withDirectus.js");
+const directusNextRewrite = require("./lib/directus-next-rewrite.js");
+const index = require("./components/DirectusLink/index.js");
+const directusFile = require("./hooks/directus-file.js");
+const directusLink = require("./hooks/directus-link.js");
+const navigationItems = require("./hooks/navigation-items.js");
+exports.HelloServer = helloServer.HelloServer;
+exports.withDirectus = withDirectus;
+exports.config = directusNextRewrite.config;
+exports.directusRouteMiddleware = directusNextRewrite.directusRouteMiddleware;
+exports.fetchPageSettings = directusNextRewrite.fetchPageSettings;
+exports.DirectusLink = index;
+exports.useDirectusFile = directusFile;
+exports.useDirectusLink = directusLink;
+exports.useNavigationItems = navigationItems;

package/server.mjs

@@ -0,0 +1,18 @@
+import { HelloServer } from "./lib/hello-server.mjs";
+import { default as default2 } from "./lib/withDirectus.mjs";
+import { config, directusRouteMiddleware, fetchPageSettings } from "./lib/directus-next-rewrite.mjs";
+import { default as default3 } from "./components/DirectusLink/index.mjs";
+import { default as default4 } from "./hooks/directus-file.mjs";
+import { default as default5 } from "./hooks/directus-link.mjs";
+import { default as default6 } from "./hooks/navigation-items.mjs";
+export {
+  default3 as DirectusLink,
+  HelloServer,
+  config,
+  directusRouteMiddleware,
+  fetchPageSettings,
+  default4 as useDirectusFile,
+  default5 as useDirectusLink,
+  default6 as useNavigationItems,
+  default2 as withDirectus
+};

package/types/files.d.ts

@@ -0,0 +1,18 @@
+export type TFiles = {
+    id: string;
+    filename_disk?: string | null;
+    filename_download?: string | null;
+    /**
+     * @deprecated
+     */
+    filenameDownload?: string | null;
+    title?: string | null;
+    type?: string | null;
+    width?: number | null;
+    height?: number | null;
+    duration?: number | null;
+    embed?: string | null;
+    description?: string | null;
+    focal_point_x?: number | null;
+    focal_point_y?: number | null;
+};

package/types/links.d.ts

@@ -0,0 +1,20 @@
+import type { TFiles } from './files';
+import type { TPageSettings } from './page-settings';
+/**
+ * Represent the directus `links` collection, not the props of the DirectusLink component
+ */
+export type TLinks = {
+    anchor?: string | null;
+    external_link?: string | null;
+    id?: string;
+    label?: string | null;
+    prefetch?: boolean | null;
+    replace?: boolean | null;
+    scroll?: boolean | null;
+    target?: string | null;
+    tokens?: any | null;
+    type?: string | null;
+    variant?: string | null;
+    collection?: TPageSettings | null;
+    file?: TFiles | null;
+};

package/types/navigation-items.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { Nullable } from '@okam/stack-ui';
+import type { TDirectusLinkProps } from '../components/DirectusLink/interface';
+export type TNavigationItemsTree = {
+    /**
+     * Pre-rendered DirectusLink component for quick usage
+     */
+    link: Nullable<React.ReactElement>;
+    linkProps: Nullable<TDirectusLinkProps>;
+    children?: Nullable<Nullable<TNavigationItemsTree>[]>;
+    parent?: Nullable<TNavigationItemsTree>;
+    /**
+     * Starts at 0.
+     * For each level of parent, goes down by 1
+     * For each level of children, goes up by 1
+     */
+    depth: number;
+};
+type DepthLimit = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export type TNavigationItemsParents<NavigationItems, Link, Depth extends number> = Depth extends never ? Link : {
+    parent?: Nullable<TNavigationItemsParents<NavigationItems, Link, Depth>>;
+} & Link;
+export type TNavigationItemsChildren<NavigationItems, Link, Depth extends number> = Depth extends never ? Link : {
+    children?: Nullable<Nullable<TNavigationItemsChildren<NavigationItems, Link, DepthLimit[Depth]>>[]>;
+} & Link;
+export type TNavigationItems<NavigationItems, Link, Depth extends number> = TNavigationItemsChildren<NavigationItems, Link, Depth> & TNavigationItemsParents<NavigationItems, Link, Depth>;
+export {};

package/types/page-settings.d.ts

@@ -0,0 +1,17 @@
+export type TPageSettings = {
+    id: string;
+    belongs_to_collection?: string | null;
+    translations?: Array<{
+        slug?: string | null;
+        title?: string | null;
+        path?: string | null;
+        languages_code?: {
+            code: string;
+        } | null;
+    } | null> | null;
+    route?: {
+        translations?: Array<{
+            route?: string | null;
+        } | null> | null;
+    } | null;
+};

package/.eslintrc.js

@@ -1,21 +0,0 @@
-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

@@ -1,20 +0,0 @@
-## 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

@@ -1,29 +0,0 @@
-# directus-next-component
-
-This library was generated with [Nx](https://nx.dev).
-
-## directusRouteMiddleware usage
-
-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.ts
-
-import {
-  directusRouteMiddleware,
-  config as directusRouteMiddlewareConfig,
-} from '@okam/directus-next-component/src/server'
-import type { NextRequest } from 'next/server'
-
-export function middleware(request: NextRequest) {
-  const { locale } = request.nextUrl
-  return directusRouteMiddleware(request, [locale])
-}
-
-export const config = {
-  ...directusRouteMiddlewareConfig,
-}
-
-```
-
-After, modify the `next.config.js` file to add `withDirectus` in the plugins.

package/project.json

@@ -1,32 +0,0 @@
-{
-  "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

@@ -1 +0,0 @@
-// 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

@@ -1,106 +0,0 @@
-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

@@ -1,4 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-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

@@ -1,4 +0,0 @@
-// 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

@@ -1,17 +0,0 @@
-{
-  "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

@@ -1,25 +0,0 @@
-{
-  "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"]
-}