Adding drawers (#21)

packages/editor-sample/index.html

@@ -20,10 +20,7 @@
       }
       #root {
         height: 100vh;
-        position: relative;
-        box-sizing: border-box;
-        margin: 0;
-        display: flex;
+        width: 100%;
       }
     </style>
   </head>

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx → packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
-import { ContainerProps, ContainerPropsSchema } from '../../../../documents/blocks/Container';
+import { ContainerProps } from '../../../../documents/blocks/Container';
+import { ContainerPropsSchema } from '../../../../documents/blocks/Container/ContainerPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';

packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx → packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx

@@ -3,7 +3,7 @@ import { z } from 'zod';
 
 import { Divider } from '@mui/material';
 
-import { EmailLayoutPropsSchema } from '../../../../documents/blocks/EmailLayout';
+import { EmailLayoutPropsSchema } from '../../../../documents/blocks/EmailLayout/EmailLayoutPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import ColorInput from './helpers/inputs/ColorInput';

packages/editor-sample/src/App/InspectorDrawer/ToggleInspectorPanelButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Button } from '@mui/material';
+
+import { useEditorState } from '../../documents/editor/EditorContext';
+
+export default function ToggleInspectorPanelButton() {
+  const [{ inspectorDrawerOpen }, setEditorState] = useEditorState();
+  const handleClick = () => {
+    setEditorState({ inspectorDrawerOpen: !inspectorDrawerOpen });
+  };
+  if (inspectorDrawerOpen) {
+    return <Button onClick={handleClick}>CLOSE</Button>;
+  }
+  return <Button onClick={handleClick}>OPEN</Button>;
+}

packages/editor-sample/src/App/InspectorDrawer/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Box, Drawer, Tab, Tabs } from '@mui/material';
+
+import { useEditorState } from '../../documents/editor/EditorContext';
+
+import ConfigurationPanel from './ConfigurationPanel';
+import StylesPanel from './StylesPanel';
+
+export const INSPECTOR_DRAWER_WIDTH = 400;
+
+export default function InspectorDrawer() {
+  const [{ selectedSidebarTab, inspectorDrawerOpen }, setEditorState] = useEditorState();
+
+  const renderCurrentSidebarPanel = () => {
+    switch (selectedSidebarTab) {
+      case 'block-configuration':
+        return <ConfigurationPanel />;
+      case 'styles':
+        return <StylesPanel />;
+    }
+  };
+
+  return (
+    <Drawer
+      variant="persistent"
+      anchor="right"
+      open={inspectorDrawerOpen}
+      sx={{
+        width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0,
+      }}
+    >
+      <Box sx={{ width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: 'divider' }}>
+        <Box px={2}>
+          <Tabs value={selectedSidebarTab} onChange={(_, v) => setEditorState({ selectedSidebarTab: v })}>
+            <Tab value="styles" label="Styles" />
+            <Tab value="block-configuration" label="Inspect" />
+          </Tabs>
+        </Box>
+      </Box>
+      <Box sx={{ height: 'calc(100% - 49px)', overflow: 'auto' }}>{renderCurrentSidebarPanel()}</Box>
+    </Drawer>
+  );
+}

packages/editor-sample/src/App/SamplesDrawer/ToggleSamplesPanelButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Button } from '@mui/material';
+
+import { useEditorState } from '../../documents/editor/EditorContext';
+
+export default function ToggleSamplesPanelButton() {
+  const [{ samplesDrawerOpen }, setEditorState] = useEditorState();
+  const handleClick = () => {
+    setEditorState({ samplesDrawerOpen: !samplesDrawerOpen });
+  };
+  if (samplesDrawerOpen) {
+    return <Button onClick={handleClick}>CLOSE</Button>;
+  }
+  return <Button onClick={handleClick}>OPEN</Button>;
+}

packages/editor-sample/src/App/SamplesDrawer/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Box, Button, Drawer } from '@mui/material';
+
+import { useEditorState } from '../../documents/editor/EditorContext';
+
+export const SAMPLES_DRAWER_WIDTH = 400;
+
+export default function SamplesDrawer() {
+  const [{ samplesDrawerOpen }] = useEditorState();
+
+  const select = (val: string) => {
+    window.location.hash = `#sample/${val}`;
+  };
+
+  return (
+    <Drawer
+      variant="persistent"
+      anchor="left"
+      open={samplesDrawerOpen}
+      sx={{
+        width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0,
+      }}
+    >
+      <Box width={SAMPLES_DRAWER_WIDTH}>
+        <Button onClick={() => select('one-time-password')}>one-time-password</Button>
+        <Button onClick={() => select('order-ecomerce')}>order-ecomerce</Button>
+        <Button onClick={() => select('post-metrics-report')}>post-metrics-report</Button>
+        <Button onClick={() => select('reservation-reminder')}>reservation-reminder</Button>
+        <Button onClick={() => select('reset-password')}>reset-password</Button>
+        <Button onClick={() => select('respond-to-message')}>respond-to-message</Button>
+        <Button onClick={() => select('subscription-receipt')}>subscription-receipt</Button>
+      </Box>
+    </Drawer>
+  );
+}

packages/editor-sample/src/App/ShareButton.tsx → packages/editor-sample/src/App/TemplatePanel/ShareButton.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { Button, Snackbar } from '@mui/material';
 
-import { useEditorState } from '../documents/editor/EditorContext';
+import { useEditorState } from '../../documents/editor/EditorContext';
 
 export default function ShareButton() {
   const [{ document }] = useEditorState();

packages/editor-sample/src/App/TemplatePanel/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { Box, Stack, Tab, Tabs } from '@mui/material';
+
+import EditorBlock from '../../documents/editor/EditorBlock';
+import { useEditorState } from '../../documents/editor/EditorContext';
+import ReaderBlock from '../../documents/reader/ReaderBlock';
+import { ReaderProvider } from '../../documents/reader/ReaderContext';
+import ToggleInspectorPanelButton from '../InspectorDrawer/ToggleInspectorPanelButton';
+import ToggleSamplesPanelButton from '../SamplesDrawer/ToggleSamplesPanelButton';
+
+import HtmlPanel from './HtmlPanel';
+import ShareButton from './ShareButton';
+
+export default function TemplatePanel() {
+  const [{ document, selectedMainTab }, setEditorState] = useEditorState();
+
+  const renderMainPanel = () => {
+    switch (selectedMainTab) {
+      case 'editor':
+        return <EditorBlock id="root" />;
+      case 'preview':
+        return (
+          <ReaderProvider value={document}>
+            <ReaderBlock id="root" />
+          </ReaderProvider>
+        );
+      case 'html':
+        return <HtmlPanel />;
+      case 'data':
+        return (
+          <Box p={3}>
+            <pre>{JSON.stringify(document, null, '  ')}</pre>
+          </Box>
+        );
+    }
+  };
+
+  return (
+    <>
+      <Stack
+        sx={{ height: 49, borderBottom: 1, borderColor: 'divider', backgroundColor: 'white' }}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <ToggleSamplesPanelButton />
+        <Tabs value={selectedMainTab} onChange={(_, v) => setEditorState({ selectedMainTab: v })}>
+          <Tab value="editor" label="Edit" />
+          <Tab value="preview" label="Preview" />
+          <Tab value="html" label="HTML" />
+          <Tab value="data" label="JSON" />
+        </Tabs>
+        <Box pr={3}>
+          <ShareButton />
+          <ToggleInspectorPanelButton />
+        </Box>
+      </Stack>
+      <Box sx={{ height: 'calc(100% - 49px)', overflow: 'auto' }}>{renderMainPanel()}</Box>
+    </>
+  );
+}

packages/editor-sample/src/App/index.tsx

@@ -1,83 +1,45 @@
 import React from 'react';
 
-import { Box, Grid, Stack, Tab, Tabs } from '@mui/material';
+import { Stack, useTheme } from '@mui/material';
 
-import EditorBlock from '../documents/editor/EditorBlock';
 import { useEditorState } from '../documents/editor/EditorContext';
-import ReaderBlock from '../documents/reader/ReaderBlock';
-import { ReaderProvider } from '../documents/reader/ReaderContext';
 
-import ExamplesButton from './ExamplesButton';
-import HtmlPanel from './panels/HtmlPanel';
-import ShareButton from './ShareButton';
-import ConfigurationPanel from './sidebar/ConfigurationPanel';
-import StylesPanel from './sidebar/StylesPanel';
+import InspectorDrawer, { INSPECTOR_DRAWER_WIDTH } from './InspectorDrawer';
+import SamplesDrawer, { SAMPLES_DRAWER_WIDTH } from './SamplesDrawer';
+import TemplatePanel from './TemplatePanel';
 
 export default function App() {
-  const [{ document, selectedSidebarTab, selectedMainTab }, setEditorState] = useEditorState();
-
-  const renderCurrentSidebarPanel = () => {
-    switch (selectedSidebarTab) {
-      case 'block-configuration':
-        return <ConfigurationPanel />;
-      case 'styles':
-        return <StylesPanel />;
-    }
-  };
-  const renderMainPanel = () => {
-    switch (selectedMainTab) {
-      case 'editor':
-        return <EditorBlock id="root" />;
-      case 'preview':
-        return (
-          <ReaderProvider value={document}>
-            <ReaderBlock id="root" />
-          </ReaderProvider>
-        );
-      case 'html':
-        return <HtmlPanel />;
-      case 'data':
-        return (
-          <Box p={3}>
-            <pre>{JSON.stringify(document, null, '  ')}</pre>
-          </Box>
-        );
-    }
-  };
+  const theme = useTheme();
+  const [{ inspectorDrawerOpen, samplesDrawerOpen }] = useEditorState();
 
   return (
-    <Grid container height="100%">
-      <Grid item xs={6} sm={6} md="auto" sx={{ height: '100%', backgroundColor: 'white' }}>
-        <Box sx={{ height: 49, width: 400, borderBottom: 1, borderColor: 'divider' }}>
-          <Box px={2}>
-            <Tabs value={selectedSidebarTab} onChange={(_, v) => setEditorState({ selectedSidebarTab: v })}>
-              <Tab value="styles" label="Styles" />
-              <Tab value="block-configuration" label="Inspect" />
-            </Tabs>
-          </Box>
-        </Box>
-        <Box sx={{ height: 'calc(100% - 49px)', overflow: 'auto' }}>{renderCurrentSidebarPanel()}</Box>
-      </Grid>
-      <Grid item xs height="100%" padding={0} margin={0} sx={{ overflowY: 'auto' }}>
-        <Stack
-          sx={{ height: 49, borderBottom: 1, borderColor: 'divider', backgroundColor: 'white' }}
-          direction="row"
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <Tabs value={selectedMainTab} onChange={(_, v) => setEditorState({ selectedMainTab: v })}>
-            <Tab value="editor" label="Edit" />
-            <Tab value="preview" label="Preview" />
-            <Tab value="html" label="HTML" />
-            <Tab value="data" label="JSON" />
-          </Tabs>
-          <Box pr={3}>
-            <ExamplesButton />
-            <ShareButton />
-          </Box>
-        </Stack>
-        <Box sx={{ height: 'calc(100% - 49px)', overflow: 'auto' }}>{renderMainPanel()}</Box>
-      </Grid>
-    </Grid>
+    <>
+      <InspectorDrawer />
+      <SamplesDrawer />
+
+      <Stack
+        sx={{
+          marginRight: inspectorDrawerOpen ? `${INSPECTOR_DRAWER_WIDTH}px` : 0,
+          marginLeft: samplesDrawerOpen ? `${SAMPLES_DRAWER_WIDTH}px` : 0,
+
+          transition: [
+            theme.transitions.create('margin-left', {
+              easing: !samplesDrawerOpen ? theme.transitions.easing.sharp : theme.transitions.easing.easeOut,
+              duration: !samplesDrawerOpen
+                ? theme.transitions.duration.leavingScreen
+                : theme.transitions.duration.enteringScreen,
+            }),
+            theme.transitions.create('margin-right', {
+              easing: !inspectorDrawerOpen ? theme.transitions.easing.sharp : theme.transitions.easing.easeOut,
+              duration: !inspectorDrawerOpen
+                ? theme.transitions.duration.leavingScreen
+                : theme.transitions.duration.enteringScreen,
+            }),
+          ].join(', '),
+        }}
+      >
+        <TemplatePanel />
+      </Stack>
+    </>
   );
 }