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

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-2 py-1 font-medium text-slate-11 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

@@ -0,0 +1,59 @@
+'use client';
+
+import { use } from 'react';
+import { cn } from '../utils';
+import { Heading } from './heading';
+import { IconHideSidebar } from './icons/icon-hide-sidebar';
+import { ShellContext } from './shell';
+import { Tooltip } from './tooltip';
+
+interface TopbarProps extends React.ComponentProps<'header'> {
+  emailTitle: string;
+  children: React.ReactNode;
+}
+
+export const Topbar = ({
+  emailTitle,
+  children,
+  className,
+  ...props
+}: TopbarProps) => {
+  const { toggleSidebar } = use(ShellContext)!;
+
+  return (
+    <Tooltip.Provider>
+      <header
+        {...props}
+        className={cn(
+          'flex h-14 items-center justify-between gap-3 border-slate-6 border-b px-3 py-2',
+          className,
+        )}
+      >
+        <div className="flex w-fit items-center gap-3">
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <button
+                className="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={() => {
+                  toggleSidebar();
+                }}
+                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">
+              {emailTitle}
+            </Heading>
+          </div>
+        </div>
+        <div className="flex w-full items-center justify-between gap-3 lg:w-fit lg:justify-start">
+          {children}
+        </div>
+      </header>
+    </Tooltip.Provider>
+  );
+};

package/src/contexts/emails.tsx

@@ -0,0 +1,59 @@
+'use client';
+import { createContext, useContext, useState } from 'react';
+import { getEmailsDirectoryMetadataAction } from '../actions/get-emails-directory-metadata-action';
+import { isBuilding } from '../app/env';
+import { useHotreload } from '../hooks/use-hot-reload';
+import type { EmailsDirectory } from '../utils/get-emails-directory-metadata';
+
+const EmailsContext = createContext<
+  | {
+      emailsDirectoryMetadata: EmailsDirectory;
+    }
+  | 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);
+
+  if (!isBuilding) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: this will not change on runtime so it doesn't violate the rules of hooks
+    useHotreload(async () => {
+      const metadata = await getEmailsDirectoryMetadataAction(
+        props.initialEmailsDirectoryMetadata.absolutePath,
+      );
+      if (metadata) {
+        setEmailsDirectoryMetadata(metadata);
+      } else {
+        throw new Error(
+          'Hot reloading: unable to find the emails directory to update the sidebar',
+        );
+      }
+    });
+  }
+
+  return (
+    <EmailsContext.Provider
+      value={{
+        emailsDirectoryMetadata,
+      }}
+    >
+      {props.children}
+    </EmailsContext.Provider>
+  );
+};

package/src/contexts/fragment-identifier.tsx

@@ -0,0 +1,48 @@
+'use client';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { createContext, use, useEffect, useState } from 'react';
+
+export const FragmentIdentifierContext = createContext<
+  | {
+      identifier: string | undefined;
+
+      update(value: string): void;
+    }
+  | undefined
+>(undefined);
+
+export const useFragmentIdentifier = () => {
+  const value = use(FragmentIdentifierContext);
+  return value?.identifier;
+};
+
+export const FragmentIdentifierProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [fragmentIdentifier, setFragmentIdentifier] = useState<string>();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const update = () => {
+    setFragmentIdentifier(location.hash);
+  };
+
+  useEffect(() => {
+    update();
+  }, [pathname, searchParams]);
+
+  return (
+    <FragmentIdentifierContext.Provider
+      value={{
+        identifier: fragmentIdentifier,
+        update(value: string) {
+          setFragmentIdentifier(value);
+        },
+      }}
+    >
+      {children}
+    </FragmentIdentifierContext.Provider>
+  );
+};

package/src/contexts/preview.tsx

@@ -0,0 +1,79 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { createContext } from 'react';
+import type {
+  EmailRenderingResult,
+  RenderedEmailMetadata,
+} from '../actions/render-email-by-path';
+import { isBuilding } from '../app/env';
+import { useEmailRenderingResult } from '../hooks/use-email-rendering-result';
+import { useHotreload } from '../hooks/use-hot-reload';
+import { useRenderingMetadata } from '../hooks/use-rendering-metadata';
+
+export const PreviewContext = createContext<
+  | {
+      renderedEmailMetadata: RenderedEmailMetadata | undefined;
+      renderingResult: EmailRenderingResult;
+
+      emailSlug: string;
+      emailPath: string;
+    }
+  | undefined
+>(undefined);
+
+interface PreviewProvider {
+  emailSlug: string;
+  emailPath: string;
+
+  serverRenderingResult: EmailRenderingResult;
+
+  children: React.ReactNode;
+}
+
+export const PreviewProvider = ({
+  emailSlug,
+  emailPath,
+  serverRenderingResult,
+  children,
+}: PreviewProvider) => {
+  const router = useRouter();
+
+  const renderingResult = useEmailRenderingResult(
+    emailPath,
+    serverRenderingResult,
+  );
+
+  const renderedEmailMetadata = useRenderingMetadata(
+    emailPath,
+    renderingResult,
+    serverRenderingResult,
+  );
+
+  if (!isBuilding) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: this will not change on runtime so it doesn't violate the rules of hooks
+    useHotreload((changes) => {
+      const changeForThisEmail = changes.find((change) =>
+        change.filename.includes(emailSlug),
+      );
+
+      if (typeof changeForThisEmail !== 'undefined') {
+        if (changeForThisEmail.event === 'unlink') {
+          router.push('/');
+        }
+      }
+    });
+  }
+
+  return (
+    <PreviewContext.Provider
+      value={{
+        emailPath,
+        emailSlug,
+        renderedEmailMetadata,
+        renderingResult,
+      }}
+    >
+      {children}
+    </PreviewContext.Provider>
+  );
+};

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-email-rendering-result.ts

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
+import {
+  type EmailRenderingResult,
+  renderEmailByPath,
+} from '../actions/render-email-by-path';
+import { isBuilding } from '../app/env';
+import { useEmails } from '../contexts/emails';
+import { containsEmailTemplate } from '../utils/contains-email-template';
+import { useHotreload } from './use-hot-reload';
+
+export const useEmailRenderingResult = (
+  emailPath: string,
+  serverEmailRenderedResult: EmailRenderingResult,
+) => {
+  const [renderingResult, setRenderingResult] = useState(
+    serverEmailRenderedResult,
+  );
+
+  const { emailsDirectoryMetadata } = useEmails();
+
+  if (!isBuilding) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: This is fine since isBuilding does not change at runtime
+    useHotreload(async (changes) => {
+      for await (const change of changes) {
+        const relativePathForChangedFile =
+          // ex: apple-receipt.tsx
+          // it will be the path relative to the emails directory, so it is already
+          // going to be equivalent to the slug
+          change.filename;
+
+        if (
+          !containsEmailTemplate(
+            relativePathForChangedFile,
+            emailsDirectoryMetadata,
+          )
+        ) {
+          continue;
+        }
+
+        const pathForChangedEmail = await getEmailPathFromSlug(
+          relativePathForChangedFile,
+        );
+
+        const newRenderingResult = await renderEmailByPath(
+          pathForChangedEmail,
+          true,
+        );
+
+        if (pathForChangedEmail === emailPath) {
+          setRenderingResult(newRenderingResult);
+        }
+      }
+    });
+  }
+
+  return renderingResult;
+};

package/src/hooks/use-fragment-identifier.ts

@@ -0,0 +1,14 @@
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export const useFragmentIdentifier = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [fragmentIdentifier, setFragmentIdentifier] = useState<string>();
+
+  useEffect(() => {
+    setFragmentIdentifier(global.location?.hash);
+  }, [pathname, searchParams]);
+
+  return fragmentIdentifier;
+};