react-email 1.2.1-canary.3 → 1.3.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# react-email
+
+## 1.3.0
+
+### Minor Changes
+
+- Add missing metadata such as `engines`, `repository` and images
+
+### Patch Changes
+
+- Updated dependencies
+  - @react-email/render@0.0.3

package/dist/_preview/components.js

@@ -28,7 +28,7 @@ exports.components = [
     },
     {
         title: 'sidebar.tsx',
-        content: 'import { Logo } from \'./logo\';\nimport * as React from \'react\';\nimport classnames from \'classnames\';\nimport Link from \'next/link\';\nimport { Heading } from \'./heading\';\nimport { useRouter } from \'next/router\';\nimport * as Collapsible from \'@radix-ui/react-collapsible\';\n\ntype SidebarElement = React.ElementRef<\'aside\'>;\ntype RootProps = React.ComponentPropsWithoutRef<\'aside\'>;\n\ninterface SidebarProps extends RootProps {\n  navItems: string[];\n}\n\nexport const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(\n  ({ className, navItems, ...props }, forwardedRef) => {\n    const { query } = useRouter();\n\n    return (\n      <aside\n        ref={forwardedRef}\n        className="px-6 min-w-[275px] max-w-[275px] flex flex-col gap-4 border-r border-slate-6"\n        {...props}\n      >\n        <div className="h-[70px] flex items-center">\n          <Logo />\n        </div>\n\n        <nav className="flex flex-col gap-4">\n          <Collapsible.Root defaultOpen>\n            <Collapsible.Trigger\n              className={classnames(\'flex items-center gap-1\', {\n                \'cursor-default\': navItems && navItems.length === 0,\n              })}\n            >\n              <svg\n                className="text-slate-11"\n                width="24"\n                height="24"\n                viewBox="0 0 24 24"\n                fill="none"\n                xmlns="http://www.w3.org/2000/svg"\n              >\n                <path\n                  d="M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n                <path\n                  d="M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n              </svg>\n\n              <div className="flex items-center">\n                <Heading as="h3" color="white" size="2" weight="medium">\n                  All emails\n                </Heading>\n                {navItems && navItems.length > 0 && (\n                  <svg\n                    className="text-slate-11"\n                    width="24"\n                    height="24"\n                    viewBox="0 0 24 24"\n                    fill="none"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path\n                      d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"\n                      fill="currentColor"\n                    />\n                  </svg>\n                )}\n              </div>\n            </Collapsible.Trigger>\n\n            {navItems && navItems.length > 0 && (\n              <Collapsible.Content className="relative mt-3">\n                <div className="absolute left-2.5  w-px h-full bg-slate-6" />\n\n                <div className="py-2 flex flex-col gap-1.5 truncate">\n                  {navItems &&\n                    navItems.map((item) => (\n                      <Link key={item} href={`/preview/${item}`}>\n                        <span\n                          className={classnames(\n                            \'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 pr-2 rounded-md text-slate-11\',\n                            {\n                              \'bg-cyan-3 text-cyan-11\': query.slug === item,\n                              \'hover:text-slate-12\': query.slug !== item,\n                            },\n                          )}\n                        >\n                          {query.slug === item && (\n                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />\n                          )}\n                          <svg\n                            width="24"\n                            height="24"\n                            viewBox="0 0 24 24"\n                            fill="none"\n                            xmlns="http://www.w3.org/2000/svg"\n                          >\n                            <path\n                              d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                            <path\n                              d="M18 9.25H13.75V5"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                          </svg>\n                          {item}\n                        </span>\n                      </Link>\n                    ))}\n                </div>\n              </Collapsible.Content>\n            )}\n          </Collapsible.Root>\n        </nav>\n      </aside>\n    );\n  },\n);\n\nSidebar.displayName = \'Sidebar\';\n',
+        content: 'import { Logo } from \'./logo\';\nimport * as React from \'react\';\nimport classnames from \'classnames\';\nimport Link from \'next/link\';\nimport { Heading } from \'./heading\';\nimport { useRouter } from \'next/router\';\nimport * as Collapsible from \'@radix-ui/react-collapsible\';\n\ntype SidebarElement = React.ElementRef<\'aside\'>;\ntype RootProps = React.ComponentPropsWithoutRef<\'aside\'>;\n\ninterface SidebarProps extends RootProps {\n  navItems: string[];\n}\n\nexport const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(\n  ({ className, navItems, ...props }, forwardedRef) => {\n    const { query } = useRouter();\n\n    return (\n      <aside\n        ref={forwardedRef}\n        className="px-6 min-w-[275px] max-w-[275px] flex flex-col gap-4 border-r border-slate-6"\n        {...props}\n      >\n        <div className="h-[70px] flex items-center">\n          <Logo />\n        </div>\n\n        <nav className="flex flex-col gap-4">\n          <Collapsible.Root defaultOpen>\n            <Collapsible.Trigger\n              className={classnames(\'flex items-center gap-1\', {\n                \'cursor-default\': navItems && navItems.length === 0,\n              })}\n            >\n              <svg\n                className="text-slate-11"\n                width="24"\n                height="24"\n                viewBox="0 0 24 24"\n                fill="none"\n                xmlns="http://www.w3.org/2000/svg"\n              >\n                <path\n                  d="M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n                <path\n                  d="M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n              </svg>\n\n              <div className="flex items-center">\n                <Heading as="h3" color="white" size="2" weight="medium">\n                  All emails\n                </Heading>\n                {navItems && navItems.length > 0 && (\n                  <svg\n                    className="text-slate-11"\n                    width="24"\n                    height="24"\n                    viewBox="0 0 24 24"\n                    fill="none"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path\n                      d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"\n                      fill="currentColor"\n                    />\n                  </svg>\n                )}\n              </div>\n            </Collapsible.Trigger>\n\n            {navItems && navItems.length > 0 && (\n              <Collapsible.Content className="relative mt-3">\n                <div className="absolute left-2.5  w-px h-full bg-slate-6" />\n\n                <div className="py-2 flex flex-col gap-1.5 truncate">\n                  {navItems &&\n                    navItems.map((item) => (\n                      <Link key={item} href={`/preview/${item}`}>\n                        <span\n                          className={classnames(\n                            \'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 rounded-md text-slate-11\',\n                            {\n                              \'bg-cyan-3 text-cyan-11\': query.slug === item,\n                              \'hover:text-slate-12\': query.slug !== item,\n                            },\n                          )}\n                        >\n                          {query.slug === item && (\n                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />\n                          )}\n                          <svg\n                            width="24"\n                            height="24"\n                            viewBox="0 0 24 24"\n                            fill="none"\n                            xmlns="http://www.w3.org/2000/svg"\n                          >\n                            <path\n                              d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                            <path\n                              d="M18 9.25H13.75V5"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                          </svg>\n                          {item}\n                        </span>\n                      </Link>\n                    ))}\n                </div>\n              </Collapsible.Content>\n            )}\n          </Collapsible.Root>\n        </nav>\n      </aside>\n    );\n  },\n);\n\nSidebar.displayName = \'Sidebar\';\n',
     },
     {
         title: 'text.tsx',

package/dist/_preview/root.js

@@ -8,7 +8,7 @@ exports.root = [
     },
     {
         title: 'package.json',
-        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.2",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+        content: '{\n  "name": "react-email-preview",\n  "version": "0.0.4",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
     },
     {
         title: 'postcss.config.js',

package/dist/commands/dev.js

@@ -8,7 +8,7 @@ const check_directory_exist_1 = require("../utils/check-directory-exist");
 const components_1 = require("../_preview/components");
 const create_directory_1 = require("../utils/create-directory");
 const pages_1 = require("../_preview/pages");
-const contants_1 = require("../utils/contants");
+const constants_1 = require("../utils/constants");
 const root_1 = require("../_preview/root");
 const styles_1 = require("../_preview/styles");
 const utils_1 = require("../_preview/utils");
@@ -32,10 +32,10 @@ const dev = async () => {
 exports.dev = dev;
 const prepareFiles = async () => {
     const spinner = (0, ora_1.default)('Preparing React email files...').start();
-    const isFirstTime = !(0, check_directory_exist_1.checkDirectoryExist)(contants_1.REACT_EMAIL_ROOT);
+    const isFirstTime = !(0, check_directory_exist_1.checkDirectoryExist)(constants_1.REACT_EMAIL_ROOT);
     if (isFirstTime) {
-        await (0, create_directory_1.createDirectory)(contants_1.REACT_EMAIL_ROOT);
-        await (0, create_directory_1.createDirectory)(path_1.default.join(contants_1.REACT_EMAIL_ROOT, 'src'));
+        await (0, create_directory_1.createDirectory)(constants_1.REACT_EMAIL_ROOT);
+        await (0, create_directory_1.createDirectory)(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'src'));
         await Promise.all([
             createFilesAndDirectories(components_1.components, 'components'),
             createFilesAndDirectories(utils_1.utils, 'utils'),
@@ -51,7 +51,7 @@ const prepareFiles = async () => {
 };
 const checkForUpdates = async () => {
     const spinner = (0, ora_1.default)('Checking for updates...').start();
-    const reactEmailPkg = await fs_1.default.promises.readFile(path_1.default.join(contants_1.REACT_EMAIL_ROOT, 'package.json'), { encoding: 'utf8' });
+    const reactEmailPkg = await fs_1.default.promises.readFile(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'package.json'), { encoding: 'utf8' });
     const isUpToDate = JSON.parse(reactEmailPkg).version === getPreviewPkg().version;
     if (isUpToDate) {
         return spinner.stopAndPersist({
@@ -77,19 +77,19 @@ const updatePackage = async () => {
 };
 const generateEmailsPreview = async () => {
     const spinner = (0, ora_1.default)('Generating emails preview').start();
-    const hasEmailsDirectory = fs_1.default.existsSync(contants_1.CLIENT_EMAILS_PATH);
-    const hasPackageEmailsDirectory = fs_1.default.existsSync(contants_1.PACKAGE_EMAILS_PATH);
+    const hasEmailsDirectory = fs_1.default.existsSync(constants_1.CLIENT_EMAILS_PATH);
+    const hasPackageEmailsDirectory = fs_1.default.existsSync(constants_1.PACKAGE_EMAILS_PATH);
     if (hasEmailsDirectory) {
         if (hasPackageEmailsDirectory) {
-            await fs_1.default.promises.rmdir(contants_1.PACKAGE_EMAILS_PATH, { recursive: true });
+            await fs_1.default.promises.rmdir(constants_1.PACKAGE_EMAILS_PATH, { recursive: true });
         }
-        await (0, cpy_1.default)(contants_1.CLIENT_EMAILS_PATH, contants_1.PACKAGE_EMAILS_PATH);
+        await (0, cpy_1.default)(constants_1.CLIENT_EMAILS_PATH, constants_1.PACKAGE_EMAILS_PATH);
         return spinner.stopAndPersist({
             symbol: log_symbols_1.default.success,
             text: 'Emails preview generated',
         });
     }
-    fs_1.default.promises.mkdir(contants_1.CLIENT_EMAILS_PATH);
+    fs_1.default.promises.mkdir(constants_1.CLIENT_EMAILS_PATH);
     return spinner.stopAndPersist({
         symbol: log_symbols_1.default.warning,
         text: 'Emails preview directory is empty',
@@ -97,7 +97,7 @@ const generateEmailsPreview = async () => {
 };
 const installDependencies = async () => {
     const spinner = (0, ora_1.default)('Installing dependencies...').start();
-    shelljs_1.default.cd(path_1.default.join(contants_1.REACT_EMAIL_ROOT));
+    shelljs_1.default.cd(path_1.default.join(constants_1.REACT_EMAIL_ROOT));
     shelljs_1.default.exec('yarn', { silent: true });
     spinner.stopAndPersist({
         symbol: log_symbols_1.default.success,
@@ -106,17 +106,17 @@ const installDependencies = async () => {
 };
 const createFilesAndDirectories = async (arr, dir) => {
     if (dir) {
-        await (0, create_directory_1.createDirectory)(path_1.default.join(contants_1.REACT_EMAIL_ROOT, 'src', dir));
+        await (0, create_directory_1.createDirectory)(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'src', dir));
     }
     const list = arr.map(async ({ content, title, dir: dirName }) => {
         if (dirName && dir) {
-            await (0, create_directory_1.createDirectory)(path_1.default.join(contants_1.REACT_EMAIL_ROOT, 'src', dir, dirName));
+            await (0, create_directory_1.createDirectory)(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'src', dir, dirName));
         }
         const pathDir = dir
             ? dirName
-                ? path_1.default.join(contants_1.REACT_EMAIL_ROOT, 'src', dir, dirName, title)
-                : path_1.default.join(contants_1.REACT_EMAIL_ROOT, 'src', dir, title)
-            : path_1.default.join(contants_1.REACT_EMAIL_ROOT, title);
+                ? path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'src', dir, dirName, title)
+                : path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'src', dir, title)
+            : path_1.default.join(constants_1.REACT_EMAIL_ROOT, title);
         await fs_1.default.promises.writeFile(pathDir, content);
     });
     await Promise.all(list);
@@ -131,7 +131,7 @@ const syncPkg = async () => {
             ...clientPkg.dependencies,
         },
     };
-    await fs_1.default.promises.writeFile(path_1.default.join(contants_1.REACT_EMAIL_ROOT, 'package.json'), JSON.stringify(pkg));
+    await fs_1.default.promises.writeFile(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'package.json'), JSON.stringify(pkg));
 };
 const getPreviewPkg = () => {
     const [previewPkg] = root_1.root.filter((pkg) => pkg.title === 'package.json');

package/dist/commands/exportTemplates.d.ts

@@ -0,0 +1 @@
+export declare const exportTemplates: (outDir: string, pretty: boolean) => Promise<void>;

package/dist/commands/exportTemplates.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportTemplates = void 0;
+const glob_1 = require("glob");
+const esbuild_1 = __importDefault(require("esbuild"));
+const render_1 = require("@react-email/render");
+const fs_1 = require("fs");
+/*
+  This first builds all the templates using esbuild and then puts the output in the `.js`
+  files. Then these `.js` files are imported dynamically and rendered to `.html` files
+  using the `render` function.
+ */
+const exportTemplates = async (outDir, pretty) => {
+    const allTemplates = glob_1.glob.sync('emails/*.{tsx,jsx}');
+    esbuild_1.default.buildSync({
+        bundle: true,
+        entryPoints: allTemplates,
+        platform: 'node',
+        write: true,
+        outdir: outDir,
+    });
+    const allBuiltTemplates = glob_1.glob.sync(`${outDir}/*.js`, {
+        absolute: true,
+    });
+    for (const template of allBuiltTemplates) {
+        const component = await Promise.resolve().then(() => __importStar(require(template)));
+        const rendered = (0, render_1.render)(component.default(), { pretty });
+        const htmlPath = template.replace('.js', '.html');
+        (0, fs_1.writeFileSync)(htmlPath, rendered);
+        (0, fs_1.unlinkSync)(template);
+    }
+};
+exports.exportTemplates = exportTemplates;

package/dist/index.js

@@ -2,14 +2,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const extra_typings_1 = require("@commander-js/extra-typings");
-const contants_1 = require("./utils/contants");
+const constants_1 = require("./utils/constants");
 const dev_1 = require("./commands/dev");
+const exportTemplates_1 = require("./commands/exportTemplates");
 extra_typings_1.program
-    .name(contants_1.PACKAGE_NAME)
+    .name(constants_1.PACKAGE_NAME)
     .description('A live preview of your emails right in your browser')
     .version('0.0.0');
 extra_typings_1.program
     .command('dev')
     .description('Starts the application in development mode')
     .action(dev_1.dev);
+extra_typings_1.program
+    .command('export')
+    .description('Build the templates to the `out` directory')
+    .option('--outDir <path>', 'Output directory', 'out')
+    .option('-p, --pretty', 'Pretty print the output', false)
+    .action(({ outDir, pretty }) => (0, exportTemplates_1.exportTemplates)(outDir, pretty));
 extra_typings_1.program.parse();

package/dist/utils/watcher.js

@@ -5,18 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.watcher = void 0;
 const chokidar_1 = __importDefault(require("chokidar"));
-const contants_1 = require("./contants");
+const constants_1 = require("./constants");
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const cpy_1 = __importDefault(require("cpy"));
 const watcher = () => chokidar_1.default
-    .watch(contants_1.CURRENT_PATH, { ignoreInitial: true, cwd: contants_1.CURRENT_PATH })
+    .watch(constants_1.CURRENT_PATH, { ignoreInitial: true, cwd: constants_1.CURRENT_PATH })
     .on('all', async (event, filename) => {
-    if (event === contants_1.EVENT_FILE_DELETED) {
-        await fs_1.default.promises.rm(path_1.default.join(contants_1.REACT_EMAIL_ROOT, filename));
+    if (event === constants_1.EVENT_FILE_DELETED) {
+        await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, filename));
     }
     else {
-        await (0, cpy_1.default)(contants_1.CLIENT_EMAILS_PATH, contants_1.PACKAGE_EMAILS_PATH);
+        await (0, cpy_1.default)(constants_1.CLIENT_EMAILS_PATH, constants_1.PACKAGE_EMAILS_PATH);
     }
 });
 exports.watcher = watcher;

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "react-email",
-  "version": "1.2.1-canary.3",
+  "version": "1.3.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
   },
   "types": "./dist/index.d.ts",
-  "engines": {
-    "node": ">=14.16"
-  },
   "scripts": {
     "build": "tsc",
     "prepare": "npm run build",
@@ -19,11 +16,25 @@
     "clean": "rm -rf dist"
   },
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zenorocha/react-email.git",
+    "directory": "packages/react-email"
+  },
+  "keywords": [
+    "react",
+    "email"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
     "@commander-js/extra-typings": "9.4.1",
+    "@react-email/render": "*",
     "chokidar": "3.5.3",
     "commander": "9.4.1",
     "cpy": "8.1.2",
+    "esbuild": "0.16.4",
     "glob": "8.0.3",
     "log-symbols": "4.1.0",
     "ora": "5.4.1",
@@ -36,4 +47,4 @@
     "prettier": "2.7.1",
     "ts-node": "10.9.1"
   }
-}
+}

package/preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email-preview",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "The React Email preview application",
   "license": "MIT",
   "scripts": {
@@ -11,6 +11,9 @@
     "format:check": "prettier --check \"**/*.{ts,tsx,md}\"",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
     "@next/font": "13.0.4",
     "@radix-ui/colors": "0.1.8",
@@ -34,4 +37,4 @@
     "tailwindcss": "3.2.4",
     "typescript": "4.9.3"
   }
-}
+}

package/preview/src/pages/preview/[slug].tsx

@@ -1,11 +1,12 @@
+import * as React from 'react';
 import { promises as fs } from 'fs';
 import path from 'path';
 import { render } from '@react-email/render';
 import { GetStaticPaths } from 'next';
 import { Layout } from '../../components/layout';
-import * as React from 'react';
 import { Code } from '../../components';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 
 interface PreviewProps {}
 
@@ -56,15 +57,34 @@ const Preview: React.FC<Readonly<PreviewProps>> = ({
   reactMarkup,
   slug,
 }: any) => {
-  const [viewMode, setViewMode] = React.useState('desktop');
   const title = `${slug} — React Email`;
+  const router = useRouter();
+  const [viewMode, setViewMode] = React.useState('desktop');
+
+  const handleViewMode = (mode: string) => {
+    setViewMode(mode);
+
+    router.push({
+      pathname: router.pathname,
+      query: {
+        ...router.query,
+        view: mode,
+      },
+    });
+  };
+
+  React.useEffect(() => {
+    if (router.query.view === 'source' || router.query.view === 'desktop') {
+      setViewMode(router.query.view);
+    }
+  }, [router.query.view]);
 
   return (
     <Layout
       navItems={navItems}
       title={slug}
       viewMode={viewMode}
-      setViewMode={setViewMode}
+      setViewMode={handleViewMode}
     >
       <Head>
         <title>{title}</title>

package/source/_preview/components.ts

@@ -32,7 +32,7 @@ export const components = [
   {
     title: 'sidebar.tsx',
     content:
-      'import { Logo } from \'./logo\';\nimport * as React from \'react\';\nimport classnames from \'classnames\';\nimport Link from \'next/link\';\nimport { Heading } from \'./heading\';\nimport { useRouter } from \'next/router\';\nimport * as Collapsible from \'@radix-ui/react-collapsible\';\n\ntype SidebarElement = React.ElementRef<\'aside\'>;\ntype RootProps = React.ComponentPropsWithoutRef<\'aside\'>;\n\ninterface SidebarProps extends RootProps {\n  navItems: string[];\n}\n\nexport const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(\n  ({ className, navItems, ...props }, forwardedRef) => {\n    const { query } = useRouter();\n\n    return (\n      <aside\n        ref={forwardedRef}\n        className="px-6 min-w-[275px] max-w-[275px] flex flex-col gap-4 border-r border-slate-6"\n        {...props}\n      >\n        <div className="h-[70px] flex items-center">\n          <Logo />\n        </div>\n\n        <nav className="flex flex-col gap-4">\n          <Collapsible.Root defaultOpen>\n            <Collapsible.Trigger\n              className={classnames(\'flex items-center gap-1\', {\n                \'cursor-default\': navItems && navItems.length === 0,\n              })}\n            >\n              <svg\n                className="text-slate-11"\n                width="24"\n                height="24"\n                viewBox="0 0 24 24"\n                fill="none"\n                xmlns="http://www.w3.org/2000/svg"\n              >\n                <path\n                  d="M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n                <path\n                  d="M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n              </svg>\n\n              <div className="flex items-center">\n                <Heading as="h3" color="white" size="2" weight="medium">\n                  All emails\n                </Heading>\n                {navItems && navItems.length > 0 && (\n                  <svg\n                    className="text-slate-11"\n                    width="24"\n                    height="24"\n                    viewBox="0 0 24 24"\n                    fill="none"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path\n                      d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"\n                      fill="currentColor"\n                    />\n                  </svg>\n                )}\n              </div>\n            </Collapsible.Trigger>\n\n            {navItems && navItems.length > 0 && (\n              <Collapsible.Content className="relative mt-3">\n                <div className="absolute left-2.5  w-px h-full bg-slate-6" />\n\n                <div className="py-2 flex flex-col gap-1.5 truncate">\n                  {navItems &&\n                    navItems.map((item) => (\n                      <Link key={item} href={`/preview/${item}`}>\n                        <span\n                          className={classnames(\n                            \'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 pr-2 rounded-md text-slate-11\',\n                            {\n                              \'bg-cyan-3 text-cyan-11\': query.slug === item,\n                              \'hover:text-slate-12\': query.slug !== item,\n                            },\n                          )}\n                        >\n                          {query.slug === item && (\n                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />\n                          )}\n                          <svg\n                            width="24"\n                            height="24"\n                            viewBox="0 0 24 24"\n                            fill="none"\n                            xmlns="http://www.w3.org/2000/svg"\n                          >\n                            <path\n                              d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                            <path\n                              d="M18 9.25H13.75V5"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                          </svg>\n                          {item}\n                        </span>\n                      </Link>\n                    ))}\n                </div>\n              </Collapsible.Content>\n            )}\n          </Collapsible.Root>\n        </nav>\n      </aside>\n    );\n  },\n);\n\nSidebar.displayName = \'Sidebar\';\n',
+      'import { Logo } from \'./logo\';\nimport * as React from \'react\';\nimport classnames from \'classnames\';\nimport Link from \'next/link\';\nimport { Heading } from \'./heading\';\nimport { useRouter } from \'next/router\';\nimport * as Collapsible from \'@radix-ui/react-collapsible\';\n\ntype SidebarElement = React.ElementRef<\'aside\'>;\ntype RootProps = React.ComponentPropsWithoutRef<\'aside\'>;\n\ninterface SidebarProps extends RootProps {\n  navItems: string[];\n}\n\nexport const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(\n  ({ className, navItems, ...props }, forwardedRef) => {\n    const { query } = useRouter();\n\n    return (\n      <aside\n        ref={forwardedRef}\n        className="px-6 min-w-[275px] max-w-[275px] flex flex-col gap-4 border-r border-slate-6"\n        {...props}\n      >\n        <div className="h-[70px] flex items-center">\n          <Logo />\n        </div>\n\n        <nav className="flex flex-col gap-4">\n          <Collapsible.Root defaultOpen>\n            <Collapsible.Trigger\n              className={classnames(\'flex items-center gap-1\', {\n                \'cursor-default\': navItems && navItems.length === 0,\n              })}\n            >\n              <svg\n                className="text-slate-11"\n                width="24"\n                height="24"\n                viewBox="0 0 24 24"\n                fill="none"\n                xmlns="http://www.w3.org/2000/svg"\n              >\n                <path\n                  d="M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n                <path\n                  d="M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11"\n                  stroke="currentColor"\n                  strokeWidth="1.5"\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                />\n              </svg>\n\n              <div className="flex items-center">\n                <Heading as="h3" color="white" size="2" weight="medium">\n                  All emails\n                </Heading>\n                {navItems && navItems.length > 0 && (\n                  <svg\n                    className="text-slate-11"\n                    width="24"\n                    height="24"\n                    viewBox="0 0 24 24"\n                    fill="none"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path\n                      d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"\n                      fill="currentColor"\n                    />\n                  </svg>\n                )}\n              </div>\n            </Collapsible.Trigger>\n\n            {navItems && navItems.length > 0 && (\n              <Collapsible.Content className="relative mt-3">\n                <div className="absolute left-2.5  w-px h-full bg-slate-6" />\n\n                <div className="py-2 flex flex-col gap-1.5 truncate">\n                  {navItems &&\n                    navItems.map((item) => (\n                      <Link key={item} href={`/preview/${item}`}>\n                        <span\n                          className={classnames(\n                            \'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 rounded-md text-slate-11\',\n                            {\n                              \'bg-cyan-3 text-cyan-11\': query.slug === item,\n                              \'hover:text-slate-12\': query.slug !== item,\n                            },\n                          )}\n                        >\n                          {query.slug === item && (\n                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />\n                          )}\n                          <svg\n                            width="24"\n                            height="24"\n                            viewBox="0 0 24 24"\n                            fill="none"\n                            xmlns="http://www.w3.org/2000/svg"\n                          >\n                            <path\n                              d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                            <path\n                              d="M18 9.25H13.75V5"\n                              stroke="currentColor"\n                              strokeOpacity="0.927"\n                              strokeWidth="1.5"\n                              strokeLinecap="round"\n                              strokeLinejoin="round"\n                            />\n                          </svg>\n                          {item}\n                        </span>\n                      </Link>\n                    ))}\n                </div>\n              </Collapsible.Content>\n            )}\n          </Collapsible.Root>\n        </nav>\n      </aside>\n    );\n  },\n);\n\nSidebar.displayName = \'Sidebar\';\n',
   },
   {
     title: 'text.tsx',

package/source/_preview/root.ts

@@ -7,7 +7,7 @@ export const root = [
   {
     title: 'package.json',
     content:
-      '{\n  "name": "react-email-preview",\n  "version": "0.0.2",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
+      '{\n  "name": "react-email-preview",\n  "version": "0.0.4",\n  "description": "The React Email preview application",\n  "license": "MIT",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "lint": "next lint",\n    "format:check": "prettier --check \\"**/*.{ts,tsx,md}\\"",\n    "format": "prettier --write \\"**/*.{ts,tsx,md}\\""\n  },\n  "dependencies": {\n    "@next/font": "13.0.4",\n    "@radix-ui/colors": "0.1.8",\n    "@radix-ui/react-collapsible": "1.0.1",\n    "@radix-ui/react-slot": "1.0.1",\n    "@radix-ui/react-toggle-group": "1.0.1",\n    "@react-email/render": "0.0.2",\n    "classnames": "2.3.2",\n    "next": "13.0.4",\n    "prism-react-renderer": "1.3.5",\n    "react": "18.2.0",\n    "react-dom": "18.2.0"\n  },\n  "devDependencies": {\n    "@types/classnames": "2.3.1",\n    "@types/node": "18.11.9",\n    "@types/react": "18.0.25",\n    "@types/react-dom": "18.0.9",\n    "autoprefixer": "10.4.13",\n    "postcss": "8.4.19",\n    "tailwindcss": "3.2.4",\n    "typescript": "4.9.3"\n  }\n}\n',
   },
   {
     title: 'postcss.config.js',

package/source/commands/dev.ts

@@ -6,7 +6,7 @@ import {
   CLIENT_EMAILS_PATH,
   PACKAGE_EMAILS_PATH,
   REACT_EMAIL_ROOT,
-} from '../utils/contants';
+} from '../utils/constants';
 import { root } from '../_preview/root';
 import { styles } from '../_preview/styles';
 import { utils } from '../_preview/utils';

package/source/commands/exportTemplates.ts

@@ -0,0 +1,32 @@
+import { glob } from 'glob';
+import esbuild from 'esbuild';
+import { render } from '@react-email/render';
+import { unlinkSync, writeFileSync } from 'fs';
+
+/*
+  This first builds all the templates using esbuild and then puts the output in the `.js`
+  files. Then these `.js` files are imported dynamically and rendered to `.html` files
+  using the `render` function.
+ */
+export const exportTemplates = async (outDir: string, pretty: boolean) => {
+  const allTemplates = glob.sync('emails/*.{tsx,jsx}');
+  esbuild.buildSync({
+    bundle: true,
+    entryPoints: allTemplates,
+    platform: 'node',
+    write: true,
+    outdir: outDir,
+  });
+
+  const allBuiltTemplates = glob.sync(`${outDir}/*.js`, {
+    absolute: true,
+  });
+
+  for (const template of allBuiltTemplates) {
+    const component = await import(template);
+    const rendered = render(component.default(), { pretty });
+    const htmlPath = template.replace('.js', '.html');
+    writeFileSync(htmlPath, rendered);
+    unlinkSync(template);
+  }
+};

package/source/index.ts

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 import { program } from '@commander-js/extra-typings';
-import { PACKAGE_NAME } from './utils/contants';
+import { PACKAGE_NAME } from './utils/constants';
 import { dev } from './commands/dev';
+import { exportTemplates } from './commands/exportTemplates';
 
 program
   .name(PACKAGE_NAME)
@@ -13,4 +14,11 @@ program
   .description('Starts the application in development mode')
   .action(dev);
 
+program
+  .command('export')
+  .description('Build the templates to the `out` directory')
+  .option('--outDir <path>', 'Output directory', 'out')
+  .option('-p, --pretty', 'Pretty print the output', false)
+  .action(({ outDir, pretty }) => exportTemplates(outDir, pretty));
+
 program.parse();

package/source/utils/watcher.ts

@@ -5,7 +5,7 @@ import {
   EVENT_FILE_DELETED,
   PACKAGE_EMAILS_PATH,
   REACT_EMAIL_ROOT,
-} from './contants';
+} from './constants';
 import fs from 'fs';
 import path from 'path';
 import copy from 'cpy';

package/dist/_preview/package.d.ts

@@ -1,36 +0,0 @@
-export declare const previewPkg: {
-  name: string;
-  version: string;
-  description: string;
-  license: string;
-  scripts: {
-    'dev': string;
-    'build': string;
-    'start': string;
-    'lint': string;
-    'format:check': string;
-    'format': string;
-  };
-  dependencies: {
-    '@next/font': string;
-    '@radix-ui/colors': string;
-    '@radix-ui/react-collapsible': string;
-    '@radix-ui/react-slot': string;
-    '@radix-ui/react-toggle-group': string;
-    'classnames': string;
-    'next': string;
-    'prism-react-renderer': string;
-    'react': string;
-    'react-dom': string;
-  };
-  devDependencies: {
-    '@types/classnames': string;
-    '@types/node': string;
-    '@types/react': string;
-    '@types/react-dom': string;
-    'autoprefixer': string;
-    'postcss': string;
-    'tailwindcss': string;
-    'typescript': string;
-  };
-};

package/dist/_preview/package.js

@@ -1,39 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.previewPkg = void 0;
-exports.previewPkg = {
-  name: 'react-email-preview',
-  version: '0.0.1',
-  description: 'The React Email preview application',
-  license: 'MIT',
-  scripts: {
-    'dev': 'next dev',
-    'build': 'next build',
-    'start': 'next start',
-    'lint': 'next lint',
-    'format:check': 'prettier --check "**/*.{ts,tsx,md}"',
-    'format': 'prettier --write "**/*.{ts,tsx,md}"',
-  },
-  dependencies: {
-    '@next/font': '13.0.4',
-    '@radix-ui/colors': '0.1.8',
-    '@radix-ui/react-collapsible': '1.0.1',
-    '@radix-ui/react-slot': '1.0.1',
-    '@radix-ui/react-toggle-group': '1.0.1',
-    'classnames': '2.3.2',
-    'next': '13.0.4',
-    'prism-react-renderer': '1.3.5',
-    'react': '18.2.0',
-    'react-dom': '18.2.0',
-  },
-  devDependencies: {
-    '@types/classnames': '2.3.1',
-    '@types/node': '18.11.9',
-    '@types/react': '18.0.25',
-    '@types/react-dom': '18.0.9',
-    'autoprefixer': '10.4.13',
-    'postcss': '8.4.19',
-    'tailwindcss': '3.2.4',
-    'typescript': '4.9.3',
-  },
-};

package/dist/utils/copy-files.d.ts

@@ -1 +0,0 @@
-export declare const copyFiles: () => Promise<void>;

package/dist/utils/copy-files.js

@@ -1,110 +0,0 @@
-'use strict';
-var __importDefault =
-  (this && this.__importDefault) ||
-  function (mod) {
-    return mod && mod.__esModule ? mod : { default: mod };
-  };
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.copyFiles = void 0;
-const path_1 = __importDefault(require('path'));
-const cpy_1 = __importDefault(require('cpy'));
-const contants_1 = require('./contants');
-const copyFiles = async () => {
-  try {
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'pages',
-        'preview',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages', 'preview'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'pages',
-        '_app.tsx',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'pages',
-        '_document.tsx',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'pages',
-        'index.tsx',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'pages'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'styles',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'styles'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'src',
-        'components',
-      ),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'components'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'src', 'utils'),
-      path_1.default.join(contants_1.DOT_EMAIL_DEV, 'src', 'utils'),
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'next-env.d.ts',
-      ),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(contants_1.NODE_MODULES_PREVIEW_PATH, 'package.json'),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'postcss.config.js',
-      ),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'tailwind.config.js',
-      ),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      path_1.default.join(
-        contants_1.NODE_MODULES_PREVIEW_PATH,
-        'tsconfig.json',
-      ),
-      contants_1.DOT_EMAIL_DEV,
-    );
-    await (0, cpy_1.default)(
-      contants_1.CLIENT_EMAILS_PATH,
-      contants_1.PACKAGE_EMAILS_PATH,
-    );
-  } catch (error) {
-    console.error({ error });
-  }
-};
-exports.copyFiles = copyFiles;