promote-email-templates 0.0.5 → 0.0.7

package/.react-email/src/components/sidebar/sidebar-directory-children.tsx

@@ -0,0 +1,134 @@
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import type { EmailsDirectory } from '../../actions/get-emails-directory-metadata';
+import {
+  emailsDirectoryAbsolutePath,
+  pathSeparator,
+} from '../../utils/emails-directory-absolute-path';
+import { cn } from '../../utils';
+import { IconFile } from '../icons/icon-file';
+import { SidebarDirectory } from './sidebar-directory';
+
+export const SidebarDirectoryChildren = (props: {
+  emailsDirectoryMetadata: EmailsDirectory;
+  currentEmailOpenSlug?: string;
+  open: boolean;
+  isRoot?: boolean;
+}) => {
+  const searchParams = useSearchParams();
+  const directoryPathRelativeToEmailsDirectory =
+    props.emailsDirectoryMetadata.absolutePath
+      .replace(`${emailsDirectoryAbsolutePath}${pathSeparator}`, '')
+      .replace(emailsDirectoryAbsolutePath, '')
+      .trim();
+  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"
+          forceMount
+        >
+          <motion.div
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            initial={{ opacity: 0, height: 0 }}
+          >
+            {props.isRoot ? null : (
+              <div className="line absolute left-2.5 w-px h-full bg-slate-6" />
+            )}
+
+            <div className="data-[root=true]:py-2 flex flex-col truncate">
+              <LayoutGroup id="sidebar">
+                {props.emailsDirectoryMetadata.subDirectories.map(
+                  (subDirectory) => (
+                    <SidebarDirectory
+                      className="pl-4 py-0"
+                      currentEmailOpenSlug={props.currentEmailOpenSlug}
+                      emailsDirectoryMetadata={subDirectory}
+                      key={subDirectory.absolutePath}
+                    />
+                  ),
+                )}
+
+                {props.emailsDirectoryMetadata.emailFilenames.map(
+                  (emailFilename, index) => {
+                    const emailSlug = `${directoryPathRelativeToEmailsDirectory}${
+                      !isBaseEmailsDirectory ? pathSeparator : ''
+                    }${emailFilename}`;
+                    const removeExtensionFrom = (path: string) => {
+                      if (
+                        path.split('.').pop() === 'tsx' ||
+                        path.split('.').pop() === 'jsx' ||
+                        path.split('.').pop() === 'js'
+                      ) {
+                        return path.split('.').slice(0, -1).join('.');
+                      }
+
+                      return path;
+                    };
+                    const isCurrentPage = props.currentEmailOpenSlug
+                      ? removeExtensionFrom(props.currentEmailOpenSlug) ===
+                        emailSlug
+                      : false;
+
+                    return (
+                      <Link
+                        href={{
+                          pathname: `/preview/${emailSlug}`,
+                          search: searchParams.toString(),
+                        }}
+                        key={emailSlug}
+                      >
+                        <motion.span
+                          animate={{ x: 0, opacity: 1 }}
+                          className={cn(
+                            'text-[14px] flex items-center align-middle pl-3 h-8 max-w-full rounded-md text-slate-11 relative transition-colors',
+                            {
+                              'text-cyan-11': isCurrentPage,
+                              'hover:text-slate-12':
+                                props.currentEmailOpenSlug !== emailSlug,
+                            },
+                          )}
+                          initial={{ x: -10 + -index * 1.5, opacity: 0 }}
+                          transition={{
+                            x: { delay: 0.03 * index, duration: 0.2 },
+                            opacity: { delay: 0.03 * index, duration: 0.2 },
+                          }}
+                        >
+                          {isCurrentPage ? (
+                            <motion.span
+                              animate={{ opacity: 1 }}
+                              className="absolute left-0 right-0 top-0 bottom-0 rounded-md bg-cyan-5 opacity-0"
+                              exit={{ opacity: 0 }}
+                              initial={{ opacity: 0 }}
+                            >
+                              {!props.isRoot && (
+                                <div className="bg-cyan-11 w-px absolute top-1 left-1.5 h-6" />
+                              )}
+                            </motion.span>
+                          ) : null}
+                          <IconFile
+                            className="absolute left-4 w-[24px] h-[24px]"
+                            height="24"
+                            width="24"
+                          />
+                          <span className="truncate pl-8">{emailFilename}</span>
+                        </motion.span>
+                      </Link>
+                    );
+                  },
+                )}
+              </LayoutGroup>
+            </div>
+          </motion.div>
+        </Collapsible.Content>
+      ) : null}
+    </AnimatePresence>
+  );
+};

package/.react-email/src/components/sidebar/sidebar-directory.tsx

@@ -0,0 +1,106 @@
+'use client';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import * as React from 'react';
+import { cn } from '../../utils';
+import {
+  emailsDirectoryAbsolutePath,
+  pathSeparator,
+} from '../../utils/emails-directory-absolute-path';
+import { type EmailsDirectory } from '../../actions/get-emails-directory-metadata';
+import { Heading } from '../heading';
+import { IconFolder } from '../icons/icon-folder';
+import { IconFolderOpen } from '../icons/icon-folder-open';
+import { IconArrowDown } from '../icons/icon-arrow-down';
+import { SidebarDirectoryChildren } from './sidebar-directory-children';
+
+interface SidebarDirectoryProps {
+  emailsDirectoryMetadata: EmailsDirectory;
+  className?: string;
+  currentEmailOpenSlug?: string;
+}
+
+const persistedOpenDirectories = new Set<string>();
+
+export const SidebarDirectory = ({
+  emailsDirectoryMetadata: directoryMetadata,
+  className,
+  currentEmailOpenSlug,
+}: SidebarDirectoryProps) => {
+  const isBaseEmailsDirectory =
+    directoryMetadata.absolutePath === emailsDirectoryAbsolutePath;
+  const directoryPathRelativeToBaseEmailsDirectory =
+    directoryMetadata.absolutePath
+      .replace(`${emailsDirectoryAbsolutePath}${pathSeparator}`, '')
+      .replace(emailsDirectoryAbsolutePath, '')
+      .trim();
+  const doesDirectoryContainCurrentEmailOpen = currentEmailOpenSlug
+    ? currentEmailOpenSlug.includes(directoryPathRelativeToBaseEmailsDirectory)
+    : false;
+
+  const isEmpty =
+    directoryMetadata.emailFilenames.length > 0 ||
+    directoryMetadata.subDirectories.length > 0;
+
+  const [open, setOpen] = React.useState(
+    persistedOpenDirectories.has(directoryMetadata.absolutePath) ||
+      isBaseEmailsDirectory ||
+      doesDirectoryContainCurrentEmailOpen,
+  );
+
+  return (
+    <Collapsible.Root
+      className={cn('group', className)}
+      data-root={isBaseEmailsDirectory}
+      onOpenChange={(isOpening) => {
+        if (isOpening) {
+          persistedOpenDirectories.add(directoryMetadata.absolutePath);
+        } else {
+          persistedOpenDirectories.delete(directoryMetadata.absolutePath);
+        }
+
+        setOpen(isOpening);
+      }}
+      open={open}
+    >
+      <Collapsible.Trigger
+        className={cn(
+          'text-[14px] flex items-center font-medium gap-2 justify-between w-full my-1',
+          {
+            'cursor-pointer': !isEmpty,
+          },
+        )}
+      >
+        <div className="flex items-center text-slate-11 transition ease-in-out duration-200 hover:text-slate-12 gap-1">
+          {open ? (
+            <IconFolderOpen height="24" width="24" />
+          ) : (
+            <IconFolder height="24" width="24" />
+          )}
+          <Heading
+            as="h3"
+            className="transition ease-in-out duration-200 hover:text-slate-12"
+            color="gray"
+            size="2"
+            weight="medium"
+          >
+            {directoryMetadata.directoryName}
+          </Heading>
+        </div>
+        {isEmpty ? (
+          <IconArrowDown
+            className="data-[open=true]:rotate-180 transition-transform opacity-60 justify-self-end"
+            data-open={open}
+          />
+        ) : null}
+      </Collapsible.Trigger>
+
+      {isEmpty ? (
+        <SidebarDirectoryChildren
+          currentEmailOpenSlug={currentEmailOpenSlug}
+          emailsDirectoryMetadata={directoryMetadata}
+          open={open}
+        />
+      ) : null}
+    </Collapsible.Root>
+  );
+};

package/.react-email/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { useEmails } from '../../contexts/emails';
+import { cn } from '../../utils';
+import { Logo } from '../logo';
+import { SidebarDirectoryChildren } from './sidebar-directory-children';
+
+interface SidebarProps {
+  className?: string;
+  currentEmailOpenSlug?: string;
+  style?: React.CSSProperties;
+}
+
+export const Sidebar = ({
+  className,
+  currentEmailOpenSlug,
+  style,
+}: SidebarProps) => {
+  const { emailsDirectoryMetadata } = useEmails();
+
+  return (
+    <aside
+      className={cn('border-r flex flex-col border-slate-6', className)}
+      style={{ ...style }}
+    >
+      <div className="p-4 h-[70px] flex-shrink items-center hidden lg:flex">
+        <Logo />
+      </div>
+      <nav className="p-4 flex-grow lg:pt-0 pl-0 w-screen h-[calc(100vh_-_70px)] lg:w-full lg:min-w-[275px] lg:max-w-[275px] flex flex-col overflow-y-auto">
+        <Collapsible.Root>
+          <React.Suspense>
+            <SidebarDirectoryChildren
+              currentEmailOpenSlug={currentEmailOpenSlug}
+              emailsDirectoryMetadata={emailsDirectoryMetadata}
+              isRoot
+              open
+            />
+          </React.Suspense>
+        </Collapsible.Root>
+      </nav>
+    </aside>
+  );
+};

package/.react-email/src/components/text.tsx

@@ -0,0 +1,99 @@
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import * as React from 'react';
+import { type As, unreachable, cn } from '../utils';
+
+export type TextSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+export type TextColor = 'gray' | 'white';
+export type TextTransform = 'uppercase' | 'lowercase' | 'capitalize';
+export type TextWeight = 'normal' | 'medium';
+
+interface TextOwnProps {
+  size?: TextSize;
+  color?: TextColor;
+  transform?: TextTransform;
+  weight?: TextWeight;
+}
+
+type TextProps = As<'span', 'div', 'p'> & TextOwnProps;
+
+export const Text = React.forwardRef<HTMLSpanElement, Readonly<TextProps>>(
+  (
+    {
+      as: Tag = 'span',
+      size = '2',
+      color = 'gray',
+      transform,
+      weight = 'normal',
+      className,
+      children,
+      ...props
+    },
+    forwardedRef,
+  ) => (
+    <SlotPrimitive.Slot
+      className={cn(
+        className,
+        transform,
+        getSizesClassNames(size),
+        getColorClassNames(color),
+        getWeightClassNames(weight),
+      )}
+      ref={forwardedRef}
+      {...props}
+    >
+      <Tag>{children}</Tag>
+    </SlotPrimitive.Slot>
+  ),
+);
+
+const getSizesClassNames = (size: TextSize | undefined) => {
+  switch (size) {
+    case '1':
+      return 'text-xs';
+    case undefined:
+    case '2':
+      return 'text-sm';
+    case '3':
+      return 'text-base';
+    case '4':
+      return 'text-lg';
+    case '5':
+      return ['text-17px', 'md: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]';
+    default:
+      return unreachable(size);
+  }
+};
+
+const getColorClassNames = (color: TextColor | undefined) => {
+  switch (color) {
+    case 'white':
+      return 'text-slate-12';
+    case undefined:
+    case 'gray':
+      return 'text-slate-11';
+    default:
+      return unreachable(color);
+  }
+};
+
+const getWeightClassNames = (weight: TextWeight | undefined) => {
+  switch (weight) {
+    case undefined:
+    case 'normal':
+      return 'font-normal';
+    case 'medium':
+      return 'font-medium';
+    default:
+      return unreachable(weight);
+  }
+};
+
+Text.displayName = 'Text';

package/.react-email/src/components/tooltip-content.tsx

@@ -0,0 +1,32 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../utils';
+import { inter } from '../app/inter';
+
+type ContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;
+type ContentProps = React.ComponentPropsWithoutRef<
+  typeof TooltipPrimitive.Content
+>;
+
+export type TooltipProps = ContentProps;
+
+export const TooltipContent = React.forwardRef<
+  ContentElement,
+  Readonly<TooltipProps>
+>(({ sideOffset = 6, children, ...props }, forwardedRef) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      {...props}
+      className={cn(
+        'bg-black border border-slate-6 z-20 px-3 py-2 rounded-md text-xs',
+        `${inter.variable} font-sans`,
+      )}
+      ref={forwardedRef}
+      sideOffset={sideOffset}
+    >
+      {children}
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
+));
+
+TooltipContent.displayName = 'TooltipContent';

package/.react-email/src/components/tooltip.tsx

@@ -0,0 +1,19 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { TooltipContent } from './tooltip-content';
+
+type RootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
+
+export type TooltipProps = RootProps;
+
+export const TooltipRoot: React.FC<Readonly<TooltipProps>> = ({
+  children,
+  ...props
+}) => <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>;
+
+export const Tooltip = Object.assign(TooltipRoot, {
+  Arrow: TooltipPrimitive.TooltipArrow,
+  Provider: TooltipPrimitive.TooltipProvider,
+  Content: TooltipContent,
+  Trigger: TooltipPrimitive.TooltipTrigger,
+});

package/.react-email/src/components/topbar.tsx

@@ -0,0 +1,161 @@
+'use client';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { motion } from 'framer-motion';
+import * 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';
+
+interface TopbarProps {
+  currentEmailOpenSlug: string;
+  activeView?: string;
+  markup?: string;
+  onToggleSidebar?: () => void;
+  setActiveView?: (view: string) => void;
+}
+
+export const Topbar: React.FC<Readonly<TopbarProps>> = ({
+  currentEmailOpenSlug,
+  markup,
+  activeView,
+  setActiveView,
+  onToggleSidebar,
+}) => {
+  return (
+    <Tooltip.Provider>
+      <header className="flex relative items-center px-4 justify-between h-[70px] border-b border-slate-6">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <button
+              className="hidden lg:flex rounded-lg px-2 py-2 transition ease-in-out duration-200 relative hover:bg-slate-5 text-slate-11 hover:text-slate-12"
+              onClick={() => {
+                if (onToggleSidebar) {
+                  onToggleSidebar();
+                }
+              }}
+              type="button"
+            >
+              <IconHideSidebar height={20} width={20} />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Show/hide sidebar</Tooltip.Content>
+        </Tooltip>
+
+        <div className="items-center overflow-hidden hidden lg:flex text-center absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
+          <Heading as="h2" className="truncate" size="2" weight="medium">
+            {currentEmailOpenSlug}
+          </Heading>
+        </div>
+
+        <div className="flex gap-3 justify-between lg:justify-start w-full lg:w-fit">
+          <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="desktop">
+              <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 === 'desktop' && (
+                      <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>Desktop</Tooltip.Content>
+              </Tooltip>
+            </ToggleGroup.Item>
+            <ToggleGroup.Item value="mobile">
+              <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 !== 'mobile',
+                        'text-slate-12': activeView === 'mobile',
+                      },
+                    )}
+                  >
+                    {activeView === 'mobile' && (
+                      <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}
+                      />
+                    )}
+                    <IconPhone />
+                  </div>
+                </Tooltip.Trigger>
+                <Tooltip.Content>Mobile</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>
+
+          {markup ? (
+            <div className="flex justify-end">
+              <Send markup={markup} />
+            </div>
+          ) : null}
+        </div>
+      </header>
+    </Tooltip.Provider>
+  );
+};