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

package/src/components/button.tsx

@@ -1,10 +1,12 @@
+'use client';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import * as SlotPrimitive from '@radix-ui/react-slot';
-import * as React from 'react';
+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 ButtonElement = React.ComponentRef<'button'>;
-type RootProps = React.ComponentPropsWithoutRef<'button'>;
+type RootProps = React.ComponentProps<'button'>;
 
 type Appearance = 'white' | 'gradient';
 type Size = '1' | '2' | '3' | '4';
@@ -13,43 +15,51 @@ interface ButtonProps extends RootProps {
   asChild?: boolean;
   appearance?: Appearance;
   size?: Size;
+  loading?: boolean;
 }
 
-export const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(
-  (
-    {
-      asChild,
-      appearance = 'white',
-      className,
-      children,
-      size = '2',
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    const classNames = cn(
-      getSize(size),
-      getAppearance(appearance),
-      'inline-flex items-center justify-center border font-medium',
-      className,
-    );
+export const Button = ({
+  asChild,
+  appearance = 'white',
+  className,
+  children,
+  size = '2',
+  loading,
+  ref,
+  ...props
+}: ButtonProps) => {
+  const Root = asChild ? SlotPrimitive.Slot : 'button';
 
-    return asChild ? (
-      <SlotPrimitive.Slot ref={forwardedRef} {...props} className={classNames}>
-        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
-      </SlotPrimitive.Slot>
-    ) : (
-      <button
-        className={classNames}
-        ref={forwardedRef}
-        type="button"
-        {...props}
+  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',
+        )}
       >
-        {children}
-      </button>
-    );
-  },
-);
+        <DotLottieReact
+          data={animatedLoadIcon}
+          autoplay={false}
+          className="h-5 w-5"
+          loop={true}
+        />
+      </span>
+      <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
+    </Root>
+  );
+};
 
 Button.displayName = 'Button';
 
@@ -61,6 +71,7 @@ const getAppearance = (appearance: Appearance | undefined) => {
         '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 [

package/src/components/code-snippet.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 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">

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

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconImage = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+      <circle cx="9" cy="9" r="2" />
+      <path d="m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+    </g>
+  </IconBase>
+));

package/src/components/logo.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export const Logo = () => (
   <svg
     fill="none"

package/src/components/resizable-wrapper.tsx

@@ -0,0 +1,176 @@
+import { Slot } from '@radix-ui/react-slot';
+import { type ComponentProps, useCallback, useEffect, useRef } from 'react';
+import { cn } from '../utils';
+
+type Direction = 'north' | 'south' | 'east' | 'west';
+
+type ResizableWarpperProps = {
+  width: number;
+  height: number;
+
+  maxWidth: number;
+  maxHeight: number;
+  minWidth: number;
+  minHeight: number;
+
+  onResize: (newSize: number, direction: Direction) => void;
+  onResizeEnd?: () => void;
+
+  children: React.ReactNode;
+} & Omit<ComponentProps<'div'>, 'onResize' | 'children'>;
+
+export const makeIframeDocumentBubbleEvents = (iframe: HTMLIFrameElement) => {
+  const mouseMoveBubbler = (event: MouseEvent) => {
+    const bounds = iframe.getBoundingClientRect();
+    document.dispatchEvent(
+      new MouseEvent('mousemove', {
+        ...event,
+        clientX: event.clientX + bounds.x,
+        clientY: event.clientY + bounds.y,
+      }),
+    );
+  };
+  const mouseUpBubbler = (event: MouseEvent) => {
+    document.dispatchEvent(new MouseEvent('mouseup', event));
+  };
+  iframe.contentDocument?.addEventListener('mousemove', mouseMoveBubbler);
+  iframe.contentDocument?.addEventListener('mouseup', mouseUpBubbler);
+  return () => {
+    iframe.contentDocument?.removeEventListener('mousemove', mouseMoveBubbler);
+    iframe.contentDocument?.removeEventListener('mouseup', mouseUpBubbler);
+  };
+};
+
+export const ResizableWarpper = ({
+  width,
+  height,
+  onResize,
+  onResizeEnd,
+  children,
+
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+
+  ...rest
+}: ResizableWarpperProps) => {
+  const resizableRef = useRef<HTMLElement>(null);
+
+  const mouseMoveListener = useRef<(event: MouseEvent) => void>(null);
+
+  const handleStopResizing = useCallback(() => {
+    if (mouseMoveListener.current) {
+      document.removeEventListener('mousemove', mouseMoveListener.current);
+    }
+    document.removeEventListener('mouseup', handleStopResizing);
+    onResizeEnd?.();
+  }, []);
+
+  const handleStartResizing = (direction: Direction) => {
+    mouseMoveListener.current = (event) => {
+      if (event.button === 0 && resizableRef.current) {
+        const isHorizontal = direction === 'east' || direction === 'west';
+
+        const mousePosition = isHorizontal ? event.clientX : event.clientY;
+        const resizableBoundingRect =
+          resizableRef.current.getBoundingClientRect();
+        const center = isHorizontal
+          ? resizableBoundingRect.x + resizableBoundingRect.width / 2
+          : resizableBoundingRect.y + resizableBoundingRect.height / 2;
+        onResize(Math.abs(mousePosition - center) * 2, direction);
+      } else {
+        handleStopResizing();
+      }
+    };
+
+    document.addEventListener('mouseup', handleStopResizing);
+    document.addEventListener('mousemove', mouseMoveListener.current);
+  };
+
+  useEffect(() => {
+    if (!window.document) return;
+
+    return () => {
+      handleStopResizing();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      {...rest}
+      className={cn(
+        'relative mx-auto my-auto box-content px-4 py-2',
+        rest.className,
+      )}
+    >
+      <div
+        aria-label="resize-west"
+        aria-valuenow={width}
+        aria-valuemin={minWidth}
+        aria-valuemax={maxWidth}
+        className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-2 cursor-w-resize p-2 [user-drag:none]"
+        onDragStart={(event) => event.preventDefault()}
+        draggable="false"
+        onMouseDown={() => {
+          handleStartResizing('west');
+        }}
+        role="slider"
+        tabIndex={0}
+      >
+        <div className="h-8 w-1 rounded-md bg-black/30" />
+      </div>
+      <div
+        aria-label="resize-east"
+        aria-valuenow={width}
+        aria-valuemin={minWidth}
+        aria-valuemax={maxWidth}
+        onDragStart={(event) => event.preventDefault()}
+        className="-translate-x-full -translate-y-1/2 absolute top-1/2 left-full cursor-e-resize p-2 [user-drag:none]"
+        draggable="false"
+        onMouseDown={() => {
+          handleStartResizing('east');
+        }}
+        role="slider"
+        tabIndex={0}
+      >
+        <div className="h-8 w-1 rounded-md bg-black/30" />
+      </div>
+      <div
+        aria-label="resize-north"
+        aria-valuenow={height}
+        aria-valuemin={minHeight}
+        aria-valuemax={maxHeight}
+        onDragStart={(event) => event.preventDefault()}
+        className="-translate-x-1/2 -translate-y-1/2 absolute top-0 left-1/2 cursor-n-resize p-2 [user-drag:none]"
+        draggable="false"
+        onMouseDown={() => {
+          handleStartResizing('north');
+        }}
+        role="slider"
+        tabIndex={0}
+      >
+        <div className="h-1 w-8 rounded-md bg-black/30" />
+      </div>
+      <div
+        aria-label="resize-south"
+        aria-valuenow={height}
+        aria-valuemin={minHeight}
+        aria-valuemax={maxHeight}
+        onDragStart={(event) => event.preventDefault()}
+        className="-translate-x-1/2 -translate-y-1/2 absolute top-full left-1/2 cursor-s-resize p-2 [user-drag:none]"
+        draggable="false"
+        onMouseDown={() => {
+          handleStartResizing('south');
+        }}
+        role="slider"
+        tabIndex={0}
+      >
+        <div className="h-1 w-8 rounded-md bg-black/30" />
+      </div>
+
+      <Slot ref={resizableRef}>{children}</Slot>
+    </div>
+  );
+};

package/src/components/shell.tsx

@@ -12,8 +12,14 @@ interface ShellProps extends RootProps {
   markup?: string;
   currentEmailOpenSlug?: string;
   pathSeparator?: string;
+
   activeView?: string;
   setActiveView?: (view: string) => void;
+
+  viewWidth?: number;
+  setViewWidth?: (width: number) => void;
+  viewHeight?: number;
+  setViewHeight?: (height: number) => void;
 }
 
 export const Shell = ({
@@ -23,6 +29,10 @@ export const Shell = ({
   markup,
   activeView,
   setActiveView,
+  viewHeight,
+  viewWidth,
+  setViewHeight,
+  setViewWidth,
 }: ShellProps) => {
   const [sidebarToggled, setSidebarToggled] = React.useState(false);
   const [triggerTransition, setTriggerTransition] = React.useState(false);
@@ -75,8 +85,8 @@ export const Shell = ({
         className={cn(
           'relative h-full max-h-full min-h-screen w-[100vw] overflow-hidden will-change-width sm:mt-[4.375rem] md:absolute md:right-0 lg:mt-0',
           {
-            'lg:w-[calc(100vw)] lg:translate-x-0': sidebarToggled,
-            'lg:w-[calc(100vw-20rem)] lg:translate-x-0': !sidebarToggled,
+            'lg:w-[calc(100dvw)] lg:translate-x-0': sidebarToggled,
+            'lg:w-[calc(100dvw-20rem)] lg:translate-x-0': !sidebarToggled,
           },
         )}
         style={{
@@ -104,9 +114,13 @@ export const Shell = ({
               }}
               pathSeparator={pathSeparator}
               setActiveView={setActiveView}
+              setViewHeight={setViewHeight}
+              setViewWidth={setViewWidth}
+              viewHeight={viewHeight}
+              viewWidth={viewWidth}
             />
           ) : null}
-          <div className="relative mx-auto h-[calc(100vh-3.3125rem)] grow md:h-full">
+          <div className="relative mx-auto h-[calc(100dvh-3.3125rem)] grow md:h-full">
             {children}
           </div>
         </div>

package/src/components/sidebar/checking-results.tsx

@@ -0,0 +1,150 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ComponentProps } from 'react';
+import { cn } from '../../utils';
+
+export type ResultStatus = 'error' | 'warning' | 'success';
+
+const statusStyles = {
+  error: 'text-red-600 hover:bg-red-600/10',
+  warning: 'text-yellow-300 hover:bg-yellow-400/10',
+  success: 'text-green-600 hover:bg-green-600/10',
+};
+
+interface ResultListProps {
+  status: ResultStatus;
+  label: React.ReactNode;
+
+  disabled?: boolean;
+  defaultOpen?: boolean;
+
+  children: React.ReactNode;
+}
+
+export const ResultList = ({
+  status,
+  label,
+
+  disabled,
+  defaultOpen,
+
+  children,
+}: ResultListProps) => {
+  return (
+    <Collapsible.Root className="group" defaultOpen={defaultOpen && !disabled}>
+      <Collapsible.Trigger
+        className={cn(
+          'group flex w-full items-center gap-1 rounded p-2 transition-colors duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+          statusStyles[status],
+          disabled && 'cursor-not-allowed opacity-70',
+        )}
+        disabled={disabled}
+      >
+        <span
+          className={cn(
+            '-mt-[.125rem] transition-transform duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+            'rotate-0 group-data-[state=open]:rotate-90',
+          )}
+        >
+          <svg
+            fill="none"
+            height="15"
+            viewBox="0 0 15 15"
+            width="15"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clipRule="evenodd"
+              d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <div className="flex flex-1 items-center gap-1 font-bold text-[.625rem] uppercase tracking-wide">
+          {label}
+        </div>
+      </Collapsible.Trigger>
+      {children ? (
+        <Collapsible.Content>
+          <ol className="mt-2 mb-1 flex list-none flex-col gap-4">
+            {children}
+          </ol>
+        </Collapsible.Content>
+      ) : null}
+    </Collapsible.Root>
+  );
+};
+
+type ResultProps = {
+  status: ResultStatus;
+} & ComponentProps<typeof motion.li>;
+
+const resultAnimation = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: 'easeOut', staggerChildren: 0.1 },
+  },
+};
+
+export const Result = ({ children, status, ...rest }: ResultProps) => {
+  return (
+    <AnimatePresence mode="wait">
+      <motion.li
+        data-status={status}
+        initial="hidden"
+        layout
+        variants={resultAnimation}
+        animate="visible"
+        {...rest}
+        className={cn(
+          'group/item relative w-full rounded-md p-2 pl-4 transition-colors duration-300 ease-out hover:bg-slate-5',
+          rest.className,
+        )}
+      >
+        {children}
+      </motion.li>
+    </AnimatePresence>
+  );
+};
+
+const titleStatusAnimation = {
+  hidden: { opacity: 0, y: 5 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: 'easeOut' },
+  },
+};
+
+interface ResultStatusDescriptionProps {
+  children: React.ReactNode;
+}
+
+Result.StatusDescription = ({ children }: ResultStatusDescriptionProps) => {
+  return (
+    <motion.div
+      className="mt-1 font-semibold text-[.625rem] uppercase"
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface ResultTitleProps {
+  children: React.ReactNode;
+}
+
+Result.Title = ({ children }: ResultTitleProps) => {
+  return (
+    <motion.div
+      className="flex w-full items-center gap-2 text-xs group-data-[status=error]/item:text-red-400 group-data-[status=success]/item:text-green-400 group-data-[status=warning]/item:text-yellow-300 "
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};

package/src/components/sidebar/file-tree-directory-children.tsx

@@ -3,7 +3,6 @@ import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { cn } from '../../utils';
-import { emailsDirectoryAbsolutePath } from '../../utils/emails-directory-absolute-path';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
 import { FileTreeDirectory } from './file-tree-directory';
@@ -15,15 +14,13 @@ export const FileTreeDirectoryChildren = (props: {
   isRoot?: boolean;
 }) => {
   const searchParams = useSearchParams();
-  const isBaseEmailsDirectory =
-    props.emailsDirectoryMetadata.absolutePath === emailsDirectoryAbsolutePath;
 
   return (
     <AnimatePresence initial={false}>
       {props.open ? (
         <Collapsible.Content
           asChild
-          className="relative data-[root=true]:mt-2 overflow-y-hidden pl-1"
+          className="relative overflow-y-hidden pl-1"
           forceMount
         >
           <motion.div
@@ -34,7 +31,7 @@ export const FileTreeDirectoryChildren = (props: {
             {props.isRoot ? null : (
               <div className="line absolute left-2.5 h-full w-px bg-slate-6" />
             )}
-            <div className="data-[root=true]:py-2 flex flex-col truncate">
+            <div className="flex flex-col truncate">
               <LayoutGroup id="sidebar">
                 {props.emailsDirectoryMetadata.subDirectories.map(
                   (subDirectory) => (
@@ -48,7 +45,7 @@ export const FileTreeDirectoryChildren = (props: {
                 )}
                 {props.emailsDirectoryMetadata.emailFilenames.map(
                   (emailFilename, index) => {
-                    const emailSlug = isBaseEmailsDirectory
+                    const emailSlug = props.isRoot
                       ? emailFilename
                       : `${props.emailsDirectoryMetadata.relativePath}/${emailFilename}`;