@contentful/experiences-core 1.6.0 → 1.7.0-beta.0

package/dist/deep-binding/DeepReference.d.ts

@@ -17,7 +17,6 @@ declare class DeepReference {
     /**
      * Extracts referent from the path, using EntityStore as source of
      * entities during the resolution path.
-     * TODO: should it be called `extractLeafReferent` ? or `followToLeafReferent`
      */
     extractReferent(entityStore: EntityStoreBase): Link<'Asset' | 'Entry'> | undefined;
     static from(opt: DeepReferenceOpts): DeepReference;

package/dist/entity/EntityStore.d.ts

@@ -22,7 +22,7 @@ declare class EntityStore extends EntityStoreBase {
         displayName: string;
         query: string;
         previewSize: string;
-        displayIconUrl?: string | undefined;
+        displayIcon?: "desktop" | "tablet" | "mobile" | undefined;
     }[];
     get dataSource(): Record<string, {
         sys: {

package/dist/index.js

@@ -215,7 +215,6 @@ const transformBorderStyle = (value) => {
     // Just accept the passed value
     if (parts.length < 3)
         return { border: value };
-    // Replace the second part always with `solid` and set the box sizing accordingly
     const [borderSize, borderStyle, ...borderColorParts] = parts;
     const borderColor = borderColorParts.join(' ');
     return {
@@ -300,27 +299,6 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions
         backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
     };
 };
-const transformWidthSizing = ({ value, cfMargin, componentId, }) => {
-    if (!value || !componentId)
-        return;
-    const transformedValue = transformFill(value);
-    if (isContentfulStructureComponent(componentId)) {
-        const marginValues = cfMargin ? cfMargin.split(' ') : [];
-        const rightMargin = marginValues[1] || '0px';
-        const leftMargin = marginValues[3] || '0px';
-        const calcValue = `calc(${transformedValue} - ${leftMargin} - ${rightMargin})`;
-        /**
-         * We want to check if the calculated value is valid CSS. If this fails,
-         * this means the `transformedValue` is not a calculable value (not a px, rem, or %).
-         * The value may instead be a string such as `min-content` or `max-content`. In
-         * that case we don't want to use calc and instead return the raw value.
-         */
-        if (typeof window !== 'undefined' && CSS.supports('width', calcValue)) {
-            return calcValue;
-        }
-    }
-    return transformedValue;
-};
 
 const toCSSAttribute = (key) => {
     let val = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
@@ -337,12 +315,12 @@ const buildStyleTag = ({ styles, nodeId }) => {
     const styleRule = `.${className}{ ${stylesStr} }`;
     return [className, styleRule];
 };
-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, }, componentId) => {
+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, }) => {
     return {
         margin: cfMargin,
         padding: cfPadding,
         backgroundColor: cfBackgroundColor,
-        width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin, componentId }),
+        width: transformFill(cfWidth || cfImageOptions?.width),
         height: transformFill(cfHeight || cfImageOptions?.height),
         maxWidth: cfMaxWidth,
         ...transformGridColumn(cfColumnSpan),
@@ -1215,13 +1193,31 @@ const columnsBuiltInStyles = {
 };
 
 let designTokensRegistry = {};
+// This function is used to ensure that the composite values are valid since composite values are optional.
+// Therefore only border and in the future text related design tokens are/will be checked in this funciton.
+// Ensuring values for simple key-value design tokens are not neccessary since they are required via typescript.
+const ensureValidCompositeValues = (designTokenDefinition) => {
+    // TODO: add validation logic when text related design tokens are added
+    // Border validation
+    if (designTokenDefinition.border) {
+        for (const borderKey in designTokenDefinition.border) {
+            const borderValue = designTokenDefinition.border[borderKey];
+            designTokenDefinition.border[borderKey] = {
+                width: borderValue.width || '1px',
+                style: borderValue.style || 'solid',
+                color: borderValue.color || '#000000',
+            };
+        }
+    }
+    return designTokenDefinition;
+};
 /**
  * Register design tokens styling
  * @param designTokenDefinition - {[key:string]: Record<string, string>}
  * @returns void
  */
 const defineDesignTokens = (designTokenDefinition) => {
-    Object.assign(designTokensRegistry, designTokenDefinition);
+    Object.assign(designTokensRegistry, ensureValidCompositeValues(designTokenDefinition));
 };
 const templateStringRegex = /\${(.+?)}/g;
 const getDesignTokenRegistration = (breakpointValue, variableName) => {
@@ -1365,7 +1361,7 @@ const BreakpointSchema = z
     query: z.string().regex(/^\*$|^<[0-9*]+px$/),
     previewSize: z.string(),
     displayName: z.string(),
-    displayIconUrl: z.string().optional(),
+    displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
 })
     .strict();
 const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
@@ -2521,11 +2517,10 @@ class DeepReference {
     /**
      * Extracts referent from the path, using EntityStore as source of
      * entities during the resolution path.
-     * TODO: should it be called `extractLeafReferent` ? or `followToLeafReferent`
      */
     extractReferent(entityStore) {
         const headEntity = entityStore.getEntityFromLink(this.entityLink);
-        const maybeReferentLink = headEntity.fields[this.field];
+        const maybeReferentLink = headEntity?.fields[this.field];
         if (undefined === maybeReferentLink) {
             // field references nothing (or even field doesn't exist)
             return undefined;
@@ -2614,27 +2609,20 @@ function gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse)
             console.debug(`[experiences-sdk-react::gatherAutoFetchedReferentsFromIncludes] Non-link value in headEntity. Probably broken path '${reference.originalPath}'`);
             continue;
         }
-        if (linkToReferent.sys.linkType === 'Entry') {
-            const referentEntry = entriesResponse.includes?.Entry?.find((entry) => entry.sys.id === linkToReferent.sys.id);
-            if (!referentEntry) {
-                throw new Error(`Logic Error: L2-referent Entry was not found within .includes (${JSON.stringify({
-                    linkToReferent,
-                })})`);
-            }
-            autoFetchedReferentEntries.push(referentEntry);
-        }
-        else if (linkToReferent.sys.linkType === 'Asset') {
-            const referentAsset = entriesResponse.includes?.Asset?.find((entry) => entry.sys.id === linkToReferent.sys.id);
-            if (!referentAsset) {
-                throw new Error(`Logic Error: L2-referent Asset was not found within includes (${JSON.stringify({
-                    linkToReferent,
-                })})`);
-            }
-            autoFetchedReferentAssets.push(referentAsset);
-        }
-        else {
+        const linkType = linkToReferent.sys.linkType;
+        if (!['Entry', 'Asset'].includes(linkType)) {
             console.debug(`[experiences-sdk-react::gatherAutoFetchedReferentsFromIncludes] Unhandled linkType :${JSON.stringify(linkToReferent)}`);
+            continue;
+        }
+        const referentEntity = entriesResponse.includes?.[linkType]?.find((entity) => entity.sys.id === linkToReferent.sys.id);
+        if (!referentEntity) {
+            throw new Error(`Logic Error: L2-referent ${linkType} was not found within .includes (${JSON.stringify({
+                linkToReferent,
+            })})`);
         }
+        linkType === 'Entry'
+            ? autoFetchedReferentEntries.push(referentEntity)
+            : autoFetchedReferentAssets.push(referentEntity);
     } // for (reference of deepReferences)
     return { autoFetchedReferentAssets, autoFetchedReferentEntries };
 }
@@ -2771,10 +2759,10 @@ const fetchReferencedEntities = async ({ client, experienceEntry, locale, }) =>
             assetIds.push(dataBinding.sys.id);
         }
     }
-    const [entriesResponse, assetsResponse] = (await Promise.all([
+    const [entriesResponse, assetsResponse] = await Promise.all([
         fetchAllEntries({ client, ids: entryIds, locale }),
         fetchAllAssets({ client, ids: assetIds, locale }),
-    ]));
+    ]);
     const { autoFetchedReferentAssets, autoFetchedReferentEntries } = gatherAutoFetchedReferentsFromIncludes(deepReferences, entriesResponse);
     // Using client getEntries resolves all linked entry references, so we do not need to resolve entries in usedComponents
     const allResolvedEntries = [