fix(react-email, create-email): Stability issues (#1027)

Co-authored-by: aadamw <[email protected]> Co-authored-by: Zeno Rocha <[email protected]> Co-authored-by: Mriganka Mousum Gogoi <[email protected]>
resend · Dec 1, 2023 · 7d721d9 · 7d721d9
1 parent 80459f8
commit 7d721d9
Show file tree

Hide file tree

Showing 38 changed files with 601 additions and 319 deletions.
diff --git a/README.md b/README.md
@@ -27,27 +27,27 @@ Install one of the components from your command line.
 #### With yarn
 
 ```sh
-yarn add @react-email/button -E
+yarn add @react-email/components -E
 ```
 
 #### With npm
 
 ```sh
-npm install @react-email/button -E
+npm install @react-email/components -E
 ```
 
 #### With pnpm
 
 ```sh
-pnpm install @react-email/button -E
+pnpm install @react-email/components -E
 ```
 
 ## Getting started
 
 Add the component to your email template. Include styles where needed.
 
 ```jsx
-import { Button } from "@react-email/button";
+import { Button } from "@react-email/components";
 
 const Email = () => {
   return (

diff --git a/apps/web/public/static/covers/components.png b/apps/web/public/static/covers/components.png
diff --git a/apps/web/public/static/covers/font.png b/apps/web/public/static/covers/font.png
diff --git a/apps/web/public/static/covers/markdown.png b/apps/web/public/static/covers/markdown.png
diff --git a/client/next.config.js b/client/next.config.js
@@ -3,9 +3,8 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   experimental: {
-    appDir: true,
     externalDir: true // compile files that are located next to the .react-email directory
   },
 };
 
-module.exports = nextConfig;
+module.exports = nextConfig;
diff --git a/docs/components/button.mdx b/docs/components/button.mdx
@@ -18,14 +18,26 @@ Install component from your command line.
 <CodeGroup>
 
 ```sh npm
+npm install @react-email/components -E
+
+# or get the individual package
+
 npm install @react-email/button -E
 ```
 
 ```sh yarn
+yarn add @react-email/components -E
+
+# or get the individual package
+
 yarn add @react-email/button -E
 ```
 
 ```sh pnpm
+pnpm add @react-email/components -E
+
+# or get the individual package
+
 pnpm add @react-email/button -E
 ```
 
@@ -36,7 +48,7 @@ pnpm add @react-email/button -E
 Add the component to your email template. Include styles where needed.
 
 ```jsx
-import { Button } from "@react-email/button";
+import { Button } from "@react-email/components";
 
 const Email = () => {
   return (

diff --git a/docs/components/column.mdx b/docs/components/column.mdx
@@ -1,9 +1,9 @@
 ---
-title: 'Column'
-sidebarTitle: 'Column'
-description: 'Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component.'
-'og:image': 'https://react.email/static/covers/column.png'
-icon: 'columns-3'
+title: "Column"
+sidebarTitle: "Column"
+description: "Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component."
+"og:image": "https://react.email/static/covers/column.png"
+icon: "columns-3"
 ---
 
 ## Install
@@ -13,14 +13,26 @@ Install component from your command line.
 <CodeGroup>
 
 ```sh npm
+npm install @react-email/components -E
+
+# or get the individual package
+
 npm install @react-email/column -E
 ```
 
 ```sh yarn
+yarn add @react-email/components -E
+
+# or get the individual package
+
 yarn add @react-email/column -E
 ```
 
 ```sh pnpm
+pnpm add @react-email/components -E
+
+# or get the individual package
+
 pnpm add @react-email/column -E
 ```
 
@@ -31,8 +43,7 @@ pnpm add @react-email/column -E
 Add the component to your email template. Include styles where needed.
 
 ```jsx
-import { Row } from '@react-email/row';
-import { Column } from '@react-email/column';
+import { Column, Row } from "@react-email/components";
 
 const Email = () => {
   return (

diff --git a/docs/components/container.mdx b/docs/components/container.mdx
@@ -1,9 +1,9 @@
 ---
-title: 'Container'
-sidebarTitle: 'Container'
-description: 'A layout component that centers all the email content.'
-'og:image': 'https://react.email/static/covers/container.png'
-icon: 'grid'
+title: "Container"
+sidebarTitle: "Container"
+description: "A layout component that centers all the email content."
+"og:image": "https://react.email/static/covers/container.png"
+icon: "grid"
 ---
 
 ## Install
@@ -13,14 +13,26 @@ Install component from your command line.
 <CodeGroup>
 
 ```sh npm
+npm install @react-email/components -E
+
+# or get the individual package
+
 npm install @react-email/container -E
 ```
 
 ```sh yarn
+yarn add @react-email/components -E
+
+# or get the individual package
+
 yarn add @react-email/container -E
 ```
 
 ```sh pnpm
+pnpm add @react-email/components -E
+
+# or get the individual package
+
 pnpm add @react-email/container -E
 ```
 
@@ -31,13 +43,12 @@ pnpm add @react-email/container -E
 Add the component to your email template. Include styles where needed.
 
 ```jsx
-import { Button } from '@react-email/button';
-import { Container } from '@react-email/container';
+import { Container, Button } from "@react-email/components";
 
 const Email = () => {
   return (
     <Container>
-      <Button href="https://example.com" style={{ color: '#61dafb' }}>
+      <Button href="https://example.com" style={{ color: "#61dafb" }}>
         Click me
       </Button>
     </Container>

diff --git a/docs/components/font.mdx b/docs/components/font.mdx
@@ -1,9 +1,9 @@
 ---
-title: 'Font'
-sidebarTitle: 'Font'
-description: 'A React Font component to set your fonts.'
-'og:image': 'https://react.email/static/covers/font.png'
-icon: 'book-font'
+title: "Font"
+sidebarTitle: "Font"
+description: "A React Font component to set your fonts."
+"og:image": "https://react.email/static/covers/font.png"
+icon: "book-font"
 ---
 
 ## Install
@@ -13,14 +13,26 @@ Install component from your command line.
 <CodeGroup>
 
 ```sh npm
+npm install @react-email/components -E
+
+# or get the individual package
+
 npm install @react-email/font -E
 ```
 
 ```sh yarn
+yarn add @react-email/components -E
+
+# or get the individual package
+
 yarn add @react-email/font -E
 ```
 
 ```sh pnpm
+pnpm add @react-email/components -E
+
+# or get the individual package
+
 pnpm add @react-email/font -E
 ```
 
@@ -33,9 +45,7 @@ Note, that not all email clients supports web fonts, this is why it is important
 To view all email clients that supports web fonts [see](https://www.caniemail.com/features/css-at-font-face/)
 
 ```jsx
-import { Html } from '@react-email/html';
-import { Head } from '@react-email/head';
-import { Font } from '@react-email/font';
+import { Font, Head, Html } from "@react-email/components";
 
 const Email = () => {
   return (
@@ -45,8 +55,8 @@ const Email = () => {
           fontFamily="Roboto"
           fallbackFontFamily="Verdana"
           webFont={{
-            url: 'https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2',
-            format: 'woff2',
+            url: "https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
+            format: "woff2",
           }}
           fontWeight={400}
           fontStyle="normal"

diff --git a/docs/components/head.mdx b/docs/components/head.mdx
@@ -1,9 +1,9 @@
 ---
-title: 'Head'
-sidebarTitle: 'Head'
-description: 'Contains head components, related to the document such as style and meta elements.'
-'og:image': 'https://react.email/static/covers/head.png'
-icon: 'head-side'
+title: "Head"
+sidebarTitle: "Head"
+description: "Contains head components, related to the document such as style and meta elements."
+"og:image": "https://react.email/static/covers/head.png"
+icon: "head-side"
 ---
 
 ## Install
@@ -13,14 +13,26 @@ Install component from your command line.
 <CodeGroup>
 
 ```sh npm
+npm install @react-email/components -E
+
+# or get the individual package
+
 npm install @react-email/head -E
 ```
 
 ```sh yarn
+yarn add @react-email/components -E
+
+# or get the individual package
+
 yarn add @react-email/head -E
 ```
 
 ```sh pnpm
+pnpm add @react-email/components -E
+
+# or get the individual package
+
 pnpm add @react-email/head -E
 ```
 
@@ -31,7 +43,7 @@ pnpm add @react-email/head -E
 Add the component to your email template. Include children tags where needed.
 
 ```jsx
-import { Head } from '@react-email/head';
+import { Head } from "@react-email/components";
 
 const Email = () => {
   return (

diff --git a/docs/components/heading.mdx b/docs/components/heading.mdx
@@ -1,9 +1,9 @@
 ---
-title: 'Heading'
-sidebarTitle: 'Heading'
-description: 'A block of heading text.'
-'og:image': 'https://react.email/static/covers/heading.png'
-icon: 'h1'
+title: "Heading"
+sidebarTitle: "Heading"
+description: "A block of heading text."
+"og:image": "https://react.email/static/covers/heading.png"
+icon: "h1"
 ---
 
 ## Install
@@ -13,14 +13,26 @@ Install component from your command line.
 <CodeGroup>
 
 ```sh npm
+npm install @react-email/components -E
+
+# or get the individual package
+
 npm install @react-email/heading -E
 ```
 
 ```sh yarn
+yarn add @react-email/components -E
+
+# or get the individual package
+
 yarn add @react-email/heading -E
 ```
 
 ```sh pnpm
+pnpm add @react-email/components -E
+
+# or get the individual package
+
 pnpm add @react-email/heading -E
 ```
 
@@ -31,12 +43,10 @@ pnpm add @react-email/heading -E
 Add the component to your email template. Include styles where needed.
 
 ```jsx
-import { Heading } from '@react-email/heading';
+import { Heading } from "@react-email/components";
 
 const Email = () => {
-  return (
-    <Heading as="h2">Lorem ipsum</Heading>
-  );
+  return <Heading as="h2">Lorem ipsum</Heading>;
 };
 ```