react-email 1.0.11 → 1.1.1

package/preview/src/components/layout.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { Topbar } from './topbar';
 import { Sidebar } from './sidebar';
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import classnames from 'classnames';
 
 type LayoutElement = React.ElementRef<'div'>;
 type RootProps = React.ComponentPropsWithoutRef<'div'>;
@@ -23,48 +21,15 @@ export const Layout = React.forwardRef<LayoutElement, Readonly<LayoutProps>>(
         <div className="flex justify-between h-screen">
           <Sidebar navItems={navItems} />
           <main className="w-full bg-slate-2">
-            {title && <Topbar title={title} />}
-            <div className="pt-16 relative h-[calc(100vh_-_70px)] overflow-auto">
-              {setViewMode && (
-                <ToggleGroup.Root
-                  className="items-center bg-slate-2 p-1.5 flex gap-1 border border-slate-6 rounded-md absolute top-4 right-4"
-                  type="single"
-                  value={viewMode}
-                  aria-label="View mode"
-                  onValueChange={(value) => {
-                    if (!value) {
-                      return setViewMode('desktop');
-                    }
-                    setViewMode(value);
-                  }}
-                >
-                  <ToggleGroup.Item
-                    className={classnames(
-                      'text-sm text-slate-11 rounded px-1.5 py-0.5',
-                      {
-                        'text-slate-12 bg-slate-3 font-medium':
-                          viewMode === 'desktop',
-                      },
-                    )}
-                    value="desktop"
-                  >
-                    Desktop
-                  </ToggleGroup.Item>
-                  <ToggleGroup.Item
-                    className={classnames(
-                      'text-sm text-slate-11 rounded px-1.5 py-0.5',
-                      {
-                        'text-slate-12 bg-slate-3 font-medium':
-                          viewMode === 'source',
-                      },
-                    )}
-                    value="source"
-                  >
-                    Source
-                  </ToggleGroup.Item>
-                </ToggleGroup.Root>
-              )}
-              <div className="max-w-[600px] mx-auto">{children}</div>
+            {title && (
+              <Topbar
+                title={title}
+                viewMode={viewMode}
+                setViewMode={setViewMode}
+              />
+            )}
+            <div className="relative h-[calc(100vh_-_70px)] overflow-auto">
+              <div className="mx-auto">{children}</div>
             </div>
           </main>
         </div>

package/preview/src/components/sidebar.tsx

@@ -20,20 +20,20 @@ export const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(
     return (
       <aside
         ref={forwardedRef}
-        className="px-6 w-[275px] flex flex-col gap-4 border-r border-slate-6"
+        className="px-6 min-w-[275px] max-w-[275px] flex flex-col gap-4 border-r border-slate-6"
         {...props}
       >
         <div className="h-[70px] flex items-center">
           <Logo />
         </div>
 
-        <Heading as="h2" color="gray" size="1" weight="medium">
-          Email
-        </Heading>
-
         <nav className="flex flex-col gap-4">
           <Collapsible.Root defaultOpen>
-            <Collapsible.Trigger className="flex items-center gap-1 w-full">
+            <Collapsible.Trigger
+              className={classnames('flex items-center gap-1', {
+                'cursor-default': navItems && navItems.length === 0,
+              })}
+            >
               <svg
                 className="text-slate-11"
                 width="24"
@@ -62,71 +62,75 @@ export const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(
                 <Heading as="h3" color="white" size="2" weight="medium">
                   All emails
                 </Heading>
-                <svg
-                  className="text-slate-11"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"
-                    fill="currentColor"
-                  />
-                </svg>
+                {navItems && navItems.length > 0 && (
+                  <svg
+                    className="text-slate-11"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 15L8.5359 9.75L15.4641 9.75L12 15Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                )}
               </div>
             </Collapsible.Trigger>
 
-            <Collapsible.Content className="relative mt-3">
-              <div className="absolute left-2.5  w-px h-full bg-slate-6" />
+            {navItems && navItems.length > 0 && (
+              <Collapsible.Content className="relative mt-3">
+                <div className="absolute left-2.5  w-px h-full bg-slate-6" />
 
-              <div className="py-2 flex flex-col gap-1.5">
-                {navItems &&
-                  navItems.map((item) => (
-                    <Link key={item} href={`/preview/${item}`}>
-                      <span
-                        className={classnames(
-                          'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 pr-2 rounded-md text-slate-11',
-                          {
-                            'bg-cyan-3 text-cyan-11': query.slug === item,
-                            'hover:text-slate-12': query.slug !== item,
-                          },
-                        )}
-                      >
-                        {query.slug === item && (
-                          <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />
-                        )}
-                        <svg
-                          width="24"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
+                <div className="py-2 flex flex-col gap-1.5 truncate">
+                  {navItems &&
+                    navItems.map((item) => (
+                      <Link key={item} href={`/preview/${item}`}>
+                        <span
+                          className={classnames(
+                            'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 pr-2 rounded-md text-slate-11',
+                            {
+                              'bg-cyan-3 text-cyan-11': query.slug === item,
+                              'hover:text-slate-12': query.slug !== item,
+                            },
+                          )}
                         >
-                          <path
-                            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"
-                            stroke="currentColor"
-                            strokeOpacity="0.927"
-                            strokeWidth="1.5"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M18 9.25H13.75V5"
-                            stroke="currentColor"
-                            strokeOpacity="0.927"
-                            strokeWidth="1.5"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
-                        {item}
-                      </span>
-                    </Link>
-                  ))}
-              </div>
-            </Collapsible.Content>
+                          {query.slug === item && (
+                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />
+                          )}
+                          <svg
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              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"
+                              stroke="currentColor"
+                              strokeOpacity="0.927"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M18 9.25H13.75V5"
+                              stroke="currentColor"
+                              strokeOpacity="0.927"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                          {item}
+                        </span>
+                      </Link>
+                    ))}
+                </div>
+              </Collapsible.Content>
+            )}
           </Collapsible.Root>
         </nav>
       </aside>

package/preview/src/components/topbar.tsx

@@ -2,16 +2,19 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { Heading } from './heading';
 import { Text } from './text';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
 
 type TopbarElement = React.ElementRef<'header'>;
 type RootProps = React.ComponentPropsWithoutRef<'header'>;
 
 interface TopbarProps extends RootProps {
   title: string;
+  viewMode?: string;
+  setViewMode?: (viewMode: string) => void;
 }
 
 export const Topbar = React.forwardRef<TopbarElement, Readonly<TopbarProps>>(
-  ({ className, title, ...props }, forwardedRef) => {
+  ({ className, title, viewMode, setViewMode, ...props }, forwardedRef) => {
     return (
       <header
         ref={forwardedRef}
@@ -36,7 +39,7 @@ export const Topbar = React.forwardRef<TopbarElement, Readonly<TopbarProps>>(
             <path
               d="M10.75 8.75L14.25 12L10.75 15.25"
               stroke="currentColor"
-              stroke-opacity="0.615"
+              strokeOpacity="0.615"
               strokeWidth="1.5"
               strokeLinecap="round"
               strokeLinejoin="round"
@@ -47,6 +50,45 @@ export const Topbar = React.forwardRef<TopbarElement, Readonly<TopbarProps>>(
             {title}
           </Heading>
         </div>
+
+        {setViewMode && (
+          <ToggleGroup.Root
+            className="items-center bg-slate-2 p-1.5 flex gap-1 border border-slate-6 rounded-md absolute top-4 right-4"
+            type="single"
+            value={viewMode}
+            aria-label="View mode"
+            onValueChange={(value) => {
+              if (!value) {
+                return setViewMode('desktop');
+              }
+              setViewMode(value);
+            }}
+          >
+            <ToggleGroup.Item
+              className={classnames(
+                'text-sm text-slate-11 rounded px-1.5 py-0.5',
+                {
+                  'text-slate-12 bg-slate-3 font-medium':
+                    viewMode === 'desktop',
+                },
+              )}
+              value="desktop"
+            >
+              Desktop
+            </ToggleGroup.Item>
+            <ToggleGroup.Item
+              className={classnames(
+                'text-sm text-slate-11 rounded px-1.5 py-0.5',
+                {
+                  'text-slate-12 bg-slate-3 font-medium': viewMode === 'source',
+                },
+              )}
+              value="source"
+            >
+              Source
+            </ToggleGroup.Item>
+          </ToggleGroup.Root>
+        )}
       </header>
     );
   },

package/preview/src/pages/_app.tsx

@@ -14,12 +14,6 @@ function MyApp({ Component, pageProps }: AppProps) {
     <div className={classnames(inter.variable, 'font-sans')}>
       <Head>
         <title>React Email</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
-          rel="stylesheet"
-        />
       </Head>
       <Component {...pageProps} />
     </div>

package/preview/src/pages/index.tsx

@@ -1,7 +1,8 @@
 import { promises as fs } from 'fs';
 import path from 'path';
-import { Heading } from '../components';
+import { Button, Heading, Text } from '../components';
 import { Layout } from '../components/layout';
+import Link from 'next/link';
 
 interface HomeProps {}
 
@@ -18,17 +19,31 @@ const getEmails = async () => {
 export async function getStaticProps({ params }) {
   try {
     const emails = await getEmails();
-    return emails ? { props: { navItems: emails } } : { notFound: true };
+    return emails
+      ? { props: { navItems: emails } }
+      : { props: { navItems: [] } };
   } catch (error) {
     console.error(error);
-    return { notFound: true };
+    return { props: { navItems: [] } };
   }
 }
 
 const Home: React.FC<Readonly<HomeProps>> = ({ navItems }: any) => {
   return (
     <Layout navItems={navItems}>
-      <Heading>Hi</Heading>
+      <div className="max-w-md border border-slate-6 mx-auto mt-56 rounded-md p-8">
+        <Heading as="h2" weight="medium">
+          Welcome to the React Email preview!
+        </Heading>
+        <Text as="p" className="mt-2 mb-4">
+          To start developing your next email template, you can create a{' '}
+          <code>.jsx</code> or <code>.tsx</code> file under the "emails" folder.
+        </Text>
+
+        <Button asChild>
+          <Link href="https://react.email/docs">Check the docs</Link>
+        </Button>
+      </div>
     </Layout>
   );
 };

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

@@ -5,6 +5,7 @@ import { GetStaticPaths } from 'next';
 import { Layout } from '../../components/layout';
 import * as React from 'react';
 import { Code } from '../../components';
+import Head from 'next/head';
 
 interface PreviewProps {}
 
@@ -48,6 +49,7 @@ const Preview: React.FC<Readonly<PreviewProps>> = ({
   slug,
 }: any) => {
   const [viewMode, setViewMode] = React.useState('desktop');
+  const title = `${slug} — React Email`;
 
   return (
     <Layout
@@ -56,10 +58,19 @@ const Preview: React.FC<Readonly<PreviewProps>> = ({
       viewMode={viewMode}
       setViewMode={setViewMode}
     >
+      <Head>
+        <title>{title}</title>
+      </Head>
       {viewMode === 'desktop' ? (
-        <iframe srcDoc={markup} width="600" height="800" frameBorder="0" />
+        <iframe
+          srcDoc={markup}
+          frameBorder="0"
+          className="w-full h-[calc(100vh_-_70px)]"
+        />
       ) : (
-        <Code>{markup}</Code>
+        <div className="max-w-[864px] mx-auto py-10">
+          <Code>{markup}</Code>
+        </div>
       )}
     </Layout>
   );

package/scripts/prepare-preview.ts

@@ -0,0 +1,177 @@
+import fs from 'fs';
+import path from 'path';
+
+const preparePreview = async () => {
+  Promise.all([
+    prepareRoot(),
+    prepareComponents(),
+    prepareStyles(),
+    prepareUtils(),
+    preparePages(),
+  ]);
+};
+
+const prepareRoot = async () => {
+  try {
+    const rootFiles = await fs.promises.readdir(path.join('preview'));
+    const files = rootFiles
+      .filter(
+        (file) => !['.next', 'yarn.lock', 'src', 'node_modules'].includes(file),
+      )
+      .map(async (rootFile) => {
+        return {
+          title: rootFile,
+          content: await fs.promises.readFile(path.join('preview', rootFile), {
+            encoding: 'utf-8',
+          }),
+        };
+      });
+
+    const componentFiles = await Promise.all(files);
+    const data = `export const root = ${JSON.stringify(componentFiles)}`;
+    await fs.promises.writeFile(
+      path.join('source', '_preview', 'root.ts'),
+      data,
+    );
+  } catch (error) {
+    console.error({ error });
+  }
+};
+
+const prepareComponents = async () => {
+  try {
+    const components = await fs.promises.readdir(
+      path.join('preview', 'src', 'components'),
+    );
+
+    const files = components.map(async (component) => {
+      return {
+        title: component,
+        content: await fs.promises.readFile(
+          path.join('preview', 'src', 'components', component),
+          { encoding: 'utf-8' },
+        ),
+      };
+    });
+
+    const componentFiles = await Promise.all(files);
+    const data = `export const components = ${JSON.stringify(componentFiles)}`;
+
+    await fs.promises.writeFile(
+      path.join('source', '_preview', 'components.ts'),
+      data,
+    );
+  } catch (error) {
+    console.error({ error });
+  }
+};
+
+const prepareStyles = async () => {
+  try {
+    const styles = await fs.promises.readdir(
+      path.join('preview', 'src', 'styles'),
+    );
+
+    const files = styles.map(async (style) => {
+      return {
+        title: style,
+        content: await fs.promises.readFile(
+          path.join('preview', 'src', 'styles', style),
+          { encoding: 'utf-8' },
+        ),
+      };
+    });
+
+    const styleFiles = await Promise.all(files);
+    const data = `export const styles = ${JSON.stringify(styleFiles)}`;
+
+    await fs.promises.writeFile(
+      path.join('source', '_preview', 'styles.ts'),
+      data,
+    );
+  } catch (error) {
+    console.error({ error });
+  }
+};
+
+const prepareUtils = async () => {
+  try {
+    const utils = await fs.promises.readdir(
+      path.join('preview', 'src', 'utils'),
+    );
+
+    const files = utils.map(async (util) => {
+      return {
+        title: util,
+        content: await fs.promises.readFile(
+          path.join('preview', 'src', 'utils', util),
+          { encoding: 'utf-8' },
+        ),
+      };
+    });
+
+    const utilFiles = await Promise.all(files);
+    const data = `export const utils = ${JSON.stringify(utilFiles)}`;
+
+    await fs.promises.writeFile(
+      path.join('source', '_preview', 'utils.ts'),
+      data,
+    );
+  } catch (error) {
+    console.error({ error });
+  }
+};
+
+const preparePages = async () => {
+  try {
+    const pages = await fs.promises.readdir(
+      path.join('preview', 'src', 'pages'),
+    );
+
+    const pageFiles = pages.map(async (page) => {
+      const isDirectory =
+        fs.existsSync(page) && fs.lstatSync(page).isDirectory();
+
+      if (isDirectory) {
+        const pFiles = await fs.promises.readdir(
+          path.join('preview', 'src', 'pages', page),
+        );
+
+        const files = pFiles.map(async (file) => {
+          return {
+            dir: page,
+            title: file,
+            content: await fs.promises.readFile(
+              path.join('preview', 'src', 'pages', page, file),
+              { encoding: 'utf-8' },
+            ),
+          };
+        });
+
+        const [f] = await Promise.all(files);
+
+        return f;
+      }
+
+      return {
+        title: page,
+        content: await fs.promises.readFile(
+          path.join('preview', 'src', 'pages', page),
+          { encoding: 'utf-8' },
+        ),
+      };
+    });
+
+    const allPages = await Promise.all(pageFiles);
+    const data = `export const pages = ${JSON.stringify(allPages)}`;
+
+    await fs.promises.writeFile(
+      path.join('source', '_preview', 'pages.ts'),
+      data,
+    );
+  } catch (error) {
+    console.error({ error });
+  }
+};
+
+preparePreview();