@okam/directus-block 1.1.1 → 1.2.1

package/src/index.ts

@@ -0,0 +1,22 @@
+// Types
+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'
+
+// Blocks
+export { default as BlockWysiwyg } from './blocks/BlockWysiwyg'
+
+// Configs
+export { default as blockWysiwygConfig } from './blocks/BlockWysiwyg/config'
+export { default as baseConfig } from './components/BlockDispatcher/config'

package/src/server.ts

@@ -0,0 +1,6 @@
+'server-only'
+
+export { default as BlockDispatcher } from './components/BlockDispatcher'
+export { default as BlockSerializer } from './components/BlockSerializer'
+export { default as getBlockProps } from './utils/get-block-props'
+export { default as mergeConfigs } from './utils/merge-configs'

package/src/types/block.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+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>>

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

@@ -0,0 +1,81 @@
+'server-only'
+
+import { queryGql } from '@okam/directus-query'
+import type { Nullable } from '@okam/stack-ui'
+import type { Variables } from 'graphql-request'
+import { isEmpty } from 'radash'
+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>
+}
+
+function isVariables<BlockVariables extends Variables>(
+  maybeVariables: Nullable<Variables>,
+): maybeVariables is BlockVariables {
+  return !!maybeVariables
+}
+
+function isOnlyIdInItem(item: TCommonBlockFragment): item is TBlockVariables {
+  return !isEmpty(item) && Object.keys(item).length === 1 && Object.keys(item)[0] === 'id' && !!item.id
+}
+
+async function queryFromVariables<
+  BlockFragment extends TCommonBlockFragment,
+  BlockVariables extends Variables = Variables,
+>(params: TGetBlockPropsParams<BlockFragment, BlockVariables>) {
+  const { document, blockKey, variables } = params
+
+  if (!document || !isVariables<BlockVariables>(variables)) return null
+
+  const queriedBlockProps = await queryGql(document, variables)
+
+  if (!queriedBlockProps || typeof queriedBlockProps !== 'object' || !blockKey) return null
+
+  const queriedBlockFragment = queriedBlockProps[blockKey]
+
+  return queriedBlockFragment as BlockFragment
+}
+
+/**
+ * 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 async function getBlockProps<
+  BlockFragment extends TCommonBlockFragment,
+  BlockVariables extends Variables = Variables,
+>(params: TGetBlockPropsParams<BlockFragment, BlockVariables>): Promise<BlockFragment | null | undefined> {
+  const { document, item, blockKey, variables } = params
+
+  if (item) {
+    // If the item actually contains the block's data, just return it
+    if (!isOnlyIdInItem(item)) {
+      return item
+    }
+
+    // Otherwise, the id necessary to make the query might be inside the item. Just in case, we have a fallback
+    const variablesWithFallback = { id: item.id, ...variables }
+
+    if (!isVariables<BlockVariables>(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 as BlockFragment
+}

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+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/src/utils/merge-configs.ts

@@ -0,0 +1,21 @@
+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 {
+  const finalConfig = configs.reduce<TBlockSerializerConfig>((mergedConfig, config) => {
+    if (!config) return mergedConfig
+
+    return { components: { ...mergedConfig.components, ...config.components } }
+  }, baseConfig)
+
+  return finalConfig
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node", "next"]
+  },
+  "paths": { "@workspace/*": ["dist/libs/*"] },
+  "files": [
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-relative-packages */
+/// <reference types="vitest" />
+import * as path from 'path'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import externalDeps from '../../../config/external-deps'
+
+export default defineConfig({
+  cacheDir: '../../../node_modules/.vite/directus-block',
+
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+    react(),
+    viteTsConfigPaths({
+      root: '../../../',
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [
+  //    viteTsConfigPaths({
+  //      root: '../../../',
+  //    }),
+  //  ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'directus-block',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: externalDeps,
+    },
+  },
+})

package/blocks/BlockWysiwyg/config.d.ts

@@ -1,3 +0,0 @@
-import type { TBlockSerializerConfigComponent } from '../../components/BlockSerializer/interface';
-declare const blockWysiwygConfig: TBlockSerializerConfigComponent;
-export default blockWysiwygConfig;

package/blocks/BlockWysiwyg/index.d.ts

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

package/blocks/BlockWysiwyg/interface.d.ts

@@ -1,17 +0,0 @@
-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/components/BlockDispatcher/config.d.ts

@@ -1,3 +0,0 @@
-import type { TBlockSerializerConfig } from '../BlockSerializer/interface';
-declare const baseConfig: TBlockSerializerConfig;
-export default baseConfig;

package/components/BlockDispatcher/index.d.ts

@@ -1,5 +0,0 @@
-/// <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/BlockDispatcher/interface.d.ts

@@ -1,16 +0,0 @@
-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>[];
-});
-export {};

package/components/BlockSerializer/index.d.ts

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

package/components/BlockSerializer/interface.d.ts

@@ -1,31 +0,0 @@
-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/generated/fragment-masking.d.ts

@@ -1,15 +0,0 @@
-import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
-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;
-export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>): TType;
-export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined): TType | null | undefined;
-export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>): ReadonlyArray<TType>;
-export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined): ReadonlyArray<TType> | null | undefined;
-export declare function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT extends ResultOf<F>>(data: FT, _fragment: F): FragmentType<F>;
-export declare function isFragmentReady<TQuery, TFrag>(queryNode: DocumentTypeDecoration<TQuery, any>, fragmentNode: TypedDocumentNode<TFrag>, data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined): data is FragmentType<typeof fragmentNode>;

package/generated/graphql.d.ts

@@ -1,64 +0,0 @@
-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 declare const BlockSettingsFragmentDoc: DocumentNode<BlockSettingsFragment, unknown>;

package/index.d.ts

@@ -1,10 +0,0 @@
-export { default as BlockDispatcher } from './components/BlockDispatcher';
-export { default as BlockSerializer } from './components/BlockSerializer';
-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 getBlockProps } from './utils/get-block-props';
-export { default as mergeConfigs } from './utils/merge-configs';
-export { default as blockWysiwygConfig } from './blocks/BlockWysiwyg/config';
-export { default as baseConfig } from './components/BlockDispatcher/config';