promote-email-templates 0.1.6 → 0.1.8

package/.react-email/src/components/text.tsx

@@ -1,99 +0,0 @@
-import * as SlotPrimitive from '@radix-ui/react-slot';
-import * as React from 'react';
-import { type As, unreachable, cn } from '../utils';
-
-export type TextSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
-export type TextColor = 'gray' | 'white';
-export type TextTransform = 'uppercase' | 'lowercase' | 'capitalize';
-export type TextWeight = 'normal' | 'medium';
-
-interface TextOwnProps {
-  size?: TextSize;
-  color?: TextColor;
-  transform?: TextTransform;
-  weight?: TextWeight;
-}
-
-type TextProps = As<'span', 'div', 'p'> & TextOwnProps;
-
-export const Text = React.forwardRef<HTMLSpanElement, Readonly<TextProps>>(
-  (
-    {
-      as: Tag = 'span',
-      size = '2',
-      color = 'gray',
-      transform,
-      weight = 'normal',
-      className,
-      children,
-      ...props
-    },
-    forwardedRef,
-  ) => (
-    <SlotPrimitive.Slot
-      className={cn(
-        className,
-        transform,
-        getSizesClassNames(size),
-        getColorClassNames(color),
-        getWeightClassNames(weight),
-      )}
-      ref={forwardedRef}
-      {...props}
-    >
-      <Tag>{children}</Tag>
-    </SlotPrimitive.Slot>
-  ),
-);
-
-const getSizesClassNames = (size: TextSize | undefined) => {
-  switch (size) {
-    case '1':
-      return 'text-xs';
-    case undefined:
-    case '2':
-      return 'text-sm';
-    case '3':
-      return 'text-base';
-    case '4':
-      return 'text-lg';
-    case '5':
-      return ['text-17px', 'md: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]';
-    default:
-      return unreachable(size);
-  }
-};
-
-const getColorClassNames = (color: TextColor | undefined) => {
-  switch (color) {
-    case 'white':
-      return 'text-slate-12';
-    case undefined:
-    case 'gray':
-      return 'text-slate-11';
-    default:
-      return unreachable(color);
-  }
-};
-
-const getWeightClassNames = (weight: TextWeight | undefined) => {
-  switch (weight) {
-    case undefined:
-    case 'normal':
-      return 'font-normal';
-    case 'medium':
-      return 'font-medium';
-    default:
-      return unreachable(weight);
-  }
-};
-
-Text.displayName = 'Text';

package/.react-email/src/components/tooltip-content.tsx

@@ -1,32 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-import { cn } from '../utils';
-import { inter } from '../app/inter';
-
-type ContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;
-type ContentProps = React.ComponentPropsWithoutRef<
-  typeof TooltipPrimitive.Content
->;
-
-export type TooltipProps = ContentProps;
-
-export const TooltipContent = React.forwardRef<
-  ContentElement,
-  Readonly<TooltipProps>
->(({ sideOffset = 6, children, ...props }, forwardedRef) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      {...props}
-      className={cn(
-        'bg-black border border-slate-6 z-20 px-3 py-2 rounded-md text-xs',
-        `${inter.variable} font-sans`,
-      )}
-      ref={forwardedRef}
-      sideOffset={sideOffset}
-    >
-      {children}
-    </TooltipPrimitive.Content>
-  </TooltipPrimitive.Portal>
-));
-
-TooltipContent.displayName = 'TooltipContent';

package/.react-email/src/components/tooltip.tsx

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

package/.react-email/src/components/topbar.tsx

@@ -1,161 +0,0 @@
-'use client';
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import { motion } from 'framer-motion';
-import * as React from 'react';
-import { cn } from '../utils';
-import { tabTransition } from '../utils/constants';
-import { Heading } from './heading';
-import { IconHideSidebar } from './icons/icon-hide-sidebar';
-import { IconMonitor } from './icons/icon-monitor';
-import { IconPhone } from './icons/icon-phone';
-import { IconSource } from './icons/icon-source';
-import { Send } from './send';
-import { Tooltip } from './tooltip';
-
-interface TopbarProps {
-  currentEmailOpenSlug: string;
-  activeView?: string;
-  markup?: string;
-  onToggleSidebar?: () => void;
-  setActiveView?: (view: string) => void;
-}
-
-export const Topbar: React.FC<Readonly<TopbarProps>> = ({
-  currentEmailOpenSlug,
-  markup,
-  activeView,
-  setActiveView,
-  onToggleSidebar,
-}) => {
-  return (
-    <Tooltip.Provider>
-      <header className="flex relative items-center px-4 justify-between h-[70px] border-b border-slate-6">
-        <Tooltip>
-          <Tooltip.Trigger asChild>
-            <button
-              className="hidden lg:flex rounded-lg px-2 py-2 transition ease-in-out duration-200 relative hover:bg-slate-5 text-slate-11 hover:text-slate-12"
-              onClick={() => {
-                if (onToggleSidebar) {
-                  onToggleSidebar();
-                }
-              }}
-              type="button"
-            >
-              <IconHideSidebar height={20} width={20} />
-            </button>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Show/hide sidebar</Tooltip.Content>
-        </Tooltip>
-
-        <div className="items-center overflow-hidden hidden lg:flex text-center absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
-          <Heading as="h2" className="truncate" size="2" weight="medium">
-            {currentEmailOpenSlug}
-          </Heading>
-        </div>
-
-        <div className="flex gap-3 justify-between lg:justify-start w-full lg:w-fit">
-          <ToggleGroup.Root
-            aria-label="View mode"
-            className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
-            onValueChange={(value) => {
-              if (value) setActiveView?.(value);
-            }}
-            type="single"
-            value={activeView}
-          >
-            <ToggleGroup.Item value="desktop">
-              <Tooltip>
-                <Tooltip.Trigger asChild>
-                  <div
-                    className={cn(
-                      'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
-                      {
-                        'text-slate-11': activeView !== 'desktop',
-                        'text-slate-12': activeView === 'desktop',
-                      },
-                    )}
-                  >
-                    {activeView === 'desktop' && (
-                      <motion.span
-                        animate={{ opacity: 1 }}
-                        className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
-                        exit={{ opacity: 0 }}
-                        initial={{ opacity: 0 }}
-                        layoutId="topbar-tabs"
-                        transition={tabTransition}
-                      />
-                    )}
-                    <IconMonitor />
-                  </div>
-                </Tooltip.Trigger>
-                <Tooltip.Content>Desktop</Tooltip.Content>
-              </Tooltip>
-            </ToggleGroup.Item>
-            <ToggleGroup.Item value="mobile">
-              <Tooltip>
-                <Tooltip.Trigger asChild>
-                  <div
-                    className={cn(
-                      'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
-                      {
-                        'text-slate-11': activeView !== 'mobile',
-                        'text-slate-12': activeView === 'mobile',
-                      },
-                    )}
-                  >
-                    {activeView === 'mobile' && (
-                      <motion.span
-                        animate={{ opacity: 1 }}
-                        className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
-                        exit={{ opacity: 0 }}
-                        initial={{ opacity: 0 }}
-                        layoutId="topbar-tabs"
-                        transition={tabTransition}
-                      />
-                    )}
-                    <IconPhone />
-                  </div>
-                </Tooltip.Trigger>
-                <Tooltip.Content>Mobile</Tooltip.Content>
-              </Tooltip>
-            </ToggleGroup.Item>
-            <ToggleGroup.Item value="source">
-              <Tooltip>
-                <Tooltip.Trigger asChild>
-                  <div
-                    className={cn(
-                      'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
-                      {
-                        'text-slate-11': activeView !== 'source',
-                        'text-slate-12': activeView === 'source',
-                      },
-                    )}
-                  >
-                    {activeView === 'source' && (
-                      <motion.span
-                        animate={{ opacity: 1 }}
-                        className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
-                        exit={{ opacity: 0 }}
-                        initial={{ opacity: 0 }}
-                        layoutId="topbar-tabs"
-                        transition={tabTransition}
-                      />
-                    )}
-                    <IconSource />
-                  </div>
-                </Tooltip.Trigger>
-                <Tooltip.Content>Code</Tooltip.Content>
-              </Tooltip>
-            </ToggleGroup.Item>
-          </ToggleGroup.Root>
-
-          {markup ? (
-            <div className="flex justify-end">
-              <Send markup={markup} />
-            </div>
-          ) : null}
-        </div>
-      </header>
-    </Tooltip.Provider>
-  );
-};

package/.react-email/src/contexts/emails.tsx

@@ -1,127 +0,0 @@
-'use client';
-import { createContext, useContext, useEffect, useState } from 'react';
-import {
-  getEmailsDirectoryMetadata,
-  type EmailsDirectory,
-} from '../actions/get-emails-directory-metadata';
-import { useHotreload } from '../hooks/use-hot-reload';
-import {
-  emailsDirRelativePath,
-  emailsDirectoryAbsolutePath,
-  normalizePath,
-  pathSeparator,
-} from '../utils/emails-directory-absolute-path';
-import {
-  renderEmailByPath,
-  type EmailRenderingResult,
-} from '../actions/render-email-by-path';
-import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
-
-const EmailsContext = createContext<
-  | {
-      emailsDirectoryMetadata: EmailsDirectory;
-      /**
-       * Uses the hot reloaded bundled build and rendering email result
-       */
-      useEmailRenderingResult: (
-        emailPath: string,
-        serverEmailRenderedResult: EmailRenderingResult,
-      ) => EmailRenderingResult;
-    }
-  | undefined
->(undefined);
-
-export const useEmails = () => {
-  const providerValue = useContext(EmailsContext);
-
-  if (typeof providerValue === 'undefined') {
-    throw new Error(
-      'Cannot call `useEmail()` outside of an EmailsContext provider!',
-    );
-  }
-
-  return providerValue;
-};
-
-export const EmailsProvider = (props: {
-  initialEmailsDirectoryMetadata: EmailsDirectory;
-  children: React.ReactNode;
-}) => {
-  const [emailsDirectoryMetadata, setEmailsDirectoryMetadata] =
-    useState<EmailsDirectory>(props.initialEmailsDirectoryMetadata);
-
-  const [renderingResultPerEmailPath, setRenderingResultPerEmailPath] =
-    useState<Record<string, EmailRenderingResult>>({});
-
-  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
-    // this will not change on runtime so it doesn't violate
-    // the rules of hooks
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useHotreload(async (changes) => {
-      const metadata = await getEmailsDirectoryMetadata(
-        emailsDirectoryAbsolutePath,
-      );
-      if (metadata) {
-        setEmailsDirectoryMetadata(metadata);
-      } else {
-        throw new Error(
-          'Hot reloading: unable to find the emails directory to update the sidebar',
-        );
-      }
-
-      for await (const change of changes) {
-        const normalizedEmailsDirRelativePath = normalizePath(
-          emailsDirRelativePath,
-        );
-        const slugForChangedEmail =
-          // filename ex: emails/apple-receipt.tsx
-          // so we need to remove the "emails/" because it isn't used
-          // on the slug parameter for the preview page
-          change.filename
-            .replace(`${normalizedEmailsDirRelativePath}${pathSeparator}`, '')
-            .replace(normalizedEmailsDirRelativePath, '');
-
-        const pathForChangedEmail =
-          await getEmailPathFromSlug(slugForChangedEmail);
-
-        const lastResult = renderingResultPerEmailPath[pathForChangedEmail];
-
-        if (typeof lastResult !== 'undefined') {
-          const renderingResult = await renderEmailByPath(pathForChangedEmail);
-
-          setRenderingResultPerEmailPath((map) => ({
-            ...map,
-            [pathForChangedEmail]: renderingResult,
-          }));
-        }
-      }
-    });
-  }
-
-  return (
-    <EmailsContext.Provider
-      value={{
-        emailsDirectoryMetadata,
-        useEmailRenderingResult: (emailPath, serverEmailRenderedResult) => {
-          useEffect(() => {
-            if (typeof renderingResultPerEmailPath[emailPath] === 'undefined') {
-              setRenderingResultPerEmailPath((map) => ({
-                ...map,
-                [emailPath]: serverEmailRenderedResult,
-              }));
-            }
-          }, [serverEmailRenderedResult, emailPath]);
-
-          if (typeof renderingResultPerEmailPath[emailPath] !== 'undefined') {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            return renderingResultPerEmailPath[emailPath]!;
-          }
-
-          return serverEmailRenderedResult;
-        },
-      }}
-    >
-      {props.children}
-    </EmailsContext.Provider>
-  );
-};

package/.react-email/src/hooks/use-hot-reload.ts

@@ -1,35 +0,0 @@
-'use client';
-import { useEffect, useRef } from 'react';
-import { type Socket, io } from 'socket.io-client';
-import type { HotReloadChange } from '../utils/types/hot-reload-change';
-
-/**
- * Hook that detects any "reload" event sent from the CLI's web socket
- * and calls the received parameter callback
- */
-export const useHotreload = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onShouldReload: (changes: HotReloadChange[]) => any,
-) => {
-  const socketRef = useRef<Socket | null>(null);
-
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'production') {
-      return;
-    }
-
-    if (!socketRef.current) {
-      socketRef.current = io();
-    }
-    const socket = socketRef.current;
-
-    socket.on('reload', (changes: HotReloadChange[]) => {
-      console.debug('Reloading...');
-      void onShouldReload(changes);
-    });
-
-    return () => {
-      socket.off();
-    };
-  }, [onShouldReload]);
-};

package/.react-email/src/hooks/use-rendering-metadata.ts

@@ -1,36 +0,0 @@
-import { useEffect } from 'react';
-import type {
-  EmailRenderingResult,
-  RenderedEmailMetadata,
-} from '../actions/render-email-by-path';
-
-const lastRenderingMetadataPerEmailPath = {} as Record<
-  string,
-  RenderedEmailMetadata
->;
-
-/**
- * Returns the rendering metadata if the given `renderingResult`
- * does not error. If it does error it returns the last value it had for the hook.
- */
-export const useRenderingMetadata = (
-  emailPath: string,
-  renderingResult: EmailRenderingResult,
-  initialRenderingMetadata?: EmailRenderingResult,
-): RenderedEmailMetadata | undefined => {
-  useEffect(() => {
-    if ('markup' in renderingResult) {
-      lastRenderingMetadataPerEmailPath[emailPath] = renderingResult;
-    } else if (
-      typeof initialRenderingMetadata !== 'undefined' &&
-      'markup' in initialRenderingMetadata &&
-      typeof lastRenderingMetadataPerEmailPath[emailPath] === 'undefined'
-    ) {
-      lastRenderingMetadataPerEmailPath[emailPath] = initialRenderingMetadata;
-    }
-  }, [renderingResult, emailPath, initialRenderingMetadata]);
-
-  return 'error' in renderingResult
-    ? lastRenderingMetadataPerEmailPath[emailPath]
-    : renderingResult;
-};

package/.react-email/src/utils/cn.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export const cn = (...inputs: ClassValue[]) => {
-  return twMerge(clsx(inputs));
-};

package/.react-email/src/utils/constants.ts

@@ -1,6 +0,0 @@
-export const tabTransition = {
-  type: 'spring',
-  stiffness: 2000,
-  damping: 80,
-  mass: 1,
-};

package/.react-email/src/utils/copy-text-to-clipboard.ts

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

package/.react-email/src/utils/emails-directory-absolute-path.ts

@@ -1,34 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-export const emailsDirRelativePath =
-  process.env.NEXT_PUBLIC_EMAILS_DIR_RELATIVE_PATH ?? 'emails';
-
-export const userProjectLocation =
-  process.env.NEXT_PUBLIC_USER_PROJECT_LOCATION!;
-
-// this trickery to find the path separator for the OS is for this to work both on the client
-// and on the server properly
-export const pathSeparator = process.env.NEXT_PUBLIC_OS_PATH_SEPARATOR! as
-  | '/'
-  | '\\';
-
-export const normalizePath = (path: string) => {
-  let newPath = path;
-
-  while (newPath.startsWith(`.${pathSeparator}`)) {
-    newPath = newPath.slice(2);
-  }
-
-  while (newPath.startsWith(pathSeparator)) {
-    newPath = newPath.slice(1);
-  }
-
-  while (newPath.endsWith(pathSeparator)) {
-    newPath = newPath.slice(0, -1);
-  }
-
-  return newPath;
-};
-
-export const emailsDirectoryAbsolutePath = `${
-  process.env.NEXT_PUBLIC_USER_PROJECT_LOCATION
-}${pathSeparator}${normalizePath(emailsDirRelativePath)}`;

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

@@ -1,108 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import path from 'node:path';
-import vm from 'node:vm';
-import { type RawSourceMap } from 'source-map-js';
-import { type OutputFile, build, type BuildFailure } from 'esbuild';
-import type { EmailTemplate as EmailComponent } from './types/email-template';
-import type { ErrorObject } from './types/error-object';
-import { improveErrorWithSourceMap } from './improve-error-with-sourcemap';
-import { staticNodeModulesForVM } from './static-node-modules-for-vm';
-
-export const getEmailComponent = async (
-  emailPath: string,
-): Promise<
-  | {
-      emailComponent: EmailComponent;
-
-      sourceMapToOriginalFile: RawSourceMap;
-    }
-  | { error: ErrorObject }
-> => {
-  let outputFiles: OutputFile[];
-  try {
-    const buildData = await build({
-      bundle: true,
-      entryPoints: [emailPath],
-      platform: 'node',
-      write: false,
-      format: 'cjs',
-      jsx: 'automatic',
-      logLevel: 'silent',
-      // allows for using jsx on a .js file
-      loader: {
-        '.js': 'jsx',
-      },
-      outdir: 'stdout', // just a stub for esbuild, it won't actually write to this folder
-      sourcemap: 'external',
-    });
-    outputFiles = buildData.outputFiles;
-  } catch (exception) {
-    const buildFailure = exception as BuildFailure;
-    return {
-      error: {
-        message: buildFailure.message,
-        stack: buildFailure.stack,
-        name: buildFailure.name,
-        cause: buildFailure.cause,
-      },
-    };
-  }
-
-  const sourceMapFile = outputFiles[0]!;
-  const bundledEmailFile = outputFiles[1]!;
-  const builtEmailCode = bundledEmailFile.text;
-
-  const fakeContext = {
-    ...global,
-    console,
-    Buffer,
-    module: { exports: { default: undefined as unknown } },
-    __filanem: emailPath,
-    __dirname: path.dirname(emailPath),
-    require: (module: string) => {
-      if (module in staticNodeModulesForVM) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        return staticNodeModulesForVM[module];
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      return require(`${module}`) as unknown;
-      // this stupid string templating was necessary to not have
-      // webpack warnings like:
-      //
-      // Import trace for requested module:
-      // ./src/utils/get-email-component.tsx
-      // ./src/app/page.tsx
-      //  ⚠ ./src/utils/get-email-component.tsx
-      // Critical dependency: the request of a dependency is an expression
-    },
-    process,
-  };
-  const sourceMapToEmail = JSON.parse(sourceMapFile.text) as RawSourceMap;
-  try {
-    vm.runInNewContext(builtEmailCode, fakeContext, { filename: emailPath });
-  } catch (exception) {
-    const error = exception as Error;
-
-    return {
-      error: improveErrorWithSourceMap(error, emailPath, sourceMapToEmail),
-    };
-  }
-
-  if (fakeContext.module.exports.default === undefined) {
-    return {
-      error: improveErrorWithSourceMap(
-        new Error(
-          `The email component at ${emailPath} does not contain a default export`,
-        ),
-        emailPath,
-        sourceMapToEmail,
-      ),
-    };
-  }
-
-  return {
-    emailComponent: fakeContext.module.exports.default as EmailComponent,
-    sourceMapToOriginalFile: sourceMapToEmail,
-  };
-};