@ahmedrowaihi/pdf-forge-preview 1.0.0-canary.0

package/src/app/env.ts

@@ -0,0 +1,14 @@
+/** ONLY ACCESSIBLE ON THE SERVER */
+export const userProjectLocation = process.env.USER_PROJECT_LOCATION!;
+
+/** ONLY ACCESSIBLE ON THE SERVER */
+export const previewServerLocation = process.env.PREVIEW_SERVER_LOCATION!;
+
+/** ONLY ACCESSIBLE ON THE SERVER */
+export const templatesDirectoryAbsolutePath =
+  process.env.TEMPLATES_DIR_ABSOLUTE_PATH!;
+
+export const isBuilding = process.env.NEXT_PUBLIC_IS_BUILDING === 'true';
+
+export const isPreviewDevelopment =
+  process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT === 'true';

package/src/app/fonts.ts

@@ -0,0 +1,39 @@
+import { Inter } from 'next/font/google';
+import Local from 'next/font/local';
+
+export const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+});
+
+export const sfMono = Local({
+  src: [
+    {
+      path: './fonts/SFMono/SFMonoLight.otf',
+      weight: '300',
+    },
+    {
+      path: './fonts/SFMono/SFMonoRegular.otf',
+      weight: '400',
+    },
+    {
+      path: './fonts/SFMono/SFMonoMedium.otf',
+      weight: '500',
+    },
+    {
+      path: './fonts/SFMono/SFMonoSemibold.otf',
+      weight: '600',
+    },
+    {
+      path: './fonts/SFMono/SFMonoBold.otf',
+      weight: '700',
+    },
+    {
+      path: './fonts/SFMono/SFMonoHeavy.otf',
+      weight: '800',
+    },
+  ],
+  variable: '--font-sf-mono',
+  display: 'swap',
+});

package/src/app/globals.css

@@ -0,0 +1,136 @@
+@import "tailwindcss";
+
+@theme {
+  --background-image-gradient: linear-gradient(
+    145.37deg,
+    rgba(255, 255, 255, 0.09) -8.75%,
+    rgba(255, 255, 255, 0.027) 83.95%
+  );
+  --background-image-gradient-hover: linear-gradient(
+    145.37deg,
+    rgba(255, 255, 255, 0.1) -8.75%,
+    rgba(255, 255, 255, 0.057) 83.95%
+  );
+  --background-image-shine: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0) 45%,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0) 55%,
+    rgba(255, 255, 255, 0) 100%
+  );
+
+  --color-cyan-1: #0091f70a;
+  --color-cyan-2: #02a7f211;
+  --color-cyan-3: #00befd28;
+  --color-cyan-4: #00baff3b;
+  --color-cyan-5: #00befd4d;
+  --color-cyan-6: #00c7fd5e;
+  --color-cyan-7: #14cdff75;
+  --color-cyan-8: #11cfff95;
+  --color-cyan-9: #00cfffc3;
+  --color-cyan-10: #28d6ffcd;
+  --color-cyan-11: #52e1fee5;
+  --color-cyan-12: #bbf3fef7;
+
+  --color-slate-1: #00000000;
+  --color-slate-2: #d8f4f609;
+  --color-slate-3: #ddeaf814;
+  --color-slate-4: #d3edf81d;
+  --color-slate-5: #d9edfe25;
+  --color-slate-6: #d6ebfd30;
+  --color-slate-7: #d9edff40;
+  --color-slate-8: #d9edff5d;
+  --color-slate-9: #dfebfd6d;
+  --color-slate-10: #e5edfd7b;
+  --color-slate-11: #f1f7feb5;
+  --color-slate-12: #fcfdffef;
+
+  --font-sans:
+    var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono:
+    var(--font-sf-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  --animate-spin-slow: spin 3s linear infinite;
+  --animate-spin-fast: spin 1.5s linear infinite;
+
+  @keyframes shine {
+    0% {
+      background-position: -100%;
+    }
+
+    100% {
+      background-position: 100%;
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dashoffset: 1000;
+    }
+
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+@utility arrow-hide {
+  appearance: textfield;
+
+  &::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0px;
+  }
+
+  &::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0px;
+  }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+html {
+  color-scheme: dark;
+}
+
+.popup-open iframe {
+  pointer-events: none;
+}
+
+nav > div > div > .line {
+  display: none;
+}

package/src/app/layout.tsx

@@ -0,0 +1,46 @@
+import './globals.css';
+
+import type { Metadata } from 'next';
+import { TemplatesProvider } from '../contexts/templates';
+import { getTemplatesDirectoryMetadata } from '../utils/get-templates-directory-metadata';
+import { templatesDirectoryAbsolutePath } from './env';
+import { inter, sfMono } from './fonts';
+
+export const metadata: Metadata = {
+  title: 'React PDF Forge',
+};
+
+export const dynamic = 'force-dynamic';
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const templatesDirectoryMetadata = await getTemplatesDirectoryMetadata(
+    templatesDirectoryAbsolutePath,
+  );
+
+  if (typeof templatesDirectoryMetadata === 'undefined') {
+    throw new Error(
+      `Could not find the templates directory specified under ${templatesDirectoryAbsolutePath}!`,
+    );
+  }
+
+  return (
+    <html
+      className={`${inter.variable} ${sfMono.variable} font-sans`}
+      lang="en"
+    >
+      <body className="relative h-screen bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
+        <div className="bg-linear-to-t from-slate-3 flex flex-col">
+          <TemplatesProvider
+            initialTemplatesDirectoryMetadata={templatesDirectoryMetadata}
+          >
+            {children}
+          </TemplatesProvider>
+        </div>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,52 @@
+import path from 'node:path';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Button, Heading, Text } from '../components';
+import CodeSnippet from '../components/code-snippet';
+import { Shell } from '../components/shell';
+import { templatesDirectoryAbsolutePath } from './env';
+import logo from './logo.png';
+
+export default function Home() {
+  const baseTemplatesDirectoryName = path.basename(
+    templatesDirectoryAbsolutePath,
+  );
+
+  return (
+    <Shell>
+      <div className="w-full h-full flex items-center justify-center p-8">
+        <div className="-mt-10 relative max-w-lg flex flex-col items-center gap-3 text-center">
+          <Image
+            alt="React PDF Forge Icon"
+            className="mb-8"
+            height={144}
+            src={logo}
+            style={{
+              borderRadius: 34,
+              boxShadow: '0 .625rem 12.5rem 1.25rem #2B7CA080',
+            }}
+            width={141}
+          />
+          <Heading as="h2" size="6" weight="medium">
+            Welcome to React PDF Forge
+          </Heading>
+          <Text as="p">
+            To start developing your PDF templates, you can create a<br />
+            <CodeSnippet>.jsx</CodeSnippet> or <CodeSnippet>.tsx</CodeSnippet>{' '}
+            file under your{' '}
+            <CodeSnippet>{baseTemplatesDirectoryName}</CodeSnippet> folder.
+          </Text>
+          <Button asChild className="mt-3" size="3">
+            <Link
+              href="https://github.com/ahmedrowaihi/react-pdf-forge"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Check the docs
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </Shell>
+  );
+}

package/src/app/preview/[...slug]/download-button.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { exportSingleTemplate } from '../../../actions/export-single-template';
+import { IconFile } from '../../../components/icons/icon-file';
+import { IconImage } from '../../../components/icons/icon-image';
+import { Tooltip } from '../../../components/tooltip';
+import { cn } from '../../../utils';
+
+interface DownloadButtonProps {
+  templateSlug: string;
+  htmlMarkup: string;
+  darkMode?: boolean;
+}
+
+type ExportFormat = 'pdf' | 'screenshot';
+
+export const DownloadButton = ({
+  templateSlug,
+  htmlMarkup,
+  darkMode = false,
+}: DownloadButtonProps) => {
+  const [isLoadingPdf, setIsLoadingPdf] = useState(false);
+  const [isLoadingScreenshot, setIsLoadingScreenshot] = useState(false);
+
+  const templateName = templateSlug.replace(/\.[^/.]+$/, '');
+
+  const handleOpen = async (format: ExportFormat) => {
+    if (format === 'pdf') {
+      setIsLoadingPdf(true);
+    } else {
+      setIsLoadingScreenshot(true);
+    }
+
+    try {
+      const result = await exportSingleTemplate({
+        name: templateName,
+        html: htmlMarkup,
+        format,
+        darkMode,
+      });
+
+      if (result?.serverError) {
+        toast.error(result.serverError);
+        return;
+      }
+
+      if (!result?.data) {
+        toast.error('Failed to export template');
+        return;
+      }
+
+      const resultData = result.data;
+
+      if (resultData.format === 'html' || !('data' in resultData)) {
+        toast.error('Invalid export format');
+        return;
+      }
+
+      const resultFormat = resultData.format;
+
+      const binaryString = atob(resultData.data);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      const blob = new Blob([bytes], { type: resultData.mimeType });
+      const url = URL.createObjectURL(blob);
+      window.open(url, '_blank');
+      setTimeout(() => URL.revokeObjectURL(url), 100);
+      toast.success(
+        `${resultFormat === 'pdf' ? 'PDF' : 'Screenshot'} opened in new window`,
+      );
+    } catch (error) {
+      console.error('Export error:', error);
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : 'Failed to export template. Make sure the PDF Forge server is running.',
+      );
+    } finally {
+      if (format === 'pdf') {
+        setIsLoadingPdf(false);
+      } else {
+        setIsLoadingScreenshot(false);
+      }
+    }
+  };
+
+  const isLoading = isLoadingPdf || isLoadingScreenshot;
+
+  return (
+    <div className="flex gap-2">
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <button
+            disabled={isLoading}
+            type="button"
+            onClick={() => {
+              void handleOpen('pdf');
+            }}
+            className={cn(
+              'relative w-9 h-9 flex items-center justify-center border border-slate-6 text-sm rounded-lg transition duration-200 ease-in-out',
+              'text-slate-11 hover:text-slate-12',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+              isLoadingPdf && 'bg-slate-4',
+            )}
+          >
+            <IconFile size={16} />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>Open as PDF</Tooltip.Content>
+      </Tooltip>
+
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <button
+            disabled={isLoading}
+            type="button"
+            onClick={() => {
+              void handleOpen('screenshot');
+            }}
+            className={cn(
+              'relative w-9 h-9 flex items-center justify-center border border-slate-6 text-sm rounded-lg transition duration-200 ease-in-out',
+              'text-slate-11 hover:text-slate-12',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+              isLoadingScreenshot && 'bg-slate-4',
+            )}
+          >
+            <IconImage size={16} />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>Open as Screenshot</Tooltip.Content>
+      </Tooltip>
+    </div>
+  );
+};

package/src/app/preview/[...slug]/error-overlay.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import type { ErrorObject } from '../../../utils/types/error-object';
+
+interface ErrorOverlayProps {
+  error: ErrorObject;
+}
+
+const Message = ({ children: content }: { children: string }) => {
+  const match = content.match(
+    /(Unexpected closing tag "[^"]+". It may happen when the tag has already been closed by another tag). (For more info see) (.+)/,
+  );
+  if (match) {
+    const [_, errorMessage, moreInfo, link] = match;
+    return (
+      <>
+        {errorMessage}.
+        <p className="text-lg">
+          {moreInfo}{' '}
+          <a className="underline" rel="noreferrer" target="_blank" href={link}>
+            {link}
+          </a>
+        </p>
+      </>
+    );
+  }
+  return content;
+};
+
+export const ErrorOverlay = ({ error }: ErrorOverlayProps) => {
+  return (
+    <>
+      <div className="absolute inset-0 z-50 bg-black/80" />
+      <div
+        className="
+        min-h-[50vh] w-full max-w-lg sm:rounded-lg md:max-w-[568px] lg:max-w-[920px]
+        absolute left-[50%] top-[50%] z-50  translate-x-[-50%] translate-y-[-50%] 
+        rounded-t-sm overflow-hidden bg-white text-black shadow-lg duration-200
+        flex flex-col selection:text-black!
+      "
+      >
+        <div className="bg-red-500 h-3" />
+        <div className="flex grow p-6 min-w-0 max-w-full flex-col space-y-1.5">
+          <div className="shrink pb-2 text-xl tracking-tight">
+            <b>{error.name}</b>: <Message>{error.message}</Message>
+          </div>
+          {error.stack ? (
+            <div className="grow scroll-px-4 overflow-x-auto rounded-lg bg-black p-2 text-gray-100">
+              <pre className="w-full min-w-0 font-mono leading-6 selection:text-cyan-12! text-xs">
+                {error.stack}
+              </pre>
+            </div>
+          ) : undefined}
+        </div>
+      </div>
+    </>
+  );
+};

package/src/app/preview/[...slug]/page.tsx

@@ -0,0 +1,90 @@
+import path from 'node:path';
+import { redirect } from 'next/navigation';
+import { Suspense } from 'react';
+import { getTemplatePathFromSlug } from '../../../actions/get-template-path-from-slug';
+import { renderTemplateByPath } from '../../../actions/render-template-by-path';
+import { Shell } from '../../../components/shell';
+import { Toolbar } from '../../../components/toolbar';
+import { PreviewProvider } from '../../../contexts/preview';
+import { getTemplatesDirectoryMetadata } from '../../../utils/get-templates-directory-metadata';
+import { isBuilding, templatesDirectoryAbsolutePath } from '../../env';
+import Preview from './preview';
+
+export const dynamicParams = true;
+
+export const dynamic = 'force-dynamic';
+
+export interface PreviewParams {
+  slug: string[];
+}
+
+export default async function Page({
+  params: paramsPromise,
+}: {
+  params: Promise<PreviewParams>;
+}) {
+  const params = await paramsPromise;
+  // will come in here as segments of a relative path to the template
+  // ex: ['authentication', 'verify-password.tsx']
+  const slug = decodeURIComponent(params.slug.join('/'));
+  const templatesDirMetadata = await getTemplatesDirectoryMetadata(
+    templatesDirectoryAbsolutePath,
+  );
+
+  if (typeof templatesDirMetadata === 'undefined') {
+    throw new Error(
+      `Could not find the templates directory specified under ${templatesDirectoryAbsolutePath}!
+
+This is most likely not an issue with the preview server. Maybe there was a typo on the "--dir" flag?`,
+    );
+  }
+
+  let templatePath: string;
+  try {
+    templatePath = await getTemplatePathFromSlug(slug);
+  } catch (exception) {
+    if (exception instanceof Error) {
+      console.warn(exception.message);
+      redirect('/');
+    }
+    throw exception;
+  }
+
+  const serverTemplateRenderingResult =
+    await renderTemplateByPath(templatePath);
+
+  if (isBuilding && 'error' in serverTemplateRenderingResult) {
+    throw new Error(serverTemplateRenderingResult.error.message, {
+      cause: serverTemplateRenderingResult.error,
+    });
+  }
+
+  return (
+    <PreviewProvider
+      templateSlug={slug}
+      templatePath={templatePath}
+      serverRenderingResult={serverTemplateRenderingResult}
+    >
+      <Shell currentTemplateOpenSlug={slug}>
+        {/* This suspense is so that this page doesn't throw warnings */}
+        {/* on the build of the preview server de-opting into         */}
+        {/* client-side rendering on build                            */}
+        <Suspense>
+          <Preview templateTitle={path.basename(templatePath)} />
+
+          <Toolbar />
+        </Suspense>
+      </Shell>
+    </PreviewProvider>
+  );
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<PreviewParams>;
+}) {
+  const { slug } = await params;
+
+  return { title: `${path.basename(slug.join('/'))} — React PDF Forge` };
+}