Bumping package versions in email-builder and editor-sample (#107)

- adding markdown boolean to text - adding border styles to canvas
usewaypoint · May 31, 2024 · 8a8ddca · 8a8ddca
1 parent e00fd58
commit 8a8ddca
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 86 deletions.
diff --git a/packages/editor-sample/package-lock.json b/packages/editor-sample/package-lock.json
diff --git a/packages/editor-sample/package.json b/packages/editor-sample/package.json
@@ -12,18 +12,18 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
-    "@usewaypoint/block-avatar": "^0.0.1",
-    "@usewaypoint/block-button": "^0.0.2",
-    "@usewaypoint/block-columns-container": "^0.0.2",
-    "@usewaypoint/block-container": "^0.0.1",
-    "@usewaypoint/block-divider": "^0.0.3",
-    "@usewaypoint/block-heading": "^0.0.2",
-    "@usewaypoint/block-html": "^0.0.2",
-    "@usewaypoint/block-image": "^0.0.4",
-    "@usewaypoint/block-spacer": "^0.0.2",
-    "@usewaypoint/block-text": "^0.0.2",
-    "@usewaypoint/document-core": "^0.0.4",
-    "@usewaypoint/email-builder": "^0.0.3",
+    "@usewaypoint/block-avatar": "^0.0.3",
+    "@usewaypoint/block-button": "^0.0.3",
+    "@usewaypoint/block-columns-container": "^0.0.3",
+    "@usewaypoint/block-container": "^0.0.2",
+    "@usewaypoint/block-divider": "^0.0.4",
+    "@usewaypoint/block-heading": "^0.0.3",
+    "@usewaypoint/block-html": "^0.0.3",
+    "@usewaypoint/block-image": "^0.0.5",
+    "@usewaypoint/block-spacer": "^0.0.3",
+    "@usewaypoint/block-text": "^0.0.4",
+    "@usewaypoint/document-core": "^0.0.6",
+    "@usewaypoint/email-builder": "^0.0.6",
     "highlight.js": "^11.9.0",
     "prettier": "^3.2.5",
     "react": "^18.2.0",

diff --git a/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx b/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx
@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
 
+import { RoundedCornerOutlined } from '@mui/icons-material';
+
 import EmailLayoutPropsSchema, {
   EmailLayoutProps,
 } from '../../../../documents/blocks/EmailLayout/EmailLayoutPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
-import ColorInput from './helpers/inputs/ColorInput';
+import ColorInput, { NullableColorInput } from './helpers/inputs/ColorInput';
 import { NullableFontFamily } from './helpers/inputs/FontFamily';
+import SliderInput from './helpers/inputs/SliderInput';
 
 type EmailLayoutSidebarFieldsProps = {
   data: EmailLayoutProps;
@@ -37,7 +40,22 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS
         defaultValue={data.canvasColor ?? '#FFFFFF'}
         onChange={(canvasColor) => updateData({ ...data, canvasColor })}
       />
-
+      <NullableColorInput
+        label="Canvas border color"
+        defaultValue={data.borderColor ?? null}
+        onChange={(borderColor) => updateData({ ...data, borderColor })}
+      />
+      <SliderInput
+        iconLabel={<RoundedCornerOutlined />}
+        units="px"
+        step={4}
+        marks
+        min={0}
+        max={48}
+        label="Canvas border radius"
+        defaultValue={data.borderRadius ?? 0}
+        onChange={(borderRadius) => updateData({ ...data, borderRadius })}
+      />
       <NullableFontFamily
         label="Font family"
         defaultValue="MODERN_SANS"

diff --git a/...ditor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/TextSidebarPanel.tsx b/...ditor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/TextSidebarPanel.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { TextProps, TextPropsSchema } from '@usewaypoint/block-text';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
+import BooleanInput from './helpers/inputs/BooleanInput';
 import TextInput from './helpers/inputs/TextInput';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';
 
@@ -31,6 +32,11 @@ export default function TextSidebarPanel({ data, setData }: TextSidebarPanelProp
         defaultValue={data.props?.text ?? ''}
         onChange={(text) => updateData({ ...data, props: { ...data.props, text } })}
       />
+      <BooleanInput
+        label="Markdown"
+        defaultValue={false}
+        onChange={(markdown) => updateData({ ...data, props: { ...data.props, markdown } })}
+      />
 
       <MultiStylePropertyPanel
         names={['color', 'backgroundColor', 'fontFamily', 'fontSize', 'fontWeight', 'textAlign', 'padding']}

diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx
@@ -61,6 +61,14 @@ export default function EmailLayoutEditor(props: EmailLayoutProps) {
           margin: '0 auto',
           maxWidth: '600px',
           backgroundColor: props.canvasColor ?? '#FFFFFF',
+          borderRadius: props.borderRadius ?? undefined,
+          border: (() => {
+            const v = props.borderColor;
+            if (!v) {
+              return undefined;
+            }
+            return `1px solid ${v}`;
+          })(),
         }}
         role="presentation"
         cellSpacing="0"

diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx
@@ -23,6 +23,8 @@ const FONT_FAMILY_SCHEMA = z
 
 const EmailLayoutPropsSchema = z.object({
   backdropColor: COLOR_SCHEMA,
+  borderColor: COLOR_SCHEMA,
+  borderRadius: z.number().optional().nullable(),
   canvasColor: COLOR_SCHEMA,
   textColor: COLOR_SCHEMA,
   fontFamily: FONT_FAMILY_SCHEMA,