feat: introduce a new page rendering engine (#2928)

Author: adrians5j

apps/admin/src/App.scss

@@ -13,7 +13,7 @@
 // $webiny-theme-typography-font-family: "Source Sans Pro";
 
 // Import theme styles
-@import "~theme/styles.scss";
+@import "~theme/global.scss";
 
 // Import main styles
 @import "~@webiny/app-serverless-cms/styles.scss";

apps/admin/src/components/PageElementsProvider.tsx

@@ -7,25 +7,15 @@ import pageBuilderConfig from "@webiny/app-page-builder/editor/plugins/pageBuild
 /* Welcome screen widget for Page Builder */
 import welcomeScreenWidget from "@webiny/app-page-builder/admin/plugins/welcomeScreenWidget";
 
+import editorPlugins from "./pageBuilder/editorPlugins";
+import renderPlugins from "./pageBuilder/renderPlugins";
+
 export default [
     pageBuilderConfig({
         maxEventActionsNesting: 10
     }),
     pageBuilderPlugins(),
     welcomeScreenWidget,
-    /**
-     * This plugin is responsible for lazy-loading plugin presets for page builder editor and list views.
-     * Since Editor is quite heavy, we don't want to include it in the main app bundle.
-     * The tricky part here is that we want developers to be able to customize which plugins are being loaded, so
-     * we need this plugin to allow plugin customization while still using code splitting.
-     */
-    {
-        type: "pb-plugins-loader",
-        async loadEditorPlugins() {
-            return (await import("./pageBuilder/editorPlugins")).default;
-        },
-        async loadRenderPlugins() {
-            return (await import("./pageBuilder/renderPlugins")).default;
-        }
-    }
+    editorPlugins,
+    renderPlugins
 ];

apps/admin/src/components/theme.ts

@@ -0,0 +1,4 @@
+import pageBuilder from "./pageBuilder";
+import formBuilder from "./formBuilder";
+
+export default () => [pageBuilder, formBuilder];

apps/admin/src/plugins/pageBuilder.ts

@@ -0,0 +1,30 @@
+{
+  "name": "theme",
+  "version": "0.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@apollo/react-components": "^3.1.5",
+    "@apollo/react-hooks": "^3.1.5",
+    "@webiny/app-form-builder": "^5.33.5",
+    "@webiny/app-page-builder": "^5.33.5",
+    "@webiny/form": "^5.33.5",
+    "@webiny/react-rich-text-renderer": "^5.33.5",
+    "@webiny/react-router": "^5.33.5",
+    "@webiny/validation": "^5.33.5",
+    "classnames": "^2.2.6",
+    "emotion": "^10.0.17",
+    "graphql": "^15.7.2",
+    "graphql-tag": "^2.12.6",
+    "invariant": "^2.2.4",
+    "lodash": "^4.4.2",
+    "react": "17.0.2",
+    "react-hamburger-menu": "^1.1.1",
+    "react-helmet": "^6.1.0"
+  },
+  "devDependencies": {
+    "@types/invariant": "^2.2.35",
+    "@types/lodash": "^4.14.178",
+    "@types/react-hamburger-menu": "^0.0.4"
+  }
+}

apps/theme/formBuilder/index.ts renamed to apps/theme-legacy/formBuilder/index.ts

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["."],
+  "compilerOptions": {
+    "composite": false
+  }
+}

apps/theme/formBuilder/layouts/DefaultFormLayout.tsx renamed to apps/theme-legacy/formBuilder/layouts/DefaultFormLayout.tsx

@@ -1,3 +1,6 @@
+@import "@webiny/react-rich-text-renderer/styles.scss";
+@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700|Lato:400,700");
+
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
@@ -9,32 +12,42 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   border: 0;
   font-size: 100%;
   font: inherit;
-  vertical-align: baseline; }
+  vertical-align: baseline;
+}
 
 /* HTML5 display-role reset for older browsers */
 
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-  display: block; }
+  display: block;
+}
 
 body {
-  line-height: 1; }
+  line-height: 1;
+}
 
 ol, ul {
-  list-style: none; }
+  list-style: none;
+}
 
 blockquote, q {
-  quotes: none; }
+  quotes: none;
+}
 
 blockquote {
   &:before, &:after {
     content: '';
-    content: none; } }
+    content: none;
+  }
+}
 
 q {
   &:before, &:after {
     content: '';
-    content: none; } }
+    content: none;
+  }
+}
 
 table {
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}

apps/theme/formBuilder/layouts/components/HelperMessage.tsx renamed to apps/theme-legacy/formBuilder/layouts/components/HelperMessage.tsx

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

apps/theme/formBuilder/layouts/fields/Checkbox.tsx renamed to apps/theme-legacy/formBuilder/layouts/fields/Checkbox.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { Form } from "@webiny/form";
+import { FormLayoutComponent } from "@webiny/app-form-builder/types";
+import styled from "@emotion/styled";
+import { Row } from "./DefaultFormLayout/Row";
+import { Cell } from "./DefaultFormLayout/Cell";
+import { Field } from "./DefaultFormLayout/Field";
+import { SuccessMessage } from "./DefaultFormLayout/SuccessMessage";
+import { SubmitButton } from "./DefaultFormLayout/SubmitButton";
+import { TermsOfServiceSection } from "./DefaultFormLayout/TermsOfServiceSection";
+import { ReCaptchaSection } from "./DefaultFormLayout/ReCaptchaSection";
+
+import theme from "../../theme";
+
+const Wrapper = styled.div`
+    width: 100%;
+    padding: 0 5px 5px 5px;
+    box-sizing: border-box;
+    background-color: ${theme.styles.colors.color5};
+`;
+
+/**
+ * This is the default form layout component, in which we render all the form fields. We also render terms of service
+ * and reCAPTCHA (if enabled in form settings), and, at the very bottom, the submit button.
+ *
+ * Feel free to use this component as your starting point for your own form layouts.
+ */
+const DefaultFormLayout: FormLayoutComponent = ({
+    getFields,
+    getDefaultValues,
+    submit,
+    formData,
+    ReCaptcha,
+    TermsOfService
+}) => {
+    // Is the form in loading (submitting) state?
+    const [loading, setLoading] = useState(false);
+
+    // Is the form successfully submitted?
+    const [formSuccess, setFormSuccess] = useState(false);
+
+    // All form fields - an array of rows where each row is an array that contain fields.
+    const fields = getFields();
+
+    /**
+     * Once the data is successfully submitted, we show a success message.
+     */
+    const submitForm = async (data: Record<string, any>): Promise<void> => {
+        setLoading(true);
+        const result = await submit(data);
+        setLoading(false);
+        if (result.error === null) {
+            setFormSuccess(true);
+        }
+    };
+
+    if (formSuccess) {
+        return <SuccessMessage formData={formData} />;
+    }
+
+    return (
+        /* "onSubmit" callback gets triggered once all of the fields are valid. */
+        /* We also pass the default values for all fields via the getDefaultValues callback. */
+        <Form onSubmit={submitForm} data={getDefaultValues()}>
+            {({ submit }) => (
+                <Wrapper>
+                    {fields.map((row, rowIndex) => (
+                        <Row key={rowIndex}>
+                            {row.map(field => (
+                                <Cell key={field._id}>
+                                    <Field field={field} />
+                                </Cell>
+                            ))}
+                        </Row>
+                    ))}
+
+                    <TermsOfServiceSection component={TermsOfService} />
+                    <ReCaptchaSection component={ReCaptcha} />
+
+                    <SubmitButton onClick={submit} loading={loading}>
+                        {formData.settings.submitButtonLabel || "Submit"}
+                    </SubmitButton>
+                </Wrapper>
+            )}
+        </Form>
+    );
+};
+
+export default DefaultFormLayout;

apps/theme/formBuilder/layouts/fields/Input.tsx renamed to apps/theme-legacy/formBuilder/layouts/fields/Input.tsx

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import theme from "../../../theme";
+
+export const Cell = styled.div`
+  width: 100%;
+  background-color: ${theme.styles.colors.color5};
+  padding: 15px;
+
+  ${theme.breakpoints.desktop} {
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+}
+`;