@okam/directus-block 1.2.2 → 1.2.3

package/components/BlockDispatcher/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/// <reference types="react/experimental" />
+import type { TBlockDispatcherProps } from './interface';
+declare const BlockDispatcher: (props: TBlockDispatcherProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react").PromiseLikeOfReactNode | import("react/jsx-runtime").JSX.Element | (string | number | boolean | Iterable<import("react").ReactNode> | import("react").PromiseLikeOfReactNode | import("react/jsx-runtime").JSX.Element | null | undefined)[] | null | undefined;
+export default BlockDispatcher;

package/components/BlockSerializer/index.d.ts

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

package/config-BNCxf6ZM.mjs

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

@@ -0,0 +1,116 @@
+"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;