@okam/directus-block 1.3.2 → 1.5.0

package/CHANGELOG.md

@@ -0,0 +1,108 @@
+## 1.4.0 (2024-10-04)
+
+
+### 🚀 Features
+
+- updates & cleanup packages and dependancies ([#210](https://github.com/OKAMca/stack/pull/210))
+
+
+### ❤️  Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+
+## 1.3.2 (2024-08-15)
+
+
+### 🩹 Fixes
+
+- **directus-block:** exclude directus-query from bundling + export useBlock from /server ([6345390](https://github.com/OKAMca/stack/commit/6345390))
+
+
+### ❤️  Thank You
+
+- Marie-Maxime Tanguay
+- poclerson
+
+## 1.3.1 (2024-08-14)
+
+
+### 🩹 Fixes
+
+- if a block has settings, doesnt mean it has data ([#180](https://github.com/OKAMca/stack/pull/180))
+
+
+### ❤️  Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+- mykimd
+- Pierre-Olivier Clerson @poclerson
+- poclerson
+- Yan Morin
+- yanmorinokamca @yanmorinokamca
+
+## 1.3.0 (2024-07-25)
+
+
+### 🚀 Features
+
+- generator for block & component ([#161](https://github.com/OKAMca/stack/pull/161))
+
+- 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
+- yanmorinokamca @yanmorinokamca
+
+## 1.2.3 (2024-07-09)
+
+
+### 🩹 Fixes
+
+- **directus-block:** export server components ([05f1a31](https://github.com/OKAMca/stack/commit/05f1a31))
+
+
+### ❤️  Thank You
+
+- Jérôme Trottier
+
+## 1.2.2 (2024-07-08)
+
+
+### 🩹 Fixes
+
+- **publish:** add building packages step to workflow ([c9ce442](https://github.com/OKAMca/stack/commit/c9ce442))
+
+
+### ❤️  Thank You
+
+- Jérôme Trottier
+
+## 1.2.1 (2024-07-05)
+
+This was a version bump only for directus-block to align it with other projects, there were no code changes.
+
+## 1.2.0 (2024-06-28)
+
+
+### 🚀 Features
+
+- STACK-72-Lib-Create-directus-block ([#115](https://github.com/OKAMca/stack/pull/115))
+
+
+### 🩹 Fixes
+
+- publishing for new libs ([#125](https://github.com/OKAMca/stack/pull/125))
+
+- **directus-block:** update package version ([9f93408](https://github.com/OKAMca/stack/commit/9f93408))
+
+- **block-directus:** add server only to get block props ([330e76f](https://github.com/OKAMca/stack/commit/330e76f))
+
+
+### ❤️  Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+- Pierre-Olivier Clerson @poclerson

package/README.md

@@ -0,0 +1,167 @@
+# directus-block
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build directus-block` to build the library.
+
+## Components
+
+### Dispatcher
+
+#### Props
+
+- config: Configuration the block dispatcher will use. This configuration will get merged with the base config of directus-block. In case of overrides, the passed configuration will always win over the directus-block configuration.
+- blocks: Array of `TBlockSerializerProps` containing the actual blocks data. This is the prop that will be used by the block dispatcher to iterate through its children.
+- block: In case you want to pass a single block
+- children: Function receiving the current block `TBlockSerializerProps` as props. Will use BlockSerializer alone by default. This is useful in scenarios where you want every block to be wrapped in other components:
+
+```tsx
+  <BlockDispatcher config={baseBlockDispatcherConfig} blocks={blocks}>
+    {(block) => (
+      <Container tokens={{ isLowestContainerLevel: true }}>
+        <ErrorBoundary fallback={<ErrorFallback />}>
+          <BlockSerializer {...block} />
+        </ErrorBoundary>
+      </Container>
+    )}
+  </BlockDispatcher>
+```
+
+This would allow to remove a lot of repetitive code accross blocks definitions, for example as they all need to be wrapped in a `Container` and an `ErrorBoundary`
+
+### Serializer
+
+This component calls the good component in the configuration from the `collection` prop
+
+#### Props
+
+- item: The block's data. Can either contain just the block's `id`, be null (in that case, the `id` will need to be sent using the block's variables). If `item` only contains the id, it will be sent to the variables for making the query
+- variables: The block's variables. Passing the id is necessary
+- document: Can also be passed in the config. The document that will be used to make a query
+
+## Configuration
+
+A configuration uses the `components` prop to map a key value, like so:
+
+```tsx
+const config = {
+  components: {
+    block_wysiwyg: {
+      default: (props) => <BlockWysiwyg {...props} />,
+      document: BlockWysiwygDocument,
+      defaultVariant: 'reversed',
+      getVariant: (props) => props.settings.variants,
+      variants: {
+        reversed: (props) => (
+          <ReversedThemeProvider>
+            <BlockWysiwyg {...props} />
+          </ReversedThemeProvider>
+        )
+      }
+    }
+  }
+}
+```
+
+### Props
+
+- default: The default component if no variants/invalid variants are used
+- defaultVariant: Overrides the default use of the `default` prop, instead mapping the default component on a specific variant
+- getVariant: Callback to specify a different variant path from the one in the block's settings
+- variants: key-value mapping of `{[variant]: component}`
+- document: The necessary document for querying the data. This prop can either be passed directly to the block or in the config. Since Stack blocks don't yet have their own documents, you can override them and add their document like so:
+
+```tsx
+import { blockWysiwygConfig } from '@okam/directus-block'
+
+const brandConfig = {
+  components: {
+    block_wysiwyg: {
+      document: BlockWysiwygDocument,
+      ...blockWysiwygConfig.block_wysiwyg,
+    },
+    block_image: {
+      default: (props) => <BrandBlockImage {...props} />
+    },
+  },
+}
+
+<BlockDispatcher config={brandConfig} />
+```
+
+### Overriding the configuration with brand blocks
+
+To override the base block dispatcher configuration, you name a block component configuration with the same key as the ones in the configuration.
+
+For example, if this is the base configuration:
+
+```tsx
+const baseConfig = {
+  components: {
+    block_wysiwyg: {
+      default: (props) => <BlockWysiwyg {...props}>,
+    },
+    block_hero: {
+      default: (props) => <BlockHero {...props}>,
+    },
+  },
+}
+```
+
+But that you to call a branded wysiwyg component from the dispatcher configuration, you may pass the following configuration:
+
+```tsx
+const brandConfig = {
+  components: {
+    block_wysiwyg: {
+      default: (props) => <BrandBlockWysiwyg {...props} />
+    },
+    block_image: {
+      default: (props) => <BrandBlockImage {...props} />
+    },
+  },
+}
+
+<BlockDispatcher config={brandConfig} />
+```
+
+In this example, the BlockWysiwyg definition would be overriden. However, you would now also have access to the `block_image`, and still retain access to the `block_hero`
+
+You could also re-use only a part of the base configuration while overriding another part
+
+```tsx
+import { blockWysiwygConfig } from '@okam/directus-block'
+
+const brandConfig = {
+  components: {
+    block_wysiwyg: {
+      default: (props) => <BrandBlockWysiwyg {...props} />,
+      variants: blockWysiwygConfig.block_wysiwyg.variants,
+    },
+    block_image: {
+      default: (props) => <BrandBlockImage {...props} />
+    },
+  },
+}
+
+<BlockDispatcher config={brandConfig} />
+```
+
+### Extending the configuration with stack blocks
+
+Some blocks may be in the Stack without being in the base configuration. To use them, simply import their own configuration from the stack and spread them in yours
+
+```tsx
+import { blockHeroConfig } from '@okam/directus-block'
+
+const brandConfigWithStackBlocks = {
+  components: {
+    block_image: {
+      default: (props) => <BrandBlockImage {...props} />
+    },
+    ...blockHeroConfig,
+  }
+}
+```

package/components/BlockDispatcher/index.js

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 require("@okam/directus-query");
-require("radash");
+require("radashi");
 const mergeConfigs = require("../../utils/merge-configs.js");
 const index = require("../BlockSerializer/index.js");
 const config = require("./config.js");

package/components/BlockDispatcher/index.mjs

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import "@okam/directus-query";
-import "radash";
+import "radashi";
 import mergeConfigs from "../../utils/merge-configs.mjs";
 import BlockSerializer from "../BlockSerializer/index.mjs";
 import baseConfig from "./config.mjs";

package/components/BlockSerializer/index.js

@@ -3,7 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const graphql = require("../../generated/graphql.js");
 const fragmentMasking = require("../../generated/fragment-masking.js");
 require("@okam/directus-query");
-require("radash");
+require("radashi");
 const BlockSerializer = (props) => {
   var _a, _b, _c;
   const { item, collection, config, variables, defaultVariant, ...rest } = props;

package/components/BlockSerializer/index.mjs

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { BlockSettingsFragmentDoc } from "../../generated/graphql.mjs";
 import { useFragment } from "../../generated/fragment-masking.mjs";
 import "@okam/directus-query";
-import "radash";
+import "radashi";
 const BlockSerializer = (props) => {
   var _a, _b, _c;
   const { item, collection, config, variables, defaultVariant, ...rest } = props;

package/hooks/useBlock.js

@@ -1,12 +1,12 @@
 "use strict";
-const radash = require("radash");
+const radashi = require("radashi");
 const graphql = require("../generated/graphql.js");
 const fragmentMasking = require("../generated/fragment-masking.js");
 const getBlockProps = require("../utils/get-block-props.js");
 async function useBlock(props, blockKey, doc) {
-  const item = radash.get(props, "item");
-  const document = doc ?? radash.get(props, "document");
-  const variables = radash.get(props, "variables");
+  const item = radashi.get(props, "item");
+  const document = doc ?? radashi.get(props, "document");
+  const variables = radashi.get(props, "variables");
   const propsWithFallback = await getBlockProps({
     item,
     blockKey,

package/hooks/useBlock.mjs

@@ -1,4 +1,4 @@
-import { get } from "radash";
+import { get } from "radashi";
 import { BlockSettingsFragmentDoc } from "../generated/graphql.mjs";
 import { useFragment } from "../generated/fragment-masking.mjs";
 import getBlockProps from "../utils/get-block-props.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/directus-block",
-  "version": "1.3.2",
+  "version": "1.5.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -14,9 +14,18 @@
     }
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+    "access": "public"
   },
   "repository": {
     "url": "https://github.com/OKAMca/stack.git"
+  },
+  "dependencies": {
+    "@graphql-typed-document-node/core": "3.2.0",
+    "@okam/directus-query": "1.4.0",
+    "@okam/stack-ui": "1.31.0",
+    "graphql": "^16.9.0",
+    "graphql-request": "^7.1.2",
+    "radashi": "^12.3.0",
+    "react": "18.3.1"
   }
 }

package/utils/get-block-props.js

@@ -1,13 +1,13 @@
 "server-only";
 "use strict";
 const directusQuery = require("@okam/directus-query");
-const radash = require("radash");
+const radashi = require("radashi");
 function isVariables(maybeVariables) {
   return !!maybeVariables;
 }
 function isItemEmpty(item) {
   const { id, settings, ...restOfItem } = item ?? {};
-  return radash.isEmpty(restOfItem);
+  return radashi.isEmpty(restOfItem);
 }
 async function queryFromVariables(params) {
   const { document, blockKey, variables } = params;

package/utils/get-block-props.mjs

@@ -1,6 +1,6 @@
 "server-only";
 import { queryGql } from "@okam/directus-query";
-import { isEmpty } from "radash";
+import { isEmpty } from "radashi";
 function isVariables(maybeVariables) {
   return !!maybeVariables;
 }