Organise screens and panels

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/panels/dimensions-panel.tsx

@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { isEqual } from 'lodash';
-import { EmailTheme, storeName } from '../../store';
+import { EmailTheme, storeName } from '../../../store';
 
 export function DimensionsPanel() {
   const availableUnits = useSetting('spacing.units') as string[];

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/root-menu.tsx

@@ -1,43 +0,0 @@
-import {
-  __experimentalItemGroup as ItemGroup,
-  __experimentalItem as Item,
-  __experimentalHStack as HStack,
-  __experimentalNavigatorButton as NavigatorButton,
-  Icon,
-  FlexItem,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { typography, color, layout } from '@wordpress/icons';
-
-function RootMenu() {
-  return (
-    <ItemGroup>
-      <NavigatorButton path="/typography">
-        <Item>
-          <HStack justify="flex-start">
-            <Icon icon={typography} size={24} />
-            <FlexItem>{__('Typography', 'mailpoet')}</FlexItem>
-          </HStack>
-        </Item>
-      </NavigatorButton>
-      <NavigatorButton path="/colors">
-        <Item>
-          <HStack justify="flex-start">
-            <Icon icon={color} size={24} />
-            <FlexItem>{__('Colors', 'mailpoet')}</FlexItem>
-          </HStack>
-        </Item>
-      </NavigatorButton>
-      <NavigatorButton path="/layout">
-        <Item>
-          <HStack justify="flex-start">
-            <Icon icon={layout} size={24} />
-            <FlexItem>{__('Layout', 'mailpoet')}</FlexItem>
-          </HStack>
-        </Item>
-      </NavigatorButton>
-    </ItemGroup>
-  );
-}
-
-export default RootMenu;

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screen-root.tsx

@@ -1,29 +0,0 @@
-import {
-  __experimentalVStack as VStack,
-  Card,
-  CardBody,
-  CardMedia,
-} from '@wordpress/components';
-import RootMenu from './root-menu';
-import { Preview } from './preview';
-
-export function ScreenRoot(): JSX.Element {
-  return (
-    <Card
-      size="small"
-      className="edit-site-global-styles-screen-root"
-      variant="primary"
-    >
-      <CardBody>
-        <VStack spacing={4}>
-          <Card>
-            <CardMedia>
-              <Preview />
-            </CardMedia>
-          </Card>
-          <RootMenu />
-        </VStack>
-      </CardBody>
-    </Card>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screens/index.ts

@@ -0,0 +1,3 @@
+export * from './screen-typography';
+export * from './screen-layout';
+export * from './screen-root';

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screens/preview.tsx

@@ -5,7 +5,7 @@ import {
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { storeName } from '../../store';
+import { storeName } from '../../../store';
 
 const firstFrame = {
   start: {

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screens/screen-layout.tsx

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { DimensionsPanel } from './dimensions-panel';
+import { DimensionsPanel } from '../panels/dimensions-panel';
 import { ScreenHeader } from './screen-header';
 
 export function ScreenLayout(): JSX.Element {

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screens/screen-root.tsx

@@ -0,0 +1,61 @@
+import {
+  __experimentalVStack as VStack,
+  Card,
+  CardBody,
+  CardMedia,
+  __experimentalItemGroup as ItemGroup,
+  __experimentalItem as Item,
+  __experimentalHStack as HStack,
+  __experimentalNavigatorButton as NavigatorButton,
+  Icon,
+  FlexItem,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { typography, color, layout } from '@wordpress/icons';
+import { Preview } from './preview';
+
+export function ScreenRoot(): JSX.Element {
+  return (
+    <Card
+      size="small"
+      className="edit-site-global-styles-screen-root"
+      variant="primary"
+    >
+      <CardBody>
+        <VStack spacing={4}>
+          <Card>
+            <CardMedia>
+              <Preview />
+            </CardMedia>
+          </Card>
+          <ItemGroup>
+            <NavigatorButton path="/typography">
+              <Item>
+                <HStack justify="flex-start">
+                  <Icon icon={typography} size={24} />
+                  <FlexItem>{__('Typography', 'mailpoet')}</FlexItem>
+                </HStack>
+              </Item>
+            </NavigatorButton>
+            <NavigatorButton path="/colors">
+              <Item>
+                <HStack justify="flex-start">
+                  <Icon icon={color} size={24} />
+                  <FlexItem>{__('Colors', 'mailpoet')}</FlexItem>
+                </HStack>
+              </Item>
+            </NavigatorButton>
+            <NavigatorButton path="/layout">
+              <Item>
+                <HStack justify="flex-start">
+                  <Icon icon={layout} size={24} />
+                  <FlexItem>{__('Layout', 'mailpoet')}</FlexItem>
+                </HStack>
+              </Item>
+            </NavigatorButton>
+          </ItemGroup>
+        </VStack>
+      </CardBody>
+    </Card>
+  );
+}

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screens/screen-typography.tsx

@@ -0,0 +1,12 @@
+import { __ } from '@wordpress/i18n';
+import { DimensionsPanel } from '../panels/dimensions-panel';
+import { ScreenHeader } from './screen-header';
+
+export function ScreenTypography(): JSX.Element {
+  return (
+    <>
+      <ScreenHeader title={__('Typography', 'mailpoet')} />
+      <DimensionsPanel />
+    </>
+  );
+}

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/styles-sidebar.tsx

@@ -9,8 +9,7 @@ import { ComplementaryArea } from '@wordpress/interface';
 import { ComponentProps } from 'react';
 import { styles } from '@wordpress/icons';
 import { storeName, stylesSidebarId } from '../../store';
-import { ScreenLayout } from './screen-layout';
+import { ScreenTypography, ScreenLayout, ScreenRoot } from './screens';
-import { ScreenRoot } from './screen-root';
 
 type Props = ComponentProps<typeof ComplementaryArea>;
 
@@ -32,13 +31,12 @@ export function StylesSidebar(props: Props): JSX.Element {
           </NavigatorScreen>
 
           <NavigatorScreen path="/typography">
-            <NavigatorToParentButton>Back</NavigatorToParentButton>
+            <ScreenTypography />
-            <div>TODO: Typography screen</div>
           </NavigatorScreen>
 
           <NavigatorScreen path="/colors">
             <NavigatorToParentButton>Back</NavigatorToParentButton>
-            <div>TODO: Typography screen</div>
+            <div>TODO: Colors screen</div>
           </NavigatorScreen>
 
           <NavigatorScreen path="/layout">