@okam/directus-block 1.1.1 → 1.2.0

package/.eslintrc.js

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

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

@@ -0,0 +1,33 @@
+/* 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

@@ -0,0 +1,17 @@
+{
+  "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

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

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

package/project.json

@@ -0,0 +1,57 @@
+{
+  "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

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

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

@@ -0,0 +1,13 @@
+/* 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

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

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

@@ -0,0 +1,17 @@
+/* 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

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

package/src/components/BlockSerializer/interface.ts

@@ -0,0 +1,51 @@
+import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
+import type { Nullable, TDefaultComponent } from '@okam/stack-ui'
+import type { Variables } from 'graphql-request'
+import type { FunctionComponent } from 'react'
+import type {
+  TCommonBlockFragment,
+  TAdditionalProps,
+  TBlockQuery,
+  TBlockVariables,
+  TBlockDocument,
+} from '../../types/block'
+
+export interface TBlock<
+  BlockFragment extends TCommonBlockFragment = TCommonBlockFragment,
+  BlockVariables extends Variables = Variables,
+> {
+  collection?: Nullable<string>
+  item?: Nullable<BlockFragment>
+  variables?: TBlockVariables<BlockVariables>
+  document?: TypedDocumentNode<TBlockQuery<BlockFragment>, BlockVariables>
+}
+
+export type TBlockSerializerProps<
+  BlockFragment extends TCommonBlockFragment = TCommonBlockFragment,
+  BlockVariables extends Variables = TBlockVariables,
+  AdditionalProps extends TAdditionalProps = TAdditionalProps,
+> = TBlock<BlockFragment, BlockVariables> &
+  TDefaultComponent & {
+    config?: TBlockSerializerConfig
+    defaultVariant?: string
+    additionalProps?: AdditionalProps
+  }
+
+export type TBlockFunctionComponent<BlockFragment extends TCommonBlockFragment = TCommonBlockFragment> =
+  FunctionComponent<TBlockSerializerProps<BlockFragment>>
+
+export type TBlockSerializerConfigComponent<BlockFragment extends TCommonBlockFragment = TCommonBlockFragment> = {
+  [blockKey: string]: {
+    default: TBlockFunctionComponent<BlockFragment>
+    document?: TBlockDocument<BlockFragment>
+    defaultVariant?: string
+    getVariant?: (props: TBlockSerializerProps<BlockFragment>) => Nullable<string>
+    variants?: {
+      [blockVariant: string]: TBlockFunctionComponent<BlockFragment>
+    }
+  }
+}
+
+export interface TBlockSerializerConfig {
+  components: TBlockSerializerConfigComponent
+}

package/src/generated/fragment-masking.ts

@@ -0,0 +1,66 @@
+/* eslint-disable */
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FragmentDefinitionNode } from 'graphql'
+import { Incremental } from './graphql';
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
+
+  if (!deferredFields) return true;
+
+  const fragDef = (fragmentNode as any).definitions[0] as FragmentDefinitionNode | undefined;
+  const fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  //@ts-ignore
+  return fields.length > 0 && fields.every((field) => data && field in data);
+}

package/src/generated/graphql.ts

@@ -0,0 +1,31 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never }
+
+export type Scalars = {
+  ID: { input: string; output: string; }
+  String: { input: string; output: string; }
+  Boolean: { input: boolean; output: boolean; }
+  Int: { input: number; output: number; }
+  Float: { input: number; output: number; }
+  /** ISO8601 Date values */
+  Date: { input: any; output: any; }
+  /** BigInt value */
+  GraphQLBigInt: { input: any; output: any; }
+  /** A Float or a String */
+  GraphQLStringOrFloat: { input: any; output: any; }
+  /** Hashed string values */
+  Hash: { input: any; output: any; }
+  /** The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf). */
+  JSON: { input: any; output: any; }
+};
+
+export type BlockSettingsFragment = { __typename?: 'block_settings'; tokens?: any | null; variant?: string | null } & {
+  ' $fragmentName'?: 'BlockSettingsFragment'
+}
+
+export 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"}}]}}]} as unknown as DocumentNode<BlockSettingsFragment, unknown>;