From 4ed6cd01daea28cfab1c0969c170b4aac45ddd67 Mon Sep 17 00:00:00 2001 From: cohitre Date: Mon, 26 Feb 2024 13:42:31 -0800 Subject: [PATCH] Adding drawers (#21) --- packages/editor-sample/index.html | 5 +- .../editor-sample/src/App/ExamplesButton.tsx | 42 ------- .../ConfigurationPanel/index.tsx | 0 .../input-panels/AvatarSidebarPanel.tsx | 0 .../input-panels/ButtonSidebarPanel.tsx | 0 .../ColumnsContainerSidebarPanel.tsx | 0 .../input-panels/ContainerSidebarPanel.tsx | 3 +- .../input-panels/DividerSidebarPanel.tsx | 0 .../input-panels/EmailLayoutSidebarPanel.tsx | 2 +- .../input-panels/HeadingSidebarPanel.tsx | 0 .../input-panels/HtmlSidebarPanel.tsx | 0 .../input-panels/ImageSidebarPanel.tsx | 0 .../input-panels/SpacerSidebarPanel.tsx | 0 .../input-panels/TextSidebarPanel.tsx | 0 .../input-panels/helpers/BaseSidebarPanel.tsx | 0 .../helpers/inputs/BooleanInput.tsx | 0 .../inputs/ColorInput/BaseColorInput.tsx | 0 .../helpers/inputs/ColorInput/Picker.tsx | 0 .../helpers/inputs/ColorInput/Swatch.tsx | 0 .../helpers/inputs/ColorInput/index.tsx | 0 .../helpers/inputs/FontFamily.tsx | 0 .../helpers/inputs/FontSizeInput.tsx | 0 .../helpers/inputs/FontWeightInput.tsx | 0 .../helpers/inputs/PaddingInput.tsx | 0 .../helpers/inputs/RadioGroupInput.tsx | 0 .../helpers/inputs/SliderInput.tsx | 0 .../helpers/inputs/TextAlignInput.tsx | 0 .../input-panels/helpers/inputs/TextInput.tsx | 0 .../helpers/inputs/raw/RawSliderInput.tsx | 0 .../style-inputs/MultiStylePropertyPanel.tsx | 0 .../style-inputs/SingleStylePropertyPanel.tsx | 0 .../StylesPanel.tsx | 0 .../ToggleInspectorPanelButton.tsx | 16 +++ .../src/App/InspectorDrawer/index.tsx | 44 ++++++++ .../ToggleSamplesPanelButton.tsx | 16 +++ .../src/App/SamplesDrawer/index.tsx | 36 ++++++ .../{panels => TemplatePanel}/HtmlPanel.tsx | 0 .../App/{ => TemplatePanel}/ShareButton.tsx | 2 +- .../src/App/TemplatePanel/index.tsx | 62 ++++++++++ packages/editor-sample/src/App/index.tsx | 106 ++++++------------ .../blocks/Container/ContainerPropsSchema.tsx | 22 ++++ .../{Container.tsx => Container/index.tsx} | 31 +---- .../EmailLayout/EmailLayoutPropsSchema.tsx | 11 ++ .../index.tsx} | 20 +--- .../AddBlockMenu/buttons.tsx | 2 +- .../src/documents/editor/EditorContext.tsx | 10 +- .../src/documents/editor/core.tsx | 6 +- .../src/documents/reader/core.tsx | 6 +- 48 files changed, 274 insertions(+), 168 deletions(-) delete mode 100644 packages/editor-sample/src/App/ExamplesButton.tsx rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/index.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/AvatarSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/ButtonSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx (84%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/DividerSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx (97%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/HeadingSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/HtmlSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/SpacerSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/TextSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/BaseSidebarPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/BooleanInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/BaseColorInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Swatch.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/index.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/FontFamily.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/FontSizeInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/FontWeightInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/PaddingInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/RadioGroupInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/SliderInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/TextAlignInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/TextInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/inputs/raw/RawSliderInput.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel.tsx (100%) rename packages/editor-sample/src/App/{sidebar => InspectorDrawer}/StylesPanel.tsx (100%) create mode 100644 packages/editor-sample/src/App/InspectorDrawer/ToggleInspectorPanelButton.tsx create mode 100644 packages/editor-sample/src/App/InspectorDrawer/index.tsx create mode 100644 packages/editor-sample/src/App/SamplesDrawer/ToggleSamplesPanelButton.tsx create mode 100644 packages/editor-sample/src/App/SamplesDrawer/index.tsx rename packages/editor-sample/src/App/{panels => TemplatePanel}/HtmlPanel.tsx (100%) rename packages/editor-sample/src/App/{ => TemplatePanel}/ShareButton.tsx (93%) create mode 100644 packages/editor-sample/src/App/TemplatePanel/index.tsx create mode 100644 packages/editor-sample/src/documents/blocks/Container/ContainerPropsSchema.tsx rename packages/editor-sample/src/documents/blocks/{Container.tsx => Container/index.tsx} (61%) create mode 100644 packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx rename packages/editor-sample/src/documents/blocks/{EmailLayout.tsx => EmailLayout/index.tsx} (86%) diff --git a/packages/editor-sample/index.html b/packages/editor-sample/index.html index 8cce52a..696a562 100644 --- a/packages/editor-sample/index.html +++ b/packages/editor-sample/index.html @@ -20,10 +20,7 @@ } #root { height: 100vh; - position: relative; - box-sizing: border-box; - margin: 0; - display: flex; + width: 100%; } diff --git a/packages/editor-sample/src/App/ExamplesButton.tsx b/packages/editor-sample/src/App/ExamplesButton.tsx deleted file mode 100644 index ade32b8..0000000 --- a/packages/editor-sample/src/App/ExamplesButton.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; - -import { Button, Menu, MenuItem } from '@mui/material'; - -export default function ExamplesButton() { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleOpen = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - - const select = (val: string) => { - window.location.hash = `#sample/${val}`; - handleClose(); - }; - - return ( - <> - - - select('one-time-password')}>one-time-password - select('order-ecomerce')}>order-ecomerce - select('post-metrics-report')}>post-metrics-report - select('reservation-reminder')}>reservation-reminder - select('reset-password')}>reset-password - select('respond-to-message')}>respond-to-message - select('subscription-receipt')}>subscription-receipt - - - ); -} diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/index.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/index.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/index.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/index.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/AvatarSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/AvatarSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/AvatarSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/AvatarSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ButtonSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ButtonSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ButtonSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ButtonSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx similarity index 84% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx index c6777ab..25c1524 100644 --- a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx +++ b/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'; diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/DividerSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/DividerSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/DividerSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/DividerSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx similarity index 97% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx index fe4857d..bda6920 100644 --- a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx +++ b/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'; diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/HeadingSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/HeadingSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/HeadingSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/HeadingSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/HtmlSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/HtmlSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/HtmlSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/HtmlSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/SpacerSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/SpacerSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/SpacerSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/SpacerSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/TextSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/TextSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/TextSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/TextSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/BaseSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/BaseSidebarPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/BaseSidebarPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/BaseSidebarPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/BooleanInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/BooleanInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/BooleanInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/BooleanInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/BaseColorInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/BaseColorInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/BaseColorInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/BaseColorInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Swatch.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Swatch.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Swatch.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Swatch.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/index.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/index.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/index.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/index.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontFamily.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/FontFamily.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontFamily.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/FontFamily.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontSizeInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/FontSizeInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontSizeInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/FontSizeInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontWeightInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/FontWeightInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/FontWeightInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/FontWeightInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/PaddingInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/PaddingInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/PaddingInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/PaddingInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/RadioGroupInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/RadioGroupInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/RadioGroupInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/RadioGroupInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/SliderInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/SliderInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/SliderInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/SliderInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/TextAlignInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextAlignInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/TextAlignInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextAlignInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/TextInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/TextInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/TextInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/raw/RawSliderInput.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/raw/RawSliderInput.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/inputs/raw/RawSliderInput.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/raw/RawSliderInput.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/SingleStylePropertyPanel.tsx diff --git a/packages/editor-sample/src/App/sidebar/StylesPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/StylesPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/sidebar/StylesPanel.tsx rename to packages/editor-sample/src/App/InspectorDrawer/StylesPanel.tsx diff --git a/packages/editor-sample/src/App/InspectorDrawer/ToggleInspectorPanelButton.tsx b/packages/editor-sample/src/App/InspectorDrawer/ToggleInspectorPanelButton.tsx new file mode 100644 index 0000000..84495be --- /dev/null +++ b/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 ; + } + return ; +} diff --git a/packages/editor-sample/src/App/InspectorDrawer/index.tsx b/packages/editor-sample/src/App/InspectorDrawer/index.tsx new file mode 100644 index 0000000..f659566 --- /dev/null +++ b/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 ; + case 'styles': + return ; + } + }; + + return ( + + + + setEditorState({ selectedSidebarTab: v })}> + + + + + + {renderCurrentSidebarPanel()} + + ); +} diff --git a/packages/editor-sample/src/App/SamplesDrawer/ToggleSamplesPanelButton.tsx b/packages/editor-sample/src/App/SamplesDrawer/ToggleSamplesPanelButton.tsx new file mode 100644 index 0000000..fe672cb --- /dev/null +++ b/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 ; + } + return ; +} diff --git a/packages/editor-sample/src/App/SamplesDrawer/index.tsx b/packages/editor-sample/src/App/SamplesDrawer/index.tsx new file mode 100644 index 0000000..7f7799a --- /dev/null +++ b/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 ( + + + + + + + + + + + + ); +} diff --git a/packages/editor-sample/src/App/panels/HtmlPanel.tsx b/packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx similarity index 100% rename from packages/editor-sample/src/App/panels/HtmlPanel.tsx rename to packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx diff --git a/packages/editor-sample/src/App/ShareButton.tsx b/packages/editor-sample/src/App/TemplatePanel/ShareButton.tsx similarity index 93% rename from packages/editor-sample/src/App/ShareButton.tsx rename to packages/editor-sample/src/App/TemplatePanel/ShareButton.tsx index e470d95..0b67e99 100644 --- a/packages/editor-sample/src/App/ShareButton.tsx +++ b/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(); diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx new file mode 100644 index 0000000..edb4a95 --- /dev/null +++ b/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 ; + case 'preview': + return ( + + + + ); + case 'html': + return ; + case 'data': + return ( + + 
{JSON.stringify(document, null, '  ')}
+ + ); + } + }; + + return ( + <> + + + setEditorState({ selectedMainTab: v })}> + + + + + + + + + + + {renderMainPanel()} + + ); +} diff --git a/packages/editor-sample/src/App/index.tsx b/packages/editor-sample/src/App/index.tsx index 311b3e7..16d80f7 100644 --- a/packages/editor-sample/src/App/index.tsx +++ b/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 ; - case 'styles': - return ; - } - }; - const renderMainPanel = () => { - switch (selectedMainTab) { - case 'editor': - return ; - case 'preview': - return ( - - - - ); - case 'html': - return ; - case 'data': - return ( - - 
{JSON.stringify(document, null, '  ')}
- - ); - } - }; + const theme = useTheme(); + const [{ inspectorDrawerOpen, samplesDrawerOpen }] = useEditorState(); return ( - - - - - setEditorState({ selectedSidebarTab: v })}> - - - - - - {renderCurrentSidebarPanel()} - - - - setEditorState({ selectedMainTab: v })}> - - - - - - - - - - - {renderMainPanel()} - - + <> + + + + + + + ); } diff --git a/packages/editor-sample/src/documents/blocks/Container/ContainerPropsSchema.tsx b/packages/editor-sample/src/documents/blocks/Container/ContainerPropsSchema.tsx new file mode 100644 index 0000000..212ff6d --- /dev/null +++ b/packages/editor-sample/src/documents/blocks/Container/ContainerPropsSchema.tsx @@ -0,0 +1,22 @@ +import { z } from 'zod'; + +import { zColor, zPadding } from '../helpers/zod'; + +export const ContainerPropsSchema = z.object({ + style: z + .object({ + backgroundColor: zColor().nullable().default(null), + borderColor: zColor().optional().nullable().default(null), + borderRadius: z.number().optional().nullable().default(0), + padding: zPadding().optional().default({ + top: 16, + bottom: 16, + left: 24, + right: 24, + }), + }) + .default({}), + props: z.object({ + childrenIds: z.array(z.string()), + }), +}); diff --git a/packages/editor-sample/src/documents/blocks/Container.tsx b/packages/editor-sample/src/documents/blocks/Container/index.tsx similarity index 61% rename from packages/editor-sample/src/documents/blocks/Container.tsx rename to packages/editor-sample/src/documents/blocks/Container/index.tsx index ab93065..2490305 100644 --- a/packages/editor-sample/src/documents/blocks/Container.tsx +++ b/packages/editor-sample/src/documents/blocks/Container/index.tsx @@ -1,32 +1,13 @@ import React from 'react'; import { z } from 'zod'; -import { TEditorBlock } from '../editor/core'; -import { useCurrentBlockId } from '../editor/EditorBlock'; -import { useEditorState } from '../editor/EditorContext'; -import ReaderBlock from '../reader/ReaderBlock'; +import { TEditorBlock } from '../../editor/core'; +import { useCurrentBlockId } from '../../editor/EditorBlock'; +import { useEditorState } from '../../editor/EditorContext'; +import ReaderBlock from '../../reader/ReaderBlock'; +import EditorChildrenIds from '../helpers/EditorChildrenIds'; -import EditorChildrenIds from './helpers/EditorChildrenIds'; -import { zColor, zPadding } from './helpers/zod'; - -export const ContainerPropsSchema = z.object({ - style: z - .object({ - backgroundColor: zColor().nullable().default(null), - borderColor: zColor().optional().nullable().default(null), - borderRadius: z.number().optional().nullable().default(0), - padding: zPadding().optional().default({ - top: 16, - bottom: 16, - left: 24, - right: 24, - }), - }) - .default({}), - props: z.object({ - childrenIds: z.array(z.string()), - }), -}); +import { ContainerPropsSchema } from './ContainerPropsSchema'; export type ContainerProps = z.infer; diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx new file mode 100644 index 0000000..d3e7fdf --- /dev/null +++ b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx @@ -0,0 +1,11 @@ +import { z } from 'zod'; + +import { zColor, zFontFamily } from '../helpers/zod'; + +export const EmailLayoutPropsSchema = z.object({ + backdropColor: zColor(), + canvasColor: zColor(), + textColor: zColor(), + fontFamily: zFontFamily().default('MODERN_SANS'), + childrenIds: z.array(z.string()), +}); diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx similarity index 86% rename from packages/editor-sample/src/documents/blocks/EmailLayout.tsx rename to packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx index 0c53183..3a06ccf 100644 --- a/packages/editor-sample/src/documents/blocks/EmailLayout.tsx +++ b/packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx @@ -1,13 +1,13 @@ import React, { CSSProperties } from 'react'; import { z } from 'zod'; -import { TEditorBlock } from '../editor/core'; -import { useCurrentBlockId } from '../editor/EditorBlock'; -import { useEditorState } from '../editor/EditorContext'; -import ReaderBlock from '../reader/ReaderBlock'; +import { TEditorBlock } from '../../editor/core'; +import { useCurrentBlockId } from '../../editor/EditorBlock'; +import { useEditorState } from '../../editor/EditorContext'; +import ReaderBlock from '../../reader/ReaderBlock'; +import EditorChildrenIds from '../helpers/EditorChildrenIds'; -import EditorChildrenIds from './helpers/EditorChildrenIds'; -import { zColor, zFontFamily } from './helpers/zod'; +import { EmailLayoutPropsSchema } from './EmailLayoutPropsSchema'; // Based on https://modernfontstacks.com/#font-stacks const FONT_FAMILY_MAPPINGS = { @@ -24,14 +24,6 @@ const FONT_FAMILY_MAPPINGS = { MONOSPACE: '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace', }; -export const EmailLayoutPropsSchema = z.object({ - backdropColor: zColor(), - canvasColor: zColor(), - textColor: zColor(), - fontFamily: zFontFamily().default('MODERN_SANS'), - childrenIds: z.array(z.string()), -}); - export type EmailLayoutProps = z.infer; export function EmailLayout(props: EmailLayoutProps) { diff --git a/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx b/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx index b543871..344ac18 100644 --- a/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx +++ b/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx @@ -19,7 +19,7 @@ import { TEditorBlock } from '../../../../editor/core'; import { AvatarPropsSchema } from '../../../Avatar'; import { ButtonPropsSchema } from '../../../Button'; import ColumnsContainerPropsSchema from '../../../ColumnsContainer/ColumnsContainerPropsSchema'; -import { ContainerPropsSchema } from '../../../Container'; +import { ContainerPropsSchema } from '../../../Container/ContainerPropsSchema'; import { DividerPropsSchema } from '../../../Divider'; import { HtmlPropsSchema } from '../../../Html'; import { ImagePropsSchema } from '../../../Image'; diff --git a/packages/editor-sample/src/documents/editor/EditorContext.tsx b/packages/editor-sample/src/documents/editor/EditorContext.tsx index 10e623c..db6adc0 100644 --- a/packages/editor-sample/src/documents/editor/EditorContext.tsx +++ b/packages/editor-sample/src/documents/editor/EditorContext.tsx @@ -8,6 +8,9 @@ type TValue = { selectedBlockId: string | null; selectedSidebarTab: 'block-configuration' | 'styles'; selectedMainTab: 'editor' | 'preview' | 'data' | 'html'; + + inspectorDrawerOpen: boolean; + samplesDrawerOpen: boolean; }; type TEditorContextState = [state: TValue, setState: (v: Partial) => void]; @@ -16,6 +19,9 @@ const DEFAULT_STATE: TValue = { selectedBlockId: null, selectedSidebarTab: 'styles', selectedMainTab: 'editor', + + inspectorDrawerOpen: false, + samplesDrawerOpen: false, }; const EditorContext = createContext([DEFAULT_STATE, () => {}]); @@ -29,10 +35,8 @@ type EditorProviderProps = { }; export function EditorProvider({ defaultValue, children }: EditorProviderProps) { const [state, setState] = useState(() => ({ + ...DEFAULT_STATE, document: defaultValue, - selectedBlockId: null, - selectedSidebarTab: 'styles', - selectedMainTab: 'editor', })); const value = useMemo( () => [ diff --git a/packages/editor-sample/src/documents/editor/core.tsx b/packages/editor-sample/src/documents/editor/core.tsx index 4c712c3..f01c0d2 100644 --- a/packages/editor-sample/src/documents/editor/core.tsx +++ b/packages/editor-sample/src/documents/editor/core.tsx @@ -9,9 +9,11 @@ import { Avatar, AvatarPropsSchema } from '../blocks/Avatar'; import { Button, ButtonPropsSchema } from '../blocks/Button'; import { EditorColumnsContainer } from '../blocks/ColumnsContainer'; import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema'; -import { ContainerPropsSchema, EditorContainer } from '../blocks/Container'; +import { EditorContainer } from '../blocks/Container'; +import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema'; import { Divider, DividerPropsSchema } from '../blocks/Divider'; -import { EditorEmailLayout, EmailLayoutProps, EmailLayoutPropsSchema } from '../blocks/EmailLayout'; +import { EditorEmailLayout, EmailLayoutProps } from '../blocks/EmailLayout'; +import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema'; import { addEditorBlockWrapper } from '../blocks/helpers/block-wrappers'; import EditorBlockWrapper from '../blocks/helpers/block-wrappers/EditorBlockWrapper'; import { Html, HtmlPropsSchema } from '../blocks/Html'; diff --git a/packages/editor-sample/src/documents/reader/core.tsx b/packages/editor-sample/src/documents/reader/core.tsx index 86ce504..839eb6f 100644 --- a/packages/editor-sample/src/documents/reader/core.tsx +++ b/packages/editor-sample/src/documents/reader/core.tsx @@ -8,9 +8,11 @@ import { Avatar, AvatarPropsSchema } from '../blocks/Avatar'; import { Button, ButtonPropsSchema } from '../blocks/Button'; import { ColumnsContainer } from '../blocks/ColumnsContainer'; import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema'; -import { Container, ContainerPropsSchema } from '../blocks/Container'; +import { Container } from '../blocks/Container'; +import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema'; import { Divider, DividerPropsSchema } from '../blocks/Divider'; -import { EmailLayout, EmailLayoutPropsSchema } from '../blocks/EmailLayout'; +import { EmailLayout } from '../blocks/EmailLayout'; +import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema'; import { addReaderBlockWrapper } from '../blocks/helpers/block-wrappers'; import { Html, HtmlPropsSchema } from '../blocks/Html'; import { Image, ImagePropsSchema } from '../blocks/Image';