@contentful/experiences-core 0.0.1-alpha.10

package/dist/types.d.ts

@@ -0,0 +1,244 @@
+import { Entry, Asset, AssetFile } from 'contentful';
+import { SCROLL_STATES, OUTGOING_EVENTS, INCOMING_EVENTS, INTERNAL_EVENTS } from './constants.js';
+import { EntityStore } from './entity/EntityStore.js';
+import { Document } from '@contentful/rich-text-types';
+import { ComponentDefinitionPropertyType, ComponentPropertyValue, ExperienceDataSource, ExperienceUnboundValues, Breakpoint, ExperienceComponentTree, ExperienceUsedComponents, ExperienceComponentSettings, ValuesByBreakpoint, PrimitiveValue } from '@contentful/experiences-validators';
+export { BoundValue, Breakpoint, ComponentDefinitionPropertyType as ComponentDefinitionVariableType, ComponentPropertyValue, ComponentTreeNode, ComponentValue, DesignValue, ExperienceComponentSettings, ExperienceDataSource, ExperienceUnboundValues, PrimitiveValue, SchemaVersions, UnboundValue, ValuesByBreakpoint } from '@contentful/experiences-validators';
+
+type ScrollStateKey = keyof typeof SCROLL_STATES;
+type ScrollState = (typeof SCROLL_STATES)[ScrollStateKey];
+type OutgoingEventKey = keyof typeof OUTGOING_EVENTS;
+type OutgoingEvent = (typeof OUTGOING_EVENTS)[OutgoingEventKey];
+type IncomingEventKey = keyof typeof INCOMING_EVENTS;
+type IncomingEvent = (typeof INCOMING_EVENTS)[IncomingEventKey];
+type InternalEventKey = keyof typeof INTERNAL_EVENTS;
+type InternalEvent = (typeof INTERNAL_EVENTS)[InternalEventKey];
+interface Link<T extends string> {
+    sys: {
+        type: 'Link';
+        linkType: T;
+        id: string;
+    };
+}
+type VariableFormats = 'URL';
+type ValidationOption<T extends ComponentDefinitionPropertyType> = {
+    value: T extends 'Text' ? string : T extends 'Number' ? number : never;
+    displayName?: string;
+};
+type ComponentDefinitionVariableValidation<T extends ComponentDefinitionPropertyType> = {
+    required?: boolean;
+    in?: ValidationOption<T>[];
+    format?: VariableFormats;
+};
+interface ComponentDefinitionVariableBase<T extends ComponentDefinitionPropertyType> {
+    type: T;
+    validations?: ComponentDefinitionVariableValidation<T>;
+    group?: 'style' | 'content';
+    description?: string;
+    displayName?: string;
+    defaultValue?: string | boolean | number | Record<any, any>;
+}
+type ComponentDefinitionVariable<T extends ComponentDefinitionPropertyType = ComponentDefinitionPropertyType> = ComponentDefinitionVariableBase<T>;
+type ComponentDefinition<T extends ComponentDefinitionPropertyType = ComponentDefinitionPropertyType> = {
+    id: string;
+    name: string;
+    category?: string;
+    thumbnailUrl?: string;
+    variables: Partial<Record<ContainerStyleVariableName, ComponentDefinitionVariable<T>>> & Record<string, ComponentDefinitionVariable<T>>;
+    builtInStyles?: Array<keyof Omit<StyleProps, 'cfHyperlink' | 'cfOpenInNewTab'>>;
+    children?: boolean;
+    tooltip?: {
+        imageUrl?: string;
+        description: string;
+    };
+};
+type ComponentRegistration = {
+    component: React.ElementType;
+    definition: ComponentDefinition;
+    options?: {
+        wrapComponent?: boolean;
+        wrapContainerTag?: keyof JSX.IntrinsicElements;
+    };
+};
+type ComponentRegistrationOptions = {
+    enabledBuiltInComponents?: string[];
+};
+type Binding = {
+    spaceId: string;
+    environmentId: string;
+    entityId: string;
+    entityType: 'Entry' | 'Asset' | 'ContentType';
+    path: string[];
+};
+type ComponentBinding = Record<string, Binding>;
+type BindingMap = Record<string, ComponentBinding>;
+type BindingMapByBlockId = Record<string, BindingMap>;
+type DataSourceEntryValueType = Link<'Entry' | 'Asset'>;
+/** Type of a single node of the experience tree exchanged via postMessage between the SDK and Contentful Web app */
+type ExperienceTreeNode = {
+    type: 'block' | 'root' | 'editorRoot' | 'designComponent' | 'designComponentBlock' | 'assembly' | 'assemblyBlock';
+    data: {
+        id: string;
+        blockId?: string;
+        assembly?: {
+            id: string;
+            componentId: string;
+            nodeLocation: string | null;
+        };
+        props: Record<string, ComponentPropertyValue>;
+        dataSource: ExperienceDataSource;
+        unboundValues: ExperienceUnboundValues;
+        breakpoints: Breakpoint[];
+    };
+    children: ExperienceTreeNode[];
+    parentId?: string;
+};
+/** Type of the tree data structure exchanged via postMessage between the SDK and Contentful Web app */
+type ExperienceTree = {
+    root: ExperienceTreeNode;
+};
+type ExternalSDKMode = 'preview' | 'delivery';
+type InternalSDKMode = ExternalSDKMode | 'editor';
+/**
+ * Internally defined style variables are prefix with `cf` to avoid
+ * collisions with user defined variables.
+ */
+type StyleProps = {
+    cfHorizontalAlignment: 'start' | 'end' | 'center';
+    cfVerticalAlignment: 'start' | 'end' | 'center';
+    cfMargin: string;
+    cfPadding: string;
+    cfBackgroundColor: string;
+    cfWidth: string;
+    cfMaxWidth: string;
+    cfHeight: string;
+    cfFlexDirection: 'row' | 'column';
+    cfFlexWrap: 'nowrap' | 'wrap';
+    cfBorder: string;
+    cfBorderRadius: string;
+    cfGap: string;
+    cfHyperlink: string;
+    cfImageAsset: OptimizedImageAsset | string;
+    cfImageOptions: ImageOptions;
+    cfBackgroundImageUrl: OptimizedBackgroundImageAsset | string;
+    cfBackgroundImageOptions: BackgroundImageOptions;
+    cfOpenInNewTab: boolean;
+    cfFontSize: string;
+    cfFontWeight: string;
+    cfLineHeight: string;
+    cfLetterSpacing: string;
+    cfTextColor: string;
+    cfTextAlign: 'left' | 'center' | 'right';
+    cfTextTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    cfTextBold: boolean;
+    cfTextItalic: boolean;
+    cfTextUnderline: boolean;
+    cfColumns: string;
+    cfColumnSpan: string;
+    cfColumnSpanLock: boolean;
+    cfWrapColumns: boolean;
+    cfWrapColumnsCount: string;
+};
+type CSSProperties = React.CSSProperties;
+type ContainerStyleVariableName = keyof StyleProps;
+type ExperienceFields = {
+    title: string;
+    slug: string;
+    componentTree: ExperienceComponentTree;
+    dataSource: ExperienceDataSource;
+    unboundValues: ExperienceUnboundValues;
+    usedComponents?: ExperienceUsedComponents | Array<ExperienceEntry>;
+    componentSettings?: ExperienceComponentSettings;
+};
+type RecursiveDesignTokenDefinition = {
+    [key: string]: string | RecursiveDesignTokenDefinition;
+};
+type DesignTokensDefinition = {
+    spacing?: Record<string, string>;
+    sizing?: Record<string, string>;
+    color?: Record<string, string>;
+    border?: Record<string, {
+        width: string;
+        style: 'solid' | 'dashed' | 'dotted';
+        color: string;
+    }>;
+    borderRadius?: Record<string, string>;
+    fontSize?: Record<string, string>;
+    lineHeight?: Record<string, string>;
+    letterSpacing?: Record<string, string>;
+    textColor?: Record<string, string>;
+} & RecursiveDesignTokenDefinition;
+/** Type of experience entry JSON data structure as returned by CPA/CDA */
+type ExperienceEntry = {
+    sys: Entry['sys'];
+    fields: ExperienceFields;
+    metadata: Entry['metadata'];
+};
+interface RawCoordinates {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+interface Coordinates extends RawCoordinates {
+    childrenCoordinates: RawCoordinates[];
+}
+interface HoveredElement {
+    blockType: string | undefined;
+    nodeId: string | undefined;
+    blockId: string | undefined;
+}
+interface Experience<T extends EntityStore = EntityStore> {
+    entityStore?: T;
+}
+type ResolveDesignValueType = (valuesByBreakpoint: ValuesByBreakpoint, variableName: string) => PrimitiveValue;
+type ManagementEntity = (Entry | Asset) & {
+    sys: {
+        version: number;
+    };
+};
+type RequestEntitiesMessage = {
+    entityIds: string[];
+    entityType: 'Asset' | 'Entry';
+    locale: string;
+};
+type RequestedEntitiesMessage = {
+    entities: Array<Entry | Asset>;
+    missingEntityIds?: string[];
+};
+type BoundComponentPropertyTypes = string | number | boolean | AssetFile | Record<string, AssetFile | undefined> | Document | OptimizedBackgroundImageAsset | OptimizedImageAsset | Link<'Asset'> | undefined;
+type OptimizedImageAsset = {
+    url: string;
+    srcSet?: string[];
+    sizes?: string;
+    quality?: number;
+    format?: string;
+    file: AssetFile;
+};
+type OptimizedBackgroundImageAsset = {
+    url: string;
+    srcSet?: string[];
+    file: AssetFile;
+};
+type ImageObjectFitOption = 'contain' | 'cover' | 'none';
+type ImageObjectPositionOption = 'left' | 'right' | 'top' | 'bottom' | 'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom' | 'center top' | 'center center' | 'center bottom';
+type ImageOptions = {
+    format?: string;
+    width: string;
+    height: string;
+    objectFit?: ImageObjectFitOption;
+    objectPosition?: ImageObjectPositionOption;
+    quality?: string;
+    targetSize: string;
+};
+type BackgroundImageScalingOption = 'fit' | 'fill' | 'tile';
+type BackgroundImageAlignmentOption = 'left' | 'right' | 'top' | 'bottom' | 'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom' | 'center top' | 'center center' | 'center bottom';
+type BackgroundImageOptions = {
+    format?: string;
+    scaling: BackgroundImageScalingOption;
+    alignment: BackgroundImageAlignmentOption;
+    quality?: string;
+    targetSize: string;
+};
+
+export type { BackgroundImageAlignmentOption, BackgroundImageOptions, BackgroundImageScalingOption, Binding, BindingMap, BindingMapByBlockId, BoundComponentPropertyTypes, CSSProperties, ComponentBinding, ComponentDefinition, ComponentDefinitionVariable, ComponentDefinitionVariableBase, ComponentDefinitionVariableValidation, ComponentRegistration, ComponentRegistrationOptions, ContainerStyleVariableName, Coordinates, DataSourceEntryValueType, DesignTokensDefinition, Experience, ExperienceEntry, ExperienceFields, ExperienceTree, ExperienceTreeNode, ExternalSDKMode, HoveredElement, ImageObjectFitOption, ImageObjectPositionOption, ImageOptions, IncomingEvent, InternalEvent, InternalSDKMode, Link, ManagementEntity, OptimizedBackgroundImageAsset, OptimizedImageAsset, OutgoingEvent, RawCoordinates, RecursiveDesignTokenDefinition, RequestEntitiesMessage, RequestedEntitiesMessage, ResolveDesignValueType, ScrollState, StyleProps, ValidationOption, VariableFormats };

package/dist/utils/breakpoints.d.ts

@@ -0,0 +1,12 @@
+import { Breakpoint, ValuesByBreakpoint } from '@contentful/experiences-validators';
+
+declare const MEDIA_QUERY_REGEXP: RegExp;
+declare const mediaQueryMatcher: (breakpoints: Breakpoint[]) => [{
+    id: string;
+    signal: MediaQueryList;
+}[], Record<string, boolean>];
+declare const getActiveBreakpointIndex: (breakpoints: Breakpoint[], mediaQueryMatches: Record<string, boolean>, fallbackBreakpointIndex: number) => number;
+declare const getFallbackBreakpointIndex: (breakpoints: Breakpoint[]) => number;
+declare const getValueForBreakpoint: (valuesByBreakpoint: ValuesByBreakpoint, breakpoints: Breakpoint[], activeBreakpointIndex: number, variableName: string) => string | number | boolean | Record<any, any> | undefined;
+
+export { MEDIA_QUERY_REGEXP, getActiveBreakpointIndex, getFallbackBreakpointIndex, getValueForBreakpoint, mediaQueryMatcher };

package/dist/utils/components.d.ts

@@ -0,0 +1,4 @@
+declare const isContentfulStructureComponent: (componentId?: string) => boolean;
+declare const isEmptyStructureWithRelativeHeight: (children: number, componentId?: string, height?: string | number) => boolean;
+
+export { isContentfulStructureComponent, isEmptyStructureWithRelativeHeight };

package/dist/utils/domValues.d.ts

@@ -0,0 +1,15 @@
+type Rect = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+declare const findOutermostCoordinates: (first: Rect, second: Rect) => {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+declare const getElementCoordinates: (element: Element) => DOMRect;
+
+export { findOutermostCoordinates, getElementCoordinates };

package/dist/utils/isLink.d.ts

@@ -0,0 +1,5 @@
+import { UnresolvedLink, Entry, Asset } from 'contentful';
+
+declare const isLink: (maybeLink: UnresolvedLink<'Entry' | 'Asset'> | Entry | Asset | string | unknown) => maybeLink is UnresolvedLink<"Entry" | "Asset">;
+
+export { isLink };

package/dist/utils/isLinkToAsset.d.ts

@@ -0,0 +1,5 @@
+import { Link } from '../types.js';
+
+declare const isLinkToAsset: (variable: any) => variable is Link<"Asset">;
+
+export { isLinkToAsset };

package/dist/utils/pathSchema.d.ts

@@ -0,0 +1,30 @@
+import { Entry, Asset } from 'contentful';
+
+/**
+ * This module encapsulates format of the path to a deep reference.
+ */
+
+type UnresolvedFieldset = Array<[null, string, string?]>;
+type Fieldset = Array<[Entry | Asset, string, string?]>;
+declare const parseDataSourcePathIntoFieldset: (path: string) => UnresolvedFieldset;
+/**
+ * Parse path into components, supports  L1 references (one reference follow) atm.
+ * @param path from data source. eg. `/uuid123/fields/image/~locale/fields/file/~locale`
+ *                               eg. `/uuid123/fields/file/~locale/fields/title/~locale`
+ * @returns
+ */
+declare const parseDataSourcePathWithL1DeepBindings: (path: string) => {
+    key: string;
+    field: string;
+    referentField: string;
+};
+/**
+ * Detects if paths is valid deep-path, like:
+ *  - /gV6yKXp61hfYrR7rEyKxY/fields/mainStory/~locale/fields/cover/~locale/fields/title/~locale
+ * or regular, like:
+ *  - /6J8eA60yXwdm5eyUh9fX6/fields/mainStory/~locale
+ * @returns
+ */
+declare const isDeepPath: (deepPathCandidate: string) => boolean;
+
+export { type Fieldset, type UnresolvedFieldset, isDeepPath, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings };

package/dist/utils/styleUtils/stylesUtils.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, StyleProps, ExperienceTreeNode } from '../../types.js';
+import { PrimitiveValue } from '@contentful/experiences-validators';
+
+declare const buildStyleTag: ({ styles, nodeId }: {
+    styles: CSSProperties;
+    nodeId?: string | undefined;
+}) => string[];
+declare const buildCfStyles: ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }: Partial<StyleProps>) => CSSProperties;
+/**
+ * Container/section default behavior:
+ * Default height => height: EMPTY_CONTAINER_HEIGHT (120px)
+ * If a container component has children => height: 'fit-content'
+ */
+declare const calculateNodeDefaultHeight: ({ blockId, children, value, }: {
+    blockId?: string | undefined;
+    children: ExperienceTreeNode['children'];
+    value: PrimitiveValue;
+}) => string | number | boolean | Record<any, any> | undefined;
+
+export { buildCfStyles, buildStyleTag, calculateNodeDefaultHeight };

package/dist/utils/supportedModes.d.ts

@@ -0,0 +1,5 @@
+import { InternalSDKMode } from '../types.js';
+
+declare const supportedModes: InternalSDKMode[];
+
+export { supportedModes };

package/dist/utils/transformers/transformBoundContentValue.d.ts

@@ -0,0 +1,8 @@
+import { ResolveDesignValueType, ComponentDefinitionVariable, BoundComponentPropertyTypes } from '../../types.js';
+import { UnresolvedLink } from 'contentful';
+import { EntityStoreBase } from '../../entity/EntityStoreBase.js';
+import { ComponentTreeNode } from '@contentful/experiences-validators';
+
+declare const transformBoundContentValue: (variables: ComponentTreeNode['variables'], entityStore: EntityStoreBase, binding: UnresolvedLink<'Entry' | 'Asset'>, resolveDesignValue: ResolveDesignValueType, variableName: string, variableDefinition: ComponentDefinitionVariable, path: string) => BoundComponentPropertyTypes;
+
+export { transformBoundContentValue };

package/dist/utils/typeguards.d.ts

@@ -0,0 +1,6 @@
+import { ExperienceEntry } from '../types.js';
+import { Entry } from 'contentful';
+
+declare const isExperienceEntry: (entry: ExperienceEntry | Entry) => entry is ExperienceEntry;
+
+export { isExperienceEntry };

package/dist/utils/utils.d.ts

@@ -0,0 +1,46 @@
+import { ExperienceTree, ExperienceEntry, ComponentDefinition, ExperienceTreeNode, StyleProps } from '../types.js';
+import { Entry } from 'contentful';
+import { ExperienceDataSource, ExperienceUnboundValues } from '@contentful/experiences-validators';
+
+declare const getDataFromTree: (tree: ExperienceTree) => {
+    dataSource: ExperienceDataSource;
+    unboundValues: ExperienceUnboundValues;
+};
+type GetInsertionDataParams = {
+    dropReceiverNode: ExperienceTreeNode;
+    dropReceiverParentNode: ExperienceTreeNode;
+    flexDirection?: StyleProps['cfFlexDirection'];
+    isMouseAtTopBorder: boolean;
+    isMouseAtBottomBorder: boolean;
+    isMouseInLeftHalf: boolean;
+    isMouseInUpperHalf: boolean;
+    isOverTopIndicator: boolean;
+    isOverBottomIndicator: boolean;
+};
+type InsertionData = {
+    node: ExperienceTreeNode;
+    index: number;
+};
+/**
+ * Gets calculates the index to drop the dragged component based on the mouse position
+ * @returns {InsertionData} a object containing a node that will become a parent for dragged component and index at which it must be inserted
+ */
+declare const getInsertionData: ({ dropReceiverParentNode, dropReceiverNode, flexDirection, isMouseAtTopBorder, isMouseAtBottomBorder, isMouseInLeftHalf, isMouseInUpperHalf, isOverTopIndicator, isOverBottomIndicator, }: GetInsertionDataParams) => InsertionData;
+declare const generateRandomId: (letterCount: number) => string;
+declare const checkIsAssemblyNode: ({ componentId, usedComponents, }: {
+    componentId: string;
+    usedComponents: ExperienceEntry['fields']['usedComponents'];
+}) => boolean;
+/** @deprecated use `checkIsAssemblyNode` instead. Will be removed with SDK v5. */
+declare const checkIsAssembly: ({ componentId, usedComponents, }: {
+    componentId: string;
+    usedComponents: ExperienceEntry['fields']['usedComponents'];
+}) => boolean;
+/**
+ * This check assumes that the entry is already ensured to be an experience, i.e. the
+ * content type of the entry is an experience type with the necessary annotations.
+ **/
+declare const checkIsAssemblyEntry: (entry: Entry) => boolean;
+declare const checkIsAssemblyDefinition: (component?: ComponentDefinition) => boolean;
+
+export { checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, generateRandomId, getDataFromTree, getInsertionData };

package/dist/utils/validations.d.ts

@@ -0,0 +1,15 @@
+import { IncomingEvent } from '../types.js';
+
+type VisualEditorMessagePayload = {
+    source: string;
+    eventType: IncomingEvent;
+    payload: any;
+};
+declare const doesMismatchMessageSchema: (event: MessageEvent) => false | string;
+declare const tryParseMessage: (event: MessageEvent) => VisualEditorMessagePayload;
+declare const validateExperienceBuilderConfig: ({ locale, isEditorMode, }: {
+    locale: string;
+    isEditorMode: boolean;
+}) => void;
+
+export { type VisualEditorMessagePayload, doesMismatchMessageSchema, tryParseMessage, validateExperienceBuilderConfig };

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@contentful/experiences-core",
+  "version": "0.0.1-alpha.10",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/contentful/experience-builder.git"
+  },
+  "files": [
+    "readme.md",
+    "package.json",
+    "dist/**/*.*"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./constants": "./dist/constants.js"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "typesVersions": {
+    "*": {
+      "types": [
+        "./dist/types.d.ts"
+      ],
+      "constants": [
+        "./dist/constants.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "build": "rollup -c ./rollup.config.mjs",
+    "predev": "npm run clean",
+    "dev": "rollup -c ./rollup.config.mjs --watch --environment DEV",
+    "lint": "eslint src --ext '.ts,.tsx,.js,.jsx' --max-warnings 0 --ignore-path ../../.eslintignore",
+    "lint:fix": "eslint src --ext '.ts,.tsx,.js,.jsx' --fix",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "depcruise": "depcruise src"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/lodash-es": "^4.17.12",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "@vitest/coverage-v8": "^1.0.4",
+    "contentful": "^10.6.4",
+    "eslint": "^8.54.0",
+    "happy-dom": "^13.3.8",
+    "rimraf": "^5.0.5",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-ts": "^3.4.5",
+    "vite-tsconfig-paths": "^4.2.2",
+    "vitest": "^1.0.4"
+  },
+  "dependencies": {
+    "@contentful/experiences-validators": "0.0.1-alpha.6",
+    "@contentful/rich-text-types": "^16.3.0"
+  },
+  "peerDependencies": {
+    "contentful": ">=10.6.0"
+  },
+  "gitHead": "0ceb98b028d0d11f3c76c6c48e016fe8a10e9339"
+}