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

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

@@ -0,0 +1,249 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import { flushSync } from 'react-dom';
+import { Toaster } from 'sonner';
+import { useDebouncedCallback } from 'use-debounce';
+import { Topbar } from '../../../components';
+import { CodeContainer } from '../../../components/code-container';
+import {
+  makeIframeDocumentBubbleEvents,
+  ResizableWrapper,
+} from '../../../components/resizable-wrapper';
+import { useToolbarState } from '../../../components/toolbar';
+import { Tooltip } from '../../../components/tooltip';
+import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
+import { EmulatedDarkModeToggle } from '../../../components/topbar/emulated-dark-mode-toggle';
+import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
+import { usePreviewContext } from '../../../contexts/preview';
+import { useClampedState } from '../../../hooks/use-clamped-state';
+import { cn } from '../../../utils';
+import { DownloadButton } from './download-button';
+import { ErrorOverlay } from './error-overlay';
+import { TemplateFrame } from './template-frame';
+
+interface PreviewProps extends React.ComponentProps<'div'> {
+  templateTitle: string;
+}
+
+const Preview = ({ templateTitle, className, ...props }: PreviewProps) => {
+  const { renderingResult, renderedTemplateMetadata } = usePreviewContext();
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const isDarkModeEnabled = searchParams.get('dark') !== null;
+  const activeView = searchParams.get('view') ?? 'preview';
+  const activeLang = searchParams.get('lang') ?? 'tsx';
+
+  const handleDarkModeChange = (enabled: boolean) => {
+    const params = new URLSearchParams(searchParams);
+    if (enabled) {
+      params.set('dark', '');
+    } else {
+      params.delete('dark');
+    }
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
+  };
+
+  const handleViewChange = (view: string) => {
+    const params = new URLSearchParams(searchParams);
+    params.set('view', view);
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
+  };
+
+  const handleLangChange = (lang: string) => {
+    const params = new URLSearchParams(searchParams);
+    params.set('view', 'source');
+    params.set('lang', lang);
+    const isSameLang = searchParams.get('lang') === lang;
+    router.push(
+      `${pathname}?${params.toString()}${isSameLang ? location.hash : ''}`,
+    );
+  };
+
+  const hasRenderingMetadata = typeof renderedTemplateMetadata !== 'undefined';
+  const hasErrors = 'error' in renderingResult;
+
+  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
+  const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
+  const minWidth = 220;
+  const minHeight = minWidth * 1.6;
+  const storedWidth = searchParams.get('width');
+  const storedHeight = searchParams.get('height');
+  const A4_WIDTH = 794;
+  const A4_HEIGHT = 1123;
+
+  const [width, setWidth] = useClampedState(
+    storedWidth ? Number.parseInt(storedWidth, 10) : A4_WIDTH,
+    minWidth,
+    maxWidth,
+  );
+  const [height, setHeight] = useClampedState(
+    storedHeight ? Number.parseInt(storedHeight, 10) : A4_HEIGHT,
+    minHeight,
+    maxHeight,
+  );
+
+  const handleSaveViewSize = useDebouncedCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.set('width', width.toString());
+    params.set('height', height.toString());
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
+  }, 300);
+
+  const { toggled: toolbarToggled } = useToolbarState();
+
+  return (
+    <>
+      <Topbar templateTitle={templateTitle}>
+        {activeView === 'preview' ? (
+          <>
+            <EmulatedDarkModeToggle
+              enabled={isDarkModeEnabled}
+              onChange={(enabled) => handleDarkModeChange(enabled)}
+            />
+            <ViewSizeControls
+              setViewHeight={(height) => {
+                setHeight(height);
+                flushSync(() => {
+                  handleSaveViewSize();
+                });
+              }}
+              setViewWidth={(width) => {
+                setWidth(width);
+                flushSync(() => {
+                  handleSaveViewSize();
+                });
+              }}
+              viewHeight={height}
+              viewWidth={width}
+              minWidth={minWidth}
+              minHeight={minHeight}
+            />
+          </>
+        ) : null}
+        <ActiveViewToggleGroup
+          activeView={activeView}
+          setActiveView={handleViewChange}
+        />
+        {hasRenderingMetadata ? (
+          <div className="flex justify-end">
+            <DownloadButton
+              templateSlug={templateTitle}
+              htmlMarkup={renderedTemplateMetadata.markup}
+              darkMode={isDarkModeEnabled}
+            />
+          </div>
+        ) : null}
+      </Topbar>
+
+      <div
+        {...props}
+        className={cn(
+          'h-[calc(100%-3.5rem-2.375rem)] will-change-[height] flex p-4 transition-[height] duration-300 relative',
+          activeView === 'preview' && 'bg-gray-200',
+          activeView === 'preview' && isDarkModeEnabled && 'bg-gray-400',
+          toolbarToggled && 'h-[calc(100%-3.5rem-13rem)]',
+          className,
+        )}
+        ref={(element) => {
+          const observer = new ResizeObserver((entry) => {
+            const [elementEntry] = entry;
+            if (elementEntry) {
+              setMaxWidth(elementEntry.contentRect.width);
+              setMaxHeight(elementEntry.contentRect.height);
+            }
+          });
+
+          if (element) {
+            observer.observe(element);
+          }
+
+          return () => {
+            observer.disconnect();
+          };
+        }}
+      >
+        {hasErrors ? <ErrorOverlay error={renderingResult.error} /> : null}
+
+        {hasRenderingMetadata ? (
+          <>
+            {activeView === 'preview' && (
+              <ResizableWrapper
+                minHeight={minHeight}
+                minWidth={minWidth}
+                maxHeight={maxHeight}
+                maxWidth={maxWidth}
+                height={height}
+                onResizeEnd={() => {
+                  handleSaveViewSize();
+                }}
+                onResize={(value, direction) => {
+                  const isHorizontal =
+                    direction === 'east' || direction === 'west';
+                  if (isHorizontal) {
+                    setWidth(Math.round(value));
+                  } else {
+                    setHeight(Math.round(value));
+                  }
+                }}
+                width={width}
+              >
+                <TemplateFrame
+                  className="max-h-full rounded-lg bg-white [color-scheme:auto]"
+                  darkMode={isDarkModeEnabled}
+                  markup={renderedTemplateMetadata.markup}
+                  width={width}
+                  height={height}
+                  title={templateTitle}
+                  ref={(iframe) => {
+                    if (!iframe) return;
+
+                    return makeIframeDocumentBubbleEvents(iframe);
+                  }}
+                />
+              </ResizableWrapper>
+            )}
+
+            {activeView === 'source' && (
+              <div className="h-full w-full">
+                <div className="m-auto h-full flex max-w-3xl p-6">
+                  <Tooltip.Provider>
+                    <CodeContainer
+                      activeLang={activeLang}
+                      basename={renderedTemplateMetadata.basename}
+                      markups={[
+                        {
+                          language: 'tsx',
+                          extension: renderedTemplateMetadata.extname,
+                          content: renderedTemplateMetadata.reactMarkup,
+                        },
+                        {
+                          language: 'html',
+                          content: renderedTemplateMetadata.prettyMarkup,
+                        },
+                        {
+                          language: 'markdown',
+                          extension: 'md',
+                          content: renderedTemplateMetadata.plainText,
+                        },
+                      ]}
+                      setActiveLang={handleLangChange}
+                    />
+                  </Tooltip.Provider>
+                </div>
+              </div>
+            )}
+          </>
+        ) : null}
+
+        <Toaster />
+      </div>
+    </>
+  );
+};
+
+export default Preview;

package/src/app/preview/[...slug]/template-frame.tsx

@@ -0,0 +1,68 @@
+import type { ComponentProps } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
+
+interface TemplateFrameProps extends ComponentProps<'iframe'> {
+  markup: string;
+  width: number;
+  height: number;
+  darkMode?: boolean;
+}
+
+const applyDarkMode = (contentDocument: Document, darkMode: boolean) => {
+  // Add or remove 'dark' class on the body/html element
+  // Templates can use Theme component with variant="dark" to define CSS variables
+  // Example: <Theme variant="dark" css={`--color-bg: #1a1a1a;`} />
+  if (darkMode) {
+    contentDocument.documentElement.classList.add('dark');
+    contentDocument.body.classList.add('dark');
+  } else {
+    contentDocument.documentElement.classList.remove('dark');
+    contentDocument.body.classList.remove('dark');
+  }
+};
+
+export const TemplateFrame = forwardRef<HTMLIFrameElement, TemplateFrameProps>(
+  function TemplateFrame(
+    { markup, width, height, darkMode = false, ...rest },
+    ref,
+  ) {
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+
+    // Merge refs: both internal ref and forwarded ref
+    const setRefs = (element: HTMLIFrameElement | null) => {
+      iframeRef.current = element;
+      if (typeof ref === 'function') {
+        ref(element);
+      } else if (ref) {
+        ref.current = element;
+      }
+    };
+
+    useEffect(() => {
+      const iframe = iframeRef.current;
+      if (!iframe) return;
+
+      const { contentDocument } = iframe;
+      if (!contentDocument) return;
+
+      applyDarkMode(contentDocument, darkMode);
+    }, [darkMode, markup]);
+
+    return (
+      <iframe
+        ref={setRefs}
+        srcDoc={markup}
+        width={width}
+        height={height}
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const { contentDocument } = iframe;
+          if (!contentDocument) return;
+
+          applyDarkMode(contentDocument, darkMode);
+        }}
+        {...rest}
+      />
+    );
+  },
+);

package/src/components/button.tsx

@@ -0,0 +1,101 @@
+'use client';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+import * as SlotPrimitive from '@radix-ui/react-slot';
+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 RootProps = React.ComponentProps<'button'>;
+
+type Appearance = 'white' | 'gradient';
+type Size = '1' | '2' | '3' | '4';
+
+interface ButtonProps extends RootProps {
+  asChild?: boolean;
+  appearance?: Appearance;
+  size?: Size;
+  loading?: boolean;
+}
+
+export const Button = ({
+  asChild,
+  appearance = 'white',
+  className,
+  children,
+  size = '2',
+  loading,
+  ref,
+  ...props
+}: ButtonProps) => {
+  const Root = asChild ? SlotPrimitive.Slot : 'button';
+
+  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',
+        )}
+      >
+        <DotLottieReact
+          data={animatedLoadIcon}
+          autoplay={false}
+          className="h-5 w-5"
+          loop={true}
+        />
+      </span>
+      <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
+    </Root>
+  );
+};
+
+Button.displayName = 'Button';
+
+const getAppearance = (appearance: Appearance | undefined) => {
+  switch (appearance) {
+    case undefined:
+    case 'white':
+      return [
+        'border-white bg-white text-black transition-colors duration-200 ease-in-out',
+        'hover:bg-white/90',
+        'focus:bg-white/90 focus:outline-hidden focus:ring-2 focus:ring-white/20',
+        'mt-2 mb-2 aria-disabled:border-transparent aria-disabled:bg-slate-11',
+      ];
+    case 'gradient':
+      return [
+        'bg-gradient border-[#34343A] backdrop-blur-[1.25rem]',
+        'hover:bg-gradient-hover',
+        'focus:bg-gradient-hover focus:outline-hidden focus:ring-2 focus:ring-white/20',
+      ];
+    default:
+      unreachable(appearance);
+  }
+};
+
+const getSize = (size: Size | undefined) => {
+  switch (size) {
+    case '1':
+      return '';
+    case undefined:
+    case '2':
+      return 'text-[.875rem] h-8 px-3 rounded-md gap-2';
+    case '3':
+      return 'text-[.875rem] h-10 px-4 rounded-md gap-2';
+    case '4':
+      return 'text-base h-11 px-4 rounded-md gap-2';
+    default:
+      unreachable(size);
+  }
+};

package/src/components/code-container.tsx

@@ -0,0 +1,169 @@
+import { LayoutGroup, motion } from 'framer-motion';
+import type { Language } from 'prism-react-renderer';
+import * as React from 'react';
+import { copyTextToClipboard } from '../utils';
+import { tabTransition } from '../utils/constants';
+import languageMap from '../utils/language-map';
+import { Code } from './code';
+import { IconButton } from './icons/icon-button';
+import { IconCheck } from './icons/icon-check';
+import { IconClipboard } from './icons/icon-clipboard';
+import { IconDownload } from './icons/icon-download';
+import { Tooltip } from './tooltip';
+
+interface CodeContainerProps {
+  markups: MarkupProps[];
+  basename: string;
+  activeLang: string;
+  setActiveLang: (lang: string) => void;
+}
+
+interface MarkupProps {
+  language: Language;
+  extension?: string;
+  content: string;
+}
+
+export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
+  markups,
+  basename: filename,
+  activeLang,
+  setActiveLang,
+}) => {
+  const activeMarkup = markups.find(({ language }) => activeLang === language);
+  if (!activeMarkup) {
+    throw new Error('No markup found for the active language!', {
+      cause: {
+        activeLang,
+        markups,
+      },
+    });
+  }
+
+  const codeId = React.useId();
+
+  return (
+    <div
+      className="relative max-h-[650px] w-full h-full whitespace-pre rounded-md border border-slate-6 text-sm"
+      style={{
+        lineHeight: '130%',
+        background:
+          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
+        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
+      }}
+    >
+      <div className="h-9 border-b border-slate-6">
+        <div className="flex">
+          <LayoutGroup id={codeId}>
+            {markups.map(({ language }) => {
+              const isCurrentLang = activeLang === language;
+              return (
+                <motion.button
+                  className={`relative px-4 py-[8px] font-sans text-sm font-medium transition duration-200 ease-in-out hover:text-slate-12 ${
+                    activeLang !== language ? 'text-slate-11' : 'text-slate-12'
+                  }`}
+                  key={language}
+                  onClick={() => {
+                    setActiveLang(language);
+                  }}
+                >
+                  {isCurrentLang ? (
+                    <motion.span
+                      animate={{ opacity: 1 }}
+                      className="absolute bottom-0 left-0 right-0 top-0 bg-slate-4"
+                      exit={{ opacity: 0 }}
+                      initial={{ opacity: 0 }}
+                      layoutId="code"
+                      transition={tabTransition}
+                    />
+                  ) : null}
+                  {languageMap[language]}
+                </motion.button>
+              );
+            })}
+          </LayoutGroup>
+        </div>
+        <CopyToClipboardButton content={activeMarkup.content} />
+        <DownloadButton
+          content={activeMarkup.content}
+          filename={`${filename}.${activeMarkup.extension || activeMarkup.language}`}
+        />
+      </div>
+      <div className="h-[calc(100%-2.25rem)]">
+        <Code language={activeLang}>{activeMarkup.content}</Code>
+      </div>
+    </div>
+  );
+};
+
+interface CopyToClipboardButtonProps {
+  content: string;
+}
+
+const CopyToClipboardButton = ({ content }: CopyToClipboardButtonProps) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+
+  const unsetIsCopiedTimeout = React.useRef<NodeJS.Timeout>(undefined);
+  React.useEffect(() => {
+    setIsCopied(false);
+    clearTimeout(unsetIsCopiedTimeout.current);
+    unsetIsCopiedTimeout.current = undefined;
+  }, [content]);
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger
+        asChild
+        className="absolute right-2 top-2 hidden md:block"
+      >
+        <IconButton
+          onClick={async () => {
+            setIsCopied(true);
+            await copyTextToClipboard(content);
+            unsetIsCopiedTimeout.current = setTimeout(() => {
+              setIsCopied(false);
+            }, 3000);
+          }}
+        >
+          {isCopied ? <IconCheck /> : <IconClipboard />}
+        </IconButton>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
+    </Tooltip>
+  );
+};
+
+interface DownloadButtonProps {
+  content: string;
+  filename: string;
+}
+
+const DownloadButton = ({ content, filename }: DownloadButtonProps) => {
+  const generatedUrl = React.useMemo(() => {
+    const file = new File([content], filename);
+    return URL.createObjectURL(file);
+  }, [content, filename]);
+  const url = React.useSyncExternalStore(
+    () => () => {},
+    () => generatedUrl,
+    () => undefined,
+  );
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger
+        asChild
+        className="text-gray-11 absolute right-8 top-2 hidden md:block"
+      >
+        <a
+          className="text-slate-11 transition duration-200 ease-in-out hover:text-slate-12"
+          download={filename}
+          href={url}
+        >
+          <IconDownload />
+        </a>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Download</Tooltip.Content>
+    </Tooltip>
+  );
+};

package/src/components/code-snippet.tsx

@@ -0,0 +1,9 @@
+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">
+      {children}
+    </code>
+  );
+};
+
+export default CodeSnippet;