react-email 1.0.5 → 1.0.7

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const extra_typings_1 = require("@commander-js/extra-typings");
+const shelljs_1 = __importDefault(require("shelljs"));
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const contants_1 = require("./utils/contants");
+const watcher_1 = require("./utils/watcher");
+const check_directory_exist_1 = require("./utils/check-directory-exist");
+const check_empty_directory_1 = require("./utils/check-empty-directory");
+const copy_files_1 = require("./utils/copy-files");
+extra_typings_1.program
+    .name(contants_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(async () => {
+    const hasEmailsDirectory = (0, check_directory_exist_1.checkDirectoryExist)(contants_1.DEFAULT_EMAILS_DIRECTORY);
+    if (!hasEmailsDirectory) {
+        return console.error('Missing emails directory');
+    }
+    const isEmailsDirectoryEmpty = await (0, check_empty_directory_1.checkEmptyDirectory)(contants_1.DEFAULT_EMAILS_DIRECTORY);
+    if (isEmailsDirectoryEmpty) {
+        return console.error('Missing email files');
+    }
+    const isDependencyInstalled = (0, check_directory_exist_1.checkDirectoryExist)(contants_1.NODE_MODULES_PACKAGE_PATH);
+    if (!isDependencyInstalled) {
+        return console.error('Install the package');
+    }
+    const hasDotEmailDirectory = (0, check_directory_exist_1.checkDirectoryExist)(contants_1.DOT_EMAIL_DEV);
+    if (!hasDotEmailDirectory) {
+        await fs_1.default.promises.mkdir(contants_1.DOT_EMAIL_DEV, { recursive: true });
+    }
+    await (0, copy_files_1.copyFiles)();
+    shelljs_1.default.cd(path_1.default.join(contants_1.DOT_EMAIL_DEV));
+    shelljs_1.default.exec('yarn', { silent: true });
+    shelljs_1.default.exec('yarn dev', { async: true });
+    (0, watcher_1.watcher)();
+});
+extra_typings_1.program.parse();

package/dist/utils/check-directory-exist.d.ts

@@ -0,0 +1 @@
+export declare const checkDirectoryExist: (path: string) => boolean;

package/dist/utils/check-directory-exist.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkDirectoryExist = void 0;
+const fs_1 = __importDefault(require("fs"));
+const checkDirectoryExist = (path) => fs_1.default.existsSync(path);
+exports.checkDirectoryExist = checkDirectoryExist;

package/dist/utils/check-empty-directory.d.ts

@@ -0,0 +1 @@
+export declare const checkEmptyDirectory: (path: string) => Promise<boolean>;

package/dist/utils/check-empty-directory.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkEmptyDirectory = void 0;
+const fs_1 = __importDefault(require("fs"));
+const checkEmptyDirectory = async (path) => {
+    const files = await fs_1.default.promises.readdir(path);
+    return files.length === 0;
+};
+exports.checkEmptyDirectory = checkEmptyDirectory;

package/dist/utils/contants.d.ts

@@ -0,0 +1,10 @@
+export declare const CURRENT_PATH: string;
+export declare const DEFAULT_EMAILS_DIRECTORY = "emails";
+export declare const PACKAGE_NAME = "react-email";
+export declare const HOME_DIR: string;
+export declare const DOT_EMAIL_DEV: string;
+export declare const NODE_MODULES_PACKAGE_PATH: string;
+export declare const NODE_MODULES_PREVIEW_PATH: string;
+export declare const CLIENT_EMAILS_PATH: string;
+export declare const PACKAGE_EMAILS_PATH: string;
+export declare const EVENT_FILE_DELETED = "unlink";

package/dist/utils/contants.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EVENT_FILE_DELETED = exports.PACKAGE_EMAILS_PATH = exports.CLIENT_EMAILS_PATH = exports.NODE_MODULES_PREVIEW_PATH = exports.NODE_MODULES_PACKAGE_PATH = exports.DOT_EMAIL_DEV = exports.HOME_DIR = exports.PACKAGE_NAME = exports.DEFAULT_EMAILS_DIRECTORY = exports.CURRENT_PATH = void 0;
+const os_1 = __importDefault(require("os"));
+const path_1 = __importDefault(require("path"));
+exports.CURRENT_PATH = process.cwd();
+exports.DEFAULT_EMAILS_DIRECTORY = 'emails';
+exports.PACKAGE_NAME = 'react-email';
+exports.HOME_DIR = os_1.default.homedir();
+exports.DOT_EMAIL_DEV = path_1.default.join(exports.HOME_DIR, '.react-email');
+exports.NODE_MODULES_PACKAGE_PATH = path_1.default.join(exports.CURRENT_PATH, 'node_modules', exports.PACKAGE_NAME);
+exports.NODE_MODULES_PREVIEW_PATH = path_1.default.join(exports.NODE_MODULES_PACKAGE_PATH, 'preview');
+exports.CLIENT_EMAILS_PATH = path_1.default.join(exports.CURRENT_PATH, exports.DEFAULT_EMAILS_DIRECTORY);
+exports.PACKAGE_EMAILS_PATH = path_1.default.join(exports.DOT_EMAIL_DEV, exports.DEFAULT_EMAILS_DIRECTORY);
+exports.EVENT_FILE_DELETED = 'unlink';

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

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

package/dist/utils/copy-files.js

@@ -0,0 +1,30 @@
+"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;

package/dist/utils/watcher.d.ts

@@ -0,0 +1,2 @@
+import chokidar from 'chokidar';
+export declare const watcher: () => chokidar.FSWatcher;

package/dist/utils/watcher.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watcher = void 0;
+const chokidar_1 = __importDefault(require("chokidar"));
+const contants_1 = require("./contants");
+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 })
+    .on('all', async (event, filename) => {
+    if (event === contants_1.EVENT_FILE_DELETED) {
+        await fs_1.default.promises.rm(path_1.default.join(contants_1.DOT_EMAIL_DEV, filename));
+    }
+    else {
+        await (0, cpy_1.default)(contants_1.CLIENT_EMAILS_PATH, contants_1.PACKAGE_EMAILS_PATH);
+    }
+});
+exports.watcher = watcher;

package/package.json

@@ -1,16 +1,38 @@
 {
   "name": "react-email",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "A live preview of your emails right in your browser.",
-  "main": "src/index.js",
+  "bin": {
+    "email": "./dist/index.js"
+  },
+  "exports": [
+    "./dist/index.js",
+    "./preview"
+  ],
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=14.16"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "format:check": "prettier --check \"**/*.{js,ts,tsx,json}\"",
+    "format": "prettier --write \"**/*.{js,ts,tsx,json}\"",
+    "lint": "eslint",
+    "clean": "rm -rf dist"
+  },
   "license": "MIT",
   "dependencies": {
-    "commander": "^9.4.1",
-    "fs-extra": "^10.1.0",
-    "inquirer": "^9.1.4",
-    "prompts": "^2.4.2"
+    "@commander-js/extra-typings": "9.4.1",
+    "chokidar": "3.5.3",
+    "commander": "9.4.1",
+    "cpy": "8.1.2",
+    "glob": "8.0.3",
+    "shelljs": "0.8.5"
   },
-  "bin": {
-    "email": "src/index.js"
+  "devDependencies": {
+    "@types/node": "18.11.9",
+    "@types/shelljs": "0.8.11",
+    "prettier": "2.7.1"
   }
 }

package/preview/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "create-react-email-test",
+  "version": "0.0.10",
+  "description": "Create react email",
+  "main": "index.js",
+  "repository": "bukinoshita/create-react-email",
+  "author": "Bu Kinoshita",
+  "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",
+    "@react-email/avatar": "0.0.2",
+    "@react-email/button": "0.0.3",
+    "@react-email/container": "0.0.4",
+    "@react-email/head": "0.0.2",
+    "@react-email/heading": "0.0.3",
+    "@react-email/hr": "0.0.2",
+    "@react-email/html": "0.0.2",
+    "@react-email/img": "0.0.2",
+    "@react-email/link": "0.0.2",
+    "@react-email/preview": "0.0.2",
+    "@react-email/render": "0.0.2",
+    "@react-email/section": "0.0.1",
+    "@react-email/text": "0.0.2",
+    "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/preview/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/preview/src/components/button.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { unreachable } from '../utils';
+import * as SlotPrimitive from '@radix-ui/react-slot';
+
+type ButtonElement = React.ElementRef<'button'>;
+type RootProps = React.ComponentPropsWithoutRef<'button'>;
+
+type Appearance = 'white' | 'gradient';
+type Size = '1' | '2' | '3' | '4';
+
+interface ButtonProps extends RootProps {
+  asChild?: boolean;
+  appearance?: Appearance;
+  size?: Size;
+}
+
+export const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(
+  (
+    {
+      asChild,
+      appearance = 'white',
+      className,
+      children,
+      size = '2',
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const classNames = classnames(
+      getSize(size),
+      getAppearance(appearance),
+      'inline-flex items-center justify-center border font-medium',
+      className,
+    );
+
+    return asChild ? (
+      <SlotPrimitive.Slot ref={forwardedRef} {...props} className={classNames}>
+        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
+      </SlotPrimitive.Slot>
+    ) : (
+      <button ref={forwardedRef} className={classNames} {...props}>
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+const getAppearance = (appearance: Appearance | undefined) => {
+  switch (appearance) {
+    case undefined:
+    case 'white':
+      return [
+        'bg-white text-black',
+        'hover:bg-white/90',
+        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-white/90',
+      ];
+    case 'gradient':
+      return [
+        'bg-gradient backdrop-blur-[20px] border-[#34343A]',
+        'hover:bg-gradientHover',
+        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-gradientHover',
+      ];
+    default:
+      unreachable(appearance);
+  }
+};
+
+const getSize = (size: Size | undefined) => {
+  switch (size) {
+    case '1':
+      return '';
+    case undefined:
+    case '2':
+      return 'text-[14px] h-8 px-3 rounded-md gap-2';
+    case '3':
+      return 'text-[14px] h-10 px-4 rounded-md gap-2';
+    case '4':
+      return 'text-base h-11 px-4 rounded-md gap-2';
+    default:
+      unreachable(size);
+  }
+};

package/preview/src/components/code.tsx

@@ -0,0 +1,119 @@
+import classnames from 'classnames';
+import Highlight, { defaultProps, Language } from 'prism-react-renderer';
+import * as React from 'react';
+
+interface CodeProps {
+  children: any;
+  className?: string;
+  language?: Language;
+}
+
+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();
+
+  return (
+    <Highlight
+      {...defaultProps}
+      theme={theme}
+      code={value}
+      language={language as Language}
+    >
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className={classnames(
+            'border-slate-6 relative p-4 w-full items-center overflow-auto whitespace-pre rounded-md border 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',
+          }}
+        >
+          <div
+            className="absolute right-0 top-0 h-px w-[200px]"
+            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-slate-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-[200px]"
+            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/preview/src/components/heading.tsx

@@ -0,0 +1,114 @@
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import classnames from 'classnames';
+import * as React from 'react';
+import { As, unreachable } from '../utils';
+
+export type HeadingSize =
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10';
+export type HeadingColor = 'white' | 'gray';
+export type HeadingWeight = 'medium' | 'bold';
+
+interface HeadingOwnProps {
+  size?: HeadingSize;
+  color?: HeadingColor;
+  weight?: HeadingWeight;
+}
+
+type HeadingProps = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'> & HeadingOwnProps;
+
+export const Heading = React.forwardRef<
+  HTMLHeadingElement,
+  Readonly<HeadingProps>
+>(
+  (
+    {
+      as: Tag = 'h1',
+      size = '3',
+      className,
+      color = 'white',
+      children,
+      weight = 'bold',
+      ...props
+    },
+    forwardedRef,
+  ) => (
+    <SlotPrimitive.Slot
+      ref={forwardedRef}
+      className={classnames(
+        className,
+        getSizesClassNames(size),
+        getColorClassNames(color),
+        getWeightClassNames(weight),
+      )}
+      {...props}
+    >
+      <Tag>{children}</Tag>
+    </SlotPrimitive.Slot>
+  ),
+);
+
+const getSizesClassNames = (size: HeadingSize | undefined) => {
+  switch (size) {
+    case '1':
+      return 'text-xs';
+    case '2':
+      return 'text-sm';
+    case undefined:
+    case '3':
+      return 'text-base';
+    case '4':
+      return 'text-lg';
+    case '5':
+      return 'text-xl tracking-[-0.16px]';
+    case '6':
+      return 'text-2xl tracking-[-0.288px]';
+    case '7':
+      return 'text-[28px] leading-[34px] tracking-[-0.416px]';
+    case '8':
+      return 'text-[35px] leading-[42px] tracking-[-0.64px]';
+    case '9':
+      return 'text-6xl leading-[73px] tracking-[-0.896px]';
+    case '10':
+      return [
+        'text-[38px] leading-[46px]',
+        'md:text-[70px] md:leading-[85px] tracking-[-1.024px;]',
+      ];
+    default:
+      return unreachable(size);
+  }
+};
+
+const getColorClassNames = (color: HeadingColor | undefined) => {
+  switch (color) {
+    case 'gray':
+      return 'text-slate-11';
+    case 'white':
+    case undefined:
+      return 'text-slate-12';
+    default:
+      return unreachable(color);
+  }
+};
+
+const getWeightClassNames = (weight: HeadingWeight | undefined) => {
+  switch (weight) {
+    case 'medium':
+      return 'font-medium';
+    case 'bold':
+    case undefined:
+      return 'font-bold';
+    default:
+      return unreachable(weight);
+  }
+};
+
+Heading.displayName = 'Heading';

package/preview/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './button';
+export * from './code';
+export * from './heading';
+export * from './logo';
+export * from './sidebar';
+export * from './text';
+export * from './topbar';