react-email 1.0.5 → 1.0.6

package/base/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "1.0.0",
+    "@radix-ui/react-tooltip": "1.0.0",
     "@react-email/avatar": "*",
     "@react-email/button": "*",
     "@react-email/code": "*",
@@ -28,11 +29,12 @@
     "@react-email/render": "*",
     "@react-email/text": "*",
     "@react-email/ul": "*",
-    "design-system": "*",
+    "classnames": "2.3.2",
     "lottie-react": "2.3.1",
     "next": "12.2.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "prism-react-renderer": "1.3.5",
+    "react-dom": "18.2.0",
+    "react": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "7.19.1",

package/base/src/components/code/code.tsx

@@ -0,0 +1,152 @@
+import classnames from 'classnames';
+import Highlight, { defaultProps, Language } from 'prism-react-renderer';
+import * as React from 'react';
+import { IconButton } from '../icon-button';
+import { copyTextToClipboard } from '../../utils/copy-text-to-clipboard';
+import { IconClipboard, IconCheck, IconDownload } from '../icons';
+import { Tooltip } from '../tooltip';
+
+interface CodeProps {
+  children: any;
+  className?: string;
+  language?: string;
+}
+
+const theme = {
+  plain: {
+    color: '#EDEDEF',
+    fontSize: 13,
+    fontFamily: 'MonoLisa, Menlo, monospace',
+  },
+  styles: [
+    {
+      types: ['comment'],
+      style: {
+        color: '#706F78',
+      },
+    },
+    {
+      types: ['atrule', 'keyword', 'attr-name', 'selector'],
+      style: {
+        color: '#7E7D86',
+      },
+    },
+    {
+      types: ['punctuation', 'operator'],
+      style: {
+        color: '#706F78',
+      },
+    },
+    {
+      types: ['class-name', 'function', 'tag', 'key-white'],
+      style: {
+        color: '#EDEDEF',
+      },
+    },
+  ],
+};
+
+export const Code: React.FC<Readonly<CodeProps>> = ({
+  children,
+  className,
+  language = 'html',
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const value = children.trim();
+
+  const file = new File([value], 'template.html', {
+    type: 'text/html',
+  });
+  const url = URL.createObjectURL(file);
+
+  return (
+    <Highlight
+      {...defaultProps}
+      theme={theme}
+      code={value}
+      language={language as Language}
+    >
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className={classnames(
+            'relative my-8 w-full min-w-full max-w-full overflow-auto whitespace-pre rounded-md border border-gray-6 p-4 text-sm backdrop-blur-md',
+            className,
+          )}
+          style={{
+            lineHeight: '130%',
+            background:
+              'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
+            boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
+          }}
+        >
+          <Tooltip>
+            <Tooltip.Trigger className="absolute top-3 right-3 hidden md:block">
+              <IconButton
+                onClick={async () => {
+                  setIsCopied(true);
+                  await copyTextToClipboard(value);
+                  setTimeout(() => setIsCopied(false), 3000);
+                }}
+              >
+                {isCopied ? <IconCheck /> : <IconClipboard />}
+              </IconButton>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
+          </Tooltip>
+
+          <Tooltip>
+            <Tooltip.Trigger className="text-gray-11 absolute top-3 right-8 hidden md:block">
+              <a title="Download HTML" href={url} download={file.name}>
+                <IconDownload />
+              </a>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Download HTML</Tooltip.Content>
+          </Tooltip>
+
+          <div
+            className="absolute right-0 top-0 h-px w-[300px]"
+            style={{
+              background:
+                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
+            }}
+          />
+          {tokens.map((line, i) => {
+            return (
+              <div
+                key={i}
+                {...getLineProps({ line, key: i })}
+                className={classnames('whitespace-pre', {
+                  "before:text-gray-11 before:mr-2 before:content-['$']":
+                    language === 'bash' && tokens.length === 1,
+                })}
+              >
+                {line.map((token, key) => {
+                  const isException =
+                    token.content === 'from' && line[key + 1]?.content === ':';
+                  const newTypes = isException
+                    ? [...token.types, 'key-white']
+                    : token.types;
+                  token.types = newTypes;
+
+                  return (
+                    <React.Fragment key={key}>
+                      <span {...getTokenProps({ token, key })} />
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+            );
+          })}
+          <div
+            className="absolute left-0 bottom-0 h-px w-[300px]"
+            style={{
+              background:
+                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
+            }}
+          />
+        </pre>
+      )}
+    </Highlight>
+  );
+};

package/base/src/components/code/index.ts

@@ -0,0 +1 @@
+export * from './code';

package/base/src/components/icon-button/icon-button.tsx

@@ -0,0 +1,23 @@
+import classnames from 'classnames';
+import * as React from 'react';
+
+export interface IconButtonProps
+  extends React.ComponentPropsWithoutRef<'button'> {}
+
+export const IconButton = React.forwardRef<
+  HTMLButtonElement,
+  Readonly<IconButtonProps>
+>(({ children, className, ...props }, forwardedRef) => (
+  <button
+    {...props}
+    ref={forwardedRef}
+    className={classnames(
+      'rounded text-gray-11 focus:text-gray-12 ease-in-out transition duration-200 focus:outline-none focus:ring-2 focus:ring-gray-8 hover:text-gray-12',
+      className,
+    )}
+  >
+    {children}
+  </button>
+));
+
+IconButton.displayName = 'IconButton';

package/base/src/components/icon-button/index.ts

@@ -0,0 +1 @@
+export * from './icon-button';

package/base/src/components/icons/icon-base.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export interface IconProps {
+  size?: number;
+}
+
+export type IconElement = React.ElementRef<'svg'>;
+export type RootProps = React.ComponentPropsWithoutRef<'svg'>;
+
+export interface IconProps extends RootProps {}
+
+export const IconBase = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ size = 20, ...props }, forwardedRef) => (
+    <svg
+      ref={forwardedRef}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    />
+  ),
+);
+
+IconBase.displayName = 'IconBase';

package/base/src/components/icons/icon-check.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IconBase, IconElement, IconProps } from './icon-base';
+
+export const IconCheck = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M16.25 8.75L10.406 15.25L7.75 12.75"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  ),
+);
+
+IconCheck.displayName = 'IconCheck';

package/base/src/components/icons/icon-clipboard.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { IconBase, IconElement, IconProps } from './icon-base';
+
+export const IconClipboard = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M9 6.75H7.75C6.64543 6.75 5.75 7.64543 5.75 8.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V8.75C18.25 7.64543 17.3546 6.75 16.25 6.75H15"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 8.25H10C9.44772 8.25 9 7.80228 9 7.25V5.75C9 5.19772 9.44772 4.75 10 4.75H14C14.5523 4.75 15 5.19772 15 5.75V7.25C15 7.80228 14.5523 8.25 14 8.25Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.75 12.25H14.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.75 15.25H14.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  ),
+);
+
+IconClipboard.displayName = 'IconClipboard';

package/base/src/components/icons/icon-download.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IconBase, IconElement, IconProps } from './icon-base';
+
+export const IconDownload = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M4.75 14.75v1.5a3 3 0 0 0 3 3h8.5a3 3 0 0 0 3-3v-1.5M12 14.25v-9.5M8.75 10.75l3.25 3.5 3.25-3.5"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  ),
+);
+
+IconDownload.displayName = 'IconDownload';

package/base/src/components/icons/icon-loading.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { IconBase, IconElement, IconProps } from './icon-base';
+
+export const IconLoading = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ className, ...props }, forwardedRef) => (
+    <IconBase
+      ref={forwardedRef}
+      className={classnames('animate-spin', className)}
+      {...props}
+    >
+      <path
+        className="opacity-[15%]"
+        d="M5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="7"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeDasharray="150,200"
+        strokeDashoffset="-16"
+      />
+    </IconBase>
+  ),
+);
+
+IconLoading.displayName = 'IconLoading';

package/base/src/components/icons/index.ts

@@ -0,0 +1,4 @@
+export * from './icon-check';
+export * from './icon-clipboard';
+export * from './icon-download';
+export * from './icon-loading';

package/base/src/components/layout.tsx

@@ -1,15 +1,18 @@
-import { render } from '@react-email/render';
-import dynamic from 'next/dynamic';
-import Head from 'next/head';
 import * as React from 'react';
 import Logo from '../components/topbar/logo';
 import External from '../components/topbar/external';
 import Feedback from '../components/topbar/feedback';
 import SendTest from '../components/topbar/send-test';
 import ToggleView from '../components/topbar/toggle-view';
-import { Code } from 'design-system';
+import { Code } from '../components/code';
 
-export default function Layout({ markup, path }: { markup: string, path: string }) {
+export default function Layout({
+  markup,
+  path,
+}: {
+  markup: string;
+  path: string;
+}) {
   const [isPreview, setIsPreview] = React.useState(true);
 
   return (

package/base/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip';

package/base/src/components/tooltip/tooltip-arrow.tsx

@@ -0,0 +1 @@
+export { TooltipArrow } from '@radix-ui/react-tooltip';

package/base/src/components/tooltip/tooltip-content.tsx

@@ -0,0 +1,26 @@
+import { Arrow, Content, Portal } from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+type ContentElement = React.ElementRef<typeof Content>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof Content>;
+
+export interface TooltipProps extends ContentProps {}
+
+export const TooltipContent = React.forwardRef<
+  ContentElement,
+  Readonly<TooltipProps>
+>(({ className, sideOffset = 6, children, ...props }, forwardedRef) => (
+  <Portal>
+    <Content
+      {...props}
+      ref={forwardedRef}
+      className="bg-gray-2 border border-gray-7 z-20 px-2 py-1 rounded-md text-sm radix-side-top:animate-slide-down-fade radix-side-right:animate-slide-left-fade radix-side-bottom:animate-slide-up-fade radix-side-left:animate-slide-right-fade"
+      sideOffset={sideOffset}
+    >
+      {children}
+      <Arrow fill="#1c1c1f" />
+    </Content>
+  </Portal>
+));
+
+TooltipContent.displayName = 'TooltipContent';

package/base/src/components/tooltip/tooltip-provider.tsx

@@ -0,0 +1 @@
+export { TooltipProvider } from '@radix-ui/react-tooltip';

package/base/src/components/tooltip/tooltip-trigger.tsx

@@ -0,0 +1 @@
+export { TooltipTrigger } from '@radix-ui/react-tooltip';

package/base/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,22 @@
+import { Root } from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { TooltipArrow } from './tooltip-arrow';
+import { TooltipContent } from './tooltip-content';
+import { TooltipProvider } from './tooltip-provider';
+import { TooltipTrigger } from './tooltip-trigger';
+
+type RootProps = React.ComponentPropsWithoutRef<typeof Root>;
+
+export interface TooltipProps extends RootProps {}
+
+export const TooltipRoot: React.FC<Readonly<TooltipProps>> = ({
+  children,
+  ...props
+}) => <Root {...props}>{children}</Root>;
+
+export const Tooltip = Object.assign(TooltipRoot, {
+  Arrow: TooltipArrow,
+  Provider: TooltipProvider,
+  Content: TooltipContent,
+  Trigger: TooltipTrigger,
+});

package/base/src/pages/[...path].tsx

@@ -7,21 +7,28 @@ export async function getServerSideProps({ params }: { params: any }) {
   const resolvedPath = path.length > 0 ? path.join('/') : path;
 
   try {
-    const req = await fetch(`http://localhost:3001/api/${resolvedPath}?json=true`)
-    const { markup } = await req.json()
+    const req = await fetch(
+      `http://localhost:3001/api/${resolvedPath}?json=true`,
+    );
+    const { markup } = await req.json();
 
     return {
-      props: { markup, path }
-    }
-  }
-  catch(e) {
+      props: { markup, path },
+    };
+  } catch (e) {
     return {
-      props: {}
-    }
+      props: {},
+    };
   }
 }
 
-export default function Preview({ markup, path }: { markup: string, path: string }) {
+export default function Preview({
+  markup,
+  path,
+}: {
+  markup: string;
+  path: string;
+}) {
   return (
     <>
       <Head>

package/base/src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
-import { Tooltip } from 'design-system';
+import { Tooltip } from '../components/tooltip';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (

package/base/src/utils/copy-text-to-clipboard.ts

@@ -0,0 +1,7 @@
+export const copyTextToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    throw new Error('Not able to copy');
+  }
+};

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "react-email",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A live preview of your emails right in your browser.",
   "main": "src/index.js",
   "license": "MIT",
   "dependencies": {
     "commander": "^9.4.1",
-    "fs-extra": "^10.1.0",
+    "copy": "^0.3.2",
     "inquirer": "^9.1.4",
-    "prompts": "^2.4.2"
+    "prompts": "^2.4.2",
+    "shelljs": "^0.8.5"
   },
   "bin": {
     "email": "src/index.js"

package/src/index.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 const { Command } = require('commander');
+const copy = require('copy');
 const path = require('path');
-const fse = require('fs-extra');
 const shell = require('shelljs');
 const packageJson = require('../package.json');
 
@@ -14,13 +14,13 @@ program
   .description(packageJson.description);
 
 const dev = () => {
-  const currentPath = process.cwd();
+  const currentPath = `${process.cwd()}/*.tsx`;
   const basePath = path.resolve(__dirname, '../base/emails');
   
-  fse.copySync(currentPath, basePath, { recursive: true });
-  
-  shell.cd(path.join(__dirname, '../base'));
-  shell.exec('npm run dev', { async: true });
+  copy(currentPath, basePath, () => {
+    shell.cd(path.join(__dirname, '../base'));
+    shell.exec('npm run dev', { async: true });
+  });
 }
 
 program