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

package/src/components/sidebar/file-tree-directory-children.tsx

@@ -0,0 +1,142 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import * as React from 'react';
+import { cn } from '../../utils';
+import type { TemplatesDirectory } from '../../utils/get-templates-directory-metadata';
+import { IconFile } from '../icons/icon-file';
+import { FileTreeDirectory } from './file-tree-directory';
+
+export const FileTreeDirectoryChildren = (props: {
+  templatesDirectoryMetadata: TemplatesDirectory;
+  currentTemplateOpenSlug?: string;
+  open: boolean;
+  isRoot?: boolean;
+}) => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const id = React.useId();
+
+  return (
+    <AnimatePresence initial={false}>
+      {props.open ? (
+        <Collapsible.Content
+          asChild
+          className="relative 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 h-full w-px bg-slate-6" />
+            )}
+            <div className="flex flex-col truncate">
+              <LayoutGroup id={`sidebar-${id}`}>
+                {props.templatesDirectoryMetadata.subDirectories.map(
+                  (subDirectory) => (
+                    <FileTreeDirectory
+                      className="p-0 data-[state=open]:mb-2"
+                      currentTemplateOpenSlug={props.currentTemplateOpenSlug}
+                      templatesDirectoryMetadata={subDirectory}
+                      key={subDirectory.absolutePath}
+                    />
+                  ),
+                )}
+                {props.templatesDirectoryMetadata.templateFilenames.map(
+                  (templateFilename, index) => {
+                    const templateSlug = props.isRoot
+                      ? templateFilename
+                      : `${props.templatesDirectoryMetadata.relativePath}/${templateFilename}`;
+
+                    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.currentTemplateOpenSlug
+                      ? removeExtensionFrom(props.currentTemplateOpenSlug) ===
+                        templateSlug
+                      : false;
+
+                    return (
+                      <Link
+                        href={{
+                          pathname: `/preview/${templateSlug}`,
+                          search: searchParams.toString(),
+                        }}
+                        onMouseOver={() => {
+                          router.prefetch(
+                            `/preview/${templateSlug}?${searchParams.toString()}`,
+                          );
+                        }}
+                        key={templateSlug}
+                      >
+                        <motion.span
+                          animate={{ x: 0, opacity: 1 }}
+                          className={cn(
+                            'relative flex h-8 w-full items-center text-start gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
+                            props.isRoot ? undefined : 'pl-3',
+                            {
+                              'text-cyan-11': isCurrentPage,
+                              'hover:text-slate-12':
+                                props.currentTemplateOpenSlug !== templateSlug,
+                            },
+                          )}
+                          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 inset-0 rounded-md bg-cyan-5 opacity-0 transition-all duration-200 ease-[cubic-bezier(.6,.12,.34,.96)]"
+                              exit={{ opacity: 0 }}
+                              initial={{ opacity: 0 }}
+                            >
+                              {props.isRoot ? null : (
+                                <motion.div
+                                  className="absolute top-1 left-[0.4rem] inset-0 h-6 w-px rounded-xs bg-cyan-11"
+                                  layoutId="active-file"
+                                  transition={{
+                                    type: 'spring',
+                                    bounce: 0.2,
+                                    duration: 0.6,
+                                  }}
+                                />
+                              )}
+                            </motion.span>
+                          ) : null}
+                          <IconFile
+                            className="h-5 w-5"
+                            height="20"
+                            width="20"
+                          />
+                          <span className="truncate w-[calc(100%-1.25rem)]">
+                            {templateFilename}
+                          </span>
+                        </motion.span>
+                      </Link>
+                    );
+                  },
+                )}
+              </LayoutGroup>
+            </div>
+          </motion.div>
+        </Collapsible.Content>
+      ) : null}
+    </AnimatePresence>
+  );
+};

package/src/components/sidebar/file-tree-directory.tsx

@@ -0,0 +1,92 @@
+'use client';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import * as React from 'react';
+import { cn } from '../../utils';
+import type { TemplatesDirectory } from '../../utils/get-templates-directory-metadata';
+import { Heading } from '../heading';
+import { IconArrowDown } from '../icons/icon-arrow-down';
+import { IconFolder } from '../icons/icon-folder';
+import { IconFolderOpen } from '../icons/icon-folder-open';
+import { FileTreeDirectoryChildren } from './file-tree-directory-children';
+
+interface SidebarDirectoryProps {
+  templatesDirectoryMetadata: TemplatesDirectory;
+  className?: string;
+  currentTemplateOpenSlug?: string;
+}
+
+const persistedOpenDirectories = new Set<string>();
+
+export const FileTreeDirectory = ({
+  templatesDirectoryMetadata: directoryMetadata,
+  className,
+  currentTemplateOpenSlug,
+}: SidebarDirectoryProps) => {
+  const doesDirectoryContainCurrentTemplateOpen = currentTemplateOpenSlug
+    ? currentTemplateOpenSlug.includes(directoryMetadata.relativePath)
+    : false;
+
+  const isEmpty =
+    directoryMetadata.templateFilenames.length === 0 &&
+    directoryMetadata.subDirectories.length === 0;
+
+  const [open, setOpen] = React.useState(
+    persistedOpenDirectories.has(directoryMetadata.absolutePath) ||
+      doesDirectoryContainCurrentTemplateOpen,
+  );
+
+  return (
+    <Collapsible.Root
+      className={cn('group', className)}
+      onOpenChange={(isOpening) => {
+        if (isOpening) {
+          persistedOpenDirectories.add(directoryMetadata.absolutePath);
+        } else {
+          persistedOpenDirectories.delete(directoryMetadata.absolutePath);
+        }
+
+        setOpen(isOpening);
+      }}
+      open={open}
+    >
+      <Collapsible.Trigger
+        className={cn(
+          'mt-1 mb-1.5 flex w-full items-center text-start justify-between gap-2 font-medium text-[14px]',
+          {
+            'cursor-pointer': !isEmpty,
+          },
+        )}
+      >
+        {open ? (
+          <IconFolderOpen className="w-[20px]" height="20" width="20" />
+        ) : (
+          <IconFolder height="20" width="20" />
+        )}
+        <Heading
+          as="h3"
+          className="transition grow w-[calc(100%-40px)] truncate duration-200 ease-in-out hover:text-slate-12"
+          color="gray"
+          size="2"
+          weight="medium"
+        >
+          {directoryMetadata.directoryName}
+        </Heading>
+        {!isEmpty ? (
+          <IconArrowDown
+            width="20"
+            height="20"
+            className="ml-auto opacity-60 transition-transform data-[open=true]:rotate-180"
+            data-open={open}
+          />
+        ) : null}
+      </Collapsible.Trigger>
+      {!isEmpty ? (
+        <FileTreeDirectoryChildren
+          currentTemplateOpenSlug={currentTemplateOpenSlug}
+          templatesDirectoryMetadata={directoryMetadata}
+          open={open}
+        />
+      ) : null}
+    </Collapsible.Root>
+  );
+};

package/src/components/sidebar/file-tree.tsx

@@ -0,0 +1,31 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import * as React from 'react';
+import type { TemplatesDirectory } from '../../utils/get-templates-directory-metadata';
+import { FileTreeDirectoryChildren } from './file-tree-directory-children';
+
+interface FileTreeProps {
+  currentTemplateOpenSlug: string | undefined;
+  templatesDirectoryMetadata: TemplatesDirectory;
+}
+
+export const FileTree = ({
+  currentTemplateOpenSlug,
+  templatesDirectoryMetadata,
+}: FileTreeProps) => {
+  return (
+    <div className="flex w-full h-full flex-col lg:w-full lg:min-w-58">
+      <nav className="flex grow flex-col p-4 pr-0 pl-0">
+        <Collapsible.Root open>
+          <React.Suspense>
+            <FileTreeDirectoryChildren
+              currentTemplateOpenSlug={currentTemplateOpenSlug}
+              templatesDirectoryMetadata={templatesDirectoryMetadata}
+              isRoot
+              open
+            />
+          </React.Suspense>
+        </Collapsible.Root>
+      </nav>
+    </div>
+  );
+};

package/src/components/sidebar/index.ts

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

package/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,46 @@
+'use client';
+import { clsx } from 'clsx';
+import { useTemplates } from '../../contexts/templates';
+import { cn } from '../../utils';
+import { Logo } from '../logo';
+import { FileTree } from './file-tree';
+
+interface SidebarProps {
+  className?: string;
+  currentTemplateOpenSlug?: string;
+}
+
+export const Sidebar = ({
+  className,
+  currentTemplateOpenSlug,
+}: SidebarProps) => {
+  const { templatesDirectoryMetadata } = useTemplates();
+
+  return (
+    <aside
+      className={cn(
+        'overflow-hidden',
+        'lg:static lg:z-auto lg:max-h-screen lg:w-[16rem]',
+        className,
+      )}
+    >
+      <div className="flex w-full h-full overflow-hidden flex-col border-slate-6 border-r">
+        <div
+          className={clsx(
+            'hidden min-h-14 shrink items-center py-2 px-3 lg:flex border-b border-slate-4',
+          )}
+        >
+          <h2>
+            <Logo />
+          </h2>
+        </div>
+        <div className="relative grow w-full h-full overflow-y-auto overflow-x-hidden px-4 pb-3">
+          <FileTree
+            currentTemplateOpenSlug={currentTemplateOpenSlug}
+            templatesDirectoryMetadata={templatesDirectoryMetadata}
+          />
+        </div>
+      </div>
+    </aside>
+  );
+};

package/src/components/text.tsx

@@ -0,0 +1,99 @@
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import * as React from 'react';
+import { type As, cn, unreachable } 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/src/components/toolbar/checking-results.tsx

@@ -0,0 +1,150 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimatePresence, motion, type Variants } from 'framer-motion';
+import type { ComponentProps } from 'react';
+import { cn } from '../../utils';
+
+export type ResultStatus = 'error' | 'warning' | 'success';
+
+const statusStyles = {
+  error: 'text-red-600 hover:bg-red-600/10',
+  warning: 'text-yellow-300 hover:bg-yellow-400/10',
+  success: 'text-green-600 hover:bg-green-600/10',
+};
+
+interface ResultListProps {
+  status: ResultStatus;
+  label: React.ReactNode;
+
+  disabled?: boolean;
+  defaultOpen?: boolean;
+
+  children: React.ReactNode;
+}
+
+export const ResultList = ({
+  status,
+  label,
+
+  disabled,
+  defaultOpen,
+
+  children,
+}: ResultListProps) => {
+  return (
+    <Collapsible.Root className="group" defaultOpen={defaultOpen && !disabled}>
+      <Collapsible.Trigger
+        className={cn(
+          'group flex w-full items-center gap-1 rounded-sm p-2 transition-colors duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+          statusStyles[status],
+          disabled && 'cursor-not-allowed opacity-70',
+        )}
+        disabled={disabled}
+      >
+        <span
+          className={cn(
+            '-mt-0.5 transition-transform duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+            'rotate-0 group-data-[state=open]:rotate-90',
+          )}
+        >
+          <svg
+            fill="none"
+            height="15"
+            viewBox="0 0 15 15"
+            width="15"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clipRule="evenodd"
+              d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <div className="flex flex-1 items-center gap-1 font-bold text-[.625rem] uppercase tracking-wide">
+          {label}
+        </div>
+      </Collapsible.Trigger>
+      {children ? (
+        <Collapsible.Content>
+          <ol className="mt-2 mb-1 flex list-none flex-col gap-4">
+            {children}
+          </ol>
+        </Collapsible.Content>
+      ) : null}
+    </Collapsible.Root>
+  );
+};
+
+type ResultProps = {
+  status: ResultStatus;
+} & ComponentProps<typeof motion.li>;
+
+const resultAnimation: Variants = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: 'easeOut', staggerChildren: 0.1 },
+  },
+};
+
+export const Result = ({ children, status, ...rest }: ResultProps) => {
+  return (
+    <AnimatePresence mode="wait">
+      <motion.li
+        data-status={status}
+        initial="hidden"
+        layout
+        variants={resultAnimation}
+        animate="visible"
+        {...rest}
+        className={cn(
+          'group/item relative w-full rounded-md p-2 pl-4 transition-colors duration-300 ease-out hover:bg-slate-5',
+          rest.className,
+        )}
+      >
+        {children}
+      </motion.li>
+    </AnimatePresence>
+  );
+};
+
+const titleStatusAnimation: Variants = {
+  hidden: { opacity: 0, y: 5 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: 'easeOut' },
+  },
+};
+
+interface ResultStatusDescriptionProps {
+  children: React.ReactNode;
+}
+
+Result.StatusDescription = ({ children }: ResultStatusDescriptionProps) => {
+  return (
+    <motion.div
+      className="mt-1 font-semibold text-[.625rem] uppercase"
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface ResultTitleProps {
+  children: React.ReactNode;
+}
+
+Result.Title = ({ children }: ResultTitleProps) => {
+  return (
+    <motion.div
+      className="flex w-full items-center gap-2 text-xs group-data-[status=error]/item:text-red-400 group-data-[status=success]/item:text-green-400 group-data-[status=warning]/item:text-yellow-300 "
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};

package/src/components/toolbar/code-preview-line-link.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+interface CodePreviewLineLinkProps {
+  line: number;
+  column: number;
+
+  type: 'react' | 'html';
+}
+
+export const CodePreviewLineLink = ({
+  line,
+  type,
+}: CodePreviewLineLinkProps) => {
+  const searchParams = useSearchParams();
+
+  const newSearchParams = new URLSearchParams(searchParams);
+  newSearchParams.set('view', 'source');
+  if (type === 'html') {
+    newSearchParams.set('lang', 'html');
+  } else if (type === 'react') {
+    newSearchParams.set('lang', 'tsx');
+  }
+
+  const fragmentIdentifier = `#L${line}`;
+
+  return (
+    <Link
+      href={{
+        search: newSearchParams.toString(),
+        hash: fragmentIdentifier,
+      }}
+      scroll={false}
+      className="appearance-none underline mx-2"
+    >
+      L{line.toString().padStart(2, '0')}
+    </Link>
+  );
+};

package/src/components/toolbar/results.tsx

@@ -0,0 +1,52 @@
+import { cn } from '../../utils';
+
+export const Results = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'table'>) => {
+  return (
+    <table
+      {...props}
+      className={cn(
+        'group relative w-full border-collapse text-left text-slate-10 text-sm',
+        className,
+      )}
+    >
+      <tbody>{children}</tbody>
+    </table>
+  );
+};
+
+Results.Row = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'tr'>) => {
+  return (
+    <tr
+      className={cn(
+        'border-collapse align-bottom border-slate-6 border-b last:border-b-0',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+};
+
+Results.Column = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'td'>) => {
+  return (
+    <td
+      className={cn('py-1.5 align-bottom font-regular', className)}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+};