react-email 4.0.0-alpha.0 → 4.0.0-alpha.2

package/src/components/topbar/active-view-toggle-group.tsx

@@ -0,0 +1,86 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils';
+import { tabTransition } from '../../utils/constants';
+import { IconMonitor } from '../icons/icon-monitor';
+import { IconSource } from '../icons/icon-source';
+import { Tooltip } from '../tooltip';
+
+interface ActiveViewToggleGroupProps {
+  activeView: string;
+  setActiveView: (view: string) => void;
+}
+
+export const ActiveViewToggleGroup = ({
+  activeView,
+  setActiveView,
+}: ActiveViewToggleGroupProps) => {
+  return (
+    <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="preview">
+        <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 === 'preview' && (
+                <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>Preview</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>
+  );
+};

package/src/components/topbar/view-size-controls.tsx

@@ -0,0 +1,247 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { motion } from 'framer-motion';
+import * as React from 'react';
+import { cn } from '../../utils';
+import { IconArrowDown } from '../icons/icon-arrow-down';
+import { Tooltip } from '../tooltip';
+
+interface ViewDimensions {
+  width: number;
+  height: number;
+}
+
+interface ViewSizeControlsProps {
+  viewWidth: number;
+  setViewWidth: (width: number) => void;
+  viewHeight: number;
+  setViewHeight: (height: number) => void;
+}
+
+interface DimensionInputProps {
+  icon: React.ReactNode;
+  isActive: boolean;
+  label: string;
+  onBlur: () => void;
+  onChange: (value: number) => void;
+  setIsActive: (active: boolean) => void;
+  value: number;
+  hasBorder?: boolean;
+}
+
+interface PresetOption {
+  name: string;
+  dimensions: ViewDimensions;
+}
+
+interface PresetMenuItemProps {
+  name: string;
+  dimensions: ViewDimensions;
+  onSelect: (dimensions: ViewDimensions) => void;
+}
+
+const VIEW_PRESETS: PresetOption[] = [
+  { name: 'Desktop', dimensions: { width: 600, height: 1024 } },
+  { name: 'Mobile', dimensions: { width: 375, height: 812 } },
+];
+
+const inputVariant = {
+  active: {
+    width: '3.5rem',
+    padding: '0 0 0 0.5rem',
+  },
+  inactive: {
+    width: '0',
+  },
+};
+
+const DimensionInput = ({
+  icon,
+  isActive,
+  label,
+  onBlur,
+  onChange,
+  setIsActive,
+  value,
+  hasBorder,
+}: DimensionInputProps) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    if (isActive && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isActive]);
+
+  const handleButtonClick = () => {
+    if (isActive) {
+      setIsActive(false);
+    } else {
+      setIsActive(true);
+    }
+  };
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <motion.button
+            onClick={handleButtonClick}
+            className={cn('relative flex items-center justify-center p-2', {
+              'border-slate-6 border-r': hasBorder,
+            })}
+          >
+            {icon}
+            <motion.input
+              ref={inputRef}
+              initial={false}
+              animate={isActive ? 'active' : 'inactive'}
+              className="arrow-hide relative flex h-8 items-center justify-center bg-black text-sm outline-none"
+              onChange={(e) => onChange(Number.parseInt(e.currentTarget.value))}
+              onBlur={onBlur}
+              type="number"
+              value={value}
+              variants={inputVariant}
+            />
+          </motion.button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <span>{label}: </span>
+          <span className="font-mono">{value}px</span>
+        </Tooltip.Content>
+      </Tooltip>
+    </Tooltip.Provider>
+  );
+};
+
+const PresetMenuItem = ({
+  name,
+  dimensions,
+  onSelect,
+}: PresetMenuItemProps) => (
+  <DropdownMenu.Item
+    className="group flex w-full cursor-pointer select-none items-center justify-between rounded-md py-1.5 pr-1 pl-2 text-sm outline-none transition-colors data-[highlighted]:bg-slate-5"
+    onClick={() => onSelect(dimensions)}
+  >
+    {name}
+    <span className="flex h-fit items-center rounded-full bg-slate-6 px-1.5 py-0.5 font-bold text-white text-xs">
+      {dimensions.width}x{dimensions.height}
+    </span>
+  </DropdownMenu.Item>
+);
+
+export const ViewSizeControls = ({
+  viewWidth,
+  viewHeight,
+  setViewWidth,
+  setViewHeight,
+}: ViewSizeControlsProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [activeInput, setActiveInput] = React.useState<
+    'width' | 'height' | null
+  >(null);
+
+  const handlePresetSelect = (dimensions: ViewDimensions) => {
+    setViewWidth(dimensions.width);
+    setViewHeight(dimensions.height);
+  };
+
+  const handleBlur = () => {
+    setActiveInput(null);
+  };
+
+  return (
+    <div className="relative flex h-9 w-fit overflow-hidden rounded-lg border border-slate-6 text-sm transition-colors duration-300 ease-in-out focus-within:border-slate-8 hover:border-slate-8">
+      <DimensionInput
+        icon={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3" />
+            <path d="M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" />
+            <path d="M4 12H2" />
+            <path d="M10 12H8" />
+            <path d="M16 12h-2" />
+            <path d="M22 12h-2" />
+          </svg>
+        }
+        value={viewWidth}
+        onChange={setViewWidth}
+        isActive={activeInput === 'width'}
+        setIsActive={(active) => setActiveInput(active ? 'width' : null)}
+        onBlur={handleBlur}
+        label="Width"
+        hasBorder
+      />
+      <DimensionInput
+        icon={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" />
+            <path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" />
+            <path d="M12 20v2" />
+            <path d="M12 14v2" />
+            <path d="M12 8v2" />
+            <path d="M12 2v2" />
+          </svg>
+        }
+        value={viewHeight}
+        onChange={setViewHeight}
+        isActive={activeInput === 'height'}
+        setIsActive={(active) => setActiveInput(active ? 'height' : null)}
+        onBlur={handleBlur}
+        label="Height"
+      />
+      <DropdownMenu.Root open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+        <DropdownMenu.Trigger asChild>
+          <button
+            type="button"
+            className="relative flex items-center justify-center overflow-hidden bg-slate-5 p-2 text-slate-11 text-sm leading-none outline-none transition-colors ease-linear focus-within:text-slate-12 hover:text-slate-12 focus:text-slate-12"
+          >
+            <span className="sr-only">View presets</span>
+            <IconArrowDown
+              className={cn(
+                'transform transition-transform duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+                {
+                  '-rotate-180': isDropdownOpen,
+                },
+              )}
+            />
+          </button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            align="end"
+            className="flex min-w-[12rem] flex-col gap-2 rounded-md border border-slate-8 border-solid bg-black px-2 py-2 text-white"
+            sideOffset={5}
+          >
+            {VIEW_PRESETS.map((preset) => (
+              <PresetMenuItem
+                key={preset.name}
+                name={preset.name}
+                dimensions={preset.dimensions}
+                onSelect={handlePresetSelect}
+              />
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </div>
+  );
+};

package/src/components/topbar.tsx

@@ -1,24 +1,23 @@
 'use client';
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import { motion } from 'framer-motion';
-import type * 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';
+import { ActiveViewToggleGroup } from './topbar/active-view-toggle-group';
+import { ViewSizeControls } from './topbar/view-size-controls';
 
 interface TopbarProps {
   currentEmailOpenSlug: string;
   pathSeparator: string;
-  activeView?: string;
   markup?: string;
   onToggleSidebar?: () => void;
+  activeView?: string;
   setActiveView?: (view: string) => void;
+  viewWidth?: number;
+  setViewWidth?: (width: number) => void;
+  viewHeight?: number;
+  setViewHeight?: (height: number) => void;
 }
 
 export const Topbar = ({
@@ -27,127 +26,53 @@ export const Topbar = ({
   markup,
   activeView,
   setActiveView,
+  viewWidth,
+  setViewWidth,
+  viewHeight,
+  setViewHeight,
   onToggleSidebar,
 }: TopbarProps) => {
   return (
     <Tooltip.Provider>
-      <header className="relative flex h-[3.3125rem] items-center justify-between border-slate-6 border-b px-3">
-        <Tooltip>
-          <Tooltip.Trigger asChild>
-            <button
-              className="relative hidden rounded-lg px-2 py-2 text-slate-11 transition duration-200 ease-in-out hover:bg-slate-5 hover:text-slate-12 lg:flex"
-              onClick={() => {
-                if (onToggleSidebar) {
-                  onToggleSidebar();
-                }
-              }}
-              type="button"
-            >
-              <IconHideSidebar height={20} width={20} />
-            </button>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Show/hide sidebar</Tooltip.Content>
-        </Tooltip>
-        <div className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 hidden transform items-center overflow-hidden text-center lg:flex">
-          <Heading as="h2" className="truncate" size="2" weight="medium">
-            {currentEmailOpenSlug.split(pathSeparator).pop()}
-          </Heading>
+      <header className="relative flex h-[3.3125rem] items-center justify-between gap-3 border-slate-6 border-b px-3">
+        <div className="relative flex w-fit items-center gap-3">
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <button
+                className="relative hidden rounded-lg px-2 py-2 text-slate-11 transition duration-200 ease-in-out hover:bg-slate-5 hover:text-slate-12 lg:flex"
+                onClick={() => {
+                  if (onToggleSidebar) {
+                    onToggleSidebar();
+                  }
+                }}
+                type="button"
+              >
+                <IconHideSidebar height={20} width={20} />
+              </button>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Show/hide sidebar</Tooltip.Content>
+          </Tooltip>
+          <div className="hidden items-center overflow-hidden text-center lg:flex">
+            <Heading as="h2" className="truncate" size="2" weight="medium">
+              {currentEmailOpenSlug.split(pathSeparator).pop()}
+            </Heading>
+          </div>
         </div>
-        <div className="flex w-full justify-between gap-3 lg:w-fit lg:justify-start">
-          <ToggleGroup.Root
-            aria-label="View mode"
-            className="inline-block h-[36px] items-center overflow-hidden rounded-md border border-slate-6 bg-slate-2"
-            onValueChange={(value) => {
-              if (value) setActiveView?.(value);
-            }}
-            type="single"
-            value={activeView}
-          >
-            <ToggleGroup.Item value="desktop">
-              <Tooltip>
-                <Tooltip.Trigger asChild>
-                  <div
-                    className={cn(
-                      'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
-                      {
-                        'text-slate-11': activeView !== 'desktop',
-                        'text-slate-12': activeView === 'desktop',
-                      },
-                    )}
-                  >
-                    {activeView === 'desktop' && (
-                      <motion.span
-                        animate={{ opacity: 1 }}
-                        className="absolute top-0 right-0 bottom-0 left-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(
-                      'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
-                      {
-                        'text-slate-11': activeView !== 'mobile',
-                        'text-slate-12': activeView === 'mobile',
-                      },
-                    )}
-                  >
-                    {activeView === 'mobile' && (
-                      <motion.span
-                        animate={{ opacity: 1 }}
-                        className="absolute top-0 right-0 bottom-0 left-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(
-                      'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
-                      {
-                        'text-slate-11': activeView !== 'source',
-                        'text-slate-12': activeView === 'source',
-                      },
-                    )}
-                  >
-                    {activeView === 'source' && (
-                      <motion.span
-                        animate={{ opacity: 1 }}
-                        className="absolute top-0 right-0 bottom-0 left-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>
+        <div className="flex w-full items-center justify-between gap-3 lg:w-fit lg:justify-start">
+          {setViewWidth && setViewHeight && viewWidth && viewHeight ? (
+            <ViewSizeControls
+              setViewHeight={setViewHeight}
+              setViewWidth={setViewWidth}
+              viewHeight={viewHeight}
+              viewWidth={viewWidth}
+            />
+          ) : null}
+          {activeView && setActiveView ? (
+            <ActiveViewToggleGroup
+              activeView={activeView}
+              setActiveView={setActiveView}
+            />
+          ) : null}
           {markup ? (
             <div className="flex justify-end">
               <Send markup={markup} />

package/src/hooks/use-clamped-state.ts

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+const clamp = (v: number, min: number, max: number) => {
+  return Math.min(Math.max(v, min), max);
+};
+
+export const useClampedState = (initial: number, min: number, max: number) => {
+  const [v, setV] = useState(initial);
+
+  return [
+    clamp(v, min, max),
+    (valueOrFunction: number | ((v: number) => number)) => {
+      if (typeof valueOrFunction === 'function') {
+        setV((value: number) => {
+          const currentValue = clamp(value, min, max);
+
+          return clamp(valueOrFunction(currentValue), min, max);
+        });
+      } else {
+        setV(clamp(valueOrFunction, min, max));
+      }
+    },
+  ] as const;
+};

package/src/hooks/use-icon-animation.ts

@@ -1,11 +1,11 @@
-import type { LottieRefCurrentProps } from 'lottie-react';
+import type { DotLottie } from '@lottiefiles/dotlottie-react';
 import * as React from 'react';
 
 const TIMEOUT = 150;
 const THRESHOLD_ANIMATION = 0.9;
 
 export const useIconAnimation = () => {
-  const ref = React.useRef<LottieRefCurrentProps>(null);
+  const ref = React.useRef<DotLottie>(null);
   const timer = React.useRef<NodeJS.Timeout | null>(null);
 
   const onMouseLeave = React.useCallback(() => {
@@ -17,10 +17,8 @@ export const useIconAnimation = () => {
       return;
     }
 
-    const total = Math.round(ref.current.animationItem?.totalFrames ?? 0);
-    const current = Math.round(
-      (ref.current.animationItem?.currentFrame ?? 0) + 1,
-    );
+    const total = Math.round(ref.current.totalFrames ?? 0);
+    const current = Math.round((ref.current.currentFrame ?? 0) + 1);
 
     if (current === 1 || current >= total * THRESHOLD_ANIMATION) {
       timer.current = setTimeout(() => {
@@ -29,7 +27,6 @@ export const useIconAnimation = () => {
         }
 
         ref.current.stop();
-        ref.current.setDirection(1);
         ref.current.setSpeed(1);
         ref.current.play();
       }, TIMEOUT);

package/src/utils/static-node-modules-for-vm.ts

@@ -23,7 +23,6 @@ import os from 'node:os';
 import path from 'node:path';
 import perfHooks from 'node:perf_hooks';
 import process from 'node:process';
-import punycode from 'node:punycode';
 import querystring from 'node:querystring';
 import readline from 'node:readline';
 import repl from 'node:repl';
@@ -40,6 +39,8 @@ import v8 from 'node:v8';
 import vm from 'node:vm';
 import workerThreads from 'node:worker_threads';
 import zlib from 'node:zlib';
+// See https://github.com/resend/react-email/issues/1841#issuecomment-2589985562
+import punycode from 'module-punycode';
 
 /**
  * A map of the name of the modules (including `node:` prefixed ones)

package/tailwind.config.ts

@@ -3,25 +3,20 @@ import colors = require('@radix-ui/colors');
 import { fontFamily } from 'tailwindcss/defaultTheme';
 import plugin from 'tailwindcss/plugin';
 
-const iOsHeight = plugin(({ addUtilities }) => {
-  const supportsTouchRule = '@supports (-webkit-touch-callout: none)';
-  const webkitFillAvailable = '-webkit-fill-available';
-
-  const utilities = {
-    '.min-h-screen-ios': {
-      [supportsTouchRule]: {
-        minHeight: webkitFillAvailable,
+const numberInputArrowHide = plugin(({ addUtilities }) => {
+  addUtilities({
+    '.arrow-hide': {
+      appearance: 'textfield',
+      '&::-webkit-inner-spin-button': {
+        appearance: 'none',
+        margin: '0px',
       },
-    },
-    '.h-screen-ios': {
-      [supportsTouchRule]: {
-        height: webkitFillAvailable,
+      '&::-webkit-outer-spin-button': {
+        appearance: 'none',
+        margin: '0px',
       },
     },
-  };
-
-  // @ts-expect-error This works normally, not sure what this error is
-  addUtilities(utilities, ['responsive']);
+  });
 });
 
 const config: Config = {
@@ -89,6 +84,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [iOsHeight],
+  plugins: [numberInputArrowHide],
 };
 export default config;

package/tsconfig.json

@@ -14,7 +14,11 @@
     "preserveWatchOutput": true,
     "skipLibCheck": true,
     "strictNullChecks": true,
-    "plugins": [{ "name": "next" }],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "allowJs": true,
     "declaration": false,
     "declarationMap": false,
@@ -31,5 +35,5 @@
     "outDir": "dist"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["tsconfig.export.json", ".next", "dist", "node_modules"]
+  "exclude": [".next", "dist", "node_modules", "**/*.spec.ts", "**/*.spec.tsx"]
 }