react-email 4.1.0-canary.7 → 4.1.0-canary.9

package/src/components/button.tsx

@@ -1,101 +0,0 @@
-'use client';
-import { DotLottieReact } from '@lottiefiles/dotlottie-react';
-import * as SlotPrimitive from '@radix-ui/react-slot';
-import type * as React from 'react';
-import animatedLoadIcon from '../animated-icons-data/load.json';
-import { cn } from '../utils/cn';
-import { unreachable } from '../utils/unreachable';
-
-type RootProps = React.ComponentProps<'button'>;
-
-type Appearance = 'white' | 'gradient';
-type Size = '1' | '2' | '3' | '4';
-
-interface ButtonProps extends RootProps {
-  asChild?: boolean;
-  appearance?: Appearance;
-  size?: Size;
-  loading?: boolean;
-}
-
-export const Button = ({
-  asChild,
-  appearance = 'white',
-  className,
-  children,
-  size = '2',
-  loading,
-  ref,
-  ...props
-}: ButtonProps) => {
-  const Root = asChild ? SlotPrimitive.Slot : 'button';
-
-  return (
-    <Root
-      ref={ref}
-      type="button"
-      {...props}
-      className={cn(
-        getSize(size),
-        getAppearance(appearance),
-        'inline-flex items-center justify-center gap-2 border font-medium',
-        className,
-      )}
-      aria-disabled={loading}
-    >
-      <span
-        className={cn(
-          '-ml-7 opacity-0 transition-opacity duration-200',
-          loading && 'opacity-100',
-        )}
-      >
-        <DotLottieReact
-          data={animatedLoadIcon}
-          autoplay={false}
-          className="h-5 w-5"
-          loop={true}
-        />
-      </span>
-      <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
-    </Root>
-  );
-};
-
-Button.displayName = 'Button';
-
-const getAppearance = (appearance: Appearance | undefined) => {
-  switch (appearance) {
-    case undefined:
-    case 'white':
-      return [
-        'border-white bg-white text-black transition-colors duration-200 ease-in-out',
-        'hover:bg-white/90',
-        'focus:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white/20',
-        'mt-2 mb-4 aria-disabled:border-transparent aria-disabled:bg-slate-11',
-      ];
-    case 'gradient':
-      return [
-        'bg-gradient border-[#34343A] backdrop-blur-[1.25rem]',
-        'hover:bg-gradientHover',
-        'focus:bg-gradientHover focus:outline-none focus:ring-2 focus:ring-white/20',
-      ];
-    default:
-      unreachable(appearance);
-  }
-};
-
-const getSize = (size: Size | undefined) => {
-  switch (size) {
-    case '1':
-      return '';
-    case undefined:
-    case '2':
-      return 'text-[.875rem] h-8 px-3 rounded-md gap-2';
-    case '3':
-      return 'text-[.875rem] 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/src/components/code-container.tsx

@@ -1,164 +0,0 @@
-import { LayoutGroup, motion } from 'framer-motion';
-import type { Language } from 'prism-react-renderer';
-import * as React from 'react';
-import { copyTextToClipboard } from '../utils';
-import { tabTransition } from '../utils/constants';
-import languageMap from '../utils/language-map';
-import { Code } from './code';
-import { IconButton } from './icons/icon-button';
-import { IconCheck } from './icons/icon-check';
-import { IconClipboard } from './icons/icon-clipboard';
-import { IconDownload } from './icons/icon-download';
-import { Tooltip } from './tooltip';
-
-interface CodeContainerProps {
-  markups: MarkupProps[];
-  activeLang: string;
-  setActiveLang: (lang: string) => void;
-}
-
-interface MarkupProps {
-  language: Language;
-  content: string;
-}
-
-export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
-  markups,
-  activeLang,
-  setActiveLang,
-}) => {
-  const activeMarkup = markups.find(({ language }) => activeLang === language);
-  if (!activeMarkup) {
-    throw new Error('No markup found for the active language!', {
-      cause: {
-        activeLang,
-        markups,
-      },
-    });
-  }
-
-  return (
-    <div
-      className="relative max-h-[650px] w-full h-full whitespace-pre rounded-md border border-slate-6 text-sm"
-      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="h-9 border-b border-slate-6">
-        <div className="flex">
-          <LayoutGroup id="code">
-            {markups.map(({ language }) => {
-              const isCurrentLang = activeLang === language;
-              return (
-                <motion.button
-                  className={`relative px-4 py-[8px] font-sans text-sm font-medium transition duration-200 ease-in-out hover:text-slate-12 ${
-                    activeLang !== language ? 'text-slate-11' : 'text-slate-12'
-                  }`}
-                  key={language}
-                  onClick={() => {
-                    setActiveLang(language);
-                  }}
-                >
-                  {isCurrentLang ? (
-                    <motion.span
-                      animate={{ opacity: 1 }}
-                      className="absolute bottom-0 left-0 right-0 top-0 bg-slate-4"
-                      exit={{ opacity: 0 }}
-                      initial={{ opacity: 0 }}
-                      layoutId="code"
-                      transition={tabTransition}
-                    />
-                  ) : null}
-                  {languageMap[language]}
-                </motion.button>
-              );
-            })}
-          </LayoutGroup>
-        </div>
-        <CopyToClipboardButton content={activeMarkup.content} />
-        <DownloadButton
-          content={activeMarkup.content}
-          filename={`email.${activeMarkup.language}`}
-        />
-      </div>
-      <div className="h-[calc(100%-2.25rem)]">
-        <Code language={activeLang}>{activeMarkup.content}</Code>
-      </div>
-    </div>
-  );
-};
-
-interface CopyToClipboardButtonProps {
-  content: string;
-}
-
-const CopyToClipboardButton = ({ content }: CopyToClipboardButtonProps) => {
-  const [isCopied, setIsCopied] = React.useState(false);
-
-  const unsetIsCopiedTimeout = React.useRef<NodeJS.Timeout>(undefined);
-  React.useEffect(() => {
-    setIsCopied(false);
-    clearTimeout(unsetIsCopiedTimeout.current);
-    unsetIsCopiedTimeout.current = undefined;
-  }, [content]);
-
-  return (
-    <Tooltip>
-      <Tooltip.Trigger
-        asChild
-        className="absolute right-2 top-2 hidden md:block"
-      >
-        <IconButton
-          onClick={async () => {
-            setIsCopied(true);
-            await copyTextToClipboard(content);
-            unsetIsCopiedTimeout.current = setTimeout(() => {
-              setIsCopied(false);
-            }, 3000);
-          }}
-        >
-          {isCopied ? <IconCheck /> : <IconClipboard />}
-        </IconButton>
-      </Tooltip.Trigger>
-      <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
-    </Tooltip>
-  );
-};
-
-interface DownloadButtonProps {
-  content: string;
-  filename: string;
-}
-
-const DownloadButton = ({ content, filename }: DownloadButtonProps) => {
-  const generatedUrl = React.useMemo(() => {
-    const file = new File([content], filename);
-    return URL.createObjectURL(file);
-  }, [content, filename]);
-  const url = React.useSyncExternalStore(
-    () => () => {},
-    () => generatedUrl,
-    () => undefined,
-  );
-
-  return (
-    <Tooltip>
-      <Tooltip.Trigger
-        asChild
-        className="text-gray-11 absolute right-8 top-2 hidden md:block"
-      >
-        <a
-          className="text-slate-11 transition duration-200 ease-in-out hover:text-slate-12"
-          download={filename}
-          href={url}
-        >
-          <IconDownload />
-        </a>
-      </Tooltip.Trigger>
-      <Tooltip.Content>Download</Tooltip.Content>
-    </Tooltip>
-  );
-};

package/src/components/code-snippet.tsx

@@ -1,9 +0,0 @@
-const CodeSnippet = ({ children }) => {
-  return (
-    <code className="m-0.5 inline-block rounded-md bg-white/10 p-1 font-mono leading-none text-slate-12">
-      {children}
-    </code>
-  );
-};
-
-export default CodeSnippet;

package/src/components/code.tsx

@@ -1,184 +0,0 @@
-'use client';
-import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
-import type { Language } from 'prism-react-renderer';
-import { Highlight } from 'prism-react-renderer';
-import { Fragment, useEffect, useRef } from 'react';
-import { useFragmentIdentifier } from '../hooks/use-fragment-identifier';
-import { cn } from '../utils';
-
-interface CodeProps {
-  children: string;
-  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',
-      },
-    },
-  ],
-};
-
-const lineHashRegex = /#L(?<start>\d+)(?:,(?<end>\d+))?/;
-
-export const Code: React.FC<Readonly<CodeProps>> = ({
-  children,
-  language = 'html',
-}) => {
-  const locationHash = useFragmentIdentifier();
-  const highlight = (() => {
-    if (locationHash) {
-      const match = locationHash.match(lineHashRegex);
-      if (match?.groups?.start) {
-        const start = Number.parseInt(match.groups.start);
-        const end = match.groups.end
-          ? Number.parseInt(match.groups.end)
-          : start;
-        return [start, end] as const;
-      }
-    }
-  })();
-
-  const isHighlighting = (line: number) => {
-    if (!highlight) return false;
-
-    return highlight[0] <= line && highlight[1] >= line;
-  };
-
-  const scrollerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const scroller = scrollerRef.current;
-    if (highlight && scroller) {
-      const lineElement = scroller.querySelector(`#L${highlight[0]}`);
-      if (lineElement instanceof HTMLAnchorElement) {
-        scroller.scrollTo({
-          top: Math.max(lineElement.offsetTop - 325, 0),
-          behavior: 'smooth',
-        });
-      }
-    }
-  }, [highlight]);
-
-  const searchParams = useSearchParams();
-
-  const value = children.trim();
-
-  return (
-    <Highlight code={value} language={language} theme={theme}>
-      {({ tokens, getLineProps, getTokenProps }) => (
-        <>
-          <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%)',
-            }}
-          />
-          <div
-            ref={scrollerRef}
-            className="flex max-h-[650px] h-full p-4 after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto"
-          >
-            <div className="text-[#49494f] text-[13px] font-light font-[MonoLisa,_Menlo,_monospace]">
-              {tokens.map((_, i) => (
-                <Link
-                  id={`L${i + 1}`}
-                  key={i}
-                  href={{
-                    hash: `#L${i + 1}`,
-                    search: searchParams.toString(),
-                  }}
-                  scroll={false}
-                  className={cn(
-                    'align-middle block scroll-mt-[325px] rounded-l-sm select-none pr-3 cursor-pointer hover:text-slate-12',
-                    isHighlighting(i + 1) &&
-                      'text-cyan-11 hover:text-cyan-11 bg-cyan-5',
-                  )}
-                  type="button"
-                >
-                  {i + 1}
-                </Link>
-              ))}
-            </div>
-            <pre>
-              {tokens.map((line, i) => {
-                const lineProps = getLineProps({
-                  line,
-                  key: i,
-                });
-                return (
-                  <div
-                    {...lineProps}
-                    className={cn(
-                      'whitespace-pre flex transition-colors rounded-r-sm',
-                      isHighlighting(i + 1) && 'bg-cyan-5',
-                      {
-                        "before:mr-2 before:text-slate-11 before:content-['$']":
-                          language === 'bash' && tokens.length === 1,
-                      },
-                    )}
-                    key={i}
-                  >
-                    {line.map((token, key) => {
-                      const tokenProps = getTokenProps({
-                        token,
-                      });
-                      const isException =
-                        token.content === 'from' &&
-                        line[key + 1]?.content === ':';
-                      const newTypes = isException
-                        ? [...token.types, 'key-white']
-                        : token.types;
-                      token.types = newTypes;
-
-                      return (
-                        <Fragment key={key}>
-                          <span {...tokenProps} />
-                        </Fragment>
-                      );
-                    })}
-                  </div>
-                );
-              })}
-            </pre>
-            <div
-              className="absolute bottom-0 left-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%)',
-              }}
-            />
-          </div>
-        </>
-      )}
-    </Highlight>
-  );
-};

package/src/components/heading.tsx

@@ -1,113 +0,0 @@
-import * as SlotPrimitive from '@radix-ui/react-slot';
-import * as React from 'react';
-import { type As, cn, 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
-      className={cn(
-        className,
-        getSizesClassNames(size),
-        getColorClassNames(color),
-        getWeightClassNames(weight),
-      )}
-      ref={forwardedRef}
-      {...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/src/components/icons/icon-arrow-down.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import type { IconElement, IconProps } from './icon-base';
-import { IconBase } from './icon-base';
-
-export const IconArrowDown = React.forwardRef<IconElement, Readonly<IconProps>>(
-  ({ ...props }, forwardedRef) => (
-    <IconBase ref={forwardedRef} {...props}>
-      <path
-        d="M12 16L6 9.85966L6.84 9L12 14.2808L17.16 9L18 9.85966L12 16Z"
-        fill="currentColor"
-      />
-    </IconBase>
-  ),
-);
-
-IconArrowDown.displayName = 'IconArrowDown';

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

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

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

@@ -1,19 +0,0 @@
-import { forwardRef } from 'react';
-import type { IconElement, IconProps } from './icon-base';
-import { IconBase } from './icon-base';
-
-export const IconBug = forwardRef<IconElement, IconProps>((props, ref) => (
-  <IconBase {...props} ref={ref}>
-    <g
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="m8 2l1.88 1.88m4.24 0L16 2M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
-      <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6m0 0v-9" />
-      <path d="M6.53 9C4.6 8.8 3 7.1 3 5m3 8H2m1 8c0-2.1 1.7-3.9 3.8-4M20.97 5c0 2.1-1.6 3.8-3.5 4M22 13h-4m-.8 4c2.1.1 3.8 1.9 3.8 4" />
-    </g>
-  </IconBase>
-));

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

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

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import type { IconElement, IconProps } from './icon-base';
-import { IconBase } 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"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-    </IconBase>
-  ),
-);
-
-IconCheck.displayName = 'IconCheck';