@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/blocks/media/slideshow.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useRef, useState, type ReactNode } from 'react';
+import { Play, Timer } from 'lucide-react';
+import {
+  ViewerToolbar,
+  ViewerControls,
+} from '@terrafirmagreg-team/ui/components/blocks/viewer/controls';
+import { MediaImage } from '@terrafirmagreg-team/ui/components/blocks/media/image';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useAsyncEffect } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { useCycleIndex } from '@terrafirmagreg-team/ui/hooks/use-cycle-index';
+import {
+  AUTOPLAY_SPEED_MAX,
+  AUTOPLAY_SPEED_MIN,
+  useAutoplay,
+  useAutoplaySpeed,
+} from '@terrafirmagreg-team/ui/hooks/viewer/use-viewer-prefs';
+import { trimTransparent } from '@terrafirmagreg-team/ui/lib/media/trim-transparent';
+import { nearbyIndexes } from '@terrafirmagreg-team/ui/lib/media/nearby-indexes';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function Slideshow({
+  images,
+  alt,
+  border,
+  scale,
+  offset,
+  rotate,
+  caption,
+}: {
+  images: Array<{ id: string; url: string | null }>;
+  alt: string;
+  border: boolean;
+  scale?: number;
+  offset?: number;
+  rotate?: boolean;
+  caption?: ReactNode;
+}) {
+  const t = useTranslations();
+  const [autoplay, setAutoplay] = useAutoplay();
+  const [autoplaySpeed, setAutoplaySpeed] = useAutoplaySpeed();
+  const [hovered, setHovered] = useState(false);
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const [selected, setSelected] = useCycleIndex(images.length, {
+    enabled: autoplay,
+    paused: hovered,
+    intervalMs: autoplaySpeed * 1000,
+  });
+  const [trimmed, setTrimmed] = useState<Record<string, string>>({});
+  const urls = images.map((entry) => entry.url).join('\0');
+  const nearby = nearbyIndexes(selected, images.length);
+  const multi = images.length > 1;
+
+  useAsyncEffect((isCancelled) => {
+    const list = urls.split('\0');
+    for (const index of nearbyIndexes(selected, list.length)) {
+      const src = list[index];
+      if (!src) continue;
+      void trimTransparent(src).then((next) => {
+        if (isCancelled()) return;
+        setTrimmed((current) =>
+          current[src] === next ? current : { ...current, [src]: next },
+        );
+      });
+    }
+  }, [selected, urls]);
+
+  const transform = [
+    typeof offset === 'number' ? `translateY(${offset}px)` : '',
+    rotate ? 'rotate(90deg)' : '',
+    `scale(${typeof scale === 'number' ? scale : 1})`,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <figure
+      className="not-prose my-3 flex flex-col gap-2"
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
+      onFocus={() => setHovered(true)}
+      onBlur={() => setHovered(false)}
+    >
+      <div
+        ref={surfaceRef}
+        className={cn(
+          'relative mx-auto size-96 max-w-full overflow-hidden rounded-xl',
+        )}
+      >
+        {images.length === 0 ? (
+          <MediaImage
+            src={null}
+            alt={alt}
+            className="absolute inset-0 h-full w-full"
+          />
+        ) : null}
+        {images.map((entry, index) => {
+          if (!nearby.includes(index)) return null;
+          const current = index === selected;
+          const src = entry.url ? (trimmed[entry.url] ?? entry.url) : null;
+          return (
+            <span
+              key={entry.id}
+              aria-hidden={!current || undefined}
+              className={cn(
+                'absolute inset-0 transition-opacity duration-500 ease-in-out',
+                current ? 'opacity-100' : 'pointer-events-none opacity-0',
+              )}
+            >
+              <MediaImage
+                src={src}
+                alt={current ? alt : ''}
+                className={cn(
+                  'h-full w-full object-contain',
+                  border && 'rounded-md',
+                )}
+                style={{
+                  transform,
+                  transformOrigin: 'center',
+                }}
+                pixelated
+              />
+            </span>
+          );
+        })}
+        <ViewerToolbar>
+          <ViewerControls
+            pager={
+              multi
+                ? {
+                    index: selected,
+                    count: images.length,
+                    onSelect: setSelected,
+                  }
+                : undefined
+            }
+            expand={{ target: surfaceRef }}
+            settings={{
+              label: t('Viewer settings', { note: 'ui.viewer.settings' }),
+              sliders: multi
+                ? [
+                    {
+                      icon: <Timer />,
+                      label: t('Autoplay speed', { note: 'ui.viewer.autoplay_speed' }),
+                      min: AUTOPLAY_SPEED_MIN,
+                      max: AUTOPLAY_SPEED_MAX,
+                      step: 0.5,
+                      disabled: !autoplay,
+                      format: (value) => `${value.toFixed(1)}s`,
+                      value: autoplaySpeed,
+                      onChange: setAutoplaySpeed,
+                    },
+                  ]
+                : [],
+              toggles: multi
+                ? [
+                    {
+                      icon: <Play />,
+                      label: t('Autoplay', { note: 'ui.viewer.autoplay' }),
+                      checked: autoplay,
+                      onChange: setAutoplay,
+                    },
+                  ]
+                : [],
+            }}
+          />
+        </ViewerToolbar>
+      </div>
+      {caption ? (
+        <figcaption className="mx-auto max-w-prose text-center text-sm text-muted-foreground">
+          {caption}
+        </figcaption>
+      ) : null}
+    </figure>
+  );
+}
+

package/src/components/blocks/nav/breadcrumb.tsx

@@ -0,0 +1,51 @@
+'use client';
+import { Fragment } from 'react';
+import {
+  Breadcrumb as BreadcrumbRoot,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@terrafirmagreg-team/ui/components/ui/breadcrumb';
+import { LinkPreview } from '@terrafirmagreg-team/ui/components/blocks/link/link-preview';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { PagePreviewData } from '@terrafirmagreg-team/ui/types/preview';
+
+export function Breadcrumb({
+  items,
+  previews,
+  className,
+}: {
+  items: Array<{ name: string; url?: string }>;
+  previews?: Record<string, PagePreviewData>;
+  className?: string;
+}) {
+  if (!items.length) return null;
+  return (
+    <BreadcrumbRoot className={cn('min-w-0', className)}>
+      <BreadcrumbList>
+        {items.map((item, index) => (
+          <Fragment key={`${item.name}:${index}`}>
+            {index > 0 && <BreadcrumbSeparator />}
+            <BreadcrumbItem>
+              {item.url ? (
+                <LinkPreview
+                  href={item.url}
+                  preview={item.url ? previews?.[item.url] : undefined}
+                  className="truncate transition-opacity hover:opacity-80"
+                >
+                  {item.name}
+                </LinkPreview>
+              ) : (
+                <BreadcrumbPage className="truncate font-medium">
+                  {item.name}
+                </BreadcrumbPage>
+              )}
+            </BreadcrumbItem>
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </BreadcrumbRoot>
+  );
+}
+

package/src/components/blocks/nav/copy-menu.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/context-menu';
+
+export function CopyMenu({
+  items,
+  extra,
+  children,
+}: {
+  items: { label: ReactNode; value: string; icon?: ReactNode }[];
+  extra?: ReactNode;
+  children: ReactNode;
+}) {
+  const copy = (value: string) => () => {
+    void navigator.clipboard.writeText(value);
+  };
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="contents">{children}</ContextMenuTrigger>
+      <ContextMenuContent>
+        {items.map((item, index) => (
+          <ContextMenuItem key={index} onClick={copy(item.value)}>
+            {item.icon}
+            {item.label}
+          </ContextMenuItem>
+        ))}
+        {extra}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/components/blocks/nav/link.tsx

@@ -0,0 +1,86 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import type { ComponentProps, ReactNode } from 'react';
+import { useUiComponents } from '@terrafirmagreg-team/ui/provider';
+import { isActive, safeURL } from '@terrafirmagreg-team/ui/lib/utils/urls';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import type { LinkItemType, LinkProps } from '@terrafirmagreg-team/ui/types/nav';
+
+export function Link({
+  ref,
+  href = '#',
+  external = !!(href.match(/^\w+:/) || href.startsWith('//')),
+  prefetch,
+  children,
+  ...props
+}: LinkProps) {
+  const { Link: UiLink } = useUiComponents();
+  if (external)
+    return (
+      <a ref={ref} href={href} rel="noreferrer noopener" target="_blank" {...props}>
+        {children}
+      </a>
+    );
+  return (
+    <UiLink ref={ref} href={href} prefetch={prefetch} {...props}>
+      {children}
+    </UiLink>
+  );
+}
+
+export default Link;
+
+export function SafeLink({
+  href,
+  children,
+  className,
+  title,
+}: {
+  href?: string;
+  children: ReactNode;
+  className?: string;
+  title?: string;
+}) {
+  const safe = safeURL(href);
+  const node = safe ? (
+    <Link href={safe} className={className}>
+      {children}
+    </Link>
+  ) : (
+    <span className={className}>{children}</span>
+  );
+  return <Hint label={title}>{node}</Hint>;
+}
+
+export function isLinkItemActive(
+  link: LinkItemType,
+  pathname: string,
+): boolean {
+  if (link.type === 'custom' || !link.url) return false;
+  if (link.active === 'none') return false;
+  return isActive(link.url, pathname, link.active === 'nested-url');
+}
+
+export function LinkItem({
+  ref,
+  item,
+  ...props
+}: Omit<ComponentProps<'a'>, 'href'> & {
+  item: Extract<LinkItemType, { url: string }>;
+}) {
+  const pathname = usePathname();
+  const active = isLinkItemActive(item, pathname);
+
+  return (
+    <Link
+      ref={ref}
+      href={item.url}
+      external={item.external}
+      {...props}
+      data-active={active}
+    >
+      {props.children}
+    </Link>
+  );
+}
+

package/src/components/blocks/nav/site-menu.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Menu } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/dropdown-menu';
+
+export type SiteMenuItem = {
+  label: string;
+  icon?: ReactNode;
+} & ({ url: string; external?: boolean } | { onClick: () => void });
+
+export function SiteMenu({
+  label,
+  items,
+}: {
+  label?: string;
+  items: readonly (SiteMenuItem | 'separator' | null | undefined | false)[];
+}) {
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger
+        aria-label={label}
+        className={cn(
+          buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
+          'size-8 text-muted-foreground',
+        )}
+      >
+        <Menu />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="bottom" align="end" className="min-w-44">
+        {items.map((item, i) => {
+          if (item === 'separator') return <DropdownMenuSeparator key={i} />;
+          if (!item) return null;
+          const inner = (
+            <>
+              {item.icon != null && (
+                <span aria-hidden="true" className="contents [&_svg]:size-4">
+                  {item.icon}
+                </span>
+              )}
+              {item.label}
+            </>
+          );
+          return 'onClick' in item ? (
+            <DropdownMenuItem key={i} closeOnClick className="gap-2" onClick={item.onClick}>
+              {inner}
+            </DropdownMenuItem>
+          ) : (
+            <DropdownMenuItem
+              key={i}
+              closeOnClick
+              className="gap-2"
+              render={
+                <a
+                  href={item.url}
+                  {...(item.external
+                    ? { target: '_blank', rel: 'noopener noreferrer' }
+                    : {})}
+                />
+              }
+            >
+              {inner}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+

package/src/components/blocks/nav/site-title.tsx

@@ -0,0 +1,61 @@
+'use client';
+import type { ComponentProps, ReactNode } from 'react';
+import { useUiComponents } from '@terrafirmagreg-team/ui/provider';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export type SiteTitleProps = {
+  icon: string;
+  name: ReactNode;
+  subtitle?: ReactNode;
+  href?: string;
+} & Omit<ComponentProps<'a'>, 'href'>;
+
+export function SiteTitle({
+  icon,
+  name,
+  subtitle,
+  href,
+  className,
+  ...props
+}: SiteTitleProps) {
+  const { Link } = useUiComponents();
+  const cls = cn(
+    'inline-flex min-w-0 items-center gap-2.5 text-nav-title font-medium',
+    className,
+  );
+  const sub = subtitle ? (
+    <span
+      className="truncate text-2xs font-normal text-muted-foreground"
+      suppressHydrationWarning
+    >
+      {subtitle}
+    </span>
+  ) : null;
+  if (!href) {
+    return (
+      <span className={cls}>
+        {/* eslint-disable-next-line @next/next/no-img-element -- site icon */}
+        <img src={icon} alt="" className="size-5 shrink-0" />
+        <span className="flex min-w-0 flex-col leading-tight">
+          <span className="truncate">{name}</span>
+          {sub}
+        </span>
+      </span>
+    );
+  }
+  return (
+    <span className={cls}>
+      <Link href={href} className="shrink-0">
+        {/* eslint-disable-next-line @next/next/no-img-element -- site icon */}
+        <img src={icon} alt="" className="size-5 shrink-0" />
+      </Link>
+      <span className="flex min-w-0 flex-col leading-tight">
+        <Link href={href} className="truncate" {...props}>
+          {name}
+        </Link>
+        {sub}
+      </span>
+    </span>
+  );
+}
+

package/src/components/blocks/nav/switcher.tsx

@@ -0,0 +1,206 @@
+'use client';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/dropdown-menu';
+import { CheckIcon, ChevronsUpDown } from 'lucide-react';
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  useMemo,
+  useState,
+} from 'react';
+import { useUiComponents } from '@terrafirmagreg-team/ui/provider';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useCloseOnScroll } from '@terrafirmagreg-team/ui/hooks/use-close-on-scroll';
+import { useMarquee } from '@terrafirmagreg-team/ui/hooks/use-marquee';
+import type { SwitcherOption, SwitcherProps } from '@terrafirmagreg-team/ui/types/nav';
+
+function SwitcherIcon({
+  icon,
+  title,
+  className,
+}: {
+  icon?: ReactNode;
+  title?: ReactNode;
+  className?: string;
+}) {
+  const letter = typeof title === 'string' ? title.charAt(0) : null;
+  return (
+    <span
+      className={cn(
+        'flex items-center justify-center shrink-0 size-4 font-medium',
+        !icon && letter != null &&
+          'rounded bg-muted text-2xs text-muted-foreground',
+        className,
+      )}
+    >
+      {icon ?? letter}
+    </span>
+  );
+}
+
+function SwitcherItemContent({
+  item,
+  selected,
+}: {
+  item: SwitcherOption;
+  selected?: string;
+}) {
+  return (
+    <>
+      <SwitcherIcon icon={item.icon} title={item.title} />
+      <span className="flex flex-col flex-1 min-w-0">
+        <Marquee className="font-medium">{item.title}</Marquee>
+        {item.description != null && (
+          <Marquee className="text-xs text-muted-foreground">
+            {item.description}
+          </Marquee>
+        )}
+      </span>
+      {item.value === selected && (
+        <CheckIcon className="text-primary" />
+      )}
+    </>
+  );
+}
+
+const itemClassName = 'min-h-9 gap-3 px-2.5 py-2';
+
+export function Switcher({
+  options,
+  selected,
+  onSelect,
+  placeholder,
+  icon,
+  header,
+  side = 'bottom',
+  disabled,
+  className,
+  ...props
+}: SwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const { Link } = useUiComponents();
+  useCloseOnScroll(open, () => setOpen(false));
+
+  const current = useMemo(
+    () => options.find((option) => option.value === selected),
+    [options, selected],
+  );
+
+  const items = useMemo(
+    () =>
+      options.map((item) =>
+        item.url ? (
+          <DropdownMenuItem
+            key={item.value}
+            closeOnClick
+            disabled={item.disabled}
+            render={<Link href={item.url} />}
+            className={itemClassName}
+          >
+            <SwitcherItemContent item={item} selected={selected} />
+          </DropdownMenuItem>
+        ) : (
+          <DropdownMenuItem
+            key={item.value}
+            closeOnClick
+            disabled={item.disabled}
+            onClick={() => onSelect?.(item.value)}
+            className={itemClassName}
+          >
+            <SwitcherItemContent item={item} selected={selected} />
+          </DropdownMenuItem>
+        ),
+      ),
+    [options, selected, onSelect, Link],
+  );
+
+  const triggerIcon = icon ?? current?.icon;
+  const triggerClassName = cn(
+    'flex w-full h-10 items-center gap-3 rounded-xl border bg-secondary/50 ps-[calc(--spacing(2.5)_-_1px)] pe-2.5 text-start font-medium outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0',
+    className,
+  );
+
+  if (disabled) {
+    return (
+      <button
+        type="button"
+        disabled
+        aria-disabled="true"
+        className={cn(triggerClassName, 'cursor-not-allowed opacity-50')}
+        {...props}
+      >
+        <SwitcherIcon icon={triggerIcon} title={current?.title ?? placeholder} />
+        <span className="flex-1 truncate text-muted-foreground">
+          {current?.title ?? placeholder}
+        </span>
+        <ChevronsUpDown className="!size-3.5 text-muted-foreground" />
+      </button>
+    );
+  }
+
+  if (options.length === 0) return null;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+      <DropdownMenuTrigger
+        className={cn(
+          triggerClassName,
+          'hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring data-popup-open:bg-accent',
+        )}
+        {...props}
+      >
+        <SwitcherIcon icon={triggerIcon} title={current?.title} />
+        <Marquee
+          className={cn('flex-1', !current && 'text-muted-foreground')}
+        >
+          {current ? current.title : placeholder}
+        </Marquee>
+        <ChevronsUpDown className="!size-3.5 text-muted-foreground" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        side={side}
+        align="start"
+        sideOffset={8}
+        alignOffset={-4}
+        className="w-[calc(var(--anchor-width)+--spacing(2))] rounded-2xl"
+      >
+        {header != null ? (
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>{header}</DropdownMenuLabel>
+            {items}
+          </DropdownMenuGroup>
+        ) : (
+          items
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export type { SwitcherOption, SwitcherProps } from '@terrafirmagreg-team/ui/types/nav';
+
+function Marquee({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) {
+  const ref = useMarquee<HTMLSpanElement>();
+  return (
+    <span
+      ref={ref}
+      className={cn('block min-w-0 overflow-hidden', className)}
+      {...props}
+    >
+      <span className="marquee-inner block whitespace-nowrap">
+        {children}
+      </span>
+    </span>
+  );
+}
+