UI: update to match style of MB CPT

TODO

@@ -0,0 +1,59 @@
+[ ] Chuyển settings của field group sang sidebar
+	[ ] Kiểm tra khi settings có thì open panel: Tạm thời để sau...
+[ ] Chuyển settings của fields sang sidebar
+	[ ] Làm indicator cho các panel, tức là khi có settings thay đổi so với default thì có indicator để nhận diện
+
+Preview:
+
+[ ] Column
+
+[ ] Switch to field khi có trường required chưa điền
+[ ] Object field, chuyển chọn field type thành icon
+
+[ ] Update UI for creating settings pages
+[ ] Update UI for creating relationships
+	[ ] Xoá react tabs
+	[ ] Xóa phần collapsible, bao gồm cả CSS
+
+Feedback:
+
+[ ] Thay đổi field type
+[ ] icon mở sidebar setting của field group cũng khó nhìn
+
+## Settings của field group:
+
+- Settings được lấy từ biến MbbApp.settings và có thể truyền qua URL (trong trường hợp muốn tự setup settings cho 1 post type khi vừa mới tạo xong)
+- Các settings lấy và update từ hook `useSettings`. Một số setting được dùng chung trong các component như sau:
+	- prefix: để lấy đúng ID (bao gồm cả prefix) của các field text gợi ý. Được dùng trong các component:
+		+ `AddressField`
+		+ `FieldInserter` (admin columns, conditional logic)
+		+ `GroupTitle`
+	- `object_type`: để lấy object type dùng trong các component dưới:
+		+ `Sidebar`
+		+ `Location`
+		+ `IncludeExclude`
+		+ `ShowHide`
+		+ `AdminColumnsPosition`
+	- `post_types`: để lấy post types được chọn cho các component dưới:
+		+ `Location`
+		+ `Post`
+		+ `IncludeExclude`
+- Các settings sẽ được hiển thị ở sidebar, chia thành các panel. Các extensions khi được cài cũng sẽ tạo ra các panel của riêng chúng.
+- Mặc định thì có các panel sau là mở: summary, location, settings (dành cho post), block settings
+
+## Settings của fields
+
+- Phần settings của field sẽ được hiện ở sidebar, trong panel `EditFieldSettingsPanel`. Trong panel này sẽ hiện tất cả các settings của các field (do dùng uncontrolled form nên buộc phải có các input trong DOM).
+- Panel này chứa 1 div để làm portal cho các field. Mỗi field sẽ tách làm 2 phần, 1 phần preview ở phần main và 1 phần edit settings nằm trong portal.
+- Khi lựa chọn 1 field ở vùng main thì
+	- Lưu unique ID của field đó vào trong hook `useEditFieldSettingsPanel`
+	- Thêm class để hiển thị settings của field đó trong panel
+	- Setup sidebar hiện panel `EditFieldSettingsPanel`. Do phần ẩn hiện sidebar panel này được sử dụng khi chọn 1 field, nên id của sidebar panel và action ẩn hiện được đưa vào hook `useSidebarPanel`.
+
+## Danh sách fields
+
+- Do sử dụng library SortableJS nên cần phải tạo nhiều list để chứa các field. Mỗi 1 group sẽ là 1 list, và có 1 list là root, chứa các field root.
+- Sử dụng `useLists` hook để truy xuất đến các list này ở mọi nơi (globally), khác với cách dùng `useFields` trước đây, chỉ dùng cục bộ.
+- Khi cần sử dụng các hàm CRUD cho từng list, gọi qua hàm `getForList`.
+- Do lưu tất cả các field vào đây, nên có thể lấy danh sách tất cả các field, thay thế cho hook `useFieldIds` trước đây. Vì có thể lấy đủ thông tin, nên các phần suggestion trong `<FieldInserter>` của group title, address, conditional logic, ... có thể hiện tên field và khi chọn thì điền ID của field.
+- Các update về field như name/id/label hoặc icon thông qua các hook cũ `useFieldData` hoặc `useFieldNameId` đều bỏ, thay thế bằng `updateField`.

app/App.js

@@ -1,85 +1,96 @@
-import { render, useContext, useEffect } from "@wordpress/element";
+import { render } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
-import { Icon, category, cog } from "@wordpress/icons";
-import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
-import Fields from './components/Tabs/Fields';
-import Result from './components/Tabs/Result';
-import Settings from './components/Tabs/Settings';
-import ThemeCode from "./components/Tabs/ThemeCode";
 import { ErrorBoundary } from "react-error-boundary";
-import { SettingsContext, SettingsProvider } from "./contexts/SettingsContext";
+import Header from './components/Header';
+import Main from './components/Main';
+import Nav from "./components/Nav";
+import Sidebar from './components/Sidebar';
+import useFieldSettingsPanel from "./hooks/useFieldSettingsPanel";
+import useSidebarPanel from "./hooks/useSidebarPanel";
 
-const Root = () => {
-	const forceValidate = () => document.querySelector( '#post' ).removeAttribute( 'novalidate' );
+const Layout = ( { children } ) => {
+	const { setSidebarPanel } = useSidebarPanel();
+	const { setActiveField } = useFieldSettingsPanel();
 
-	useEffect( () => {
-		const publishButton = document.querySelector( '#publish' );
-		const saveButton = document.querySelector( '#save-post' );
-		if ( publishButton ) {
-			publishButton.addEventListener( 'click', forceValidate );
+	const hideSidebar = e => {
+		if ( !e.target.classList.contains( 'mb-body__inner' ) ) {
+			return;
 		}
-		if ( saveButton ) {
-			saveButton.addEventListener( 'click', forceValidate );
-		}
-
-		// Don't submit form when press Enter.
-		jQuery( '#post' ).on( 'keypress keydown keyup', 'input', function ( e ) {
-			if ( e.keyCode == 13 ) {
-				e.preventDefault();
-			}
-		} );
-	}, [] );
+		setSidebarPanel( 'field_group_settings' );
+		setActiveField( {} );
+	};
 
 	return (
-		<SettingsProvider>
-			<App />
-		</SettingsProvider>
+		<ErrorBoundary fallback={ <p>{ __( 'Something went wrong. Please try again!', 'meta-box-builder' ) }</p> }>
+			<Header />
+
+			<div className="mb-body">
+				<Nav />
+
+				<div className="mb-body__inner" onClick={ hideSidebar }>
+					{ children }
+				</div>
+
+				<Sidebar />
+			</div >
+
+			<input type="hidden" name="post_status" value={ MbbApp.status || 'draft' } />
+			<input type="hidden" name="messages" value="" />
+			<input type="hidden" name="mbb_nonce" value={ MbbApp.nonce_save } />
+		</ErrorBoundary>
 	);
 };
 
-const App = () => {
-	const { settings } = useContext( SettingsContext );
+const App = () => (
+	<Layout>
+		<Main />
+	</Layout>
+);
 
-	return (
-		<>
-			<ErrorBoundary fallback={ <h2>{ __( 'Something went wrong. Please try again!', 'meta-box-builder' ) }</h2> }>
-				<Tabs forceRenderTabPanel={ true }>
-					<TabList className="react-tabs__tab-list og-tabs--main">
-						<Tab>
-							<Icon icon={ category } />
-							{ __( 'Fields', 'meta-box-builder' ) }
-						</Tab>
-						<Tab>
-							<Icon icon={ cog } />
-							{ __( 'Settings', 'meta-box-builder' ) }
-						</Tab>
-						<Tab className="button button-small">{ __( 'Get PHP Code', 'meta-box-builder' ) }</Tab>
-					</TabList>
-					<TabPanel>
-						<Fields fields={ MbbApp.fields } />
-					</TabPanel>
-					<TabPanel className="react-tabs__tab-panel og-tab-panel--settings">
-						<Settings />
-					</TabPanel>
-					<TabPanel className="react-tabs__tab-panel og-tab-panel--settings">
-						<Result endPoint="generate" />
-					</TabPanel>
-				</Tabs>
-				<br />
-				{
-					MbbApp.fields.length > 0 && settings.object_type !== 'block' &&
-					<div className="postbox og-theme-code">
-						<div className="postbox-header">
-							<h2 className="hndle ui-sortable-handle">{ __( "Theme code", "meta-box-builder" ) }</h2>
-						</div>
-						<div className="inside">
-							<ThemeCode settings={ settings } fields={ MbbApp.fields } />
-						</div>
-					</div>
-				}
-			</ErrorBoundary>
-		</>
-	);
+const container = document.getElementById( 'poststuff' );
+container.classList.add( 'mb' );
+container.classList.add( 'og' );
+container.id = 'mb-app';
+
+// Use React 17 to avoid flashing issues when click to expand field settings.
+render( <App />, container );
+// const root = createRoot( container );
+// root.render( <App /> );
+
+// Remove .wp-header-end element to properly show notices.
+document.querySelector( '.wp-header-end' ).remove();
+
+const form = document.querySelector( '#post' );
+
+// Force form to validate to force users to enter required fields.
+// Use setTimeout because this attribute is dynamically added.
+setTimeout( () => {
+	form.removeAttribute( 'novalidate' );
+}, 100 );
+
+// Prevent submit when press Enter.
+const preventSubmitWhenPressEnter = e => {
+	if ( e.target.tagName === 'INPUT' && e.keyCode == 13 ) {
+		e.preventDefault();
+	}
 };
+form.addEventListener( 'keypress', preventSubmitWhenPressEnter );
+form.addEventListener( 'keydown', preventSubmitWhenPressEnter );
+form.addEventListener( 'keyup', preventSubmitWhenPressEnter );
+
+// Set post status when clicking submit buttons.
+form.addEventListener( 'submit', e => {
+	const submitButton = e.submitter;
+	const status = submitButton.dataset.status;
+	const originalStatus = document.querySelector( '#original_post_status' ).value;
+	if ( originalStatus !== status ) {
+		document.querySelector( '[name="messages"]' ).setAttribute( 'name', MbbApp.status !== 'publish' ? 'publish' : 'save' );
+	}
+	if ( originalStatus === 'auto-draft' && status === 'draft' ) {
+		document.querySelector( '[name="messages"]' ).setAttribute( 'name', 'save' );
+	}
 
-render( <Root />, document.getElementById( 'root' ) );
+	submitButton.disabled = true;
+	submitButton.setAttribute( 'value', MbbApp.saving );
+	document.querySelector( '[name="post_status"]' ).setAttribute( 'value', status );
+} );

app/components/AddFieldContent.js

@@ -0,0 +1,68 @@
+import { Button, SearchControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { ReactSortable } from 'react-sortablejs';
+import { getFieldIcon } from '../functions';
+import useApi from "../hooks/useApi";
+
+const AddFieldContent = ( { className = '', addField, onSelect } ) => {
+	const [ searchQuery, setSearchQuery ] = useState( '' );
+
+	return (
+		<div className={ `og-add-field ${ className }` }>
+			<SearchControl value={ searchQuery } onChange={ setSearchQuery } __nextHasNoMarginBottom />
+			<Categories searchQuery={ searchQuery } onSelect={ onSelect } addField={ addField } />
+		</div>
+	);
+};
+
+const Categories = props => {
+	const fieldCategories = useApi( 'field-categories', [] );
+	return fieldCategories.map( category => <Category key={ category.slug } category={ category } { ...props } /> );
+};
+
+const Category = ( { category, searchQuery, onSelect, addField } ) => {
+	const fieldTypes = useApi( 'field-types', {} );
+	const fields = Object.entries( fieldTypes ).filter( ( [ type, field ] ) => field.category === category.slug && field.title.toLowerCase().includes( searchQuery.toLowerCase() ) );
+
+	return fields.length &&
+		<>
+			<div className="og-add-field__title">{ category.title }</div>
+			<FieldList fields={ fields } onSelect={ onSelect } addField={ addField } />
+		</>;
+};
+
+const FieldList = ( { fields, onSelect, addField } ) => (
+	<ReactSortable
+		className="og-add-field__list"
+		delay={ 0 }
+		delayOnTouchOnly={ false }
+		touchStartThreshold={ 0 }
+		group={ {
+			name: 'add',
+			pull: 'clone', // Ability to move from the list: give and keep a copy
+			put: false, // Do not allow to add from other lists
+		} }
+		sort={ false } // Do not sort
+		list={ Object.keys( fields ) }
+		setList={ () => {} } // Do nothing
+	>
+		{
+			fields.map( ( [ type, field ] ) =>
+				<div key={ type } data-type={ type } className="og-add-field__item">
+					<FieldButton type={ type } title={ field.title } onSelect={ onSelect } addField={ addField } />
+				</div>
+			)
+		}
+	</ReactSortable>
+);
+
+const FieldButton = ( { type, title, onSelect, addField } ) => {
+	const handleClick = () => {
+		addField( type );
+		onSelect && onSelect();
+	};
+
+	return <Button variant="tertiary" icon={ getFieldIcon( type ) } onClick={ handleClick }>{ title }</Button>;
+};
+
+export default AddFieldContent;

app/components/Editor/AddFieldButton.js

@@ -0,0 +1,27 @@
+import { Button, Modal } from "@wordpress/components";
+import { useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import AddFieldContent from "../AddFieldContent";
+
+const AddFieldButton = ( { addField, variant = 'primary', text = __( '+ Add Field', 'meta-box-builder' ) } ) => {
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
+
+	return (
+		<div className="mb-editor__add-field-button">
+			<Button variant={ variant } onClick={ openModal } title={ __( 'Add a new field', 'meta-box-builder' ) }>
+				{ text }
+			</Button>
+			{
+				isOpen && (
+					<Modal focusOnMount="firstContentElement" title={ __( 'Add a new field', 'meta-box-builder' ) } size="large" onRequestClose={ closeModal }>
+						<AddFieldContent addField={ addField } onSelect={ closeModal } />
+					</Modal>
+				)
+			}
+		</div>
+	);
+};
+
+export default AddFieldButton;