@react-email/preview-server 1.0.0-canary.0

package/src/components/button.tsx

@@ -0,0 +1,101 @@
+'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

@@ -0,0 +1,164 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,184 @@
+'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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,19 @@
+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';