Page Builder Elements

apps/admin/code/src/App.tsx

@@ -20,7 +20,7 @@ import "./App.scss";
 
 export const App = () => (
     <ApolloProvider client={createApolloClient({ uri: process.env.REACT_APP_GRAPHQL_API_URL })}>
-        {/* 
+        {/*
             <SecurityProvider> is a generic provider of identity information. 3rd party identity providers (like Cognito,
             Okta, Auth0) will handle the authentication, and set the information about the user into this provider,
             so other parts of the system have a centralized place to fetch user information from.
@@ -81,8 +81,8 @@ export const App = () => (
                                         <CmsProvider createApolloClient={createApolloClient}>
                                             {/*
                                                 <Routes/> is a helper component that loads all "route" plugins, sorts them
-                                                in the correct "path" order and renders using the <Switch> component, 
-                                                so only the matching route is rendered.   
+                                                in the correct "path" order and renders using the <Switch> component,
+                                                so only the matching route is rendered.
                                             */}
                                             <Routes />
                                         </CmsProvider>

packages/app-page-builder-elements/.babelrc.js

@@ -0,0 +1 @@
+module.exports = require("../../.babel.react")({ path: __dirname });

packages/app-page-builder-elements/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/app-page-builder-elements/README.md

@@ -0,0 +1,17 @@
+# @webiny/app-page-builder-elements
+[![](https://img.shields.io/npm/dw/@webiny/app-page-builder-elements.svg)](https://www.npmjs.com/package/@webiny/app-page-builder-elements)
+[![](https://img.shields.io/npm/v/@webiny/app-page-builder-elements.svg)](https://www.npmjs.com/package/@webiny/app-page-builder-elements)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+A React component that renders pages created with Webiny Page Builder.
+
+## Install
+```
+npm install --save @webiny/app-page-builder-elements
+```
+
+Or if you prefer yarn:
+```
+yarn add @webiny/app-page-builder-elements
+```

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

@@ -0,0 +1,55 @@
+{
+  "name": "@webiny/app-page-builder-elements",
+  "version": "5.14.0",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webiny/webiny-js.git"
+  },
+  "author": {
+    "name": "Webiny Ltd",
+    "email": "info@webiny.com",
+    "url": "https://www.webiny.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.5.5",
+    "@emotion/css": "^11.1.3"
+  },
+  "peerDependencies": {
+    "react": "16.14.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/react": "^16.9.56",
+    "@types/resize-observer-browser": "^0.1.4",
+    "@webiny/cli": "^5.14.0",
+    "@webiny/project-utils": "^5.14.0",
+    "babel-plugin-emotion": "^9.2.8",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-named-asset-import": "^1.0.0-next.3e165448",
+    "execa": "^5.0.0",
+    "rimraf": "^3.0.2",
+    "ttypescript": "^1.5.12",
+    "typescript": "^4.1.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "scripts": {
+    "build": "yarn webiny run build",
+    "watch": "yarn webiny run watch"
+  },
+  "svgo": {
+    "plugins": {
+      "removeViewBox": false
+    }
+  },
+  "gitHead": "8476da73b653c89cc1474d968baf55c1b0ae0e5f"
+}

packages/app-page-builder-elements/src/components/Content.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Content as ContentType } from "~/types";
+import { Element } from "./Element";
+
+export interface Props {
+    content: ContentType;
+}
+
+export const Content: React.FC<Props> = props => {
+    return <Element element={props.content} />;
+};

packages/app-page-builder-elements/src/components/Element.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Element as ElementType } from "~/types";
+import { usePageElements } from "~/hooks/usePageElements";
+import ErrorBoundary from "./ErrorBoundary";
+
+export interface Props {
+    element: ElementType;
+}
+
+export const Element: React.FC<Props> = props => {
+    const { renderers } = usePageElements();
+
+    const { element } = props;
+    if (!element) {
+        return null;
+    }
+
+    const ElementRenderer = renderers[element.type];
+    if (!ElementRenderer) {
+        return null;
+    }
+
+    return (
+        <ErrorBoundary>
+            <ElementRenderer {...props} />
+        </ErrorBoundary>
+    );
+};

packages/app-page-builder-elements/src/components/Elements.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Element as ElementType } from "~/types";
+import { Element } from "./Element";
+
+export interface Props {
+    element: ElementType;
+}
+
+export const Elements: React.FC<Props> = props => {
+    return (
+        <>
+            {props.element.elements.map(element => (
+                <Element key={element.id} element={element} />
+            ))}
+        </>
+    );
+};

packages/app-page-builder-elements/src/components/ErrorBoundary.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+class ErrorBoundary extends React.Component<any, { hasError: boolean }> {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError() {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+
+    componentDidCatch(error, errorInfo) {
+        console.log("An error occurred while rendering a page element:");
+        console.log(error, errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return <h1>Something went wrong.</h1>;
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

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

@@ -0,0 +1,138 @@
+import React, { createContext, useCallback } from "react";
+import {
+    Breakpoint,
+    StylesObjects,
+    PageElementsContextValue,
+    PageElementsProviderProps
+} from "~/types";
+import { css, cx, CSSObject } from "@emotion/css";
+
+export const PageElementsContext = createContext(null);
+
+// Detect if we're working with a per-breakpoint object, or just a set of regular CSS properties.
+const isPerBreakpointStylesObject = ({
+    breakpoints,
+    styles
+}: {
+    breakpoints: Record<string, Breakpoint>;
+    styles: StylesObjects;
+}): boolean => {
+    for (const breakpointName in breakpoints) {
+        if (styles[breakpointName]) {
+            return true;
+        }
+    }
+    return false;
+};
+
+const assignStyles = (args: {
+    breakpoints: Record<string, Breakpoint>;
+    styles: StylesObjects;
+    assignTo?: CSSObject;
+}) => {
+    const { breakpoints, styles = {}, assignTo = {} } = args;
+    if (isPerBreakpointStylesObject({ breakpoints, styles })) {
+        for (const breakpointName in breakpoints) {
+            const breakpoint = breakpoints[breakpointName];
+            if (styles && styles[breakpointName]) {
+                if (!assignTo[breakpoint.mediaQuery]) {
+                    assignTo[breakpoint.mediaQuery] = {};
+                }
+                Object.assign(assignTo[breakpoint.mediaQuery], styles[breakpointName]);
+            }
+        }
+    } else {
+        Object.assign(assignTo, styles);
+    }
+
+    return assignTo;
+};
+
+export const PageElementsProvider: React.FC<PageElementsProviderProps> = ({
+    children,
+    theme,
+    renderers = {},
+    modifiers
+}) => {
+    const getElementStyles = useCallback<PageElementsContextValue["getElementStyles"]>(element => {
+        const styles = {};
+
+        for (const modifierName in modifiers.styles) {
+            assignStyles({
+                breakpoints: theme.breakpoints,
+                assignTo: styles,
+                styles: modifiers.styles[modifierName]({
+                    element,
+                    theme,
+                    renderers,
+                    modifiers
+                })
+            });
+        }
+
+        return [styles];
+    }, []);
+
+    const getElementClassNames = useCallback<PageElementsContextValue["getElementClassNames"]>(
+        element => {
+            return getElementStyles(element).map(item => css(item));
+        },
+        []
+    );
+
+    const getThemeStyles = useCallback<PageElementsContextValue["getThemeStyles"]>(getStyles => {
+        let themeStyles = {};
+        try {
+            themeStyles = getStyles(theme);
+        } catch (e) {
+            // Do nothing.
+            console.warn("Could not load theme styles:");
+            console.log(e);
+        }
+
+        const styles = assignStyles({
+            breakpoints: theme.breakpoints,
+            styles: themeStyles
+        });
+
+        return [styles];
+    }, []);
+
+    const getThemeClassNames = useCallback<PageElementsContextValue["getThemeClassNames"]>(
+        getStyles => {
+            const styles = getThemeStyles(getStyles);
+            return styles.map(item => css(item));
+        },
+        []
+    );
+
+    const getStyles = useCallback<PageElementsContextValue["getStyles"]>(styles => {
+        return [styles];
+    }, []);
+
+    const getClassNames = useCallback<PageElementsContextValue["getClassNames"]>(customStyles => {
+        const styles = getStyles(customStyles);
+        return styles.map(item => css(item));
+    }, []);
+
+    const value: PageElementsContextValue = {
+        theme,
+        renderers,
+        modifiers,
+        getElementStyles,
+        getElementClassNames,
+        getThemeStyles,
+        getThemeClassNames,
+        getStyles,
+        getClassNames,
+        combineClassNames: cx
+    };
+
+    return <PageElementsContext.Provider value={value}>{children}</PageElementsContext.Provider>;
+};
+
+export const PageElementsConsumer = ({ children }) => (
+    <PageElementsContext.Consumer>
+        {props => React.cloneElement(children, props)}
+    </PageElementsContext.Consumer>
+);

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

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { PageElementsContext } from "~/contexts/PageElements";
+import { PageElementsContextValue } from "~/types";
+
+export function usePageElements(): PageElementsContextValue {
+    return useContext(PageElementsContext);
+}