react-email 1.0.4 → 1.0.6

package/base/src/components/icons/icon-download.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IconBase, IconElement, IconProps } from './icon-base';
+
+export const IconDownload = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M4.75 14.75v1.5a3 3 0 0 0 3 3h8.5a3 3 0 0 0 3-3v-1.5M12 14.25v-9.5M8.75 10.75l3.25 3.5 3.25-3.5"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  ),
+);
+
+IconDownload.displayName = 'IconDownload';

package/base/src/components/icons/icon-loading.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { IconBase, IconElement, IconProps } from './icon-base';
+
+export const IconLoading = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ className, ...props }, forwardedRef) => (
+    <IconBase
+      ref={forwardedRef}
+      className={classnames('animate-spin', className)}
+      {...props}
+    >
+      <path
+        className="opacity-[15%]"
+        d="M5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="7"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeDasharray="150,200"
+        strokeDashoffset="-16"
+      />
+    </IconBase>
+  ),
+);
+
+IconLoading.displayName = 'IconLoading';

package/base/src/components/icons/index.ts

@@ -0,0 +1,4 @@
+export * from './icon-check';
+export * from './icon-clipboard';
+export * from './icon-download';
+export * from './icon-loading';

package/base/src/components/layout.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import Logo from '../components/topbar/logo';
+import External from '../components/topbar/external';
+import Feedback from '../components/topbar/feedback';
+import SendTest from '../components/topbar/send-test';
+import ToggleView from '../components/topbar/toggle-view';
+import { Code } from '../components/code';
+
+export default function Layout({
+  markup,
+  path,
+}: {
+  markup: string;
+  path: string;
+}) {
+  const [isPreview, setIsPreview] = React.useState(true);
+
+  return (
+    <>
+      <div className="w-full bg-gray-1 text-gray-12">
+        <nav className="max-w-6xl mx-auto flex items-center justify-between m-2 p-2">
+          <div className="w-60">
+            <Logo />
+          </div>
+          <div className="w-60">
+            <ToggleView isPreview={isPreview} setIsPreview={setIsPreview} />
+          </div>
+          <div className="w-60 flex gap-2 justify-end">
+            <SendTest markup={markup} />
+            <div className="flex items-center border-l ml-2 pl-4 border-gray-8">
+              <div className="flex gap-2 items-center justify-center">
+                <Feedback />
+                <External path={path} />
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+
+      {isPreview ? (
+        <iframe
+          srcDoc={markup}
+          className="w-full bg-white"
+          style={{ height: 'calc(100vh - 60px)' }}
+        />
+      ) : (
+        <div className="max-w-6xl mx-auto">
+          <Code>{markup}</Code>
+        </div>
+      )}
+    </>
+  );
+}

package/base/src/components/tooltip/index.ts

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

package/base/src/components/tooltip/tooltip-arrow.tsx

@@ -0,0 +1 @@
+export { TooltipArrow } from '@radix-ui/react-tooltip';

package/base/src/components/tooltip/tooltip-content.tsx

@@ -0,0 +1,26 @@
+import { Arrow, Content, Portal } from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+type ContentElement = React.ElementRef<typeof Content>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof Content>;
+
+export interface TooltipProps extends ContentProps {}
+
+export const TooltipContent = React.forwardRef<
+  ContentElement,
+  Readonly<TooltipProps>
+>(({ className, sideOffset = 6, children, ...props }, forwardedRef) => (
+  <Portal>
+    <Content
+      {...props}
+      ref={forwardedRef}
+      className="bg-gray-2 border border-gray-7 z-20 px-2 py-1 rounded-md text-sm radix-side-top:animate-slide-down-fade radix-side-right:animate-slide-left-fade radix-side-bottom:animate-slide-up-fade radix-side-left:animate-slide-right-fade"
+      sideOffset={sideOffset}
+    >
+      {children}
+      <Arrow fill="#1c1c1f" />
+    </Content>
+  </Portal>
+));
+
+TooltipContent.displayName = 'TooltipContent';

package/base/src/components/tooltip/tooltip-provider.tsx

@@ -0,0 +1 @@
+export { TooltipProvider } from '@radix-ui/react-tooltip';

package/base/src/components/tooltip/tooltip-trigger.tsx

@@ -0,0 +1 @@
+export { TooltipTrigger } from '@radix-ui/react-tooltip';

package/base/src/components/tooltip/tooltip.tsx

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

package/base/src/components/topbar/external.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import launchIcon from '../../helpers/launch-icon.json';
+import Lottie, { LottieRefCurrentProps } from 'lottie-react';
+
+export default function External({ path }: { path: string }) {
+  const launchIconRef = React.useRef<LottieRefCurrentProps>(null);
+
+  return (
+    <a
+      href={`/api/${path}`}
+      rel="noreferrer"
+      target="_blank"
+      className="text-current transition duration-300 ease-in-out hover:opacity-60"
+      onMouseEnter={() => {
+        launchIconRef.current?.play();
+      }}
+      onMouseLeave={() => {
+        launchIconRef.current?.stop();
+      }}
+    >
+      <Lottie
+        lottieRef={launchIconRef}
+        className="mr-1 w-5 h-5"
+        animationData={launchIcon}
+        loop={false}
+        autoplay={false}
+      />
+    </a>
+  );
+}

package/base/src/components/topbar/feedback.tsx

@@ -0,0 +1,89 @@
+import * as Popover from '@radix-ui/react-popover';
+import * as React from 'react';
+import inboxIcon from '../../helpers/inbox-icon.json';
+import Lottie, { LottieRefCurrentProps } from 'lottie-react';
+
+export default function Feedback() {
+  const [message, setMessage] = React.useState('');
+  const [isSending, setIsSending] = React.useState(false);
+  const inboxIconRef = React.useRef<LottieRefCurrentProps>(null);
+
+  const onFormSubmit = async (e: React.FormEvent) => {
+    try {
+      e.preventDefault();
+      setIsSending(true);
+
+      await fetch('https://react.email/api/send/feedback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message,
+        }),
+      });
+    } catch (e) {
+      alert('Something went wrong. Please try again.');
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <button
+          className="text-current transition duration-300 ease-in-out hover:opacity-60"
+          onMouseEnter={() => {
+            inboxIconRef.current?.play();
+          }}
+          onMouseLeave={() => {
+            inboxIconRef.current?.stop();
+          }}
+        >
+          <Lottie
+            lottieRef={inboxIconRef}
+            className="w-5 h-5"
+            animationData={inboxIcon}
+            loop={false}
+            autoplay={false}
+          />
+        </button>
+      </Popover.Trigger>
+      <Popover.Anchor />
+      <Popover.Portal>
+        <Popover.Content
+          align="end"
+          className="w-80 -mt-6 p-3 bg-gray-1 border border-gray-8 rounded-lg"
+        >
+          <Popover.Close
+            aria-label="Close"
+            className="absolute right-2 flex items-center justify-center w-6 h-6 text-xs text-gray-11 hover:text-gray-12 transition duration-300 ease-in-out rounded-full"
+          >
+            ✕
+          </Popover.Close>
+          <form onSubmit={onFormSubmit}>
+            <label className="text-gray-10 text-xs uppercase">Feedback</label>
+            <textarea
+              autoFocus={true}
+              className="h-28 w-full resize-none rounded-lg p-3 mt-1 text-sm outline-none border border-gray-8 bg-gray-3 focus:ring-1 focus:ring-gray-10 transition duration-300 ease-in-out"
+              id="feedback"
+              name="feedback"
+              onChange={(e) => setMessage(e.target.value)}
+              value={message}
+              placeholder="What if..."
+              required
+            />
+            <div className="flex items-center justify-end">
+              <button
+                type="submit"
+                disabled={message.length === 0 || isSending}
+                className="box-border outline-none self-center relative w-20 h-8 inline-flex items-center justify-center rounded-lg text-center font-semibold transition duration-300 ease-in-out bg-gray-12 text-gray-1 text-sm px-4 hover:bg-cyan-1 focus:ring-1 focus:ring-gray-12 disabled:bg-gray-11"
+              >
+                Send
+              </button>
+            </div>
+          </form>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/base/src/components/topbar/logo.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+export default function Logo() {
+  return (
+    <a
+      href="https://react.email"
+      target="_blank"
+      className="transition duration-300 ease-in-out hover:opacity-60"
+      rel="noreferrer"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 107 106"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M101.25 101.083C105.659 96.6745 106.49 90.7112 106.003 85.5605C105.511 80.344 103.595 74.6796 100.875 69.0295C98.4229 63.9377 95.1545 58.522 91.1988 53C95.1545 47.478 98.4229 42.0623 100.875 36.9705C103.595 31.3204 105.511 25.656 106.003 20.4395C106.49 15.2888 105.659 9.32548 101.25 4.91674C96.841 0.507999 90.8777 -0.323118 85.727 0.163082C80.5106 0.65549 74.8462 2.57153 69.196 5.29199C64.1042 7.74358 58.6885 11.012 53.1665 14.9677C47.6445 11.012 42.2288 7.74358 37.137 5.29199C31.4869 2.57153 25.8225 0.655494 20.606 0.163081C15.4553 -0.323121 9.492 0.507999 5.08326 4.91674C0.674519 9.32548 -0.156601 15.2888 0.329602 20.4395C0.822012 25.656 2.73805 31.3204 5.45851 36.9705C7.9101 42.0623 11.1786 47.478 15.1342 53C11.1786 58.522 7.9101 63.9377 5.45851 69.0295C2.73805 74.6796 0.822012 80.344 0.329602 85.5605C-0.156601 90.7112 0.674519 96.6745 5.08326 101.083C9.492 105.492 15.4553 106.323 20.606 105.837C25.8225 105.345 31.4869 103.428 37.137 100.708C42.2288 98.2564 47.6445 94.988 53.1665 91.0323C58.6885 94.988 64.1042 98.2564 69.196 100.708C74.8462 103.428 80.5106 105.345 85.727 105.837C90.8777 106.323 96.841 105.492 101.25 101.083ZM53.1665 81.0388C58.0927 77.1877 63.1029 72.7621 68.0158 67.8492C72.9287 62.9363 77.3543 57.9262 81.2053 53C77.3543 48.0738 72.9287 43.0637 68.0158 38.1508C63.1029 33.2379 58.0927 28.8123 53.1665 24.9612C48.2403 28.8123 43.2302 33.2379 38.3173 38.1508C33.4044 43.0637 28.9788 48.0738 25.1277 53C28.9788 57.9262 33.4044 62.9363 38.3173 67.8492C43.2302 72.7621 48.2403 77.1877 53.1665 81.0388ZM59.8486 85.949C64.4852 82.2163 69.135 78.0437 73.6726 73.5061C78.2102 68.9685 82.3828 64.3187 86.1155 59.6821C97.0729 75.6209 101.289 89.7305 95.5929 95.4264C89.897 101.122 75.7874 96.9064 59.8486 85.949ZM20.2175 59.6821C23.9503 64.3187 28.1228 68.9685 32.6604 73.5061C37.198 78.0437 41.8478 82.2163 46.4844 85.949C30.5457 96.9064 16.436 101.122 10.7401 95.4264C5.04422 89.7305 9.26014 75.6209 20.2175 59.6821ZM20.2175 46.3179C23.9503 41.6813 28.1228 37.0315 32.6604 32.4939C37.198 27.9563 41.8478 23.7837 46.4844 20.051C30.5457 9.09362 16.436 4.8777 10.7401 10.5736C5.04422 16.2695 9.26014 30.3792 20.2175 46.3179ZM59.8486 20.051C64.4852 23.7837 69.135 27.9563 73.6726 32.4939C78.2102 37.0315 82.3828 41.6813 86.1155 46.3179C97.0729 30.3791 101.289 16.2695 95.5929 10.5736C89.897 4.87769 75.7874 9.09362 59.8486 20.051Z"
+          fill="#F2F2F1"
+        />
+      </svg>
+    </a>
+  );
+}

package/base/src/components/topbar/send-test.tsx

@@ -0,0 +1,95 @@
+import * as Popover from '@radix-ui/react-popover';
+import * as React from 'react';
+
+export default function TestEmail({ markup }: { markup: string }) {
+  const [to, setTo] = React.useState('');
+  const [subject, setSubject] = React.useState(
+    'bukinoshita invited you to My Project team on Vercel',
+  );
+  const [isSending, setIsSending] = React.useState(false);
+
+  const onFormSubmit = async (e: React.FormEvent) => {
+    try {
+      e.preventDefault();
+      setIsSending(true);
+
+      await fetch('https://react.email/api/send/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          to,
+          subject,
+          html: markup,
+        }),
+      });
+    } catch (e) {
+      alert('Something went wrong. Please try again.');
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <button className="box-border outline-none self-center relative w-20 h-5 inline-flex items-center justify-center rounded-lg text-center transition duration-300 ease-in-out border border-gray-8 text-gray-12 text-sm px-4 py-4 hover:border-gray-12">
+          Send
+        </button>
+      </Popover.Trigger>
+      <Popover.Anchor />
+      <Popover.Portal>
+        <Popover.Content
+          align="end"
+          className="w-80 -mt-10 p-3 bg-gray-1 border border-gray-8 rounded-lg"
+        >
+          <Popover.Close
+            aria-label="Close"
+            className="absolute right-2 flex items-center justify-center w-6 h-6 text-xs text-gray-11 hover:text-gray-12 transition duration-300 ease-in-out rounded-full"
+          >
+            ✕
+          </Popover.Close>
+          <form onSubmit={onFormSubmit}>
+            <label htmlFor="to" className="text-gray-10 text-xs uppercase">
+              Recipient
+            </label>
+            <input
+              autoFocus={true}
+              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-gray-3 border placeholder-gray-11 border-gray-6 text-sm text-gray-12 focus:ring-1 focus:ring-gray-10 transition duration-300 ease-in-out"
+              onChange={(e) => setTo(e.target.value)}
+              defaultValue={to}
+              placeholder="you@example.com"
+              type="email"
+              id="to"
+              required
+            />
+            <label htmlFor="subject" className="text-gray-10 text-xs uppercase">
+              Subject
+            </label>
+            <input
+              className="appearance-none rounded-lg px-2 py-1 mb-3 outline-none w-full bg-gray-3 border placeholder-gray-11 border-gray-6 text-sm text-gray-12 focus:ring-1 focus:ring-gray-10 transition duration-300 ease-in-out"
+              onChange={(e) => setSubject(e.target.value)}
+              defaultValue={subject}
+              placeholder="My Email"
+              type="text"
+              id="subject"
+              required
+            />
+            <input
+              type="checkbox"
+              className="appearance-none checked:bg-blue-500"
+            />
+            <div className="flex items-center justify-end">
+              <button
+                type="submit"
+                disabled={subject.length === 0 || to.length === 0 || isSending}
+                className="box-border outline-none self-center relative w-20 h-8 inline-flex items-center justify-center rounded-lg text-center font-semibold transition duration-300 ease-in-out bg-gray-12 text-gray-1 text-sm px-4 hover:bg-cyan-1 focus:bg-cyan-1 disabled:bg-gray-11"
+              >
+                Send
+              </button>
+            </div>
+          </form>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/base/src/components/topbar/toggle-view.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import codeIcon from '../../helpers/code-icon.json';
+import eyeIcon from '../../helpers/eye-icon.json';
+import Lottie, { LottieRefCurrentProps } from 'lottie-react';
+
+interface ToggleViewProps {
+  isPreview?: boolean;
+  setIsPreview: (status: boolean) => void;
+}
+
+export default function ToggleView({
+  isPreview,
+  setIsPreview,
+}: ToggleViewProps) {
+  const codeIconRef = React.useRef<LottieRefCurrentProps>(null);
+  const eyeIconRef = React.useRef<LottieRefCurrentProps>(null);
+
+  return (
+    <div className="flex items-center justify-center">
+      <button
+        className={`text-current transition duration-300 ease-in-out px-2 border border-gray-8 rounded-l-lg ${
+          isPreview ? 'bg-gray-8' : 'bg-transparent'
+        }`}
+        onClick={() => {
+          setIsPreview(true);
+        }}
+        onMouseEnter={() => {
+          eyeIconRef.current?.play();
+        }}
+        onMouseLeave={() => {
+          eyeIconRef.current?.stop();
+        }}
+      >
+        <Lottie
+          lottieRef={eyeIconRef}
+          className="w-5 h-8"
+          animationData={eyeIcon}
+          loop={false}
+          autoplay={false}
+        />
+      </button>
+      <button
+        className={`text-current transition duration-300 ease-in-out px-2 border border-gray-8 rounded-r-lg  ${
+          !isPreview ? 'bg-gray-8' : 'bg-transparent'
+        }`}
+        onClick={() => {
+          setIsPreview(false);
+        }}
+        onMouseEnter={() => {
+          codeIconRef.current?.play();
+        }}
+        onMouseLeave={() => {
+          codeIconRef.current?.stop();
+        }}
+      >
+        <Lottie
+          lottieRef={codeIconRef}
+          className="w-5 h-8"
+          animationData={codeIcon}
+          loop={false}
+          autoplay={false}
+        />
+      </button>
+    </div>
+  );
+}