diff --git a/packages/block-divider/package-lock.json b/packages/block-divider/package-lock.json index 98cb6e6..f319b12 100644 --- a/packages/block-divider/package-lock.json +++ b/packages/block-divider/package-lock.json @@ -1,12 +1,12 @@ { "name": "@usewaypoint/block-divider", - "version": "0.0.1", + "version": "0.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@usewaypoint/block-divider", - "version": "0.0.1", + "version": "0.0.2", "license": "MIT", "devDependencies": { "@testing-library/react": "^14.2.1" diff --git a/packages/block-divider/package.json b/packages/block-divider/package.json index 944cdad..ffba17e 100644 --- a/packages/block-divider/package.json +++ b/packages/block-divider/package.json @@ -1,6 +1,6 @@ { "name": "@usewaypoint/block-divider", - "version": "0.0.1", + "version": "0.0.2", "description": "@usewaypoint/document compatible Divider component", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/block-divider/src/index.tsx b/packages/block-divider/src/index.tsx index fa82c3d..c02964f 100644 --- a/packages/block-divider/src/index.tsx +++ b/packages/block-divider/src/index.tsx @@ -35,15 +35,16 @@ export function Divider({ style, props }: DividerProps) { padding: getPadding(style), backgroundColor: style?.backgroundColor ?? undefined, }; + const borderTopWidth = props?.lineHeight ?? 1; + const borderTopColor = props?.lineColor ?? '#333333'; return (
diff --git a/packages/block-divider/tests/__snapshots__/Divider.spec.tsx.snap b/packages/block-divider/tests/__snapshots__/Divider.spec.tsx.snap index cf258a2..20a5e69 100644 --- a/packages/block-divider/tests/__snapshots__/Divider.spec.tsx.snap +++ b/packages/block-divider/tests/__snapshots__/Divider.spec.tsx.snap @@ -4,7 +4,7 @@ exports[`Divider renders with default values 1`] = `
@@ -16,7 +16,7 @@ exports[`Divider renders with props 1`] = ` style="padding: 1px 4px 3px 2px; background-color: rgb(255, 240, 0);" >
diff --git a/packages/editor-sample/package-lock.json b/packages/editor-sample/package-lock.json index f70017a..ee2169b 100644 --- a/packages/editor-sample/package-lock.json +++ b/packages/editor-sample/package-lock.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.10", "@mui/material": "^5.15.10", + "@usewaypoint/block-divider": "^0.0.1", "@usewaypoint/block-heading": "^0.0.1", "@usewaypoint/block-spacer": "^0.0.1", "@usewaypoint/document-core": "^0.0.1", @@ -1840,6 +1841,15 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", "dev": true }, + "node_modules/@usewaypoint/block-divider": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-divider/-/block-divider-0.0.1.tgz", + "integrity": "sha512-LB+bqtsrak6VKcETi5YphD7GBAPbDTCia3xiniisNT5ZUg2r8ts9Bcdig08o4l6/F+n5Q6zcX1dEHXZA5OAKpA==", + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "zod": "^1 || ^2 || ^3" + } + }, "node_modules/@usewaypoint/block-heading": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/@usewaypoint/block-heading/-/block-heading-0.0.1.tgz", diff --git a/packages/editor-sample/package.json b/packages/editor-sample/package.json index 06c2789..234e58b 100644 --- a/packages/editor-sample/package.json +++ b/packages/editor-sample/package.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.10", "@mui/material": "^5.15.10", + "@usewaypoint/block-divider": "^0.0.1", "@usewaypoint/block-heading": "^0.0.1", "@usewaypoint/block-spacer": "^0.0.1", "@usewaypoint/document-core": "^0.0.1", diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx index c9537bb..d1fbad2 100644 --- a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx +++ b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ColumnsContainerSidebarPanel.tsx @@ -27,7 +27,7 @@ export default function ColumnsContainerPanel({ data, setData }: ColumnsContaine }; return ( - + updateData({ ...data, props: { ...data.props, lineColor } })} secondarySwatch={[]} /> @@ -40,7 +39,7 @@ export default function DividerSidebarPanel({ data, setData }: DividerSidebarPan step={1} min={1} max={24} - defaultValue={data.props.lineHeight ?? 1} + defaultValue={data.props?.lineHeight ?? 1} onChange={(lineHeight) => updateData({ ...data, props: { ...data.props, lineHeight } })} /> void; }; export default function PaddingInput({ label, defaultValue, onChange }: Props) { - const [value, setValue] = useState(defaultValue); + const [value, setValue] = useState(() => { + if (defaultValue) { + return defaultValue; + } + return { + top: 0, + left: 0, + bottom: 0, + right: 0, + }; + }); function handleChange(internalName: keyof TPaddingValue, nValue: number) { const v = { diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx index 27417d4..2a20fc4 100644 --- a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx +++ b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/style-inputs/MultiStylePropertyPanel.tsx @@ -6,14 +6,14 @@ import SingleStylePropertyPanel from './SingleStylePropertyPanel'; type MultiStylePropertyPanelProps = { names: (keyof TStyle)[]; - value: TStyle; + value: TStyle | undefined | null; onChange: (style: TStyle) => void; }; export default function MultiStylePropertyPanel({ names, value, onChange }: MultiStylePropertyPanelProps) { return ( <> {names.map((name) => ( - + ))} ); diff --git a/packages/editor-sample/src/documents/blocks/Divider.tsx b/packages/editor-sample/src/documents/blocks/Divider.tsx deleted file mode 100644 index 855dd11..0000000 --- a/packages/editor-sample/src/documents/blocks/Divider.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { z } from 'zod'; - -import { zColor, zPadding } from './helpers/zod'; - -export const DividerPropsSchema = z.object({ - style: z - .object({ - backgroundColor: zColor().optional().nullable().default(null), - padding: zPadding().optional().default({ - top: 16, - bottom: 16, - left: 0, - right: 0, - }), - }) - .default({}), - props: z - .object({ - lineColor: zColor().default('#333333'), - lineHeight: z.number().nullable().default(1), - }) - .default({}), -}); - -export type DividerProps = z.infer; - -export function Divider({ props: { lineColor, lineHeight } }: DividerProps) { - return ( -
- ); -} 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 344ac18..d5f376a 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 @@ -13,14 +13,12 @@ import { ViewColumnOutlined, } from '@mui/icons-material'; import { HeadingPropsSchema } from '@usewaypoint/block-heading'; -import { SpacerPropsSchema } from '@usewaypoint/block-spacer'; import { TEditorBlock } from '../../../../editor/core'; import { AvatarPropsSchema } from '../../../Avatar'; import { ButtonPropsSchema } from '../../../Button'; import ColumnsContainerPropsSchema from '../../../ColumnsContainer/ColumnsContainerPropsSchema'; import { ContainerPropsSchema } from '../../../Container/ContainerPropsSchema'; -import { DividerPropsSchema } from '../../../Divider'; import { HtmlPropsSchema } from '../../../Html'; import { ImagePropsSchema } from '../../../Image'; import { TextPropsSchema } from '../../../Text'; @@ -101,7 +99,14 @@ export const BUTTONS: TButtonProps[] = [ icon: , block: () => ({ type: 'Divider', - data: DividerPropsSchema.parse({}), + data: { + style: { + padding: { top: 16, right: 0, bottom: 16, left: 0 }, + }, + props: { + lineColor: '#CCCCCC', + }, + }, }), }, { @@ -109,7 +114,7 @@ export const BUTTONS: TButtonProps[] = [ icon: , block: () => ({ type: 'Spacer', - data: SpacerPropsSchema.parse({}), + data: { style: {}, props: {} }, }), }, { diff --git a/packages/editor-sample/src/documents/editor/core.tsx b/packages/editor-sample/src/documents/editor/core.tsx index f01c0d2..35460ae 100644 --- a/packages/editor-sample/src/documents/editor/core.tsx +++ b/packages/editor-sample/src/documents/editor/core.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { z } from 'zod'; +import { Divider, DividerProps, DividerPropsSchema } from '@usewaypoint/block-divider'; import { Heading, HeadingProps, HeadingPropsSchema } from '@usewaypoint/block-heading'; import { Spacer, SpacerProps, SpacerPropsSchema } from '@usewaypoint/block-spacer'; import { buildBlockComponent, buildBlockConfigurationSchema } from '@usewaypoint/document-core'; @@ -11,7 +12,6 @@ import { EditorColumnsContainer } from '../blocks/ColumnsContainer'; import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema'; import { EditorContainer } from '../blocks/Container'; import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema'; -import { Divider, DividerPropsSchema } from '../blocks/Divider'; import { EditorEmailLayout, EmailLayoutProps } from '../blocks/EmailLayout'; import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema'; import { addEditorBlockWrapper } from '../blocks/helpers/block-wrappers'; @@ -37,10 +37,6 @@ const EDITOR_DICTIONARY = { schema: ColumnsContainerPropsSchema, Component: addEditorBlockWrapper(EditorColumnsContainer), }, - Divider: { - schema: DividerPropsSchema, - Component: addEditorBlockWrapper(Divider), - }, Heading: { schema: HeadingPropsSchema, Component: (props: HeadingProps) => ( @@ -77,6 +73,14 @@ const EDITOR_DICTIONARY = { ), }, + Divider: { + schema: DividerPropsSchema, + Component: (props: DividerProps) => ( + + + + ), + }, }; export const EditorBlock = buildBlockComponent(EDITOR_DICTIONARY); diff --git a/packages/editor-sample/src/documents/reader/core.tsx b/packages/editor-sample/src/documents/reader/core.tsx index 839eb6f..5cdbe64 100644 --- a/packages/editor-sample/src/documents/reader/core.tsx +++ b/packages/editor-sample/src/documents/reader/core.tsx @@ -1,5 +1,6 @@ import { z } from 'zod'; +import { Divider, DividerPropsSchema } from '@usewaypoint/block-divider'; import { Heading, HeadingPropsSchema } from '@usewaypoint/block-heading'; import { Spacer, SpacerPropsSchema } from '@usewaypoint/block-spacer'; import { buildBlockComponent, buildBlockConfigurationSchema } from '@usewaypoint/document-core'; @@ -10,7 +11,6 @@ import { ColumnsContainer } from '../blocks/ColumnsContainer'; import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema'; import { Container } from '../blocks/Container'; import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema'; -import { Divider, DividerPropsSchema } from '../blocks/Divider'; import { EmailLayout } from '../blocks/EmailLayout'; import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema'; import { addReaderBlockWrapper } from '../blocks/helpers/block-wrappers'; @@ -37,7 +37,7 @@ const READER_DICTIONARY = { }, Divider: { schema: DividerPropsSchema, - Component: addReaderBlockWrapper(Divider), + Component: Divider, }, Heading: { schema: HeadingPropsSchema, diff --git a/packages/editor-sample/src/getConfiguration/sample/post-metrics-report.ts b/packages/editor-sample/src/getConfiguration/sample/post-metrics-report.ts index 29f0ad9..30f85be 100644 --- a/packages/editor-sample/src/getConfiguration/sample/post-metrics-report.ts +++ b/packages/editor-sample/src/getConfiguration/sample/post-metrics-report.ts @@ -79,7 +79,7 @@ const POST_METRICS_REPORT: TEditorConfiguration = { props: { size: 32, shape: 'circle', - imageUrl: '', + imageUrl: 'https://ui-avatars.com/api/?name=John+Doe', fallbackText: 'Jordan', fallbackColor: null, },