[PWA-334] Implement PageBuilder as an extension

jest.config.js

@@ -51,7 +51,7 @@ const MessageChannel = worker ? worker.MessageChannel : {};
 const testGlob = '/**/{src,lib,_buildpack}/**/__tests__/*.(test|spec).js';
 
 // Reusable test configuration for Venia UI and storefront packages.
-const testVenia = inPackage => ({
+const testReactComponents = inPackage => ({
     // Expose jsdom to tests.
     browser: true,
     moduleNameMapper: {
@@ -264,6 +264,7 @@ const jestConfig = {
         configureProject('babel-preset-peregrine', 'Babel Preset', () => ({
             testEnvironment: 'node'
         })),
+        configureProject('pagebuilder', 'Pagebuilder', testReactComponents),
         configureProject('peregrine', 'Peregrine', inPackage => ({
             // Expose jsdom to tests.
             browser: true,
@@ -291,9 +292,9 @@ const jestConfig = {
             testEnvironment: 'node'
         })),
         configureProject('venia-concept', 'Venia Storefront', inPackage =>
-            testVenia(inPackage)
+            testReactComponents(inPackage)
         ),
-        configureProject('venia-ui', 'Venia UI', testVenia),
+        configureProject('venia-ui', 'Venia UI', testReactComponents),
         // Test any root CI scripts as well, to ensure stable CI behavior.
         configureProject('scripts', 'CI Scripts', () => ({
             testEnvironment: 'node',

package.json

@@ -6,6 +6,7 @@
     "packages/babel-preset-peregrine",
     "packages/create-pwa",
     "packages/graphql-cli-validate-magento-pwa-queries",
+    "packages/pagebuilder",
     "packages/peregrine",
     "packages/pwa-buildpack",
     "packages/upward-js",
@@ -37,7 +38,7 @@
     "storybook:venia": "yarn workspace @magento/venia-ui run storybook",
     "test": "node --experimental-worker node_modules/.bin/jest",
     "test:ci": "node --experimental-worker node_modules/.bin/jest --max-workers=3 --json --outputFile=test-results.json",
-    "test:debug": "node --experimental-worker --inspect-brk node_modules/.bin/jest --no-cache",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --no-cache --no-coverage --runInBand",
     "test:dev": "node --experimental-worker node_modules/.bin/jest --watch",
     "validate-queries": "yarn venia run validate-queries",
     "venia": "node ./packages/pwa-buildpack/bin/buildpack load-env ./packages/venia-concept && yarn workspace @magento/venia-concept",

packages/pagebuilder/intercept.js

@@ -0,0 +1,17 @@
+module.exports = api => {
+    api.getTarget('@magento/pwa-buildpack', 'specialFeatures').tap(
+        '@magento/pagebuilder',
+        featuresByModule => {
+            featuresByModule['@magento/pagebuilder'] = {
+                esModules: true,
+                cssModules: true
+            };
+        }
+    );
+    api.getTarget('@magento/venia-ui', 'richContentRenderers').tap(
+        '@magento/pagebuilder',
+        richContentRenderers => {
+            richContentRenderers.add('PageBuilder', '@magento/pagebuilder');
+        }
+    );
+};

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Banner/__tests__/banner.spec.js → packages/pagebuilder/lib/ContentTypes/Banner/__tests__/banner.spec.js

@@ -10,7 +10,7 @@ jest.mock('@magento/venia-drivers', () => ({
     withRouter: jest.fn(arg => arg)
 }));
 
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 window.matchMedia = jest.fn().mockImplementation(() => {
     return {

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Banner/banner.js → packages/pagebuilder/lib/ContentTypes/Banner/banner.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import defaultClasses from './banner.css';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import { arrayOf, bool, oneOf, shape, string } from 'prop-types';
-import Button from '../../../../Button/button';
+import Button from '@magento/venia-ui/lib/components/Button/button';
 import resolveLinkProps from '../../resolveLinkProps';
 import { Link, resourceUrl } from '@magento/venia-drivers';
 

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Block/__tests__/__snapshots__/block.spec.js.snap → packages/pagebuilder/lib/ContentTypes/Block/__tests__/__snapshots__/block.spec.js.snap

@@ -23,11 +23,6 @@ exports[`renders a Block component 1`] = `
 >
   <div
     className="root"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "",
-      }
-    }
   />
 </div>
 `;

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Block/__tests__/block.spec.js → packages/pagebuilder/lib/ContentTypes/Block/__tests__/block.spec.js

@@ -1,14 +1,21 @@
 import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 import Block from '../block';
-import * as config from '../../../config';
 
 jest.mock('@magento/venia-drivers', () => ({
     resourceUrl: jest.fn(src => src),
     withRouter: jest.fn(arg => arg)
 }));
 
-jest.mock('../../../../../../classify');
+jest.mock(
+    '@magento/venia-ui/lib/components/RichContent/richContentRenderers',
+    () => [
+        require('@magento/pagebuilder/lib'),
+        require('@magento/venia-ui/lib/components/RichContent/plainHtmlRenderer')
+    ]
+);
+
+jest.mock('@magento/venia-ui/lib/classify');
 
 test('renders a Block component', () => {
     const blockProps = {
@@ -20,16 +27,6 @@ test('renders a Block component', () => {
 });
 
 test('renders a Block component with all props configured and Page Builder rich content', () => {
-    const MockRow = () => 'Row';
-    config.default = jest.fn().mockImplementation(contentType => {
-        if (contentType === 'row') {
-            return {
-                configAggregator: () => {},
-                component: MockRow
-            };
-        }
-    });
-
     const blockProps = {
         richContent:
             '<div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-element="inner" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: solid; border-color: rgb(255, 0, 0); border-width: 5px; border-radius: 2px; margin: 0px 0px 10px; padding: 10px;"></div></div>',
@@ -50,7 +47,9 @@ test('renders a Block component with all props configured and Page Builder rich
     };
     const component = createTestInstance(<Block {...blockProps} />);
 
-    expect(component.root.findByType(MockRow)).toBeTruthy();
+    expect(
+        component.root.find(child => child.type.name === 'Row')
+    ).toBeTruthy();
 });
 
 test('renders a Block component with HTML content', () => {

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Block/block.js → packages/pagebuilder/lib/ContentTypes/Block/block.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CmsBlock from '../../../../CmsBlock/block';
+import CmsBlock from '@magento/venia-ui/lib/components/CmsBlock/block';
 import { arrayOf, string } from 'prop-types';
 
 /**

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/ButtonItem/__tests__/buttonItem.spec.js → packages/pagebuilder/lib/ContentTypes/ButtonItem/__tests__/buttonItem.spec.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 import ButtonItem from '../buttonItem';
-import Button from '../../../../../Button/button';
+import Button from '@magento/venia-ui/lib/components/Button/button';
 import { useHistory } from '@magento/venia-drivers';
 const history = {
     push: jest.fn()
 };
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 jest.mock('@magento/venia-drivers', () => ({
     useHistory: jest.fn(),
     resourceUrl: jest.fn(),

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/ButtonItem/buttonItem.js → packages/pagebuilder/lib/ContentTypes/ButtonItem/buttonItem.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import Button from '../../../../Button/button';
+import Button from '@magento/venia-ui/lib/components/Button/button';
 import { arrayOf, oneOf, string, bool } from 'prop-types';
 import resolveLinkProps from '../../resolveLinkProps';
 import { useHistory } from '@magento/venia-drivers';

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Buttons/__tests__/buttons.spec.js → packages/pagebuilder/lib/ContentTypes/Buttons/__tests__/buttons.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 import Buttons from '../buttons';
 
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 test('renders a Buttons component with stacked appearance', () => {
     const buttonsProps = {

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Buttons/buttons.js → packages/pagebuilder/lib/ContentTypes/Buttons/buttons.js

@@ -1,7 +1,7 @@
 import React, { useRef, useLayoutEffect } from 'react';
 import defaultClasses from './buttons.css';
 import { oneOf, arrayOf, string, bool, shape } from 'prop-types';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
 /**
  * Page Builder Buttons component.

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Column/column.js → packages/pagebuilder/lib/ContentTypes/Column/column.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import defaultClasses from './column.css';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import { arrayOf, oneOf, shape, string, bool } from 'prop-types';
 import { resourceUrl } from '@magento/venia-drivers';
 

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/ColumnGroup/columnGroup.js → packages/pagebuilder/lib/ContentTypes/ColumnGroup/columnGroup.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import defaultClasses from './columnGroup.css';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import { shape, string } from 'prop-types';
 
 /**

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Divider/__tests__/divider.spec.js → packages/pagebuilder/lib/ContentTypes/Divider/__tests__/divider.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 import Divider from '../divider';
 
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 test('renders a Divider component', () => {
     const component = createTestInstance(<Divider />);

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Divider/divider.js → packages/pagebuilder/lib/ContentTypes/Divider/divider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import defaultClasses from './divider.css';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import { arrayOf, shape, string } from 'prop-types';
 
 /**

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Heading/__tests__/heading.spec.js → packages/pagebuilder/lib/ContentTypes/Heading/__tests__/heading.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 import Heading from '../heading';
 
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 test('renders a Heading component', () => {
     const headingProps = {

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Html/__tests__/html.spec.js → packages/pagebuilder/lib/ContentTypes/Html/__tests__/html.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 import Html from '../html';
 
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 test('renders a html component', () => {
     const component = createTestInstance(<Html />);

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Html/html.js → packages/pagebuilder/lib/ContentTypes/Html/html.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import defaultClasses from './html.css';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import { arrayOf, shape, string } from 'prop-types';
 
 const toHTML = str => ({ __html: str });

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Image/__tests__/image.spec.js → packages/pagebuilder/lib/ContentTypes/Image/__tests__/image.spec.js

@@ -6,7 +6,7 @@ jest.mock('@magento/venia-drivers', () => ({
     resourceUrl: jest.fn(src => src)
 }));
 
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 test('renders an empty Image component', () => {
     const component = createTestInstance(<Image />);

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Image/image.js → packages/pagebuilder/lib/ContentTypes/Image/image.js

@@ -3,7 +3,7 @@ import defaultClasses from './image.css';
 import { arrayOf, bool, oneOf, shape, string } from 'prop-types';
 import { Link, resourceUrl } from '@magento/venia-drivers';
 import resolveLinkProps from '../../resolveLinkProps';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
 /**
  * Page Builder Image component.

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Map/map.js → packages/pagebuilder/lib/ContentTypes/Map/map.js

@@ -3,7 +3,7 @@ import { arrayOf, string, bool, number, object, shape } from 'prop-types';
 import loadGoogleMapsApi from 'load-google-maps-api';
 import defaultClasses from './map.css';
 import escape from 'lodash.escape';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import { mapDefaultProps } from './configAggregator';
 
 const getLocationFormattedAsHtml = location => {

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Products/__tests__/products.spec.js → packages/pagebuilder/lib/ContentTypes/Products/__tests__/products.spec.js

@@ -13,11 +13,11 @@ const mockSlick = SlickSlider.mockImplementation(({ children }) => (
     <div>{children}</div>
 ));
 import { useQuery } from '@apollo/react-hooks';
-jest.mock('../../../../../Gallery', () => jest.fn());
-jest.mock('../../../../../Gallery/item', () => jest.fn());
-import Gallery from '../../../../../Gallery';
-import GalleryItem from '../../../../../Gallery/item';
-import GET_PRODUCTS_BY_SKU from '../../../../../../queries/getProductsBySku.graphql';
+jest.mock('@magento/venia-ui/lib/components/Gallery', () => jest.fn());
+jest.mock('@magento/venia-ui/lib/components/Gallery/item', () => jest.fn());
+import Gallery from '@magento/venia-ui/lib/components/Gallery';
+import GalleryItem from '@magento/venia-ui/lib/components/Gallery/item';
+import GET_PRODUCTS_BY_SKU from '@magento/venia-ui/lib/queries/getProductsBySku.graphql';
 const mockGallery = Gallery.mockImplementation(() => 'Gallery');
 const mockGalleryItem = GalleryItem.mockImplementation(() => 'GalleryItem');
 

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Products/products.css → packages/pagebuilder/lib/ContentTypes/Products/products.css

@@ -26,7 +26,7 @@
 }
 
 .galleryItems {
-    composes: items from '../../../../Gallery/gallery.css';
+    composes: items from '~@magento/venia-ui/lib/components/Gallery/gallery.css';
     grid-template-columns: repeat(5, 1fr);
 }
 

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Products/products.js → packages/pagebuilder/lib/ContentTypes/Products/products.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import defaultClasses from './products.css';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
 import SlickSlider from 'react-slick';
-import Gallery from '../../../../Gallery';
-import GET_PRODUCTS_BY_SKU from '../../../../../queries/getProductsBySku.graphql';
+import Gallery from '@magento/venia-ui/lib/components/Gallery';
+import GET_PRODUCTS_BY_SKU from '@magento/venia-ui/lib/queries/getProductsBySku.graphql';
 import { useQuery } from '@apollo/react-hooks';
-import GalleryItem from '../../../../Gallery/item';
+import GalleryItem from '@magento/venia-ui/lib/components/Gallery/item';
 
 /**
  * Sort products based on the original order of SKUs

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Row/__tests__/row.spec.js → packages/pagebuilder/lib/ContentTypes/Row/__tests__/row.spec.js

@@ -14,7 +14,7 @@ jest.mock('jarallax', () => {
 import { jarallax } from 'jarallax';
 const mockJarallax = jarallax.mockImplementation(() => {});
 
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 test('render row with no props', () => {
     const component = createTestInstance(<Row />);

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Row/row.js → packages/pagebuilder/lib/ContentTypes/Row/row.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import defaultClasses from './row.css';
 import { verticalAlignmentToFlex } from '../../utils';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import { arrayOf, oneOf, shape, bool, string, number } from 'prop-types';
 import { resourceUrl } from '@magento/venia-drivers';
 

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Slider/__tests__/slider.spec.js → packages/pagebuilder/lib/ContentTypes/Slider/__tests__/slider.spec.js

@@ -5,7 +5,7 @@ import Slider from '../slider';
 jest.mock('@magento/venia-drivers', () => ({
     resourceUrl: jest.fn(src => src)
 }));
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 jest.mock('react-slick', () => {
     return jest.fn();

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Slider/slider.js → packages/pagebuilder/lib/ContentTypes/Slider/slider.js

@@ -2,7 +2,7 @@ import React, { Children } from 'react';
 import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
 import SlickSlider from 'react-slick';
 import defaultClasses from './slider.css';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
 /**
  * Page Builder Slider component.

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/TabItem/tabItem.js → packages/pagebuilder/lib/ContentTypes/TabItem/tabItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { verticalAlignmentToFlex } from '../../utils';
 import { resourceUrl } from '@magento/venia-drivers';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './tabItem.css';
 import { arrayOf, bool, oneOf, shape, string } from 'prop-types';
 

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Tabs/__tests__/tabs.spec.js → packages/pagebuilder/lib/ContentTypes/Tabs/__tests__/tabs.spec.js

@@ -18,7 +18,7 @@ jest.mock('@magento/venia-drivers', () => ({
     resourceUrl: jest.fn(src => src)
 }));
 
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 test('render tabs with no props', () => {
     const component = createTestInstance(<Tabs />);

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Tabs/tabs.js → packages/pagebuilder/lib/ContentTypes/Tabs/tabs.js

@@ -12,7 +12,7 @@ import {
     TabPanel
 } from 'react-tabs';
 import defaultClasses from './tabs.css';
-import { mergeClasses } from '../../../../../classify';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import { arrayOf, number, oneOf, shape, string } from 'prop-types';
 
 /**

packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Text/__tests__/text.spec.js → packages/pagebuilder/lib/ContentTypes/Text/__tests__/text.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 import Text from '../text';
 
-jest.mock('../../../../../../classify');
+jest.mock('@magento/venia-ui/lib/classify');
 
 test('renders a Text component', () => {
     const textProps = {