Multiple Page Builder Improvements (@container, Emotion Context, Theme-aware mq Utility Function)

apps/theme/index.ts

@@ -1,7 +1,5 @@
 import StaticLayout from "./layouts/pages/Static";
 import theme from "./theme";
-
-// TODO CLEAN!
 import { PbPageLayoutPlugin } from "@webiny/app-page-builder";
 import { FbFormLayoutPlugin } from "@webiny/app-form-builder";
 import { ThemePlugin } from "@webiny/app-website";
@@ -17,7 +15,6 @@ export default () => [
     new FbFormLayoutPlugin({
         name: "default",
         title: "Default layout",
-
         component: DefaultFormLayout
     })
 ];

packages/app-page-builder-elements/package.json

@@ -18,7 +18,8 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@webiny/lexical-editor": "0.0.0",
-    "@webiny/theme": "0.0.0"
+    "@webiny/theme": "0.0.0",
+    "facepaint": "^1.2.1"
   },
   "peerDependencies": {
     "@editorjs/editorjs": "^2.20.1",
@@ -48,15 +49,13 @@
   "devDependencies": {
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.3",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@types/facepaint": "^1.2.2",
     "@types/react": "17.0.39",
-    "@types/resize-observer-browser": "^0.1.4",
     "@webiny/cli": "0.0.0",
     "@webiny/project-utils": "0.0.0",
-    "babel-plugin-lodash": "^3.3.4",
     "execa": "^5.0.0",
     "rimraf": "^3.0.2",
     "ttypescript": "^1.5.12",

packages/app-page-builder-elements/src/contexts/PageElements.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useCallback, useEffect, useState } from "react";
+import { ThemeProvider } from "@emotion/react";
 import {
     PageElementsContextValue,
     PageElementsProviderProps,
@@ -122,5 +123,9 @@ export const PageElementsProvider: React.FC<PageElementsProviderProps> = ({
         afterRenderer
     };
 
-    return <PageElementsContext.Provider value={value}>{children}</PageElementsContext.Provider>;
+    return (
+        <ThemeProvider theme={theme}>
+            <PageElementsContext.Provider value={value}>{children}</PageElementsContext.Provider>
+        </ThemeProvider>
+    );
 };

packages/app-page-builder-elements/src/hooks/useFacepaint.ts

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import facepaint, { type DynamicStyleFunction } from "facepaint";
+import { usePageElements } from "~/hooks/usePageElements";
+
+export const useFacepaint: typeof facepaint = (...args) => {
+    return useMemo(() => facepaint(...args), [JSON.stringify(args)]);
+};
+
+export const mq = (...args: Parameters<DynamicStyleFunction>) => {
+    const { theme } = usePageElements();
+    const facepaint = useFacepaint(Object.values(theme.breakpoints));
+
+    return facepaint(...args);
+};

packages/app-page-builder-elements/src/index.ts

@@ -5,6 +5,7 @@ export * from "./createRenderer";
 export * from "./hooks/usePage";
 export * from "./hooks/usePageElements";
 export * from "./hooks/useRenderer";
+export * from "./hooks/useFacepaint";
 
 export * from "./contexts/PageElements";
 export * from "./contexts/Page";

packages/app-page-builder/jest.config.js

@@ -0,0 +1,5 @@
+const base = require("../../jest.config.base");
+
+module.exports = {
+    ...base({ path: __dirname })
+};

packages/app-page-builder/src/editor/components/Editor/Content.tsx

@@ -70,11 +70,19 @@ const contentContainerWrapper = css({
     zIndex: 1
 });
 
-const BaseContainer = styled("div")({
-    width: "100%",
-    left: 52,
-    margin: "0 auto"
-});
+const LegacyBaseContainer = styled.div`
+    width: 100%;
+    left: 52px;
+    margin: 0 auto;
+`;
+
+const BaseContainer = styled(LegacyBaseContainer)`
+    /* The usage of containers (the "@container" CSS at-rule) enables us to have responsive */
+    /* design not only on the actual website, but also within the Page Builder's page editor. */
+    /* Note that on the actual website, regular media queries are being used. */
+    container-type: inline-size;
+    container-name: page-editor-canvas;
+`;
 
 const Content: React.FC = () => {
     const rootElementId = useRecoilValue(rootElementAtom);
@@ -122,12 +130,12 @@ const Content: React.FC = () => {
                     )} webiny-pb-media-query--${kebabCase(displayMode)}`}
                 >
                     <EditorContent />
-                    <BaseContainer
+                    <LegacyBaseContainer
                         ref={pagePreviewRef}
                         className={"webiny-pb-editor-content-preview"}
                     >
                         <Element id={rootElement.id} />
-                    </BaseContainer>
+                    </LegacyBaseContainer>
                 </LegacyContentContainer>
             </Elevation>
         );

packages/app-page-builder/src/editor/config/ResponsiveModeSelector/ResponsiveModeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { css } from "emotion";
 import classNames from "classnames";
 import { plugins } from "@webiny/plugins";
@@ -7,12 +7,8 @@ import { Tooltip } from "@webiny/ui/Tooltip";
 import { Typography } from "@webiny/ui/Typography";
 import { PbEditorResponsiveModePlugin } from "~/types";
 import { usePageBuilder } from "~/hooks/usePageBuilder";
-import { usePageElements } from "@webiny/app-page-builder-elements/hooks/usePageElements";
-import { isPerBreakpointStylesObject } from "@webiny/app-page-builder-elements/utils";
 import { useUI } from "~/editor/hooks/useUI";
 import { setDisplayModeMutation } from "~/editor/recoil/modules";
-import { isLegacyRenderingEngine } from "~/utils";
-import { CSSObject } from "@emotion/react";
 
 const classes = {
     wrapper: css({
@@ -87,20 +83,6 @@ const classes = {
     })
 };
 
-// This function ensures properties that have `undefined` as its
-// value are not assigned to the target object.
-function assignDefined(target: Record<string, any>, ...sources: Array<Record<string, any>>) {
-    for (const source of sources) {
-        for (const key of Object.keys(source)) {
-            const val = source[key];
-            if (val !== undefined) {
-                target[key] = val;
-            }
-        }
-    }
-    return target;
-}
-
 export const ResponsiveModeSelector: React.FC = () => {
     const [{ displayMode, pagePreviewDimension }, setUiValue] = useUI();
     const {
@@ -124,41 +106,6 @@ export const ResponsiveModeSelector: React.FC = () => {
         []
     );
 
-    const pageElements = usePageElements();
-    if (!isLegacyRenderingEngine) {
-        // By default, we want to only assign styles for the first breakpoint in line, which is "desktop".
-        // We only care about tablet, mobile-landscape, and mobile-portrait if user selects one of those.
-        useEffect(() => {
-            const whitelistedBreakpoints: string[] = [];
-            for (let i = 0; i < editorModes.length; i++) {
-                const current = editorModes[i];
-                whitelistedBreakpoints.push(current.config.displayMode);
-                if (current.config.displayMode === displayMode) {
-                    break;
-                }
-            }
-
-            pageElements.setAssignStylesCallback(params => {
-                const { breakpoints, styles = {}, assignTo = {} } = params;
-                if (isPerBreakpointStylesObject({ breakpoints, styles })) {
-                    for (const breakpointName in breakpoints) {
-                        if (
-                            styles[breakpointName] &&
-                            whitelistedBreakpoints.includes(breakpointName)
-                        ) {
-                            // Filter out properties that have `undefined` set as its value.
-                            assignDefined(assignTo, styles[breakpointName] as CSSObject);
-                        }
-                    }
-                } else {
-                    Object.assign(assignTo, styles);
-                }
-
-                return assignTo;
-            });
-        }, [displayMode]);
-    }
-
     const responsiveBarContent = useMemo(() => {
         return editorModes.map(({ config: { displayMode: mode, icon, toolTip } }) => {
             return (

packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { PageElementsProvider as PbPageElementsProvider } from "@webiny/app-page-builder-elements/contexts/PageElements";
 
 // Attributes modifiers.
@@ -30,8 +30,8 @@ import { usePageBuilder } from "~/hooks/usePageBuilder";
 import { Theme } from "@webiny/app-theme/types";
 import { plugins } from "@webiny/plugins";
 import { PbEditorPageElementPlugin } from "~/types";
-
 import { ElementControls } from "./EditorPageElementsProvider/ElementControls";
+import { mediaToContainer } from "./EditorPageElementsProvider/mediaToContainer";
 
 export const EditorPageElementsProvider: React.FC = ({ children }) => {
     const pageBuilder = usePageBuilder();
@@ -66,10 +66,26 @@ export const EditorPageElementsProvider: React.FC = ({ children }) => {
         }
     };
 
+    // We override all `@media` usages in breakpoints with `@container page-editor-canvas`. This is what
+    // enables us responsive design inside the Page Builder's page editor.
+    const containerizedTheme = useMemo(() => {
+        const theme = pageBuilder.theme as Theme;
+
+        return {
+            ...pageBuilder.theme,
+            breakpoints: Object.keys(theme.breakpoints).reduce((result, breakpointName) => {
+                const breakpoint = theme.breakpoints[breakpointName];
+                return {
+                    ...result,
+                    [breakpointName]: mediaToContainer(breakpoint)
+                };
+            }, {})
+        } as Theme;
+    }, [pageBuilder.theme]);
+
     return (
         <PbPageElementsProvider
-            // We can assign `Theme` here because we know at this point we're using the new elements rendering engine.
-            theme={pageBuilder.theme as Theme}
+            theme={containerizedTheme}
             renderers={renderers}
             modifiers={modifiers}
             beforeRenderer={ElementControls}

packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/__tests__/mediaToContainer.test.ts

@@ -0,0 +1,27 @@
+import { mediaToContainer } from "../mediaToContainer";
+
+describe("mediaToContainer function should correctly transform @media into @container queries", () => {
+    it("should correctly transform max-width", async () => {
+        expect(mediaToContainer("@media (max-width: 4000px)")).toBe(
+            "@container page-editor-canvas (max-width: 4000px)"
+        );
+    });
+
+    it("should correctly transform min-width", async () => {
+        expect(mediaToContainer("@media (min-width: 4000px)")).toBe(
+            "@container page-editor-canvas (min-width: 4000px)"
+        );
+    });
+
+    it("should correctly transform when both max-width and min-width are used", async () => {
+        expect(mediaToContainer("@media screen and (min-width: 10px) and (max-width: 15px)")).toBe(
+            "@container page-editor-canvas (min-width: 10px) and (max-width: 15px)"
+        );
+    });
+
+    it("should correctly transform when different units are used", async () => {
+        expect(mediaToContainer("@media screen and (min-width: 10em) and (max-width: 15vh)")).toBe(
+            "@container page-editor-canvas (min-width: 10em) and (max-width: 15vh)"
+        );
+    });
+});

packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/mediaToContainer.ts

@@ -0,0 +1,21 @@
+const minWidthRegExp = new RegExp("min-width:[ ]*([0-9a-z]*)");
+const maxWidthRegExp = new RegExp("max-width:[ ]*([0-9a-z]*)");
+
+/**
+ * At the moment, we only support basic transformations (check tests).
+ * If this won't be good enoough, we can potentially check this
+ * library: https://www.npmjs.com/package/media-query-parser
+ */
+export const mediaToContainer = (mediaQuery: string): string => {
+    const [, minWidth] = mediaQuery.match(minWidthRegExp) || [];
+    const [, maxWidth] = mediaQuery.match(maxWidthRegExp) || [];
+
+    const widthRules = [
+        minWidth && `(min-width: ${minWidth})`,
+        maxWidth && `(max-width: ${maxWidth})`
+    ]
+        .filter(Boolean)
+        .join(" and ");
+
+    return `@container page-editor-canvas ${widthRules}`;
+};

packages/cwp-template-aws/template/common/types/emotion/index.d.ts

@@ -0,0 +1,7 @@
+import { Theme as WTheme } from "@webiny/theme/types";
+
+declare module "@emotion/react" {
+    // Ignoring "@typescript-eslint/no-empty-interface" rule here.
+    // eslint-disable-next-line
+    export interface Theme extends WTheme {}
+}

packages/theme/src/types.ts

@@ -9,7 +9,21 @@ export interface StylesObject {
     [key: string]: CSSObject | string | number | undefined;
 }
 
-export type ThemeBreakpoints = Record<string, string>;
+export enum DefaultThemeBreakpoint {
+    DESKTOP = "desktop",
+    TABLET = "tablet",
+    MOBILE_LANDSCAPE = "mobile-landscape",
+    MOBILE_PORTRAIT = "mobile-portrait"
+}
+
+export type ThemeBreakpoints = {
+    [DefaultThemeBreakpoint.DESKTOP]: string;
+    [DefaultThemeBreakpoint.TABLET]: string;
+    [DefaultThemeBreakpoint.MOBILE_LANDSCAPE]: string;
+    [DefaultThemeBreakpoint.MOBILE_PORTRAIT]: string;
+
+    [key: string]: string;
+};
 
 export interface ThemeStyles {
     colors: Record<string, any>;

typings/emotion/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * We are copy/pasting the `@webiny/theme/types` file here because of an issue
+ * with our build system. This is not the case in users' projects. There we
+ * simply import the types from `@webiny/theme` packages. See:
+ * packages/cwp-template-aws/template/common/types/emotion/index.d.ts
+ */
+
+import { type CSSObject } from "@emotion/react";
+
+export type Content = Element;
+
+/**
+ * Should be a `CSSObject` object or an object with breakpoint names as keys and `CSSObject` objects as values.
+ */
+export interface StylesObject {
+    [key: string]: CSSObject | string | number | undefined;
+}
+
+export enum DefaultThemeBreakpoint {
+    DESKTOP = "desktop",
+    TABLET = "tablet",
+    MOBILE_LANDSCAPE = "mobile-landscape",
+    MOBILE_PORTRAIT = "mobile-portrait"
+}
+
+export type ThemeBreakpoints = {
+    [DefaultThemeBreakpoint.DESKTOP]: string;
+    [DefaultThemeBreakpoint.TABLET]: string;
+    [DefaultThemeBreakpoint.MOBILE_LANDSCAPE]: string;
+    [DefaultThemeBreakpoint.MOBILE_PORTRAIT]: string;
+
+    [key: string]: string;
+};
+
+export interface ThemeStyles {
+    colors: Record<string, any>;
+    borderRadius?: number;
+    typography: Record<string, StylesObject>;
+    elements: Record<string, Record<string, any> | StylesObject>;
+
+    [key: string]: any;
+}
+
+export interface Theme {
+    breakpoints: ThemeBreakpoints;
+    styles: ThemeStyles;
+}