From dd23fa52c2ca1d750852ecb847bf5ce23907ab0b Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 17 Sep 2024 14:34:46 -0300 Subject: [PATCH 1/9] add initial version of component-preview snippet --- apps/docs/snippets/component-preview.mdx | 36 ++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 apps/docs/snippets/component-preview.mdx diff --git a/apps/docs/snippets/component-preview.mdx b/apps/docs/snippets/component-preview.mdx new file mode 100644 index 0000000000..4ded2557c8 --- /dev/null +++ b/apps/docs/snippets/component-preview.mdx @@ -0,0 +1,36 @@ +export const ComponentPreview = ({ code }) => { + return ( + + ); +}; From f9ac1eab297bd9c70aa60d96069be7825a062de3 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 17 Sep 2024 14:34:50 -0300 Subject: [PATCH 2/9] fix snippet import --- apps/docs/getting-started/migrating-to-react-email.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/getting-started/migrating-to-react-email.mdx b/apps/docs/getting-started/migrating-to-react-email.mdx index a3cc473931..0443abc565 100644 --- a/apps/docs/getting-started/migrating-to-react-email.mdx +++ b/apps/docs/getting-started/migrating-to-react-email.mdx @@ -6,7 +6,7 @@ description: 'Migrate from another email rendering framework to React Email' icon: 'paper-plane' --- -import NextSteps from '../snippets/next-steps.mdx'; +import NextSteps from '/snippets/next-steps.mdx'; ## From MJML From b2714eaebca4b33062c06325a0e3babdc1033981 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 17 Sep 2024 14:34:56 -0300 Subject: [PATCH 3/9] use component-preview on the button page --- apps/docs/components/button.mdx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/apps/docs/components/button.mdx b/apps/docs/components/button.mdx index c32e9f577e..01f1c9f668 100644 --- a/apps/docs/components/button.mdx +++ b/apps/docs/components/button.mdx @@ -7,6 +7,7 @@ icon: "b" --- import Support from '/snippets/support.mdx' +import {ComponentPreview} from '/snippets/component-preview.mdx' Semantics: Quite often in the email world we talk about buttons, when actually @@ -49,6 +50,20 @@ pnpm add @react-email/button -E Add the component to your email template. Include styles where needed. + ```jsx import { Button } from "@react-email/components"; From 3fc77a3e11858e9b93cfb90eb897bec4a92f473e Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 10 Oct 2024 16:24:24 -0300 Subject: [PATCH 4/9] get initial implementation of component preview snippet --- apps/docs/snippets/component-preview.mdx | 102 +++++++++++++++-------- 1 file changed, 69 insertions(+), 33 deletions(-) diff --git a/apps/docs/snippets/component-preview.mdx b/apps/docs/snippets/component-preview.mdx index 4ded2557c8..420cd7babc 100644 --- a/apps/docs/snippets/component-preview.mdx +++ b/apps/docs/snippets/component-preview.mdx @@ -1,36 +1,72 @@ -export const ComponentPreview = ({ code }) => { +export const ComponentPreview = ({ children, code }) => { + const preElement = children.props.children; + return ( - + +
+ +
+
+ +
+ {preElement} +
+
); }; From 4f95efe0d9c627d7d2d49c1ac63f2dda45a4eee9 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 10 Oct 2024 16:24:28 -0300 Subject: [PATCH 5/9] use component preview on teh button docs --- apps/docs/components/button.mdx | 35 +++++++++++++++++---------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/apps/docs/components/button.mdx b/apps/docs/components/button.mdx index 01f1c9f668..9a3db9cfe3 100644 --- a/apps/docs/components/button.mdx +++ b/apps/docs/components/button.mdx @@ -6,8 +6,8 @@ description: "A link that is styled to look like a button." icon: "b" --- -import Support from '/snippets/support.mdx' -import {ComponentPreview} from '/snippets/component-preview.mdx' +import Support from "/snippets/support.mdx"; +import { ComponentPreview } from "/snippets/component-preview.mdx"; Semantics: Quite often in the email world we talk about buttons, when actually @@ -51,20 +51,20 @@ pnpm add @react-email/button -E Add the component to your email template. Include styles where needed. -```jsx + import { Button } from "@react-email/components"; + + const Email = () => { + return ( + + ); + }; +'> +```tsx import { Button } from "@react-email/components"; const Email = () => { @@ -78,6 +78,7 @@ const Email = () => { ); }; ``` + ## Props @@ -89,4 +90,4 @@ const Email = () => { Specify the target attribute for the button link - + From 19b9a499e96d61bc8c3790b8ab832777d571600c Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 10 Oct 2024 16:24:54 -0300 Subject: [PATCH 6/9] add component preview to the code block --- apps/docs/components/code-block.mdx | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/apps/docs/components/code-block.mdx b/apps/docs/components/code-block.mdx index bd560f0da6..61c43987fd 100644 --- a/apps/docs/components/code-block.mdx +++ b/apps/docs/components/code-block.mdx @@ -6,6 +6,7 @@ icon: 'file-lines' --- import Support from '/snippets/support.mdx' +import { ComponentPreview } from '/snippets/component-preview.mdx' ## Install @@ -43,8 +44,31 @@ pnpm add @react-email/code-block -E Add the component into your email component as follows. + ```jsx -import { CodeBlock, dracula } from '@react-email/code-block'; +import { CodeBlock, dracula } from "@react-email/components"; const Email = () => { const code = `export default async (req, res) => { @@ -66,6 +90,7 @@ const Email = () => { />); }; ``` + This should render a code-block with the desired theme. From bcb484f5dd9d06b69aa1ee08a06f0c70168ba45d Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 10 Oct 2024 16:30:39 -0300 Subject: [PATCH 7/9] add component preview for the code-inline --- apps/docs/components/code-inline.mdx | 31 ++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/apps/docs/components/code-inline.mdx b/apps/docs/components/code-inline.mdx index cc06283ad4..dfbd878676 100644 --- a/apps/docs/components/code-inline.mdx +++ b/apps/docs/components/code-inline.mdx @@ -6,6 +6,7 @@ icon: 'code' --- import Support from '/snippets/support.mdx' +import {ComponentPreview} from '/snippets/component-preview.mdx' ## Install @@ -43,12 +44,38 @@ pnpm add @react-email/code-inline -E Add the component to your email template. Include styles where needed. + ```jsx -import { CodeInline } from "@react-email/code-inline"; +import { CodeInline } from "@react-email/components"; const Email = () => { - return @react-email/code-inline; + return + @react-email/code-inline + ; } ``` + From b91824c2c0cf1dc88c9351dcba38102a9425580e Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 11 Oct 2024 11:37:50 -0300 Subject: [PATCH 8/9] improve button design for preview --- apps/docs/components/button.mdx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/apps/docs/components/button.mdx b/apps/docs/components/button.mdx index 9a3db9cfe3..6ff7ebc45d 100644 --- a/apps/docs/components/button.mdx +++ b/apps/docs/components/button.mdx @@ -57,7 +57,12 @@ Add the component to your email template. Include styles where needed. return ( @@ -71,7 +76,12 @@ const Email = () => { return ( From e2739f8625b0fdfbbcdf1b02e485499c94867ab7 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 11 Oct 2024 12:32:55 -0300 Subject: [PATCH 9/9] add previews for the rest of the components --- apps/docs/components/column.mdx | 69 ++++++++++++++++++++++-- apps/docs/components/heading.mdx | 15 +++++- apps/docs/components/hr.mdx | 21 +++++++- apps/docs/components/link.mdx | 15 +++++- apps/docs/components/markdown.mdx | 41 +++++++++++++-- apps/docs/components/row.mdx | 87 ++++++++++++++++++++++++++++--- apps/docs/components/section.mdx | 62 ++++++++++++++++------ apps/docs/components/text.mdx | 11 +++- 8 files changed, 285 insertions(+), 36 deletions(-) diff --git a/apps/docs/components/column.mdx b/apps/docs/components/column.mdx index 21c665082a..1c6e702a5f 100644 --- a/apps/docs/components/column.mdx +++ b/apps/docs/components/column.mdx @@ -7,6 +7,7 @@ icon: "columns-3" --- import Support from '/snippets/support.mdx' +import {ComponentPreview} from '/snippets/component-preview.mdx' ## Install @@ -44,18 +45,80 @@ pnpm add @react-email/column -E Add the component to your email template. Include styles where needed. + ```jsx import { Column, Row } from "@react-email/components"; const Email = () => { return ( - A - B - C + + A + + + B + + + C + ); }; ``` + diff --git a/apps/docs/components/heading.mdx b/apps/docs/components/heading.mdx index 913360ce05..590e01e49a 100644 --- a/apps/docs/components/heading.mdx +++ b/apps/docs/components/heading.mdx @@ -7,6 +7,7 @@ icon: "h1" --- import Support from '/snippets/support.mdx' +import { ComponentPreview } from '/snippets/component-preview.mdx' ## Install @@ -44,13 +45,25 @@ pnpm add @react-email/heading -E Add the component to your email template. Include styles where needed. + ```jsx import { Heading } from "@react-email/components"; const Email = () => { - return Lorem ipsum; + return + Lorem ipsum + ; }; ``` + ## Props diff --git a/apps/docs/components/hr.mdx b/apps/docs/components/hr.mdx index e2f9ecd676..6021eb23ac 100644 --- a/apps/docs/components/hr.mdx +++ b/apps/docs/components/hr.mdx @@ -7,6 +7,7 @@ icon: "horizontal-rule" --- import Support from '/snippets/support.mdx' +import { ComponentPreview } from '/snippets/component-preview.mdx' ## Install @@ -44,12 +45,28 @@ pnpm add @react-email/hr -E Add the component to your email template. Include styles where needed. + ```jsx -import { Hr } from "@react-email/components"; +import { Hr, Heading, Text, Section } from "@react-email/components"; const Email = () => { - return
; + return
+ Hello +
+ world +
; }; ``` + diff --git a/apps/docs/components/link.mdx b/apps/docs/components/link.mdx index a7a59012b0..973f5cda8c 100644 --- a/apps/docs/components/link.mdx +++ b/apps/docs/components/link.mdx @@ -6,7 +6,8 @@ description: "A hyperlink to web pages, email addresses, or anything else a URL icon: "link" --- -import Support from '/snippets/support.mdx' +import Support from "/snippets/support.mdx"; +import { ComponentPreview } from "/snippets/component-preview.mdx"; ## Install @@ -44,6 +45,14 @@ pnpm add @react-email/link -E Add the component to your email template. Include styles where needed. + + ```jsx import { Link } from "@react-email/components"; @@ -52,6 +61,8 @@ const Email = () => { }; ``` + + ## Props @@ -62,4 +73,4 @@ const Email = () => { Specify the target attribute for the button link - + diff --git a/apps/docs/components/markdown.mdx b/apps/docs/components/markdown.mdx index 3c9730b0b8..dd500d65f3 100644 --- a/apps/docs/components/markdown.mdx +++ b/apps/docs/components/markdown.mdx @@ -7,6 +7,7 @@ icon: "file-code" --- import Support from '/snippets/support.mdx' +import { ComponentPreview } from '/snippets/component-preview.mdx' ## Install @@ -44,6 +45,35 @@ pnpm add @react-email/markdown -E Add the component to your email template. Include styles where needed. + ```jsx import { Markdown, Html } from "@react-email/components"; @@ -52,23 +82,28 @@ const Email = () => { {`# Hello, World!`} {/* OR */} - + ); }; ``` + ## Props diff --git a/apps/docs/components/row.mdx b/apps/docs/components/row.mdx index 28743b34b7..d89eb818a6 100644 --- a/apps/docs/components/row.mdx +++ b/apps/docs/components/row.mdx @@ -6,7 +6,8 @@ description: "Display a row that separates content areas horizontally in your em icon: "table-rows" --- -import Support from '/snippets/support.mdx' +import Support from "/snippets/support.mdx"; +import { ComponentPreview } from "/snippets/component-preview.mdx"; ## Install @@ -44,24 +45,94 @@ pnpm add @react-email/row -E Add the component to your email template. Include styles where needed. + + ```jsx import { Row, Column, Section } from "@react-email/components"; const Email = () => { return (
- - A + + + A + - - B + + + B + - - C + + + C +
); }; ``` - + + + diff --git a/apps/docs/components/section.mdx b/apps/docs/components/section.mdx index 3d1bf8caed..0541c3906f 100644 --- a/apps/docs/components/section.mdx +++ b/apps/docs/components/section.mdx @@ -7,6 +7,7 @@ icon: "rectangles-mixed" --- import Support from '/snippets/support.mdx' +import { ComponentPreview } from '/snippets/component-preview.mdx' ## Install @@ -44,29 +45,58 @@ pnpm add @react-email/section -E Add the component to your email template. Include styles where needed. + ```jsx import { Section, Column, Row, Text } from "@react-email/components"; const Email = () => { return ( - {/* A simple `section` */} -
- Hello World -
- - {/* Formatted with `rows` and `columns` */} -
- - Column 1, Row 1 - Column 2, Row 1 - - - Column 1, Row 2 - Column 2, Row 2 - -
+ <> + {/* A simple `section` */} +
+ Hello World +
+ + {/* Formatted with `rows` and `columns` */} +
+ + Column 1, Row 1 + Column 2, Row 1 + + + Column 1, Row 2 + Column 2, Row 2 + +
+ ); }; ``` + diff --git a/apps/docs/components/text.mdx b/apps/docs/components/text.mdx index 73793c6756..3982b8854e 100644 --- a/apps/docs/components/text.mdx +++ b/apps/docs/components/text.mdx @@ -7,6 +7,7 @@ icon: "text-size" --- import Support from '/snippets/support.mdx' +import { ComponentPreview } from '/snippets/component-preview.mdx' ## Install @@ -44,12 +45,20 @@ pnpm add @react-email/text -E Add the component to your email template. Include styles where needed. + ```jsx import { Text } from "@react-email/components"; const Email = () => { - return Lorem ipsum; + return Lorem ipsum; }; ``` +