@okam/directus-block 1.2.3 → 1.3.0

package/directus-block/src/blocks/BlockWysiwyg/config.js

@@ -0,0 +1,9 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("./index.js");
+const blockWysiwygConfig = {
+  block_wysiwyg: {
+    default: (props) => /* @__PURE__ */ jsxRuntime.jsx(index, { ...props })
+  }
+};
+module.exports = blockWysiwygConfig;

package/directus-block/src/blocks/BlockWysiwyg/config.mjs

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import BlockWysiwyg from "./index.mjs";
+const blockWysiwygConfig = {
+  block_wysiwyg: {
+    default: (props) => /* @__PURE__ */ jsx(BlockWysiwyg, { ...props })
+  }
+};
+export {
+  blockWysiwygConfig as default
+};

package/directus-block/src/blocks/BlockWysiwyg/index.js

@@ -0,0 +1,16 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const React = require("react");
+const useBlock = require("../../hooks/useBlock.js");
+const BlockWysiwyg = async (props) => {
+  const key = "block_wysiwyg_by_id";
+  const { themeName = "wysiwyg", tokens } = props;
+  const { content, title, level, cmsTokens } = await useBlock(props, key);
+  if (!content && !(title && level)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    title && level && /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),
+    content && /* @__PURE__ */ jsxRuntime.jsx(stackUi.WysiwygBlock, { themeName, tokens: { ...tokens, ...cmsTokens }, content })
+  ] });
+};
+module.exports = BlockWysiwyg;

package/directus-block/src/blocks/BlockWysiwyg/index.mjs

@@ -0,0 +1,17 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Box, WysiwygBlock } from "@okam/stack-ui";
+import React from "react";
+import useBlock from "../../hooks/useBlock.mjs";
+const BlockWysiwyg = async (props) => {
+  const key = "block_wysiwyg_by_id";
+  const { themeName = "wysiwyg", tokens } = props;
+  const { content, title, level, cmsTokens } = await useBlock(props, key);
+  if (!content && !(title && level)) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && level && /* @__PURE__ */ jsx(Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),
+    content && /* @__PURE__ */ jsx(WysiwygBlock, { themeName, tokens: { ...tokens, ...cmsTokens }, content })
+  ] });
+};
+export {
+  BlockWysiwyg as default
+};

package/directus-block/src/components/BlockDispatcher/config.js

@@ -0,0 +1,8 @@
+"use strict";
+const config = require("../../blocks/BlockWysiwyg/config.js");
+const baseConfig = {
+  components: {
+    ...config
+  }
+};
+module.exports = baseConfig;

package/directus-block/src/components/BlockDispatcher/config.mjs

@@ -0,0 +1,9 @@
+import blockWysiwygConfig from "../../blocks/BlockWysiwyg/config.mjs";
+const baseConfig = {
+  components: {
+    ...blockWysiwygConfig
+  }
+};
+export {
+  baseConfig as default
+};

package/directus-block/src/components/BlockDispatcher/index.js

@@ -0,0 +1,24 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+require("@tanstack/react-query");
+require("radash");
+require("../../../../directus-query/src/lib/request.js");
+require("graphql-request");
+require("../../../../directus-query/src/lib/config.js");
+const mergeConfigs = require("../../utils/merge-configs.js");
+const index = require("../BlockSerializer/index.js");
+const config = require("./config.js");
+const BlockDispatcher = (props) => {
+  const { children, config: config$1, ...rest } = props;
+  const finalConfig = mergeConfigs(config, config$1);
+  const renderBlock = (blockProps) => {
+    return children ? children({ ...rest, ...blockProps, config: finalConfig }) : /* @__PURE__ */ jsxRuntime.jsx(index, { ...rest, ...blockProps, config: finalConfig });
+  };
+  if ("blocks" in props) {
+    const { blocks } = props;
+    return blocks.map(renderBlock);
+  }
+  const { block } = props;
+  return renderBlock(block);
+};
+module.exports = BlockDispatcher;

package/directus-block/src/components/BlockDispatcher/index.mjs

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import "@tanstack/react-query";
+import "radash";
+import "../../../../directus-query/src/lib/request.mjs";
+import "graphql-request";
+import "../../../../directus-query/src/lib/config.mjs";
+import mergeConfigs from "../../utils/merge-configs.mjs";
+import BlockSerializer from "../BlockSerializer/index.mjs";
+import baseConfig from "./config.mjs";
+const BlockDispatcher = (props) => {
+  const { children, config, ...rest } = props;
+  const finalConfig = mergeConfigs(baseConfig, config);
+  const renderBlock = (blockProps) => {
+    return children ? children({ ...rest, ...blockProps, config: finalConfig }) : /* @__PURE__ */ jsx(BlockSerializer, { ...rest, ...blockProps, config: finalConfig });
+  };
+  if ("blocks" in props) {
+    const { blocks } = props;
+    return blocks.map(renderBlock);
+  }
+  const { block } = props;
+  return renderBlock(block);
+};
+export {
+  BlockDispatcher as default
+};

package/directus-block/src/components/BlockSerializer/index.js

@@ -0,0 +1,38 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const graphql = require("../../generated/graphql.js");
+const fragmentMasking = require("../../generated/fragment-masking.js");
+require("@tanstack/react-query");
+require("radash");
+require("../../../../directus-query/src/lib/request.js");
+require("graphql-request");
+require("../../../../directus-query/src/lib/config.js");
+const BlockSerializer = (props) => {
+  var _a, _b, _c;
+  const { item, collection, config, variables, defaultVariant, ...rest } = props;
+  if (!collection || !config) return null;
+  const blockConfig = (_a = config == null ? void 0 : config.components) == null ? void 0 : _a[collection];
+  if (!blockConfig) return null;
+  const { settings } = item ?? {};
+  const id = (item == null ? void 0 : item.id) ?? (variables == null ? void 0 : variables.id);
+  if (!id) return null;
+  const { variant } = fragmentMasking.useFragment(graphql.BlockSettingsFragmentDoc, settings) ?? {};
+  const variantWithFallback = ((_b = blockConfig.getVariant) == null ? void 0 : _b.call(blockConfig, props)) ?? variant ?? defaultVariant;
+  const { default: defaultBlockComponent, document } = blockConfig;
+  const variantBlockComponent = (_c = blockConfig.variants) == null ? void 0 : _c[variantWithFallback ?? ""];
+  const BlockComponent = variantBlockComponent ?? defaultBlockComponent;
+  if (!BlockComponent) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BlockComponent,
+    {
+      document,
+      config,
+      collection,
+      item,
+      ...id ? { variables: { ...variables, id } } : { variables },
+      ...rest
+    },
+    id
+  );
+};
+module.exports = BlockSerializer;

package/{server.mjs → directus-block/src/components/BlockSerializer/index.mjs}

@@ -1,16 +1,11 @@
 import { jsx } from "react/jsx-runtime";
+import { BlockSettingsFragmentDoc } from "../../generated/graphql.mjs";
+import { useFragment } from "../../generated/fragment-masking.mjs";
 import "@tanstack/react-query";
 import "radash";
-import { u as useFragment, c as BlockSettingsFragmentDoc, a as baseConfig } from "./config-BNCxf6ZM.mjs";
-import { g } from "./config-BNCxf6ZM.mjs";
+import "../../../../directus-query/src/lib/request.mjs";
 import "graphql-request";
-function mergeConfigs(baseConfig2, ...configs) {
-  const finalConfig = configs.reduce((mergedConfig, config) => {
-    if (!config) return mergedConfig;
-    return { components: { ...mergedConfig.components, ...config.components } };
-  }, baseConfig2);
-  return finalConfig;
-}
+import "../../../../directus-query/src/lib/config.mjs";
 const BlockSerializer = (props) => {
   var _a, _b, _c;
   const { item, collection, config, variables, defaultVariant, ...rest } = props;
@@ -39,22 +34,6 @@ const BlockSerializer = (props) => {
     id
   );
 };
-const BlockDispatcher = (props) => {
-  const { children, config, ...rest } = props;
-  const finalConfig = mergeConfigs(baseConfig, config);
-  const renderBlock = (blockProps) => {
-    return children ? children({ ...rest, ...blockProps, config: finalConfig }) : /* @__PURE__ */ jsx(BlockSerializer, { ...rest, ...blockProps, config: finalConfig });
-  };
-  if ("blocks" in props) {
-    const { blocks } = props;
-    return blocks.map(renderBlock);
-  }
-  const { block } = props;
-  return renderBlock(block);
-};
 export {
-  BlockDispatcher,
-  BlockSerializer,
-  g as getBlockProps,
-  mergeConfigs
+  BlockSerializer as default
 };

package/directus-block/src/generated/fragment-masking.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function useFragment(_documentNode, fragmentType) {
+  return fragmentType;
+}
+exports.useFragment = useFragment;

package/directus-block/src/generated/fragment-masking.mjs

@@ -0,0 +1,6 @@
+function useFragment(_documentNode, fragmentType) {
+  return fragmentType;
+}
+export {
+  useFragment
+};

package/directus-block/src/generated/graphql.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const BlockSettingsFragmentDoc = { "kind": "Document", "definitions": [{ "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "BlockSettings" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "block_settings" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "tokens" } }, { "kind": "Field", "name": { "kind": "Name", "value": "variant" } }] } }] };
+exports.BlockSettingsFragmentDoc = BlockSettingsFragmentDoc;

package/directus-block/src/generated/graphql.mjs

@@ -0,0 +1,4 @@
+const BlockSettingsFragmentDoc = { "kind": "Document", "definitions": [{ "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "BlockSettings" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "block_settings" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "tokens" } }, { "kind": "Field", "name": { "kind": "Name", "value": "variant" } }] } }] };
+export {
+  BlockSettingsFragmentDoc
+};

package/directus-block/src/hooks/useBlock.js

@@ -0,0 +1,19 @@
+"use strict";
+const radash = require("radash");
+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 propsWithFallback = await getBlockProps({
+    item,
+    blockKey,
+    document,
+    variables
+  });
+  const { tokens } = fragmentMasking.useFragment(graphql.BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
+  return { ...propsWithFallback, cmsTokens: tokens };
+}
+module.exports = useBlock;

package/directus-block/src/hooks/useBlock.mjs

@@ -0,0 +1,20 @@
+import { get } from "radash";
+import { BlockSettingsFragmentDoc } from "../generated/graphql.mjs";
+import { useFragment } from "../generated/fragment-masking.mjs";
+import getBlockProps from "../utils/get-block-props.mjs";
+async function useBlock(props, blockKey, doc) {
+  const item = get(props, "item");
+  const document = doc ?? get(props, "document");
+  const variables = get(props, "variables");
+  const propsWithFallback = await getBlockProps({
+    item,
+    blockKey,
+    document,
+    variables
+  });
+  const { tokens } = useFragment(BlockSettingsFragmentDoc, propsWithFallback == null ? void 0 : propsWithFallback.settings) ?? {};
+  return { ...propsWithFallback, cmsTokens: tokens };
+}
+export {
+  useBlock as default
+};

package/directus-block/src/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./blocks/BlockWysiwyg/index.js");
+const useBlock = require("./hooks/useBlock.js");
+const config = require("./blocks/BlockWysiwyg/config.js");
+const config$1 = require("./components/BlockDispatcher/config.js");
+exports.BlockWysiwyg = index;
+exports.useBlock = useBlock;
+exports.blockWysiwygConfig = config;
+exports.baseConfig = config$1;

package/directus-block/src/index.mjs

@@ -0,0 +1,10 @@
+import { default as default2 } from "./blocks/BlockWysiwyg/index.mjs";
+import { default as default3 } from "./hooks/useBlock.mjs";
+import { default as default4 } from "./blocks/BlockWysiwyg/config.mjs";
+import { default as default5 } from "./components/BlockDispatcher/config.mjs";
+export {
+  default2 as BlockWysiwyg,
+  default5 as baseConfig,
+  default4 as blockWysiwygConfig,
+  default3 as useBlock
+};

package/directus-block/src/server.js

@@ -0,0 +1,11 @@
+"server-only";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./components/BlockDispatcher/index.js");
+const index$1 = require("./components/BlockSerializer/index.js");
+const getBlockProps = require("./utils/get-block-props.js");
+const mergeConfigs = require("./utils/merge-configs.js");
+exports.BlockDispatcher = index;
+exports.BlockSerializer = index$1;
+exports.getBlockProps = getBlockProps;
+exports.mergeConfigs = mergeConfigs;

package/directus-block/src/server.mjs

@@ -0,0 +1,11 @@
+"server-only";
+import { default as default2 } from "./components/BlockDispatcher/index.mjs";
+import { default as default3 } from "./components/BlockSerializer/index.mjs";
+import { default as default4 } from "./utils/get-block-props.mjs";
+import { default as default5 } from "./utils/merge-configs.mjs";
+export {
+  default2 as BlockDispatcher,
+  default3 as BlockSerializer,
+  default4 as getBlockProps,
+  default5 as mergeConfigs
+};

package/directus-block/src/utils/get-block-props.js

@@ -0,0 +1,42 @@
+"server-only";
+"use strict";
+require("@tanstack/react-query");
+const query = require("../../../directus-query/src/lib/query.js");
+require("../../../directus-query/src/lib/request.js");
+require("graphql-request");
+require("../../../directus-query/src/lib/config.js");
+const radash = require("radash");
+function isVariables(maybeVariables) {
+  return !!maybeVariables;
+}
+function isOnlyIdInItem(item) {
+  return !radash.isEmpty(item) && Object.keys(item).length === 1 && Object.keys(item)[0] === "id" && !!item.id;
+}
+async function queryFromVariables(params) {
+  const { document, blockKey, variables } = params;
+  if (!document || !isVariables(variables)) return null;
+  const queriedBlockProps = await query.queryGql(document, variables);
+  if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
+  const queriedBlockFragment = queriedBlockProps[blockKey];
+  return queriedBlockFragment;
+}
+async function getBlockProps(params) {
+  const { document, item, blockKey, variables } = params;
+  if (item) {
+    if (!isOnlyIdInItem(item)) {
+      return item;
+    }
+    const variablesWithFallback = { id: item.id, ...variables };
+    if (!isVariables(variablesWithFallback)) return null;
+    return queryFromVariables({
+      ...params,
+      variables: variablesWithFallback
+    });
+  }
+  if (!document || !isVariables(variables)) return null;
+  const queriedBlockProps = await query.queryGql(document, variables);
+  if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
+  const queriedBlockFragment = queriedBlockProps[blockKey];
+  return queriedBlockFragment;
+}
+module.exports = getBlockProps;

package/directus-block/src/utils/get-block-props.mjs

@@ -0,0 +1,43 @@
+"server-only";
+import "@tanstack/react-query";
+import { queryGql } from "../../../directus-query/src/lib/query.mjs";
+import "../../../directus-query/src/lib/request.mjs";
+import "graphql-request";
+import "../../../directus-query/src/lib/config.mjs";
+import { isEmpty } from "radash";
+function isVariables(maybeVariables) {
+  return !!maybeVariables;
+}
+function isOnlyIdInItem(item) {
+  return !isEmpty(item) && Object.keys(item).length === 1 && Object.keys(item)[0] === "id" && !!item.id;
+}
+async function queryFromVariables(params) {
+  const { document, blockKey, variables } = params;
+  if (!document || !isVariables(variables)) return null;
+  const queriedBlockProps = await queryGql(document, variables);
+  if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
+  const queriedBlockFragment = queriedBlockProps[blockKey];
+  return queriedBlockFragment;
+}
+async function getBlockProps(params) {
+  const { document, item, blockKey, variables } = params;
+  if (item) {
+    if (!isOnlyIdInItem(item)) {
+      return item;
+    }
+    const variablesWithFallback = { id: item.id, ...variables };
+    if (!isVariables(variablesWithFallback)) return null;
+    return queryFromVariables({
+      ...params,
+      variables: variablesWithFallback
+    });
+  }
+  if (!document || !isVariables(variables)) return null;
+  const queriedBlockProps = await queryGql(document, variables);
+  if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
+  const queriedBlockFragment = queriedBlockProps[blockKey];
+  return queriedBlockFragment;
+}
+export {
+  getBlockProps as default
+};

package/directus-block/src/utils/merge-configs.js

@@ -0,0 +1,9 @@
+"use strict";
+function mergeConfigs(baseConfig, ...configs) {
+  const finalConfig = configs.reduce((mergedConfig, config) => {
+    if (!config) return mergedConfig;
+    return { components: { ...mergedConfig.components, ...config.components } };
+  }, baseConfig);
+  return finalConfig;
+}
+module.exports = mergeConfigs;

package/directus-block/src/utils/merge-configs.mjs

@@ -0,0 +1,10 @@
+function mergeConfigs(baseConfig, ...configs) {
+  const finalConfig = configs.reduce((mergedConfig, config) => {
+    if (!config) return mergedConfig;
+    return { components: { ...mergedConfig.components, ...config.components } };
+  }, baseConfig);
+  return finalConfig;
+}
+export {
+  mergeConfigs as default
+};

package/directus-query/src/lib/config.js

@@ -0,0 +1,3 @@
+"use strict";
+process.env.NEXT_PUBLIC_GRAPHQL_URL;
+process.env.NEXT_PUBLIC_API_TOKEN;

package/directus-query/src/lib/config.mjs

@@ -0,0 +1,2 @@
+process.env.NEXT_PUBLIC_GRAPHQL_URL;
+process.env.NEXT_PUBLIC_API_TOKEN;

package/directus-query/src/lib/query.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("radash");
+const request = require("./request.js");
+function queryGql(document, queryKey, client = request.graphqlRequestClient) {
+  return client.request(document, {
+    ...queryKey
+  });
+}
+exports.queryGql = queryGql;

package/directus-query/src/lib/query.mjs

@@ -0,0 +1,10 @@
+import "radash";
+import { graphqlRequestClient } from "./request.mjs";
+function queryGql(document, queryKey, client = graphqlRequestClient) {
+  return client.request(document, {
+    ...queryKey
+  });
+}
+export {
+  queryGql
+};

package/directus-query/src/lib/request.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const reactQuery = require("@tanstack/react-query");
+const graphqlRequest = require("graphql-request");
+const GRAPHQL_ENDPOINT = process.env.NEXT_PUBLIC_GRAPHQL_URL;
+const GRAPHQL_ENDPOINT_ADMIN = process.env.NEXT_GRAPHQL_URL_ADMIN;
+const AUTH_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN ?? "";
+const AUTH_TOKEN_ADMIN = process.env.NEXT_PUBLIC_API_TOKEN;
+const graphqlRequestClient = new graphqlRequest.GraphQLClient(GRAPHQL_ENDPOINT, {
+  credentials: "include",
+  mode: "cors",
+  fetch,
+  headers: {
+    Authorization: `Bearer ${AUTH_TOKEN}`
+  }
+});
+new graphqlRequest.GraphQLClient(GRAPHQL_ENDPOINT_ADMIN, {
+  credentials: "include",
+  mode: "cors",
+  fetch,
+  headers: {
+    Authorization: `Bearer ${AUTH_TOKEN_ADMIN}`
+  }
+});
+new reactQuery.QueryClient({
+  queryCache: new reactQuery.QueryCache({
+    onError: (error) => {
+      console.error(error);
+    }
+  }),
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 1e3
+    }
+  }
+});
+exports.default = graphqlRequestClient;
+exports.graphqlRequestClient = graphqlRequestClient;

package/directus-query/src/lib/request.mjs

@@ -0,0 +1,38 @@
+import { QueryClient, QueryCache } from "@tanstack/react-query";
+import { GraphQLClient } from "graphql-request";
+const GRAPHQL_ENDPOINT = process.env.NEXT_PUBLIC_GRAPHQL_URL;
+const GRAPHQL_ENDPOINT_ADMIN = process.env.NEXT_GRAPHQL_URL_ADMIN;
+const AUTH_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN ?? "";
+const AUTH_TOKEN_ADMIN = process.env.NEXT_PUBLIC_API_TOKEN;
+const graphqlRequestClient = new GraphQLClient(GRAPHQL_ENDPOINT, {
+  credentials: "include",
+  mode: "cors",
+  fetch,
+  headers: {
+    Authorization: `Bearer ${AUTH_TOKEN}`
+  }
+});
+new GraphQLClient(GRAPHQL_ENDPOINT_ADMIN, {
+  credentials: "include",
+  mode: "cors",
+  fetch,
+  headers: {
+    Authorization: `Bearer ${AUTH_TOKEN_ADMIN}`
+  }
+});
+new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      console.error(error);
+    }
+  }),
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 1e3
+    }
+  }
+});
+export {
+  graphqlRequestClient as default,
+  graphqlRequestClient
+};

package/hooks/useBlock.d.ts

@@ -0,0 +1,8 @@
+import type { TToken } from '@okam/stack-ui';
+import type { TypedQueryDocumentNode } from 'graphql';
+import type { TBlockSerializerProps } from '../components/BlockSerializer/interface';
+import type { TBlockQuery, TBlockVariables, TCommonBlockFragment } from '../types/block';
+declare function useBlock<T extends TCommonBlockFragment>(props: TBlockSerializerProps<T>, blockKey: string, doc?: TypedQueryDocumentNode<TBlockQuery<T>, TBlockVariables>): Promise<T & {
+    cmsTokens: TToken;
+}>;
+export default useBlock;

package/index.d.ts

@@ -1,6 +1,8 @@
+export type { BlockSettingsFragment } from './generated/graphql';
 export type { TBlockDispatcherProps } from './components/BlockDispatcher/interface';
 export type { TBlockSerializerConfig, TBlockSerializerProps, TBlock, TBlockSerializerConfigComponent, } from './components/BlockSerializer/interface';
 export type { TAdditionalProps, TCommonBlockFragment, TBlockQuery, TBlockDocument, TBlockVariables, } from './types/block';
 export { default as BlockWysiwyg } from './blocks/BlockWysiwyg';
+export { default as useBlock } from './hooks/useBlock';
 export { default as blockWysiwygConfig } from './blocks/BlockWysiwyg/config';
 export { default as baseConfig } from './components/BlockDispatcher/config';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/directus-block",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

package/config-BNCxf6ZM.mjs

@@ -1,117 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Box, WysiwygBlock } from "@okam/stack-ui";
-import React from "react";
-import { QueryClient, QueryCache } from "@tanstack/react-query";
-import { isEmpty } from "radash";
-import { GraphQLClient } from "graphql-request";
-const BlockSettingsFragmentDoc = { "kind": "Document", "definitions": [{ "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "BlockSettings" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "block_settings" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "tokens" } }, { "kind": "Field", "name": { "kind": "Name", "value": "variant" } }] } }] };
-function useFragment(_documentNode, fragmentType) {
-  return fragmentType;
-}
-const GRAPHQL_ENDPOINT = process.env.NEXT_PUBLIC_GRAPHQL_URL;
-const GRAPHQL_ENDPOINT_ADMIN = process.env.NEXT_GRAPHQL_URL_ADMIN;
-const AUTH_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN ?? "";
-const AUTH_TOKEN_ADMIN = process.env.NEXT_PUBLIC_API_TOKEN;
-const graphqlRequestClient = new GraphQLClient(GRAPHQL_ENDPOINT, {
-  credentials: "include",
-  mode: "cors",
-  fetch,
-  headers: {
-    Authorization: `Bearer ${AUTH_TOKEN}`
-  }
-});
-new GraphQLClient(GRAPHQL_ENDPOINT_ADMIN, {
-  credentials: "include",
-  mode: "cors",
-  fetch,
-  headers: {
-    Authorization: `Bearer ${AUTH_TOKEN_ADMIN}`
-  }
-});
-new QueryClient({
-  queryCache: new QueryCache({
-    onError: (error) => {
-      console.error(error);
-    }
-  }),
-  defaultOptions: {
-    queries: {
-      staleTime: 5 * 1e3
-    }
-  }
-});
-function queryGql(document, queryKey, client = graphqlRequestClient) {
-  return client.request(document, {
-    ...queryKey
-  });
-}
-process.env.NEXT_PUBLIC_GRAPHQL_URL;
-process.env.NEXT_PUBLIC_API_TOKEN;
-function isVariables(maybeVariables) {
-  return !!maybeVariables;
-}
-function isOnlyIdInItem(item) {
-  return !isEmpty(item) && Object.keys(item).length === 1 && Object.keys(item)[0] === "id" && !!item.id;
-}
-async function queryFromVariables(params) {
-  const { document, blockKey, variables } = params;
-  if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await queryGql(document, variables);
-  if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
-  const queriedBlockFragment = queriedBlockProps[blockKey];
-  return queriedBlockFragment;
-}
-async function getBlockProps(params) {
-  const { document, item, blockKey, variables } = params;
-  if (item) {
-    if (!isOnlyIdInItem(item)) {
-      return item;
-    }
-    const variablesWithFallback = { id: item.id, ...variables };
-    if (!isVariables(variablesWithFallback)) return null;
-    return queryFromVariables({
-      ...params,
-      variables: variablesWithFallback
-    });
-  }
-  if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await queryGql(document, variables);
-  if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
-  const queriedBlockFragment = queriedBlockProps[blockKey];
-  return queriedBlockFragment;
-}
-const BlockWysiwyg = async (props) => {
-  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 } = useFragment(BlockSettingsFragmentDoc, settings) ?? {};
-  if (!content && !(title && level)) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    title && level && /* @__PURE__ */ jsx(Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),
-    content && /* @__PURE__ */ jsx(WysiwygBlock, { themeName, tokens: { ...tokens, ...cmsTokens }, content })
-  ] });
-};
-const blockWysiwygConfig = {
-  block_wysiwyg: {
-    default: (props) => /* @__PURE__ */ jsx(BlockWysiwyg, { ...props })
-  }
-};
-const baseConfig = {
-  components: {
-    ...blockWysiwygConfig
-  }
-};
-export {
-  BlockWysiwyg as B,
-  baseConfig as a,
-  blockWysiwygConfig as b,
-  BlockSettingsFragmentDoc as c,
-  getBlockProps as g,
-  useFragment as u
-};

package/config-Wm_s8RKf.js

@@ -1,116 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const stackUi = require("@okam/stack-ui");
-const React = require("react");
-const reactQuery = require("@tanstack/react-query");
-const radash = require("radash");
-const graphqlRequest = require("graphql-request");
-const BlockSettingsFragmentDoc = { "kind": "Document", "definitions": [{ "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "BlockSettings" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "block_settings" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "tokens" } }, { "kind": "Field", "name": { "kind": "Name", "value": "variant" } }] } }] };
-function useFragment(_documentNode, fragmentType) {
-  return fragmentType;
-}
-const GRAPHQL_ENDPOINT = process.env.NEXT_PUBLIC_GRAPHQL_URL;
-const GRAPHQL_ENDPOINT_ADMIN = process.env.NEXT_GRAPHQL_URL_ADMIN;
-const AUTH_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN ?? "";
-const AUTH_TOKEN_ADMIN = process.env.NEXT_PUBLIC_API_TOKEN;
-const graphqlRequestClient = new graphqlRequest.GraphQLClient(GRAPHQL_ENDPOINT, {
-  credentials: "include",
-  mode: "cors",
-  fetch,
-  headers: {
-    Authorization: `Bearer ${AUTH_TOKEN}`
-  }
-});
-new graphqlRequest.GraphQLClient(GRAPHQL_ENDPOINT_ADMIN, {
-  credentials: "include",
-  mode: "cors",
-  fetch,
-  headers: {
-    Authorization: `Bearer ${AUTH_TOKEN_ADMIN}`
-  }
-});
-new reactQuery.QueryClient({
-  queryCache: new reactQuery.QueryCache({
-    onError: (error) => {
-      console.error(error);
-    }
-  }),
-  defaultOptions: {
-    queries: {
-      staleTime: 5 * 1e3
-    }
-  }
-});
-function queryGql(document, queryKey, client = graphqlRequestClient) {
-  return client.request(document, {
-    ...queryKey
-  });
-}
-process.env.NEXT_PUBLIC_GRAPHQL_URL;
-process.env.NEXT_PUBLIC_API_TOKEN;
-function isVariables(maybeVariables) {
-  return !!maybeVariables;
-}
-function isOnlyIdInItem(item) {
-  return !radash.isEmpty(item) && Object.keys(item).length === 1 && Object.keys(item)[0] === "id" && !!item.id;
-}
-async function queryFromVariables(params) {
-  const { document, blockKey, variables } = params;
-  if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await queryGql(document, variables);
-  if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
-  const queriedBlockFragment = queriedBlockProps[blockKey];
-  return queriedBlockFragment;
-}
-async function getBlockProps(params) {
-  const { document, item, blockKey, variables } = params;
-  if (item) {
-    if (!isOnlyIdInItem(item)) {
-      return item;
-    }
-    const variablesWithFallback = { id: item.id, ...variables };
-    if (!isVariables(variablesWithFallback)) return null;
-    return queryFromVariables({
-      ...params,
-      variables: variablesWithFallback
-    });
-  }
-  if (!document || !isVariables(variables)) return null;
-  const queriedBlockProps = await queryGql(document, variables);
-  if (!queriedBlockProps || typeof queriedBlockProps !== "object" || !blockKey) return null;
-  const queriedBlockFragment = queriedBlockProps[blockKey];
-  return queriedBlockFragment;
-}
-const BlockWysiwyg = async (props) => {
-  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 } = useFragment(BlockSettingsFragmentDoc, settings) ?? {};
-  if (!content && !(title && level)) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    title && level && /* @__PURE__ */ jsxRuntime.jsx(stackUi.Box, { as: "span", themeName, tokens: { ...tokens, ...cmsTokens }, children: React.createElement(level, {}, title) }),
-    content && /* @__PURE__ */ jsxRuntime.jsx(stackUi.WysiwygBlock, { themeName, tokens: { ...tokens, ...cmsTokens }, content })
-  ] });
-};
-const blockWysiwygConfig = {
-  block_wysiwyg: {
-    default: (props) => /* @__PURE__ */ jsxRuntime.jsx(BlockWysiwyg, { ...props })
-  }
-};
-const baseConfig = {
-  components: {
-    ...blockWysiwygConfig
-  }
-};
-exports.BlockSettingsFragmentDoc = BlockSettingsFragmentDoc;
-exports.BlockWysiwyg = BlockWysiwyg;
-exports.baseConfig = baseConfig;
-exports.blockWysiwygConfig = blockWysiwygConfig;
-exports.getBlockProps = getBlockProps;
-exports.useFragment = useFragment;

package/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const config = require("./config-Wm_s8RKf.js");
-exports.BlockWysiwyg = config.BlockWysiwyg;
-exports.baseConfig = config.baseConfig;
-exports.blockWysiwygConfig = config.blockWysiwygConfig;

package/index.mjs

@@ -1,6 +0,0 @@
-import { B, a, b } from "./config-BNCxf6ZM.mjs";
-export {
-  B as BlockWysiwyg,
-  a as baseConfig,
-  b as blockWysiwygConfig
-};

package/server.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-require("@tanstack/react-query");
-require("radash");
-const config = require("./config-Wm_s8RKf.js");
-require("graphql-request");
-function mergeConfigs(baseConfig, ...configs) {
-  const finalConfig = configs.reduce((mergedConfig, config2) => {
-    if (!config2) return mergedConfig;
-    return { components: { ...mergedConfig.components, ...config2.components } };
-  }, baseConfig);
-  return finalConfig;
-}
-const BlockSerializer = (props) => {
-  var _a, _b, _c;
-  const { item, collection, config: config$1, variables, defaultVariant, ...rest } = props;
-  if (!collection || !config$1) return null;
-  const blockConfig = (_a = config$1 == null ? void 0 : config$1.components) == null ? void 0 : _a[collection];
-  if (!blockConfig) return null;
-  const { settings } = item ?? {};
-  const id = (item == null ? void 0 : item.id) ?? (variables == null ? void 0 : variables.id);
-  if (!id) return null;
-  const { variant } = config.useFragment(config.BlockSettingsFragmentDoc, settings) ?? {};
-  const variantWithFallback = ((_b = blockConfig.getVariant) == null ? void 0 : _b.call(blockConfig, props)) ?? variant ?? defaultVariant;
-  const { default: defaultBlockComponent, document } = blockConfig;
-  const variantBlockComponent = (_c = blockConfig.variants) == null ? void 0 : _c[variantWithFallback ?? ""];
-  const BlockComponent = variantBlockComponent ?? defaultBlockComponent;
-  if (!BlockComponent) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    BlockComponent,
-    {
-      document,
-      config: config$1,
-      collection,
-      item,
-      ...id ? { variables: { ...variables, id } } : { variables },
-      ...rest
-    },
-    id
-  );
-};
-const BlockDispatcher = (props) => {
-  const { children, config: config$1, ...rest } = props;
-  const finalConfig = mergeConfigs(config.baseConfig, config$1);
-  const renderBlock = (blockProps) => {
-    return children ? children({ ...rest, ...blockProps, config: finalConfig }) : /* @__PURE__ */ jsxRuntime.jsx(BlockSerializer, { ...rest, ...blockProps, config: finalConfig });
-  };
-  if ("blocks" in props) {
-    const { blocks } = props;
-    return blocks.map(renderBlock);
-  }
-  const { block } = props;
-  return renderBlock(block);
-};
-exports.getBlockProps = config.getBlockProps;
-exports.BlockDispatcher = BlockDispatcher;
-exports.BlockSerializer = BlockSerializer;
-exports.mergeConfigs = mergeConfigs;