@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/mdx/image-zoom.tsx

@@ -0,0 +1,315 @@
+'use client';
+
+import Image, { type ImageProps } from 'next/image';
+import {
+  type ComponentProps,
+  createContext,
+  type CSSProperties,
+  type ReactNode,
+  use,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal, flushSync } from 'react-dom';
+import Zoom, { type UncontrolledProps } from 'react-medium-image-zoom';
+import { ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import '../../../styles/image-zoom.css';
+
+export type ImageZoomProps = ImageProps & {
+
+  zoomInProps?: ComponentProps<'img'>;
+
+  rmiz?: UncontrolledProps;
+
+  caption?: ReactNode;
+};
+
+interface Item {
+  element: HTMLElement;
+  image: ComponentProps<'img'>;
+  caption?: ReactNode;
+}
+
+interface Slide extends Item {
+  style?: CSSProperties;
+}
+
+const LightboxContext = createContext<{
+  register: (item: Item) => () => void;
+  open: (element: HTMLElement) => void;
+} | null>(null);
+
+function getImageSrc(src: ImageProps['src']): string {
+  if (typeof src === 'string') return src;
+
+  if (typeof src === 'object') {
+
+    if ('default' in src) return (src as { default: { src: string } }).default.src;
+    return src.src;
+  }
+
+  return '';
+}
+
+export function ImageZoom({ zoomInProps, children, rmiz, caption, ...props }: ImageZoomProps) {
+  const lightbox = use(LightboxContext);
+  const zoomImg = { src: getImageSrc(props.src), sizes: undefined, ...zoomInProps };
+  const image = children ?? (
+    <Image sizes="(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px" {...props} />
+  );
+
+  if (lightbox) {
+    return (
+      <span
+        role="button"
+        tabIndex={0}
+        aria-haspopup="dialog"
+        ref={(element) => {
+          if (!element) return;
+          return lightbox.register({
+            element,
+            image: { alt: props.alt, ...zoomImg },
+            caption: caption ?? props.title,
+          });
+        }}
+        onClick={(e) => {
+          if (e.target !== e.currentTarget) lightbox.open(e.currentTarget);
+        }}
+        onKeyDown={(e) => {
+          if (e.key !== 'Enter' && e.key !== ' ') return;
+          e.preventDefault();
+          lightbox.open(e.currentTarget);
+        }}
+        className="block outline-none [&_img]:cursor-zoom-in [&:focus-visible_img]:ring-2 [&:focus-visible_img]:ring-ring"
+      >
+        {image}
+      </span>
+    );
+  }
+
+  return (
+    <Zoom zoomMargin={20} wrapElement="span" {...rmiz} zoomImg={zoomImg}>
+      {image}
+    </Zoom>
+  );
+}
+
+export function Lightbox({ children }: { children: ReactNode }) {
+  const t = useTranslations();
+  const [slides, setSlides] = useState<Slide[] | null>(null);
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const [context] = useState(() => {
+    const items = new Set<Item>();
+
+    return {
+      register(item: Item) {
+        items.add(item);
+        return () => void items.delete(item);
+      },
+      open(element: HTMLElement) {
+        const list: Slide[] = [];
+        for (const item of items) {
+          if (!item.element.checkVisibility()) continue;
+          const img = item.element.querySelector('img');
+          list.push({ ...item, style: img ? getSlideStyle(img) : undefined });
+        }
+        list.sort((a, b) =>
+          a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,
+        );
+        const index = list.findIndex((slide) => slide.element === element);
+
+        transition(getImage(element), () => {
+          flushSync(() => setSlides(list));
+          const slide = scrollerRef.current!.children[index];
+          slide.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'instant' });
+          return slide.querySelector('img')!;
+        });
+      },
+    };
+  });
+
+  function close() {
+    const scroller = scrollerRef.current;
+    if (!scroller || !slides) return;
+    const index = getIndex(scroller);
+    const { element } = slides[index];
+
+    transition(scroller.children[index].querySelector('img')!, () => {
+      flushSync(() => setSlides(null));
+      element.focus({ preventScroll: true });
+      const image = getImage(element);
+      image.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+      return image;
+    });
+  }
+
+  function navigate(step: number) {
+    const scroller = scrollerRef.current!;
+    scroller.children[getIndex(scroller) + step]?.scrollIntoView({
+      block: 'nearest',
+      inline: 'start',
+      behavior: 'smooth',
+    });
+  }
+
+  return (
+    <LightboxContext value={context}>
+      {children}
+      {slides &&
+        createPortal(
+          <dialog
+            ref={initDialog}
+            tabIndex={-1}
+            aria-label={t('Image Viewer', { note: 'ui.image_viewer' })}
+            onCancel={(e) => {
+              e.preventDefault();
+              close();
+            }}
+            onClose={() => setSlides(null)}
+            onKeyDown={(e) => {
+              if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+              e.preventDefault();
+              const rtl = getComputedStyle(e.currentTarget).direction === 'rtl';
+              navigate((e.key === 'ArrowRight') !== rtl ? 1 : -1);
+            }}
+            className="m-0 size-full max-h-none max-w-none overflow-hidden border-none bg-background p-0 text-foreground outline-none"
+          >
+            <button
+              type="button"
+              aria-label={t('Close', { note: 'ui.close' })}
+              onClick={close}
+              className={cn(
+                buttonVariants({
+                  variant: 'ghost',
+                  size: 'icon-sm',
+                  className: 'absolute top-3.25 inset-e-2.5',
+                }),
+              )}
+            >
+              <X />
+            </button>
+            <div
+              ref={scrollerRef}
+              onClick={(e) => {
+                if (!(e.target as Element).closest('figcaption')) close();
+              }}
+              className="flex size-full snap-x snap-mandatory overflow-x-auto overscroll-x-contain [scrollbar-width:none]"
+            >
+              {slides.map((slide, i) => (
+                <figure
+                  key={i}
+                  className="flex w-full shrink-0 snap-start snap-always flex-col items-center pb-6"
+                >
+                  <p className="flex h-14 w-full items-center px-4 text-sm text-muted-foreground tabular-nums">
+                    {slides.length > 1 && `${i + 1} / ${slides.length}`}
+                  </p>
+                  <div className="flex min-h-0 w-full flex-1 items-center justify-center px-4 [container-type:size] md:px-16">
+                    <img
+                      loading="lazy"
+                      {...slide.image}
+                      style={slide.style}
+                      className={cn('max-h-full cursor-zoom-out bg-cover', slide.image.className)}
+                    />
+                  </div>
+                  {slide.caption && (
+                    <figcaption className="prose prose-sm mt-4 px-4 text-center text-muted-foreground md:px-16">
+                      {slide.caption}
+                    </figcaption>
+                  )}
+                </figure>
+              ))}
+            </div>
+            {slides.length > 1 && (
+              <>
+                <button
+                  type="button"
+                  aria-label={t('Previous Image', { note: 'ui.prev_image' })}
+                  onClick={() => navigate(-1)}
+                  className={cn(
+                    buttonVariants({
+                      variant: 'ghost',
+                      size: 'icon',
+                      className: 'absolute top-1/2 inset-s-2.5 -translate-y-1/2 max-md:hidden',
+                    }),
+                  )}
+                >
+                  <ChevronLeft className="rtl:-scale-x-100" />
+                </button>
+                <button
+                  type="button"
+                  aria-label={t('Next Image', { note: 'ui.next_image' })}
+                  onClick={() => navigate(1)}
+                  className={cn(
+                    buttonVariants({
+                      variant: 'ghost',
+                      size: 'icon',
+                      className: 'absolute top-1/2 inset-e-2.5 -translate-y-1/2 max-md:hidden',
+                    }),
+                  )}
+                >
+                  <ChevronRight className="rtl:-scale-x-100" />
+                </button>
+              </>
+            )}
+          </dialog>,
+          document.body,
+        )}
+    </LightboxContext>
+  );
+}
+
+function initDialog(element: HTMLDialogElement) {
+
+  if (!element.open) element.showModal();
+  element.focus();
+  const { style } = document.documentElement;
+  const overflow = style.overflow;
+  style.overflow = 'hidden';
+  return () => {
+    style.overflow = overflow;
+  };
+}
+
+function getIndex(scroller: HTMLElement) {
+  return Math.round(Math.abs(scroller.scrollLeft) / scroller.clientWidth);
+}
+
+function getImage(element: HTMLElement): HTMLElement {
+  return element.querySelector('img') ?? element;
+}
+
+function getSlideStyle(img: HTMLImageElement): CSSProperties {
+  const ratio = (img.naturalWidth || img.width) / (img.naturalHeight || img.height);
+
+  return {
+    width: ratio ? `min(100cqw, ${ratio} * 100cqh)` : undefined,
+    aspectRatio: ratio ? `auto ${ratio}` : undefined,
+    backgroundImage: img.currentSrc ? `url(${JSON.stringify(img.currentSrc)})` : undefined,
+  };
+}
+
+function transition(from: HTMLElement, update: () => HTMLElement) {
+  if (
+    !('startViewTransition' in document) ||
+    matchMedia('(prefers-reduced-motion: reduce)').matches
+  ) {
+    update();
+    return;
+  }
+
+  let to: HTMLElement | undefined;
+  from.style.viewTransitionName = 'lightbox';
+  document
+    .startViewTransition(() => {
+      from.style.viewTransitionName = '';
+      to = update();
+      to.style.viewTransitionName = 'lightbox';
+    })
+    .finished.finally(() => {
+      if (to) to.style.viewTransitionName = '';
+    });
+}
+

package/src/components/mdx/math.tsx

@@ -0,0 +1,30 @@
+import katex from 'katex';
+import { useMemo } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function Math({
+  children,
+  block = false,
+  className,
+}: {
+  children?: string;
+  block?: boolean;
+  className?: string;
+}) {
+  const html = useMemo(
+    () =>
+      katex.renderToString(children ?? '', {
+        displayMode: block,
+        throwOnError: false,
+      }),
+    [children, block],
+  );
+  const Tag = block ? 'div' : 'span';
+  return (
+    <Tag
+      className={cn(block && 'my-4 overflow-x-auto text-center', className)}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+

package/src/components/mdx/mermaid.tsx

@@ -0,0 +1,23 @@
+import { CodeBlock, Pre } from '@terrafirmagreg-team/ui/components/mdx/codeblock';
+import { renderMermaidChart } from '@terrafirmagreg-team/ui/lib/mdx/mermaid';
+
+export function Mermaid({ chart }: { chart: string }) {
+  const svg = renderMermaidChart(chart);
+
+  if (svg === null) {
+    return (
+      <CodeBlock title="Mermaid">
+        <Pre>
+          {chart.split('\n').map((line, i) => (
+            <span key={i} className="line">
+              {line}
+            </span>
+          ))}
+        </Pre>
+      </CodeBlock>
+    );
+  }
+
+  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
+}
+

package/src/components/mdx/multiblock.tsx

@@ -0,0 +1,19 @@
+export function Multiblock({
+  id,
+  children,
+}: {
+  id?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="not-prose my-4 rounded-xl border border-dashed border-border bg-secondary/40 p-4">
+      <div className="text-xs uppercase tracking-wide text-muted-foreground mb-2">
+        Multiblock{id ? ` · ${id}` : ''}
+      </div>
+      <div className="text-sm text-muted-foreground [&_pre]:overflow-x-auto [&_code]:font-mono">
+        {children ?? 'Multiblock pattern will render here.'}
+      </div>
+    </div>
+  );
+}
+

package/src/components/mdx/preview.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { ReactNode } from 'react';
+
+function Pane({
+  kind,
+  label,
+  children,
+  className,
+}: {
+  kind: 'input' | 'output';
+  label?: string;
+  children?: ReactNode;
+  className?: string;
+}) {
+  const t = useTranslations();
+  const text =
+    label ?? (kind === 'input' ? t('Input', { note: 'ui.input' }) : t('Output', { note: 'ui.output' }));
+
+  return (
+    <div className={cn('min-w-0', className)}>
+      <div className="mb-3 flex items-center gap-2.5">
+        <span
+          className={cn(
+            'inline-flex shrink-0 items-center rounded-md border px-2 py-0.5 font-mono text-2xs font-semibold uppercase tracking-wider',
+            kind === 'input'
+              ? 'border-border bg-secondary text-muted-foreground'
+              : 'border-primary/30 bg-primary/10 text-primary',
+          )}
+        >
+          {text}
+        </span>
+        <span className="h-px min-w-4 flex-1 bg-border" aria-hidden />
+      </div>
+      <div
+        className={cn(
+          kind === 'input' &&
+            '[&_.codeblock]:my-0 [&_figure]:my-0 [&_pre]:my-0',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function Preview({
+  children,
+  className,
+}: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        'dev-doc-preview my-6 space-y-5 rounded-lg border border-dashed border-border bg-transparent p-4',
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}
+
+function Input({
+  children,
+  label,
+  className,
+}: {
+  children?: ReactNode;
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <Pane kind="input" label={label} className={className}>
+      {children}
+    </Pane>
+  );
+}
+
+function Output({
+  children,
+  label,
+  className,
+}: {
+  children?: ReactNode;
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <Pane kind="output" label={label} className={className}>
+      {children}
+    </Pane>
+  );
+}
+
+export { Preview, Input, Output };
+

package/src/components/mdx/steps.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export function Steps({ children }: { children: ReactNode }) {
+  return <div className="fd-steps">{children}</div>;
+}
+
+export function Step({ children }: { children: ReactNode }) {
+  return <div className="fd-step">{children}</div>;
+}
+

package/src/components/mdx/table.tsx

@@ -0,0 +1,14 @@
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { ComponentProps } from 'react';
+
+export function Table(props: ComponentProps<'table'>) {
+  return (
+    <div className="relative overflow-auto prose-no-margin my-6" tabIndex={0}>
+      <table
+        {...props}
+        className={cn('w-full', props.className)}
+      />
+    </div>
+  );
+}
+