Merge branch 'remove-layout-from-monorepo' into 'master'

Remove layout from monorepo

See merge request !183

editors/editoria/package.json

@@ -8,12 +8,15 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "styled-components": "^4.2.0",
-    "wax-prosemirror-components": "^0.0.20",
+    "@pubsweet/ui-toolkit": "^2.3.1",
+    "react-panelgroup": "^1.0.10",
     "wax-prosemirror-core": "^0.0.20",
-    "wax-prosemirror-layouts": "^0.0.20",
+    "wax-prosemirror-components": "^0.0.20",
     "wax-prosemirror-plugins": "^0.0.20",
     "wax-prosemirror-services": "^0.0.20",
-    "wax-prosemirror-themes": "^0.0.20"
+    "fontsource-merriweather": "^3.0.9",
+    "typeface-fira-sans-condensed": "^0.0.54",
+    "typeface-vollkorn": "^0.0.54"
   },
   "scripts": {
     "start": "react-app-rewired start",

editors/editoria/src/Editoria.js

 import React, { useLayoutEffect, useState, useMemo } from 'react';
 import { createGlobalStyle } from 'styled-components';
 
-import { EditoriaLayout, EditoriaMobileLayout } from 'wax-prosemirror-layouts';
 import { Wax } from 'wax-prosemirror-core';
 
+import { EditoriaLayout, EditoriaMobileLayout } from './layout';
 import { config, configMobile } from './config';
 import { demo } from './demo';
 

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js → editors/editoria/src/layout/EditoriaLayout.js

 import React, { useContext } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import PanelGroup from 'react-panelgroup';
-import { InfoArea } from 'wax-prosemirror-components';
-import { componentPlugin } from 'wax-prosemirror-services';
-import { cokoTheme } from 'wax-prosemirror-themes';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
-import { WaxContext } from 'wax-prosemirror-core';
-
+import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
 import { grid, th } from '@pubsweet/ui-toolkit';
+
+import { cokoTheme } from '../theme';
 import EditorElements from './EditorElements';
 
 const divider = css`
@@ -147,12 +145,12 @@ const hasNotes = main => {
   return notes;
 };
 
-const LeftSideBar = componentPlugin('leftSideBar');
-// const RightSideBar = componentPlugin('rightSideBar');
-const TopBar = componentPlugin('topBar');
-const NotesArea = componentPlugin('notesArea');
-const RightArea = componentPlugin('rightArea');
-const WaxOverlays = componentPlugin('waxOverlays');
+const LeftSideBar = ComponentPlugin('leftSideBar');
+// const RightSideBar = ComponentPlugin('rightSideBar');
+const TopBar = ComponentPlugin('topBar');
+const NotesArea = ComponentPlugin('notesArea');
+const RightArea = ComponentPlugin('rightArea');
+const WaxOverlays = ComponentPlugin('waxOverlays');
 
 const EditoriaLayout = ({ editor }) => {
   const {
@@ -204,7 +202,6 @@ const EditoriaLayout = ({ editor }) => {
           </EditorArea>
         </Main>
 
-        <InfoArea />
         <WaxOverlays />
       </Wrapper>
     </ThemeProvider>

wax-prosemirror-layouts/src/layouts/EditoriaMobileLayout.js → editors/editoria/src/layout/EditoriaMobileLayout.js

 import React, { useContext } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import PanelGroup from 'react-panelgroup';
-import { InfoArea } from 'wax-prosemirror-components';
-import { componentPlugin } from 'wax-prosemirror-services';
-import { cokoTheme } from 'wax-prosemirror-themes';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
-import { WaxContext } from 'wax-prosemirror-core';
+import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
 
 import { grid, th } from '@pubsweet/ui-toolkit';
+import { cokoTheme } from '../theme';
 import EditorElements from './EditorElements';
 
 const divider = css`
@@ -164,10 +162,10 @@ const hasNotes = main => {
   return notes;
 };
 
-const TopBar = componentPlugin('topBar');
-const NotesArea = componentPlugin('notesArea');
-const RightArea = componentPlugin('rightArea');
-const WaxOverlays = componentPlugin('waxOverlays');
+const TopBar = ComponentPlugin('topBar');
+const NotesArea = ComponentPlugin('notesArea');
+const RightArea = ComponentPlugin('rightArea');
+const WaxOverlays = ComponentPlugin('waxOverlays');
 
 const EditoriaLayout = ({ editor }) => {
   const {
@@ -215,7 +213,6 @@ const EditoriaLayout = ({ editor }) => {
           </EditorArea>
         </Main>
 
-        <InfoArea />
         <WaxOverlays />
       </Wrapper>
     </ThemeProvider>

editors/editoria/src/layout/componentPlugin.js

+import React, { Component } from 'react';
+import { useInjection } from './WaxContext';
+
+class UpdateView extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      view: this.props.view,
+    };
+  }
+
+  updateView(view) {
+    this.setState(view);
+  }
+
+  render() {
+    return this.props.children({ view: this.state.view });
+  }
+}
+
+const ComponentPlugin = renderArea => layoutProps => {
+  const { instance } = useInjection('Layout');
+  const components = instance.render(renderArea);
+
+  return components
+    ? components.map(({ component: Component, componentProps }, key) => {
+        return (
+          <Component
+            key={`${renderArea}-${key}`}
+            {...layoutProps}
+            {...componentProps}
+          />
+        );
+      })
+    : null;
+};
+export default ComponentPlugin;

editors/editoria/src/layout/index.js

+export { default as EditoriaLayout } from './EditoriaLayout';
+export { default as EditoriaMobileLayout } from './EditoriaMobileLayout';

editors/editoria/src/theme/index.js

+export { default as cokoTheme } from "./theme";
+

package.json

@@ -54,9 +54,7 @@
     "wax-prosemirror-core",
     "wax-prosemirror-schema",
     "wax-prosemirror-components",
-    "wax-prosemirror-themes",
     "wax-prosemirror-utilities",
-    "wax-prosemirror-layouts",
     "wax-prosemirror-plugins",
     "wax-prosemirror-services",
     "editors/*"

wax-prosemirror-components/package.json

@@ -27,7 +27,6 @@
     "use-deep-compare-effect": "^1.3.1",
     "uuid": "^7.0.3",
     "wax-prosemirror-core": "^0.0.20",
-    "wax-prosemirror-themes": "^0.0.20",
     "wax-prosemirror-utilities": "^0.0.20"
   },
   "resolutions": {

wax-prosemirror-components/rollup.config.js

@@ -24,10 +24,5 @@ export default {
     commonjs(),
     terser(),
   ],
-  external: [
-    'wax-prosemirror-themes',
-    'wax-prosemirror-core',
-    'inversify',
-    'prosemirror-tables',
-  ],
+  external: ['wax-prosemirror-core', 'inversify', 'prosemirror-tables'],
 };

wax-prosemirror-core/index.js

-export { WaxContext, useInjection } from "./src/WaxContext";
-export { default as Wax } from "./src/Wax";
+export { WaxContext, useInjection } from './src/WaxContext';
+export { default as ComponentPlugin } from './src/ComponentPlugin';
+export { default as Wax } from './src/Wax';

wax-prosemirror-core/rollup.config.js

@@ -36,7 +36,5 @@ export default {
     'prosemirror-tables',
     'wax-prosemirror-services',
     'wax-prosemirror-schema',
-    'wax-prosemirror-themes',
-    'wax-prosemirror-layouts',
   ],
 };

wax-prosemirror-core/src/ComponentPlugin.js

+import React, { Component } from 'react';
+import { useInjection } from './WaxContext';
+
+class UpdateView extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      view: this.props.view,
+    };
+  }
+
+  updateView(view) {
+    this.setState(view);
+  }
+
+  render() {
+    return this.props.children({ view: this.state.view });
+  }
+}
+
+const ComponentPlugin = renderArea => layoutProps => {
+  const { instance } = useInjection('Layout');
+
+  const components = instance.render(renderArea);
+
+  return components
+    ? components.map(({ component: Component, componentProps }, key) => {
+        return (
+          <Component
+            key={`${renderArea}-${key}`}
+            {...layoutProps}
+            {...componentProps}
+          />
+        );
+      })
+    : null;
+};
+export default ComponentPlugin;

wax-prosemirror-layouts/.gitignore

-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.directory
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-yarn.lock
-package-lock.json

wax-prosemirror-layouts/index.js

-export { default as EditoriaLayout } from './src/layouts/EditoriaLayout';
-export { default as EditoriaMobileLayout } from './src/layouts/EditoriaMobileLayout';

wax-prosemirror-layouts/package.json

-{
-  "name": "wax-prosemirror-layouts",
-  "author": "Christos Kokosias",
-  "version": "0.0.20",
-  "description": "Wax prosemirror layouts",
-  "license": "MIT",
-  "main": "index.js",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "BABEL_ENV=production rollup -c"
-  },
-  "dependencies": {
-    "@pubsweet/ui-toolkit": "^2.3.1",
-    "react-panelgroup": "^1.0.10",
-    "styled-components": "^4.2.0",
-    "wax-prosemirror-components": "^0.0.20",
-    "wax-prosemirror-core": "^0.0.20",
-    "wax-prosemirror-services": "^0.0.20",
-    "wax-prosemirror-themes": "^0.0.20",
-    "wax-prosemirror-utilities": "^0.0.20"
-  },
-  "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
-  }
-}