WIP: 3.0.0 Reworked UI

.babelrc

@@ -4,7 +4,7 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-class-properties",
     "@babel/plugin-transform-runtime"
   ]
 }

.gitignore

@@ -1,6 +1,7 @@
 .idea/
 node_modules
 
+dist/
 domain-mapping/build/*
 /vendor/
 

.nvmrc

@@ -1 +1 @@
-16.13.1
+20

assets/css/DomainMapping.css

@@ -0,0 +1,44 @@
+/**
+ * Globals.
+ */
+@import "global/breakpoints.css";
+@import "global/colors.css";
+
+/**
+ * Controls.
+ */
+@import "controls/info.css";
+@import "controls/modal.css";
+@import "controls/table.css";
+
+.dmp__domain-management {
+    background-color: var(--bright);
+    margin-top: 1rem;
+
+    & .dmp__domain-management-notices {
+        padding: 1rem 1rem 0;
+    }
+
+    & .dmp__domain-management-toolbar {
+        display: flex;
+        flex-flow: wrap;
+        gap: calc(.5rem);
+        padding: 1rem;
+        width: 100%;
+
+        & .components-button {
+            height: 32px;
+        }
+    }
+
+    & .dmp__domain-table {
+
+        & tr {
+            & td, th {
+                &:first-child {
+                    padding-left: 1rem;
+                }
+            }
+        }
+    }
+}

assets/css/controls/info.css

@@ -0,0 +1,5 @@
+.dmp__control-info {
+    display: flex;
+    justify-content: space-between;
+    margin-top: .5rem;
+}

assets/css/controls/modal.css

@@ -0,0 +1,14 @@
+.dmp__domain-modal {
+
+    & form {
+        display: flex;
+        flex-direction: column;
+        gap: calc(.5rem);
+    }
+
+    & .dmp__domain-modal-buttons {
+        display: flex;
+        gap: calc(.5rem);
+        justify-content: right;
+    }
+}

assets/css/controls/table.css

@@ -0,0 +1,38 @@
+.dmp__domain-table {
+    background-color: var(--bright);
+    border-collapse: collapse;
+    text-align: left;
+    width: 100%;
+
+    & tbody {
+
+        & td {
+            padding: .5rem;
+
+            &.dmp__domain-field-domain {
+                font-weight: bold;
+            }
+
+            & .dmp__domain-table-toggle {
+
+                & .components-toggle-control {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+
+    & thead {
+        & th {
+            background-color: var(--gray-two);
+            border-top: 1px solid var(--gray);
+            color: var(--dark);
+            font-weight: normal;
+            padding: .5rem;
+        }
+    }
+
+    & tr {
+        border-top: 1px solid var(--gray);
+    }
+}

assets/css/global/breakpoints.css

@@ -0,0 +1,6 @@
+/**
+ * Used by WordPress Core in the admin.
+ */
+@custom-media --bp-small ( max-width: 600px );
+@custom-media --bp-medium ( min-width: 600px );
+@custom-media --bp-large ( min-width: 1200px );

assets/css/global/colors.css

@@ -0,0 +1,11 @@
+:root {
+    --primary-color: #044D8C;
+    --secondary-color: #022340;
+
+    --bright: #FFFFFF;
+    --dark: #000000;
+    --gray: #F0F0F0;
+    --gray-two: #FAFAFA;
+    --primary-green: #3DC910;
+    --primary-red: #C9221A;
+}

assets/js/DomainMapping.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies.
+ */
+import { createRoot, render } from '@wordpress/element';
+
+/**
+ * Internal Dependencies
+ */
+import DomainManagement from './components/DomainManagement';
+
+import '../css/DomainMapping.css';
+
+/**
+ * Data Store
+ */
+import '../js/data/domains';
+
+if ( document.body.classList.contains( 'settings_page_domains' ) ) {
+	const rootElement = document.getElementById( 'dmp-root' );
+
+	if ( createRoot ) {
+		createRoot( rootElement ).render( <DomainManagement /> );
+	} else {
+		render( <DomainManagement />, rootElement );
+	}
+}

assets/js/components/DomainManagement.js

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Notice,
+	SearchControl,
+} from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Table from './domain/Table';
+import NewDomainModal from './domain/modals/NewDomain';
+
+class DomainManagement extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.state = {
+			modalNewDomainOpen: false,
+			notices: [],
+		};
+	}
+
+	render() {
+		return (
+			<div className="dmp__domain-management">
+				{ this.renderNotices() }
+				{ this.renderToolbar() }
+				<Table />
+				{ this.renderModals() }
+			</div>
+		);
+	}
+
+	renderModals() {
+		const { modalNewDomainOpen } = this.state;
+
+		return (
+			<>
+				{ modalNewDomainOpen && (
+					<NewDomainModal
+						onClose={ ( newDomain ) => {
+							if ( newDomain ) {
+								this.setState( {
+									...this.state,
+									modalNewDomainOpen: false,
+									notices: [
+										...this.state.notices,
+										{
+											id: newDomain.id,
+											message: sprintf(
+												/* translators: %s: domain */
+												__( 'Domain, %s, successfully added.', 'darkmatterplugin' ),
+												newDomain.domain
+											),
+											status: 'success',
+										},
+									],
+								} );
+							} else {
+								this.setState( {
+									...this.state,
+									modalNewDomainOpen: false,
+								} );
+							}
+						} }
+					/>
+				) }
+			</>
+		);
+	}
+
+	renderNotices() {
+		const { notices } = this.state;
+
+		return (
+			<div className="dmp__domain-management-notices">
+				{ notices.length > 0 && notices.map( ( { id, message, status } ) => {
+					return <Notice
+						key={ id }
+						onDismiss={ () => {
+							const removeIndex = notices.findIndex( ( item ) => {
+								return id === item.id;
+							} );
+
+							notices.splice( removeIndex, 1 );
+							this.setState( { ...this.state, notices: [ ...notices ] } );
+						} }
+						status={ status }
+					>
+						{ message }
+					</Notice>;
+				} ) }
+			</div>
+		);
+	}
+
+	renderToolbar() {
+		return (
+			<div className="dmp__domain-management-toolbar">
+				<SearchControl
+					label={ __( 'Filter domains', 'darkmatterplugin' ) }
+					size="compact"
+				/>
+				<Button
+					onClick={ () => {
+						this.setState( { modalNewDomainOpen: true } );
+					} }
+					variant="secondary"
+				>
+					{ __( 'Add New Domain', 'darkmatterplugin' ) }
+				</Button>
+			</div>
+		);
+	}
+}
+
+export default DomainManagement;