@okam/directus-block 1.2.0 → 1.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@okam/directus-block",
   "main": "./index.js",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "types": "./index.d.ts",
   "exports": {
     ".": {

package/style.css

@@ -0,0 +1 @@
+@font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ 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);font-weight:400;font-style:normal}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}

package/types/block.d.ts

@@ -0,0 +1,27 @@
+import type { DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import type { Nullable } from '@okam/stack-ui';
+import type { Variables } from 'graphql-request';
+import type { FragmentType } from '../generated/fragment-masking';
+import type { BlockSettingsFragment } from '../generated/graphql';
+export type TAdditionalProps = {
+    [key: string]: unknown;
+};
+type BlockSettings = FragmentType<DocumentTypeDecoration<BlockSettingsFragment, unknown>>;
+export type TCommonBlockFragment = {
+    id?: Nullable<string>;
+    settings?: Nullable<BlockSettings>;
+} & Record<string, unknown>;
+export type TBlockQuery<BlockFragment extends TCommonBlockFragment> = {
+    __typename?: 'Query';
+} & {
+    [blockKey: string]: {
+        ' $fragmentRefs'?: {
+            [blockFragmentKey: string]: BlockFragment;
+        } | null | undefined;
+    } | null | undefined;
+};
+export type TBlockVariables<BlockVariables extends Variables = Variables> = {
+    id: string;
+} & BlockVariables;
+export type TBlockDocument<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables> = TypedDocumentNode<TBlockQuery<BlockFragment>, TBlockVariables<BlockVariables>>;
+export {};

package/utils/get-block-props.d.ts

@@ -0,0 +1,17 @@
+import type { Nullable } from '@okam/stack-ui';
+import type { Variables } from 'graphql-request';
+import type { TBlockDocument, TBlockQuery, TBlockVariables, TCommonBlockFragment } from '../types/block';
+type TGetBlockPropsParams<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables> = {
+    document?: TBlockDocument<BlockFragment, BlockVariables>;
+    item?: Nullable<NonNullable<NonNullable<TBlockQuery<BlockFragment>[string]>[' $fragmentRefs']>[string]>;
+    blockKey?: string;
+    variables?: TBlockVariables<BlockVariables>;
+};
+/**
+ * Returns the passed item if it is defined. Otherwise, queried its own block
+ * @param params.blockKey Key of the queried field
+ * @param params.item Item of the block. If null or only contains the block's id, the function will make a query
+ * @returns The block data
+ */
+export default function getBlockProps<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables>(params: TGetBlockPropsParams<BlockFragment, BlockVariables>): Promise<BlockFragment | null | undefined>;
+export {};

package/utils/index.d.ts

@@ -0,0 +1,4 @@
+import { useFragment } from '../generated/fragment-masking';
+export { default as getBlockProps } from './get-block-props';
+export { default as mergeConfigs } from './merge-configs';
+export { useFragment as getFragment };

package/utils/merge-configs.d.ts

@@ -0,0 +1,9 @@
+import type { Nullable } from '@okam/stack-ui';
+import type { TBlockSerializerConfig } from '../components/BlockSerializer/interface';
+/**
+ * Merges multiple block dispatcher configs
+ * @param baseConfig The base configuration. Other configurations will be prioritized over this one, which acts as a fallback
+ * @param configs Array of block dispatcher serializers to merge. Later elements will always be prioritized over first elements
+ * @returns Merged config
+ */
+export default function mergeConfigs(baseConfig: TBlockSerializerConfig, ...configs: Nullable<TBlockSerializerConfig>[]): TBlockSerializerConfig;

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/react', '../../../linter/bases/prettier'],
-  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/.storybook/.eslintrc.js

@@ -1,29 +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: {
-    'react/react-in-jsx-scope': 'off',
-  },
-}

package/.storybook/main.ts

@@ -1,33 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import type { StorybookConfig } from '@storybook/nextjs'
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    {
-      name: '@storybook/addon-styling',
-      options: {
-        // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
-        // For more details on this addon's options.
-        postCss: true,
-      },
-    },
-  ],
-  framework: {
-    name: '@storybook/nextjs',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-}
-
-export default config
-
-// To customize your Vite configuration you can use the viteFinal field.
-// Check https://storybook.js.org/docs/react/builders/vite#configuration
-// and https://nx.dev/packages/storybook/documents/custom-builder-configs

package/.storybook/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "emitDecoratorMetadata": true
-  },
-
-  "exclude": ["../**/*.spec.ts"],
-  "include": [
-    "../src/**/*.stories.ts",
-    "../src/**/*.stories.js",
-    "../src/**/*.stories.jsx",
-    "../src/**/*.stories.tsx",
-    "../src/**/*.stories.mdx",
-    "*.ts",
-    "*.js"
-  ]
-}

package/CHANGELOG.md

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

@@ -1,161 +0,0 @@
-# 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
-
-## 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/project.json

@@ -1,57 +0,0 @@
-{
-  "name": "directus-block",
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/directus/directus-block/src",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "lint": {
-      "executor": "@nx/linter:eslint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["libs/directus/directus-block/**/*.{ts,tsx,js,jsx}"]
-      }
-    },
-    "build": {
-      "executor": "@nx/vite:build",
-      "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
-      "options": {
-        "outputPath": "dist/libs/directus/directus-block"
-      },
-      "configurations": {
-        "development": {
-          "mode": "development"
-        },
-        "production": {
-          "mode": "production"
-        }
-      }
-    },
-    "storybook": {
-      "executor": "@nx/storybook:storybook",
-      "options": {
-        "port": 4400,
-        "configDir": "libs/directus/directus-block/.storybook"
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
-      }
-    },
-    "build-storybook": {
-      "executor": "@nx/storybook:build",
-      "outputs": ["{options.outputDir}"],
-      "options": {
-        "outputDir": "dist/storybook/directus-block",
-        "configDir": "libs/directus/directus-block/.storybook"
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
-      }
-    }
-  }
-}

package/src/blocks/BlockWysiwyg/config.tsx

@@ -1,10 +0,0 @@
-import type { TBlockSerializerConfigComponent } from '../../components/BlockSerializer/interface'
-import BlockWysiwyg from '.'
-
-const blockWysiwygConfig: TBlockSerializerConfigComponent = {
-  block_wysiwyg: {
-    default: (props) => <BlockWysiwyg {...props} />,
-  },
-}
-
-export default blockWysiwygConfig

package/src/blocks/BlockWysiwyg/index.tsx

@@ -1,38 +0,0 @@
-import { Box, WysiwygBlock } from '@okam/stack-ui'
-import React from 'react'
-import type { TBlockSerializerProps } from '../../components/BlockSerializer/interface'
-import { BlockSettingsFragmentDoc } from '../../generated/graphql'
-import { getBlockProps, getFragment } from '../../utils'
-import type { BlockWysiwygFragment } from './interface'
-
-const BlockWysiwyg = async (props: TBlockSerializerProps<BlockWysiwygFragment>) => {
-  const { variables, themeName = 'wysiwyg', tokens, item, document } = props
-
-  const propsWithFallback = await getBlockProps({
-    item,
-    blockKey: 'block_wysiwyg_by_id',
-    document,
-    variables,
-  })
-
-  if (!propsWithFallback) return null
-
-  const { content, title, level, settings } = propsWithFallback
-
-  const { tokens: cmsTokens } = getFragment(BlockSettingsFragmentDoc, settings) ?? {}
-
-  if (!content && !(title && level)) return null
-
-  return (
-    <>
-      {title && level && (
-        <Box as="span" themeName={themeName} tokens={{ ...tokens, ...cmsTokens }}>
-          {React.createElement(level, {}, title)}
-        </Box>
-      )}
-      {content && <WysiwygBlock themeName={themeName} tokens={{ ...tokens, ...cmsTokens }} content={content} />}
-    </>
-  )
-}
-
-export default BlockWysiwyg

package/src/blocks/BlockWysiwyg/interface.ts

@@ -1,13 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { BlockSettingsFragment } from '../../generated/graphql'
-
-export type BlockWysiwygFragment = {
-  __typename?: 'block_wysiwyg'
-  title?: string | null
-  content?: string | null
-  level?: string | null
-  variant?: string | null
-  settings?:
-    | ({ __typename?: 'block_settings' } & { ' $fragmentRefs'?: { BlockSettingsFragment: BlockSettingsFragment } })
-    | null
-} & { ' $fragmentName'?: 'BlockWysiwygFragment' }

package/src/components/BlockDispatcher/config.ts

@@ -1,10 +0,0 @@
-import blockWysiwygConfig from '../../blocks/BlockWysiwyg/config'
-import type { TBlockSerializerConfig } from '../BlockSerializer/interface'
-
-const baseConfig: TBlockSerializerConfig = {
-  components: {
-    ...blockWysiwygConfig,
-  },
-}
-
-export default baseConfig

package/src/components/BlockDispatcher/index.tsx

@@ -1,30 +0,0 @@
-import type { Nullable } from '@okam/stack-ui'
-import { mergeConfigs } from '../../utils'
-import BlockSerializer from '../BlockSerializer'
-import type { TBlockSerializerProps } from '../BlockSerializer/interface'
-import baseConfig from './config'
-import type { TBlockDispatcherProps } from './interface'
-
-const BlockDispatcher = (props: TBlockDispatcherProps) => {
-  const { children, config, ...rest } = props
-
-  const finalConfig = mergeConfigs(baseConfig, config)
-
-  const renderBlock = (blockProps: Nullable<TBlockSerializerProps>) => {
-    return children ? (
-      children({ ...rest, ...blockProps, config: finalConfig })
-    ) : (
-      <BlockSerializer {...rest} {...blockProps} config={finalConfig} />
-    )
-  }
-
-  if ('blocks' in props) {
-    const { blocks } = props
-    return blocks.map(renderBlock)
-  }
-
-  const { block } = props
-  return renderBlock(block)
-}
-
-export default BlockDispatcher

package/src/components/BlockDispatcher/interface.ts

@@ -1,17 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { TDefaultComponent, Nullable } from '@okam/stack-ui'
-import type React from 'react'
-import type { TAdditionalProps } from '../../types/block'
-import type { TBlockSerializerProps, TBlockSerializerConfig } from '../BlockSerializer/interface'
-
-interface TBaseBlockDispatcherProps<AdditionalProps extends TAdditionalProps = TAdditionalProps>
-  extends Omit<TDefaultComponent, 'children'> {
-  config?: TBlockSerializerConfig
-  defaultVariant?: string
-  additionalProps?: AdditionalProps
-  children?: (props: TBlockSerializerProps) => React.ReactNode
-}
-
-export type TBlockDispatcherProps<AdditionalProps extends TAdditionalProps = TAdditionalProps> =
-  | (TBaseBlockDispatcherProps<AdditionalProps> & { block: Nullable<TBlockSerializerProps> })
-  | (TBaseBlockDispatcherProps<AdditionalProps> & { blocks: Nullable<TBlockSerializerProps>[] })

package/src/components/BlockSerializer/index.tsx

@@ -1,40 +0,0 @@
-import { BlockSettingsFragmentDoc } from '../../generated/graphql'
-import { getFragment } from '../../utils'
-import type { TBlockSerializerProps } from './interface'
-
-const BlockSerializer = (props: TBlockSerializerProps) => {
-  const { item, collection, config, variables, defaultVariant, ...rest } = props
-
-  if (!collection || !item || !config) return null
-
-  const blockConfig = config?.components?.[collection]
-
-  if (!blockConfig) return null
-
-  const { id, settings } = item
-
-  const { variant } = getFragment(BlockSettingsFragmentDoc, settings) ?? {}
-
-  const variantWithFallback = blockConfig.getVariant?.(props) ?? variant ?? defaultVariant
-
-  const { default: defaultBlockComponent, document } = blockConfig
-
-  const variantBlockComponent = blockConfig.variants?.[variantWithFallback ?? '']
-  const BlockComponent = variantBlockComponent ?? defaultBlockComponent
-
-  if (!BlockComponent) return null
-
-  return (
-    <BlockComponent
-      key={id}
-      document={document}
-      config={config}
-      collection={collection}
-      item={item}
-      {...(id ? { variables: { ...variables, id } } : { variables })}
-      {...rest}
-    />
-  )
-}
-
-export default BlockSerializer