Add simple components for Sidebar, Header and Form Title

[MAILPOET-2450]

.eslintrc.es6.json

@@ -31,7 +31,10 @@
     "jsx-a11y/label-has-for": [2, {
       "required": {"some": ["nesting", "id"]} // some of our labels are hidden and we cannot nest those
     }],
-    "jsx-a11y/anchor-is-valid": 0 // cannot fix this one, it would break wprdpress themes
+    "jsx-a11y/anchor-is-valid": 0, // cannot fix this one, it would break wprdpress themes
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "either": "either" // control has to be either nested or associated via htmlFor
+    }]
   }
 }
 

assets/js/src/form_editor/components/block_settings.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {
+  Panel,
+  PanelBody,
+} from '@wordpress/components';
+
+export default () => (
+  <Panel>
+    <PanelBody title="Block Settings">
+      <p>TODO Block Settings</p>
+    </PanelBody>
+  </Panel>
+);

assets/js/src/form_editor/components/editor.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Header from './header.jsx';
+import Sidebar from './sidebar.jsx';
+import FormTitle from './form_title.jsx';
+
+export default () => (
+  <div className="edit-post-layout is-sidebar-opened">
+    <Header />
+    <div className="edit-post-layout__content">
+      <div className="edit-post-visual-editor editor-styles-wrapper">
+        <div className="editor-writing-flow block-editor-writing-flow">
+          <FormTitle />
+        </div>
+      </div>
+    </div>
+    <div>
+      <Sidebar />
+    </div>
+  </div>
+);

assets/js/src/form_editor/components/form_settings.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+  Panel,
+  PanelBody,
+} from '@wordpress/components';
+
+export default () => (
+  <>
+    <Panel>
+      <PanelBody title="Settings">
+        <p>TODO Basic Settings</p>
+      </PanelBody>
+    </Panel>
+    <Panel>
+      <PanelBody title="From placement" initialOpen={false}>
+        <p>TODO Form placement</p>
+      </PanelBody>
+    </Panel>
+    <Panel>
+      <PanelBody title="Custom CSS" initialOpen={false}>
+        <p>TODO Custom CSS</p>
+      </PanelBody>
+    </Panel>
+  </>
+);

assets/js/src/form_editor/components/form_title.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+
+export default () => {
+  const [isSelected, setIsSelected] = useState(false);
+  const titleClass = classnames('wp-block editor-post-title__block', {
+    'is-selected': isSelected,
+  });
+  return (
+    <div className="editor-post-title">
+      <div className={titleClass}>
+        <div>
+          <label htmlFor="post-title" className="screen-reader-text">
+            Add form name
+          </label>
+          <textarea
+            id="form-title"
+            className="editor-post-title__input"
+            placeholder="Add form name"
+            rows="1"
+            style={{
+              overflow: 'hidden',
+              overflowWrap: 'break-word',
+              resize: 'none',
+            }}
+            spellCheck="false"
+            onFocus={() => setIsSelected(true)}
+            onKeyPress={() => setIsSelected(false)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

assets/js/src/form_editor/components/header.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconButton } from '@wordpress/components';
+
+export default () => (
+  <div className="edit-post-header">
+    <div className="edit-post-header-toolbar" />
+    <div className="edit-post-header__settings">
+      <button
+        type="button"
+        className="components-button editor-post-publish-panel__toggle is-button is-primary"
+      >
+        Save
+      </button>
+      <IconButton
+        icon="admin-generic"
+        label="Settings"
+        onClick={() => null}
+        isToggled
+      />
+    </div>
+  </div>
+);

assets/js/src/form_editor/components/sidebar.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { IconButton } from '@wordpress/components';
+import PropTypes from 'prop-types';
+import BlockSettings from './block_settings.jsx';
+import FormSettings from './form_settings.jsx';
+
+const SidebarHeader = ({ children, closeSidebar }) => (
+  <>
+    <div className="components-panel__header edit-post-sidebar-header edit-post-sidebar__panel-tabs">
+      { children }
+      <IconButton
+        onClick={closeSidebar}
+        icon="no-alt"
+      />
+    </div>
+  </>
+);
+
+SidebarHeader.propTypes = {
+  closeSidebar: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default () => {
+  const [activeTab, setActiveTab] = useState('form');
+  return (
+    <div className="edit-post-sidebar">
+      <SidebarHeader>
+        <ul>
+          <li>
+            <button
+              onClick={() => setActiveTab('form')}
+              className={`edit-post-sidebar__panel-tab ${activeTab === 'form' ? 'is-active' : ''}`}
+              type="button"
+            >
+              Form
+            </button>
+          </li>
+          <li>
+            <button
+              onClick={() => setActiveTab('block')}
+              className={`edit-post-sidebar__panel-tab ${activeTab === 'block' ? 'is-active' : ''}`}
+              type="button"
+            >
+              Block
+            </button>
+          </li>
+        </ul>
+      </SidebarHeader>
+      {activeTab === 'form' ? <FormSettings /> : <BlockSettings />}
+    </div>
+  );
+};

assets/js/src/form_editor/index.jsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Editor from './components/editor.jsx';
 
 const appElement = document.querySelector('#mailpoet_form_edit');
 
 if (appElement) {
   ReactDOM.render(
-    <h1>
+    <Editor />,
-      Here comes editor for:
-      {window.mailpoet_form_data.name}
-    </h1>,
     appElement
   );
 }