From c94bcd65da4dc93d27cd8b302da68813e8e51b1f Mon Sep 17 00:00:00 2001
From: Jordan Isip <me@jordanisip.com>
Date: Thu, 29 Feb 2024 11:39:46 -0500
Subject: [PATCH 1/4] Stubbing preview toggle buttons

---
 .../src/App/TemplatePanel/index.tsx           | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
index 4ad9c9a..7293e54 100644
--- a/packages/editor-sample/src/App/TemplatePanel/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 
-import { CodeOutlined, DataObjectOutlined, EditOutlined, PreviewOutlined } from '@mui/icons-material';
-import { Box, Stack, Tab, Tabs, Tooltip } from '@mui/material';
+import {
+  CodeOutlined,
+  DataObjectOutlined,
+  EditOutlined,
+  MonitorOutlined,
+  PhoneIphoneOutlined,
+  PreviewOutlined,
+} from '@mui/icons-material';
+import { Box, Stack, Tab, Tabs, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
 import { setEditorState, useDocument, useSelectedMainTab } from '../../documents/editor/EditorContext';
@@ -88,8 +95,21 @@ export default function TemplatePanel() {
               }
             />
           </Tabs>
-
-          <ShareButton />
+          <Stack direction="row" spacing={2}>
+            <ToggleButtonGroup value="DESKTOP" exclusive size="small">
+              <ToggleButton value="DESKTOP">
+                <Tooltip title="Desktop view">
+                  <MonitorOutlined fontSize="small" />
+                </Tooltip>
+              </ToggleButton>
+              <ToggleButton value="MOBILE">
+                <Tooltip title="Mobile view">
+                  <PhoneIphoneOutlined fontSize="small" />
+                </Tooltip>
+              </ToggleButton>
+            </ToggleButtonGroup>
+            <ShareButton />
+          </Stack>
         </Stack>
 
         <ToggleInspectorPanelButton />

From ed8b017fd5e99f70dc9eb8022e0df3d6b935cd28 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Thu, 29 Feb 2024 11:11:35 -0800
Subject: [PATCH 2/4] Connecting radio button to global state

---
 .../src/App/TemplatePanel/index.tsx           | 25 ++++++++++++++++---
 .../src/documents/editor/EditorContext.tsx    |  6 +++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
index 7293e54..ff2e97b 100644
--- a/packages/editor-sample/src/App/TemplatePanel/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -11,7 +11,12 @@ import {
 import { Box, Stack, Tab, Tabs, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
-import { setEditorState, useDocument, useSelectedMainTab } from '../../documents/editor/EditorContext';
+import {
+  setEditorState,
+  useDocument,
+  useSelectedMainTab,
+  useSelectedScreenSize,
+} from '../../documents/editor/EditorContext';
 import ReaderBlock from '../../documents/reader/ReaderBlock';
 import { ReaderProvider } from '../../documents/reader/ReaderContext';
 import ToggleInspectorPanelButton from '../InspectorDrawer/ToggleInspectorPanelButton';
@@ -24,6 +29,18 @@ import ShareButton from './ShareButton';
 export default function TemplatePanel() {
   const document = useDocument();
   const selectedMainTab = useSelectedMainTab();
+  const selectedScreenSize = useSelectedScreenSize();
+  const handleScreenSizeChange = (_, value: unknown) => {
+    console.log(value);
+    switch (value) {
+      case 'mobile':
+        setEditorState({ selectedScreenSize: 'mobile' });
+        return;
+      case 'desktop':
+      default:
+        setEditorState({ selectedScreenSize: 'desktop' });
+    }
+  };
 
   const renderMainPanel = () => {
     switch (selectedMainTab) {
@@ -96,13 +113,13 @@ export default function TemplatePanel() {
             />
           </Tabs>
           <Stack direction="row" spacing={2}>
-            <ToggleButtonGroup value="DESKTOP" exclusive size="small">
-              <ToggleButton value="DESKTOP">
+            <ToggleButtonGroup value={selectedScreenSize} exclusive size="small" onChange={handleScreenSizeChange}>
+              <ToggleButton value="desktop">
                 <Tooltip title="Desktop view">
                   <MonitorOutlined fontSize="small" />
                 </Tooltip>
               </ToggleButton>
-              <ToggleButton value="MOBILE">
+              <ToggleButton value="mobile">
                 <Tooltip title="Mobile view">
                   <PhoneIphoneOutlined fontSize="small" />
                 </Tooltip>
diff --git a/packages/editor-sample/src/documents/editor/EditorContext.tsx b/packages/editor-sample/src/documents/editor/EditorContext.tsx
index 99918f3..35a52cb 100644
--- a/packages/editor-sample/src/documents/editor/EditorContext.tsx
+++ b/packages/editor-sample/src/documents/editor/EditorContext.tsx
@@ -10,6 +10,7 @@ type TValue = {
   selectedBlockId: string | null;
   selectedSidebarTab: 'block-configuration' | 'styles';
   selectedMainTab: 'editor' | 'preview' | 'data' | 'html';
+  selectedScreenSize: 'desktop' | 'mobile';
 
   inspectorDrawerOpen: boolean;
   samplesDrawerOpen: boolean;
@@ -20,6 +21,7 @@ const useEditorState = create<TValue>(() => ({
   selectedBlockId: null,
   selectedSidebarTab: 'styles',
   selectedMainTab: 'editor',
+  selectedScreenSize: 'desktop',
 
   inspectorDrawerOpen: true,
   samplesDrawerOpen: true,
@@ -33,6 +35,10 @@ export function useSelectedBlockId() {
   return useEditorState((s) => s.selectedBlockId);
 }
 
+export function useSelectedScreenSize() {
+  return useEditorState((s) => s.selectedScreenSize);
+}
+
 export function useSelectedMainTab() {
   return useEditorState((s) => s.selectedMainTab);
 }

From 363c96de5be297842672bd08ff5abc7277419603 Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Thu, 29 Feb 2024 11:18:27 -0800
Subject: [PATCH 3/4] Adding box styles for mobile/desktop views

---
 .../src/App/TemplatePanel/index.tsx           | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
index ff2e97b..ad44db1 100644
--- a/packages/editor-sample/src/App/TemplatePanel/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -8,7 +8,7 @@ import {
   PhoneIphoneOutlined,
   PreviewOutlined,
 } from '@mui/icons-material';
-import { Box, Stack, Tab, Tabs, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { Box, Stack, SxProps, Tab, Tabs, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
 import {
@@ -30,6 +30,21 @@ export default function TemplatePanel() {
   const document = useDocument();
   const selectedMainTab = useSelectedMainTab();
   const selectedScreenSize = useSelectedScreenSize();
+
+  let mainBoxSx: SxProps = {
+    height: '100%',
+  };
+  if (selectedScreenSize === 'mobile') {
+    mainBoxSx = {
+      ...mainBoxSx,
+      margin: '32px auto',
+      width: 370,
+      height: 800,
+      boxShadow:
+        'rgba(33, 36, 67, 0.04) 0px 10px 20px, rgba(33, 36, 67, 0.04) 0px 2px 6px, rgba(33, 36, 67, 0.04) 0px 0px 1px',
+    };
+  }
+
   const handleScreenSizeChange = (_, value: unknown) => {
     console.log(value);
     switch (value) {
@@ -131,7 +146,9 @@ export default function TemplatePanel() {
 
         <ToggleInspectorPanelButton />
       </Stack>
-      <Box sx={{ height: 'calc(100vh - 49px)', overflow: 'auto', minWidth: 370 }}>{renderMainPanel()}</Box>
+      <Box sx={{ height: 'calc(100vh - 49px)', overflow: 'auto', minWidth: 370 }}>
+        <Box sx={mainBoxSx}>{renderMainPanel()}</Box>
+      </Box>
     </>
   );
 }

From 260404241b44bcf640081730a1ad9cb377cec36c Mon Sep 17 00:00:00 2001
From: cohitre <carlosrr@gmail.com>
Date: Thu, 29 Feb 2024 11:30:10 -0800
Subject: [PATCH 4/4] TSC

---
 packages/editor-sample/src/App/TemplatePanel/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
index ad44db1..a77778b 100644
--- a/packages/editor-sample/src/App/TemplatePanel/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -45,7 +45,7 @@ export default function TemplatePanel() {
     };
   }
 
-  const handleScreenSizeChange = (_, value: unknown) => {
+  const handleScreenSizeChange = (_: unknown, value: unknown) => {
     console.log(value);
     switch (value) {
       case 'mobile':