promote-email-templates 0.1.6 → 0.1.7

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

@@ -1,115 +0,0 @@
-'use client';
-import * as React from 'react';
-import { cn } from '../utils';
-import { Logo } from './logo';
-import { Sidebar } from './sidebar';
-import { Topbar } from './topbar';
-
-type RootProps = React.ComponentPropsWithoutRef<'div'>;
-
-interface ShellProps extends RootProps {
-  markup?: string;
-  currentEmailOpenSlug?: string;
-  activeView?: string;
-  setActiveView?: (view: string) => void;
-}
-
-export const Shell = ({
-  currentEmailOpenSlug,
-  children,
-  markup,
-  activeView,
-  setActiveView,
-}: ShellProps) => {
-  const [sidebarToggled, setSidebarToggled] = React.useState(false);
-  const [triggerTransition, setTriggerTransition] = React.useState(false);
-
-  return (
-    <div className="flex bg-black text-white flex-col h-screen overflow-x-hidden">
-      <div className="flex lg:hidden items-center px-6 justify-between h-[70px] border-b border-slate-6">
-        <div className="h-[70px] flex items-center">
-          <Logo />
-        </div>
-
-        <button
-          className="h-6 w-6 rounded flex items-center justify-center text-white"
-          onClick={() => {
-            setSidebarToggled((v) => !v);
-          }}
-          type="button"
-        >
-          <svg
-            fill="none"
-            height="16"
-            stroke="white"
-            viewBox="0 0 15 15"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clipRule="evenodd"
-              d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
-              fill="currentColor"
-              fillRule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-
-      <div className="flex bg-slate-2">
-        <Sidebar
-          className={cn(
-            'w-screen max-w-full bg-black h-screen lg:h-auto z-50 lg:z-auto lg:max-w-[275px] fixed top-[70px] lg:top-0 left-0',
-            {
-              'translate-x-0 lg:-translate-x-full': sidebarToggled,
-              '-translate-x-full lg:translate-x-0': !sidebarToggled,
-            },
-          )}
-          currentEmailOpenSlug={currentEmailOpenSlug}
-          style={{
-            transition: triggerTransition ? 'transform 0.2s ease-in-out' : '',
-          }}
-        />
-
-        <main
-          className={cn(
-            'absolute will-change-width h-screen w-[100vw] right-0',
-            {
-              'lg:translate-x-0 lg:w-[calc(100vw)]': sidebarToggled,
-              'lg:translate-x-0 lg:w-[calc(100vw-275px)]': !sidebarToggled,
-            },
-          )}
-          style={{
-            transition: triggerTransition
-              ? 'width 0.2s ease-in-out, transform 0.2s ease-in-out'
-              : '',
-          }}
-        >
-          {currentEmailOpenSlug ? (
-            <Topbar
-              activeView={activeView}
-              currentEmailOpenSlug={currentEmailOpenSlug}
-              markup={markup}
-              onToggleSidebar={() => {
-                setTriggerTransition(true);
-
-                requestAnimationFrame(() => {
-                  setSidebarToggled((v) => !v);
-                });
-
-                setTimeout(() => {
-                  setTriggerTransition(false);
-                }, 300);
-              }}
-              setActiveView={setActiveView}
-            />
-          ) : null}
-
-          <div className="h-[calc(100vh_-_70px)] overflow-auto mx-auto">
-            {children}
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-};

package/.react-email/src/components/sidebar/index.ts

@@ -1 +0,0 @@
-export * from './sidebar';

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

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

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

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

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

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

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