@okam/directus-next-component 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -0,0 +1,96 @@
+## 1.4.0 (2024-09-24)
+
+
+### 🚀 Features
+
+- **directus-next:** directus based routing ([196ab1e](https://github.com/OKAMca/stack/commit/196ab1e))
+
+
+### ❤️  Thank You
+
+- David Paquet Pitts
+
+## 1.3.1 (2024-08-15)
+
+
+### 🩹 Fixes
+
+- **directus-link:** file type links render correct href ([454a847](https://github.com/OKAMca/stack/commit/454a847))
+
+
+### ❤️  Thank You
+
+- poclerson
+
+## 1.3.0 (2024-08-15)
+
+
+### 🚀 Features
+
+- directus image support for videos ([4d45c9c](https://github.com/OKAMca/stack/commit/4d45c9c))
+
+
+### 🩹 Fixes
+
+- move tokens and variant from links to navigation item ([7fca919](https://github.com/OKAMca/stack/commit/7fca919))
+
+- **directus-next-component:** a11y props and bugfix ([dc3dbde](https://github.com/OKAMca/stack/commit/dc3dbde))
+
+
+### ❤️  Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+- mykimd
+- Pierre-Olivier Clerson @poclerson
+- poclerson
+- Yan Morin
+- yanmorinokamca @yanmorinokamca
+
+## 1.2.0 (2024-07-25)
+
+
+### 🚀 Features
+
+- directus link component + use nav items hook ([750fa5c](https://github.com/OKAMca/stack/commit/750fa5c))
+
+
+### ❤️  Thank You
+
+- Jérôme Trottier
+- Marie-Maxime Tanguay @marie-maxime
+- Pierre-Olivier Clerson @poclerson
+
+## 1.1.1 (2024-07-16)
+
+
+### 🩹 Fixes
+
+- **publish:** add building packages step to workflow ([c9ce442](https://github.com/OKAMca/stack/commit/c9ce442))
+
+
+### ❤️  Thank You
+
+- Jérôme Trottier
+- Pierre-Olivier Clerson @poclerson
+- yanmorinokamca @yanmorinokamca
+
+## 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

@@ -0,0 +1,142 @@
+# 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.
+
+## useDirectusLink hook
+
+The role of the directus link hook is to dispatch different props according to the type of the directus link. The configuration for the dispatching is overridable using the `propsConfig` prop
+
+## DirectusLink component
+
+The role of the directus link component is to wrap `next/link` and dispatch the props to different components according to a configuration. The configuration for dispatching different components is overridable using the `componentsConfig` prop.
+
+The directus link component uses the directus link hook, which means it can be passed both `componentsConfig` and `propsConfig` for both dispatching uses.
+
+By default, the following are included:
+
+- `collection`: Render a link using a `page_settings` relation
+- `anchor`: Render a link pointing to an element's id on the page (always starts with `#`)
+- `external-link`: Render a link with an external URL (e.g.: https://google.com)
+- `file`: Render a link for a downloadable file
+
+The mentionned configuration can be overwritten by passing a `componentsConfig` prop to the directus link component
+
+```jsx
+const overrideConfig = {
+  'external-link': (props) => <CustomExternalLinkComponent {...props} />
+}
+
+const BrandLink = (props) => {
+  return <DirectusLink config={overrideConfig} {...props} />
+}
+```
+
+## useNavigationItems hook
+
+The `useNavigationItems` hook allows to build recursively a navigation structure using the `DirectusLink` component. 
+
+The tokens passed to `link` and `linkProps` include also include, in order of priority:
+- The tokens passed from `onNavigationItem`
+- The variant of the navigation item, passed as the `type` token
+- The tokens of the navigation item
+
+### Props
+
+
+
+### Returned props of each parsed navigation item in the tree
+
+- `link`: A rendered react node of the `DirectusLink` component
+- `linkProps`: The props that were passed to the link
+- `children`: The navigation items containing link, linkProps, children
+- `parent`: A single navigation item containing link, linkProps, parent
+- `depth`: The current depth of the recursion. For each level of parent, the depth will go down by one. For each level of children, the depth will go up by one. The depth starts at zero
+
+### Example usage
+
+```tsx
+// Any styling could go here
+const depthMap: Record<number, object> = {
+  0: { backgroundColor: 'red' },
+  1: { backgroundColor: 'blue' },
+  2: { backgroundColor: 'green' },
+}
+
+// Loop recursively through navigation items and assign style based on depth
+function renderTree(tree: Nullable<TNavigationItemsTree>): React.ReactNode {
+  if (!tree) return null
+  const { children, link, linkProps, depth } = tree
+  const style = depthMap[depth]
+
+  if (!link && !children) return null
+  if (!children) {
+    return (
+      <li style={style} key={link.id}>
+        {
+          /*
+           * Here, `link` represents a rendered version of `DirectusLink` for quick use
+           * Use `linkProps` for custom rendering needs
+           */
+        }
+        {link}
+      </li>
+    )
+  }
+  return (
+    <ul key={link.id}>
+      <li style={style}>{link}</li>
+      {children.map((child) => renderTree(child))}
+    </ul>
+  )
+}
+
+const NavigationComponent = (props) => {
+  // Depth and links type cannot be inferred directly, they must be passed
+  const navigation = useNavigationItems<3, { link?: LinksFragment }>(
+    props.navigationItems, 
+
+    // Use `onNavigationItem` to parse the fragments
+    (item) => {
+      const { link } = item ?? {}
+      const collection = getFragment(PageSettingsFragmentDoc, link?.collection)
+      const file = getFragment(FilesFragmentDoc, link?.file)
+      return {
+        ...link,
+        collection,
+        file,
+    }
+  })
+
+  return (
+    <nav>
+      {navigation.map((item) => renderTree(item))}
+    </nav>
+  )
+}
+```

package/components/DirectusFile/config.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react-spring';
+import type { ComponentType } from '@react-spring/web';
 import type { TDirectusFileProps } from './interface';
 declare const directusFileConfig: Record<string, ComponentType<TDirectusFileProps>>;
 export default directusFileConfig;

package/{hooks → directus/directus-next-component/src/hooks}/directus-file.js

@@ -1,4 +1,5 @@
 "use strict";
+const logger = require("../logger.js");
 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 ?? "https";
@@ -18,7 +19,7 @@ function getDirectusUrl(file, baseUrl, searchParams) {
     if (searchParams) setSearchParams(url, searchParams);
     return url;
   } catch (error) {
-    console.warn(error);
+    logger.logger.log("Couldn't create URL", "warn", { error });
     return null;
   }
 }

package/{hooks → directus/directus-next-component/src/hooks}/directus-file.mjs

@@ -1,3 +1,4 @@
+import { logger } from "../logger.mjs";
 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 ?? "https";
@@ -17,7 +18,7 @@ function getDirectusUrl(file, baseUrl, searchParams) {
     if (searchParams) setSearchParams(url, searchParams);
     return url;
   } catch (error) {
-    console.warn(error);
+    logger.log("Couldn't create URL", "warn", { error });
     return null;
   }
 }

package/{index.js → directus/directus-next-component/src/index.js}

@@ -7,6 +7,7 @@ const index$3 = require("./components/DirectusFile/index.js");
 const directusFile = require("./hooks/directus-file.js");
 const directusLink = require("./hooks/directus-link.js");
 const navigationItems = require("./hooks/navigation-items.js");
+const logger = require("./logger.js");
 exports.DirectusLink = index;
 exports.DirectusImg = index$1;
 exports.DirectusVideo = index$2;
@@ -14,3 +15,4 @@ exports.DirectusFile = index$3;
 exports.useDirectusFile = directusFile;
 exports.useDirectusLink = directusLink;
 exports.useNavigationItems = navigationItems;
+exports.DirectusNextComponent = logger.logger;

package/{index.mjs → directus/directus-next-component/src/index.mjs}

@@ -5,10 +5,12 @@ import { default as default5 } from "./components/DirectusFile/index.mjs";
 import { default as default6 } from "./hooks/directus-file.mjs";
 import { default as default7 } from "./hooks/directus-link.mjs";
 import { default as default8 } from "./hooks/navigation-items.mjs";
+import { logger } from "./logger.mjs";
 export {
   default5 as DirectusFile,
   default3 as DirectusImg,
   default2 as DirectusLink,
+  logger as DirectusNextComponent,
   default4 as DirectusVideo,
   default6 as useDirectusFile,
   default7 as useDirectusLink,

package/directus/directus-next-component/src/logger.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../stack/logger/src/lib/logger.js");
+const factoryLogger = require("../../../stack/logger/src/lib/factoryLogger.js");
+const logger = factoryLogger("[DirectusNextComponent]");
+exports.logger = logger;

package/directus/directus-next-component/src/logger.mjs

@@ -0,0 +1,6 @@
+import "../../../stack/logger/src/lib/logger.mjs";
+import createLogger from "../../../stack/logger/src/lib/factoryLogger.mjs";
+const logger = createLogger("[DirectusNextComponent]");
+export {
+  logger
+};

package/{server.js → directus/directus-next-component/src/server.js}

@@ -5,6 +5,7 @@ const index = require("./components/DirectusFile/index.js");
 const index$1 = require("./components/DirectusImg/index.js");
 const index$2 = require("./components/DirectusLink/index.js");
 const index$3 = require("./components/DirectusVideo/index.js");
+const logger = require("./logger.js");
 const directusFile = require("./hooks/directus-file.js");
 const directusLink = require("./hooks/directus-link.js");
 const navigationItems = require("./hooks/navigation-items.js");
@@ -13,6 +14,7 @@ exports.DirectusFile = index;
 exports.DirectusImg = index$1;
 exports.DirectusLink = index$2;
 exports.DirectusVideo = index$3;
+exports.DirectusNextComponent = logger.logger;
 exports.useDirectusFile = directusFile;
 exports.useDirectusLink = directusLink;
 exports.useNavigationItems = navigationItems;

package/{server.mjs → directus/directus-next-component/src/server.mjs}

@@ -3,6 +3,7 @@ import { default as default3 } from "./components/DirectusFile/index.mjs";
 import { default as default4 } from "./components/DirectusImg/index.mjs";
 import { default as default5 } from "./components/DirectusLink/index.mjs";
 import { default as default6 } from "./components/DirectusVideo/index.mjs";
+import { logger } from "./logger.mjs";
 import { default as default7 } from "./hooks/directus-file.mjs";
 import { default as default8 } from "./hooks/directus-link.mjs";
 import { default as default9 } from "./hooks/navigation-items.mjs";
@@ -10,6 +11,7 @@ export {
   default3 as DirectusFile,
   default4 as DirectusImg,
   default5 as DirectusLink,
+  logger as DirectusNextComponent,
   default6 as DirectusVideo,
   default7 as useDirectusFile,
   default8 as useDirectusLink,

package/index.d.ts

@@ -5,6 +5,7 @@ export { default as DirectusFile } from './components/DirectusFile';
 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 { logger as DirectusNextComponent } from './logger';
 export type { TFiles } from './types/files';
 export type { TPageSettings } from './types/page-settings';
 export type { TNavigationItems, TNavigationItemsTree } from './types/navigation-items';

package/logger.d.ts

@@ -0,0 +1 @@
+export declare const logger: import("@okam/logger").Logger;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/directus-next-component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -14,9 +14,19 @@
     }
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+    "access": "public"
   },
   "repository": {
     "url": "https://github.com/OKAMca/stack.git"
+  },
+  "dependencies": {
+    "@okam/logger": "1.1.0",
+    "@okam/next-component": "0.4.0",
+    "@okam/stack-ui": "1.31.0",
+    "@react-spring/web": "^9.7.5",
+    "next": "^14.1.1",
+    "radashi": "^12.3.0",
+    "react": "18.3.1",
+    "unlazy": "^0.12.1"
   }
 }

package/server.d.ts

@@ -3,6 +3,7 @@ export { default as DirectusFile } from './components/DirectusFile';
 export { default as DirectusImg } from './components/DirectusImg';
 export { default as DirectusLink } from './components/DirectusLink';
 export { default as DirectusVideo } from './components/DirectusVideo';
+export { logger as DirectusNextComponent } from './logger';
 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/stack/logger/src/lib/factoryLogger.js

@@ -0,0 +1,8 @@
+"use strict";
+const logger = require("./logger.js");
+const createLogger = (name, logger$1, suppressConsole = false) => {
+  const log = new logger.Logger(name, logger$1, suppressConsole);
+  log.log(`Logger initialized`, "info");
+  return log;
+};
+module.exports = createLogger;

package/stack/logger/src/lib/factoryLogger.mjs

@@ -0,0 +1,9 @@
+import { Logger } from "./logger.mjs";
+const createLogger = (name, logger, suppressConsole = false) => {
+  const log = new Logger(name, logger, suppressConsole);
+  log.log(`Logger initialized`, "info");
+  return log;
+};
+export {
+  createLogger as default
+};

package/stack/logger/src/lib/logger.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class Logger {
+  constructor(nameSpace, logger2, suppressConsole) {
+    this.nameSpace = "[STACK]";
+    this.suppressConsole = false;
+    this.env = process.env["NODE_ENV"];
+    this.nameSpace = nameSpace ?? this.nameSpace;
+    this.suppressConsole = suppressConsole ?? this.suppressConsole;
+    this.logger = logger2 ?? this.internalLogger;
+  }
+  internalLogger(message, severity, context) {
+    if (this.env === "production") {
+      return;
+    }
+    console[severity || "log"](`${this.nameSpace} ${message}`.trimStart(), context ?? "");
+  }
+  setLogger(logger2) {
+    this.logger = (message, severity, context) => {
+      if (this.suppressConsole) {
+        this.internalLogger(message, severity, context);
+      }
+      logger2(message, severity, context);
+    };
+  }
+  static getInstance() {
+    if (!Logger.instance) {
+      Logger.instance = new Logger();
+    }
+    return Logger.instance;
+  }
+  log(message, severity, context) {
+    this.logger(message, severity, context);
+  }
+}
+Logger.getInstance();
+exports.Logger = Logger;

package/stack/logger/src/lib/logger.mjs

@@ -0,0 +1,37 @@
+class Logger {
+  constructor(nameSpace, logger2, suppressConsole) {
+    this.nameSpace = "[STACK]";
+    this.suppressConsole = false;
+    this.env = process.env["NODE_ENV"];
+    this.nameSpace = nameSpace ?? this.nameSpace;
+    this.suppressConsole = suppressConsole ?? this.suppressConsole;
+    this.logger = logger2 ?? this.internalLogger;
+  }
+  internalLogger(message, severity, context) {
+    if (this.env === "production") {
+      return;
+    }
+    console[severity || "log"](`${this.nameSpace} ${message}`.trimStart(), context ?? "");
+  }
+  setLogger(logger2) {
+    this.logger = (message, severity, context) => {
+      if (this.suppressConsole) {
+        this.internalLogger(message, severity, context);
+      }
+      logger2(message, severity, context);
+    };
+  }
+  static getInstance() {
+    if (!Logger.instance) {
+      Logger.instance = new Logger();
+    }
+    return Logger.instance;
+  }
+  log(message, severity, context) {
+    this.logger(message, severity, context);
+  }
+}
+Logger.getInstance();
+export {
+  Logger
+};