react-email 2.0.0-canary.8 → 2.0.0

package/cli/index.js

@@ -252,7 +252,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
     name: "react-email",
-    version: "2.0.0-canary.8",
+    version: "2.0.0",
     description: "A live preview of your emails right in your browser.",
     bin: {
         email: "./cli/index.js"
@@ -283,8 +283,8 @@ var package_default = {
         "@radix-ui/react-slot": "1.0.2",
         "@radix-ui/react-toggle-group": "1.0.4",
         "@radix-ui/react-tooltip": "1.0.6",
-        "@react-email/components": "0.0.14-canary.0",
-        "@react-email/render": "0.0.12-canary.0",
+        "@react-email/components": "0.0.14",
+        "@react-email/render": "0.0.12",
         "@swc/core": "1.3.101",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
@@ -325,7 +325,7 @@ var package_default = {
         "@types/mime-types": "2.1.4",
         "@types/node": "20.10.4",
         "@types/normalize-path": "3.0.2",
-        "@types/shelljs": "0.8.12",
+        "@types/shelljs": "0.8.15",
         "@vercel/style-guide": "5.1.0",
         eslint: "8.50.0",
         tsup: "7.2.0",

package/cli/index.mjs

@@ -6,7 +6,7 @@ import { program } from "commander";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "2.0.0-canary.8",
+  version: "2.0.0",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./cli/index.js"
@@ -37,8 +37,8 @@ var package_default = {
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.6",
-    "@react-email/components": "0.0.14-canary.0",
-    "@react-email/render": "0.0.12-canary.0",
+    "@react-email/components": "0.0.14",
+    "@react-email/render": "0.0.12",
     "@swc/core": "1.3.101",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -79,7 +79,7 @@ var package_default = {
     "@types/mime-types": "2.1.4",
     "@types/node": "20.10.4",
     "@types/normalize-path": "3.0.2",
-    "@types/shelljs": "0.8.12",
+    "@types/shelljs": "0.8.15",
     "@vercel/style-guide": "5.1.0",
     eslint: "8.50.0",
     tsup: "7.2.0",

package/dist/package.json

@@ -14,7 +14,7 @@
     "license": "MIT",
     "repository": {
         "type": "git",
-        "url": "https://github.com/resendlabs/react-email.git",
+        "url": "https://github.com/resend/react-email.git",
         "directory": "packages/react-email"
     },
     "keywords": [

package/dist/source/utils/download-client.js

@@ -54,7 +54,7 @@ var downloadClient = function () { return __awaiter(void 0, void 0, void 0, func
                 return [4 /*yield*/, octokit.repos.downloadTarballArchive({
                         owner: 'resendlabs',
                         repo: 'react-email',
-                        ref: 'v0.0.15-canary.0',
+                        ref: 'v0.0.15',
                     })];
             case 1:
                 downloadRes = _a.sent();

package/license.md

@@ -1,4 +1,4 @@
-Copyright 2022 Bu Kinoshita and Zeno Rocha
+Copyright 2024 Plus Five Five, Inc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "react-email",
-  "version": "2.0.0-canary.8",
+  "version": "2.0.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./cli/index.js"
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "lint": "eslint . && tsc"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,8 +31,8 @@
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.6",
-    "@react-email/components": "0.0.14-canary.0",
-    "@react-email/render": "0.0.12-canary.0",
+    "@react-email/components": "0.0.14",
+    "@react-email/render": "0.0.12",
     "@swc/core": "1.3.101",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -67,18 +73,12 @@
     "@types/mime-types": "2.1.4",
     "@types/node": "20.10.4",
     "@types/normalize-path": "3.0.2",
-    "@types/shelljs": "0.8.12",
+    "@types/shelljs": "0.8.15",
     "@vercel/style-guide": "5.1.0",
     "eslint": "8.50.0",
     "tsup": "7.2.0",
     "tsx": "4.7.0",
     "vitest": "1.1.3",
     "watch": "1.0.2"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "clean": "rm -rf dist",
-    "lint": "eslint . && tsc"
   }
-}
+}

package/src/actions/render-email-by-slug.tsx

@@ -1,5 +1,5 @@
 'use server';
-import fs from 'node:fs';
+import { promises as fs } from 'node:fs';
 import path from 'node:path';
 import { renderAsync } from '@react-email/render';
 import { getEmailComponent } from '../utils/get-email-component';
@@ -22,22 +22,7 @@ export type EmailRenderingResult =
 export const renderEmailBySlug = async (
   emailSlug: string,
 ): Promise<EmailRenderingResult> => {
-  const emailPathWithoutExtesion = path.join(
-    emailsDirectoryAbsolutePath,
-    emailSlug,
-  );
-
-  let emailPath: string;
-  // manually find out what is the file extension for the email
-  if (fs.existsSync(`${emailPathWithoutExtesion}.tsx`)) {
-    emailPath = `${emailPathWithoutExtesion}.tsx`;
-  } else if (fs.existsSync(`${emailPathWithoutExtesion}.jsx`)) {
-    emailPath = `${emailPathWithoutExtesion}.jsx`;
-  } else if (fs.existsSync(`${emailPathWithoutExtesion}.js`)) {
-    emailPath = `${emailPathWithoutExtesion}.js`;
-  } else {
-    throw new Error('Could not find the email for that slug!');
-  }
+  const emailPath = path.join(emailsDirectoryAbsolutePath, emailSlug);
 
   const result = await getEmailComponent(emailPath);
 
@@ -57,7 +42,7 @@ export const renderEmailBySlug = async (
       plainText: true,
     });
 
-    const reactMarkup = await fs.promises.readFile(emailPath, 'utf-8');
+    const reactMarkup = await fs.readFile(emailPath, 'utf-8');
 
     return {
       markup,

package/src/app/page.tsx

@@ -5,7 +5,6 @@ import { Button, Heading, Text } from '../components';
 import { Shell } from '../components/shell';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import logo from './logo.png';
-import pattern from './pattern.png';
 
 const Home = () => {
   const baseEmailsDirectoryName = path.basename(emailsDirectoryAbsolutePath);
@@ -13,14 +12,6 @@ const Home = () => {
   return (
     <Shell>
       <div className="relative max-w-lg mx-auto p-8 flex items-center justify-center h-[inherit]">
-        <Image
-          alt="React Email Icon"
-          className="absolute top-0 -translate-x-1/2 left-1/2 -translate-y-[70px] opacity-70"
-          height={349}
-          src={pattern}
-          width={349}
-        />
-
         <div className="relative z-10 flex flex-col text-center items-center">
           <Image
             alt="React Email Icon"
@@ -44,7 +35,7 @@ const Home = () => {
             folder.
           </Text>
 
-          <Button asChild>
+          <Button asChild size="3">
             <Link href="https://react.email/docs">Check the docs</Link>
           </Button>
         </div>

package/src/components/shell.tsx

@@ -22,6 +22,7 @@ export const Shell = ({
   setActiveView,
 }: ShellProps) => {
   const [sidebarToggled, setSidebarToggled] = React.useState(false);
+  const [triggerTransition, setTriggerTransition] = React.useState(false);
 
   return (
     <div className="flex bg-black text-white flex-col h-screen overflow-x-hidden">
@@ -58,20 +59,31 @@ export const Shell = ({
       <div className="flex bg-slate-2">
         <Sidebar
           className={cn(
-            'w-screen max-w-full bg-black h-screen md:bg-inherit lg:h-auto z-50 md:max-w-[275px] transition-transform fixed top-[70px] lg:top-0 left-0',
+            'w-screen max-w-full bg-black h-screen lg:h-auto z-50 lg:max-w-[275px] fixed top-[70px] lg:top-0 left-0',
             {
               'translate-x-0 lg:-translate-x-full': sidebarToggled,
               '-translate-x-full lg:translate-x-0': !sidebarToggled,
             },
           )}
           currentEmailOpenSlug={currentEmailOpenSlug}
+          style={{
+            transition: triggerTransition ? 'transform 0.2s ease-in-out' : '',
+          }}
         />
 
         <main
-          className={cn('transition-transform will-change-transform h-screen', {
-            'lg:translate-x-0 lg:w-[calc(100vw)]': sidebarToggled,
-            'lg:translate-x-[275px] lg:w-[calc(100vw-275px)]': !sidebarToggled,
-          })}
+          className={cn(
+            'absolute will-change-width h-screen w-[100vw] right-0',
+            {
+              'lg:translate-x-0 lg:w-[calc(100vw)]': sidebarToggled,
+              'lg:translate-x-0 lg:w-[calc(100vw-275px)]': !sidebarToggled,
+            },
+          )}
+          style={{
+            transition: triggerTransition
+              ? 'width 0.2s ease-in-out, transform 0.2s ease-in-out'
+              : '',
+          }}
         >
           {currentEmailOpenSlug ? (
             <Topbar
@@ -79,7 +91,15 @@ export const Shell = ({
               currentEmailOpenSlug={currentEmailOpenSlug}
               markup={markup}
               onToggleSidebar={() => {
-                setSidebarToggled((v) => !v);
+                setTriggerTransition(true);
+
+                requestAnimationFrame(() => {
+                  setSidebarToggled((v) => !v);
+                });
+
+                setTimeout(() => {
+                  setTriggerTransition(false);
+                }, 300);
               }}
               setActiveView={setActiveView}
             />

package/src/components/sidebar/sidebar-directory-children.tsx

@@ -57,10 +57,10 @@ export const SidebarDirectoryChildren = (props: {
                 )}
 
                 {props.emailsDirectoryMetadata.emailFilenames.map(
-                  (emailFilename) => {
+                  (emailFilename, index) => {
                     const emailSlug = `${directoryPathRelativeToEmailsDirectory}${
                       !isBaseEmailsDirectory ? pathSeparator : ''
-                    }${emailFilename.replace(/\..+$/, '')}`;
+                    }${emailFilename}`;
                     const isCurrentPage =
                       props.currentEmailOpenSlug === emailSlug;
 
@@ -73,7 +73,7 @@ export const SidebarDirectoryChildren = (props: {
                         key={emailSlug}
                       >
                         <motion.span
-                          animate={{ opacity: 1 }}
+                          animate={{ x: 0, opacity: 1 }}
                           className={cn(
                             'text-[14px] flex items-center align-middle pl-3 h-8 max-w-full rounded-md text-slate-11 relative transition ease-in-out duration-200',
                             {
@@ -82,6 +82,11 @@ export const SidebarDirectoryChildren = (props: {
                                 props.currentEmailOpenSlug !== emailSlug,
                             },
                           )}
+                          initial={{ x: -10 + -index * 1.5, opacity: 0 }}
+                          transition={{
+                            x: { delay: 0.03 * index, duration: 0.05 },
+                            opacity: { delay: 0.03 * index, duration: 0.2 },
+                          }}
                         >
                           {isCurrentPage ? (
                             <motion.span

package/src/components/sidebar/sidebar.tsx

@@ -10,17 +10,25 @@ import { SidebarDirectoryChildren } from './sidebar-directory-children';
 interface SidebarProps {
   className?: string;
   currentEmailOpenSlug?: string;
+  style?: React.CSSProperties;
 }
 
-export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
+export const Sidebar = ({
+  className,
+  currentEmailOpenSlug,
+  style,
+}: SidebarProps) => {
   const { emailsDirectoryMetadata } = useEmails();
 
   return (
-    <aside className={cn('border-r flex flex-col border-slate-6', className)}>
+    <aside
+      className={cn('border-r flex flex-col border-slate-6', className)}
+      style={{ ...style }}
+    >
       <div className="p-4 h-[70px] flex-shrink items-center hidden lg:flex">
         <Logo />
       </div>
-      <nav className="p-4 flex-grow lg:pt-0 pl-0 w-screen h-[calc(100vh_-_70px)] md:w-full md:min-w-[275px] md:max-w-[275px] flex flex-col overflow-y-auto">
+      <nav className="p-4 flex-grow lg:pt-0 pl-0 w-screen h-[calc(100vh_-_70px)] lg:w-full lg:min-w-[275px] lg:max-w-[275px] flex flex-col overflow-y-auto">
         <Collapsible.Root>
           <SidebarDirectoryChildren
             currentEmailOpenSlug={currentEmailOpenSlug}

package/src/utils/get-email-component.ts

@@ -89,6 +89,18 @@ export const getEmailComponent = async (
     };
   }
 
+  if (fakeContext.module.exports.default === undefined) {
+    return {
+      error: improveErrorWithSourceMap(
+        new Error(
+          `The email component at ${emailPath} does not contain a default export`,
+        ),
+        emailPath,
+        sourceMapToEmail,
+      ),
+    };
+  }
+
   return {
     emailComponent: fakeContext.module.exports.default as EmailComponent,
     sourceMapToOriginalFile: sourceMapToEmail,

package/public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>