Merge pull request #753 from contentful/next

chore: next to main branch

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,10 +3,14 @@
 ## Approach
 
 <!--
+Remember when merging:
+- Use "Squash and merge" when merging changes into development.
+- Use "Create a merge commit" when releasing changes into next and main.
 
-Three important notes on Pull Requests:
+Three important notes on pull requests:
 - In general, you should ask yourself whether this code change will improve or worsen the overall code quality. Any new tech debt will probably never be cleaned up.
 - Please remember that newly introduced logic should be validated and protected through testing.
-- Take a look at PR guides such as Google's [Google’s Code Review Guidelines](https://google.github.io/eng-practices/) and [Blockly - Writing a Good Pull Request](https://developers.google.com/blockly/guides/contribute/get-started/write_a_good_pr)
-
+- Take a look at PR guides:
+  Google's Code Review Guidelines: https://google.github.io/eng-practices/
+  Blockly - Writing a Good Pull Request: https://developers.google.com/blockly/guides/contribute/get-started/write_a_good_pr
 -->

lerna.json

@@ -1,7 +1,7 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "npmClient": "npm",
-  "version": "1.15.1",
+  "version": "1.16.0-beta.0",
   "command": {
     "version": {
       "allowBranch": ["main", "next", "development"],

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-components-react",
-  "version": "1.15.1",
+  "version": "1.16.0-beta.0",
   "description": "A basic set of components to use with Studio Experiences",
   "homepage": "https://github.com/contentful/experience-builder/tree/next/packages/components#readme",
   "repository": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-core",
-  "version": "1.15.1",
+  "version": "1.16.0-beta.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",

packages/core/src/constants.ts

@@ -29,6 +29,7 @@ export const OUTGOING_EVENTS = {
 
 export const INCOMING_EVENTS = {
   RequestEditorMode: 'requestEditorMode',
+  RequestReadOnlyMode: 'requestReadOnlyMode',
   ExperienceUpdated: 'componentTreeUpdated',
   ComponentDraggingChanged: 'componentDraggingChanged',
   ComponentDragCanceled: 'componentDragCanceled',
@@ -54,6 +55,17 @@ export const VISUAL_EDITOR_EVENTS = {
   Ready: 'cfVisualEditorReady',
 };
 
+/**
+ * These modes are ONLY intended to be internally used within the context of
+ * editing an experience inside of Contentful Studio. i.e. these modes
+ * intentionally do not include preview/delivery modes.
+ */
+export enum StudioCanvasMode {
+  READ_ONLY = 'readOnlyMode',
+  EDITOR = 'editorMode',
+  NONE = 'none',
+}
+
 export const VISUAL_EDITOR_CONTAINER_ID = 'cf-visual-editor';
 export const CONTENTFUL_COMPONENT_CATEGORY = 'contentful-component';
 export const CONTENTFUL_DEFAULT_CATEGORY = 'Contentful';

packages/core/src/types.ts

@@ -543,6 +543,8 @@ export type OutgoingMessage = {
 type Filter<T, U> = T extends U ? T : never;
 type SelectedValueTypes = Filter<ComponentPropertyValue['type'], 'UnboundValue' | 'BoundValue'>;
 
+export type RequestReadOnlyModePayload = undefined;
+
 export type RequestEditorModePayload = undefined;
 export type ExperienceUpdatedPayload = {
   tree: ExperienceTree;
@@ -597,6 +599,7 @@ export type RequestedEntitiesPayload = {
 
 type INCOMING_EVENT_PAYLOADS = {
   requestEditorMode: RequestEditorModePayload;
+  requestReadOnlyMode: RequestReadOnlyModePayload;
   componentTreeUpdated: ExperienceUpdatedPayload;
   componentDraggingChanged: ComponentDraggingChangedPayload;
   componentDragCanceled: IncomingComponentDragCanceledPayload;

packages/core/src/utils/breakpoints.ts

@@ -91,7 +91,7 @@ const builtInStylesWithDesignTokens = [
   'cfMaxWidth',
 ];
 
-const isValidBreakpointValue = (value: PrimitiveValue) => {
+export const isValidBreakpointValue = (value: PrimitiveValue) => {
   return value !== undefined && value !== null && value !== '';
 };
 

packages/core/src/utils/index.ts

@@ -10,3 +10,4 @@ export * from './isLinkToAsset';
 export * from './isLink';
 export * from './pathSchema';
 export * from './resolveHyperlinkPattern';
+export * from './patternUtils';

packages/core/src/utils/patternUtils.spec.ts

@@ -0,0 +1,95 @@
+import {
+  ComponentPropertyValue,
+  ExperienceComponentSettings,
+} from '@contentful/experiences-validators';
+import { deserializePatternVariables } from './patternUtils';
+
+const nodeVariables = {
+  cfBackgroundColor: {
+    type: 'ComponentValue',
+    key: 'cfBackgroundColor_random_key_test_1',
+  },
+  cfGap: {
+    type: 'ComponentValue',
+    key: 'cfGap_random_key_test_1',
+  },
+  cfBorder: {
+    type: 'DesignValue',
+    valuesByBreakpoint: {
+      desktop: '27px',
+    },
+  },
+} as Record<string, ComponentPropertyValue>;
+
+const componentInstanceProps = {
+  cfBackgroundColor_random_key_test_1: {
+    type: 'DesignValue',
+    valuesByBreakpoint: {
+      desktop: 'red',
+    },
+  },
+} as Record<string, ComponentPropertyValue>;
+
+const patternVariableDefinitions = {
+  cfBackgroundColor_random_key_test_1: {
+    type: 'Text',
+    description: 'The background color of the section',
+    group: 'style',
+    displayName: 'Background color',
+    defaultValue: {
+      type: 'DesignValue',
+      valuesByBreakpoint: {
+        desktop: 'blue',
+      },
+    },
+  },
+  cfGap_random_key_test_1: {
+    type: 'Text',
+    description: 'The gap between the elements',
+    group: 'style',
+    displayName: 'Gap',
+    defaultValue: {
+      type: 'DesignValue',
+      valuesByBreakpoint: {
+        desktop: '27px',
+      },
+    },
+  },
+} as ExperienceComponentSettings['variableDefinitions'];
+
+describe('deserializePatternVariables', () => {
+  it('should return the correct values', () => {
+    const result = deserializePatternVariables({
+      nodeVariables,
+      componentInstanceProps,
+      componentInstanceUnboundValues: {},
+      componentInstanceDataSource: {},
+      patternVariableDefinitions,
+    });
+
+    expect(result).toEqual({
+      childNodeVariable: {
+        cfBackgroundColor: {
+          type: 'DesignValue',
+          valuesByBreakpoint: {
+            desktop: 'red', // got the value from componentInstanceProps
+          },
+        },
+        cfGap: {
+          type: 'DesignValue',
+          valuesByBreakpoint: {
+            desktop: '27px', // copied over default value
+          },
+        },
+        cfBorder: {
+          type: 'DesignValue',
+          valuesByBreakpoint: {
+            desktop: '27px',
+          },
+        },
+      },
+      dataSource: {},
+      unboundValues: {},
+    });
+  });
+});

packages/core/src/utils/patternUtils.ts

@@ -0,0 +1,65 @@
+import type {
+  ComponentPropertyValue,
+  ExperienceDataSource,
+  ExperienceUnboundValues,
+  ExperienceComponentSettings,
+  DesignValue,
+} from '../types';
+
+export const deserializePatternVariables = ({
+  nodeVariables,
+  componentInstanceProps,
+  componentInstanceUnboundValues,
+  componentInstanceDataSource,
+  patternVariableDefinitions,
+}: {
+  nodeVariables: Record<string, ComponentPropertyValue>;
+  componentInstanceProps: Record<string, ComponentPropertyValue>;
+  componentInstanceUnboundValues: ExperienceUnboundValues;
+  componentInstanceDataSource: ExperienceDataSource;
+  patternVariableDefinitions?: ExperienceComponentSettings['variableDefinitions'];
+}): {
+  childNodeVariable: Record<string, ComponentPropertyValue>;
+  dataSource: ExperienceDataSource;
+  unboundValues: ExperienceUnboundValues;
+} => {
+  const childNodeVariable: Record<string, ComponentPropertyValue> = {};
+  const dataSource: ExperienceDataSource = {};
+  const unboundValues: ExperienceUnboundValues = {};
+
+  for (const [variableName, variable] of Object.entries(nodeVariables)) {
+    childNodeVariable[variableName] = variable;
+    if (variable.type === 'ComponentValue') {
+      const componentValueKey = variable.key;
+      const instanceProperty = componentInstanceProps[componentValueKey];
+      const variableDefinition = patternVariableDefinitions?.[componentValueKey];
+      const defaultValue = variableDefinition?.defaultValue;
+
+      // For pattern, we look up the value in the pattern instance and
+      // replace the componentValue with that one.
+      if (instanceProperty?.type === 'UnboundValue') {
+        const componentInstanceValue = componentInstanceUnboundValues[instanceProperty.key];
+        unboundValues[instanceProperty.key] = componentInstanceValue;
+        childNodeVariable[variableName] = instanceProperty;
+      } else if (instanceProperty?.type === 'BoundValue') {
+        const [, dataSourceKey] = instanceProperty.path.split('/');
+        const componentInstanceValue = componentInstanceDataSource[dataSourceKey];
+        dataSource[dataSourceKey] = componentInstanceValue;
+        childNodeVariable[variableName] = instanceProperty;
+      } else if (instanceProperty?.type === 'HyperlinkValue') {
+        const componentInstanceValue = componentInstanceDataSource[instanceProperty.linkTargetKey];
+        dataSource[instanceProperty.linkTargetKey] == componentInstanceValue;
+        childNodeVariable[variableName] = instanceProperty;
+      } else if (instanceProperty?.type === 'DesignValue') {
+        childNodeVariable[variableName] = instanceProperty;
+      } else if (!instanceProperty && defaultValue) {
+        // So far, we only automatically fallback to the defaultValue for design properties
+        if (variableDefinition.group === 'style') {
+          childNodeVariable[variableName] = defaultValue as DesignValue;
+        }
+      }
+    }
+  }
+
+  return { childNodeVariable, dataSource, unboundValues };
+};

packages/core/src/utils/styleUtils/ssrStyles.ts

@@ -7,7 +7,12 @@ import {
   ExperienceDataSource,
   ExperienceUnboundValues,
 } from '@contentful/experiences-validators';
-import { buildCfStyles, checkIsAssemblyNode, toCSSAttribute } from '@/utils';
+import {
+  buildCfStyles,
+  checkIsAssemblyNode,
+  isValidBreakpointValue,
+  toCSSAttribute,
+} from '@/utils';
 import { builtInStyles, optionalBuiltInStyles } from '@/definitions';
 import { designTokensRegistry } from '@/registries';
 import {
@@ -590,7 +595,7 @@ export const indexByBreakpoint = ({
     for (const [breakpointId, variableValue] of Object.entries(
       resolvedVariableData.valuesByBreakpoint,
     )) {
-      if (!variableValue) {
+      if (!isValidBreakpointValue(variableValue)) {
         continue;
       }
 

packages/core/src/utils/validations.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { IncomingMessage } from '@/types';
-import { INCOMING_EVENTS, PostMessageMethods } from '@/constants';
+import { INCOMING_EVENTS, StudioCanvasMode, PostMessageMethods } from '@/constants';
 
 class ParseError extends Error {
   constructor(message: string) {
@@ -74,12 +74,12 @@ export const tryParseMessage = (event: MessageEvent): IncomingMessage => {
 
 export const validateExperienceBuilderConfig = ({
   locale,
-  isEditorMode,
+  mode,
 }: {
   locale: string;
-  isEditorMode: boolean;
+  mode: StudioCanvasMode;
 }) => {
-  if (isEditorMode) {
+  if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {
     return;
   }
 

packages/create-contentful-studio-experiences/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-contentful-studio-experiences",
-  "version": "1.15.1",
+  "version": "1.16.0-beta.0",
   "description": "A CLI tool to get up and running with Contentful Studio Experiences quickly",
   "homepage": "https://github.com/contentful/experience-builder/tree/next/packages/create-contentful-studio-experiences#readme",
   "repository": {

packages/experience-builder-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-sdk-react",
-  "version": "1.15.1",
+  "version": "1.16.0-beta.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "typings": "./dist/src/index.d.ts",