@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/blocks/page/empty-state.tsx

@@ -0,0 +1,32 @@
+import { FileQuestion } from 'lucide-react';
+import type { ReactNode } from 'react';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyMedia,
+} from '@terrafirmagreg-team/ui/components/ui/empty';
+import { Spinner } from '@terrafirmagreg-team/ui/components/ui/spinner';
+
+export function EmptyState({
+  variant = 'empty',
+  children,
+}: {
+  variant?: 'empty' | 'missing' | 'loading';
+  children?: ReactNode;
+}) {
+  return (
+    <Empty className="gap-1 rounded-none border-none p-0 text-left">
+      {variant === 'missing' ? (
+        <EmptyMedia variant="icon" className="mb-0">
+          <FileQuestion />
+        </EmptyMedia>
+      ) : variant === 'loading' ? (
+        <EmptyMedia variant="icon" className="mb-0">
+          <Spinner />
+        </EmptyMedia>
+      ) : null}
+      <EmptyDescription className="text-left">{children}</EmptyDescription>
+    </Empty>
+  );
+}
+

package/src/components/blocks/page/heading.tsx

@@ -0,0 +1,54 @@
+'use client';
+import { CopyCheckIcon, LinkIcon } from 'lucide-react';
+import type { ComponentProps } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export function Heading({
+  as,
+  ...props
+}: ComponentProps<'h1'> & { as?: HeadingTag }) {
+  const As = as ?? 'h1';
+  const t = useTranslations();
+  const { checked: isChecked, onClick: onCopy } = useCopyButton(() => {
+    if (!props.id) return;
+    const url = new URL(window.location.href);
+    url.hash = props.id;
+    return navigator.clipboard.writeText(url.href);
+  });
+
+  if (!props.id) return <As {...props} />;
+  return (
+    <As
+      {...props}
+      className={cn(
+        'group/heading flex scroll-m-28 flex-row items-center gap-1',
+        props.className,
+      )}
+    >
+      <a data-card href={`#${props.id}`}>
+        {props.children}
+      </a>
+      <button
+        aria-live="polite"
+        className={cn(
+          buttonVariants({ variant: 'ghost', size: 'icon-xs' }),
+          'not-prose shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/heading:opacity-100',
+        )}
+        onClick={onCopy}
+      >
+        {isChecked ? <CopyCheckIcon /> : <LinkIcon />}
+        <span className="sr-only">
+          {isChecked
+            ? t('Copied Anchor Link', { note: 'ui.copied_anchor' })
+            : t('Copy Anchor Link', { note: 'ui.copy_anchor' })}
+        </span>
+      </button>
+    </As>
+  );
+}
+

package/src/components/blocks/page/pager.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useRef, useState, type MouseEvent, type ReactNode } from 'react';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { SPRITE_CHIP_CLASS } from '@terrafirmagreg-team/ui/components/blocks/sprite';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+} from '@terrafirmagreg-team/ui/components/ui/pagination';
+import { Progress } from '@terrafirmagreg-team/ui/components/ui/progress';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
+import { useSwipe } from '@terrafirmagreg-team/ui/hooks/use-swipe';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function PagerArrow({
+  dir,
+  disabled,
+  onClick,
+  label,
+  variant = 'secondary',
+  size = 'icon-lg',
+  overlay,
+  className,
+}: {
+  dir: -1 | 1;
+  disabled?: boolean;
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+  label?: string;
+  variant?: 'outline' | 'secondary' | 'ghost';
+  size?: 'icon-xs' | 'icon-sm' | 'icon-lg';
+  overlay?: boolean;
+  className?: string;
+}) {
+  const t = useTranslations();
+  return (
+    <IconButton
+      label={
+        label ??
+        (dir < 0
+          ? t('Previous Page', { note: 'ui.prev_page' })
+          : t('Next Page', { note: 'ui.next_page' }))
+      }
+      tooltip={false}
+      variant={variant}
+      size={size}
+      overlay={overlay}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        'shrink-0',
+        variant === 'secondary' &&
+          'border-foreground/10 hover:bg-background dark:hover:bg-accent',
+        className,
+      )}
+    >
+      {dir < 0 ? (
+        <ChevronLeft className="size-[58%]" />
+      ) : (
+        <ChevronRight className="size-[58%]" />
+      )}
+    </IconButton>
+  );
+}
+
+export function Pager({
+  page,
+  pages,
+  to,
+  total,
+  onPage,
+  label,
+  leading,
+  className,
+}: {
+  page: number;
+  pages: number;
+  to: number;
+  total: number;
+  onPage: (page: number) => void;
+  label: string;
+  leading?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Pagination className={cn('mx-0 w-full', className)}>
+      <PaginationContent className="w-full justify-between gap-2">
+        <PaginationItem className="flex items-center gap-1">
+          <PagerArrow
+            dir={-1}
+            disabled={page <= 0}
+            onClick={(event) => onPage(event.shiftKey ? 0 : page - 1)}
+          />
+          {leading}
+        </PaginationItem>
+        <PaginationItem className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+          <Progress
+            value={to}
+            max={Math.max(total, 1)}
+            className="w-14 shrink-0 gap-0 sm:w-20"
+          />
+          <span className="shrink-0 tabular-nums">
+            {label
+              .replaceAll('{page}', String(page + 1))
+              .replaceAll('{pages}', String(pages))}
+          </span>
+        </PaginationItem>
+        <PaginationItem>
+          <PagerArrow
+            dir={1}
+            disabled={page + 1 >= pages}
+            onClick={(event) => onPage(event.shiftKey ? pages - 1 : page + 1)}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}
+
+type IconPagerOption<T extends string> = {
+  id: T;
+  icon: ReactNode;
+  help?: string;
+};
+
+const PAGER_CELL = 40;
+const PAGER_GAP = 4;
+const PAGER_ARROW = 36;
+
+export function IconPager<T extends string>({
+  value,
+  options,
+  onChange,
+  className,
+}: {
+  value?: T;
+  options: IconPagerOption<T>[];
+  onChange: (id: T) => void;
+  className?: string;
+}) {
+  const stripRef = useRef<HTMLDivElement | null>(null);
+  const { w } = useElementSize(stripRef);
+  const per = Math.max(
+    1,
+    Math.floor((w - 2 * (PAGER_ARROW + PAGER_GAP) + PAGER_GAP) / PAGER_CELL),
+  );
+  const pages = Math.max(1, Math.ceil(options.length / per));
+  const valueIndex = options.findIndex((option) => option.id === value);
+  const autoPage = Math.max(0, Math.floor(valueIndex / per));
+  const [manual, setManual] = useState<number | null>(null);
+  const [lastValue, setLastValue] = useState(value);
+  if (lastValue !== value) {
+    setLastValue(value);
+    setManual(null);
+  }
+  const page = Math.min(manual ?? autoPage, pages - 1);
+  const shown = options.slice(page * per, (page + 1) * per);
+
+  const go = (dir: number) => setManual((page + dir + pages) % pages);
+  const swipe = useSwipe((dir) => {
+    const next = valueIndex + dir;
+    if (next >= 0 && next < options.length) {
+      onChange(options[next]!.id);
+    } else {
+      go(dir);
+    }
+  });
+
+  return (
+    <div
+      ref={stripRef}
+      {...swipe}
+      onWheel={(event) => {
+        if (pages > 1) go(event.deltaY > 0 ? 1 : -1);
+      }}
+      className={cn('flex min-h-9 items-center gap-1', className)}
+    >
+      <PagerArrow dir={-1} disabled={pages <= 1} onClick={() => go(-1)} />
+      <div
+        className={cn(
+          'flex min-w-0 flex-1 items-center justify-center gap-1',
+          w === 0 && 'invisible',
+        )}
+      >
+        {shown.map((option) => (
+          <Tooltip key={option.id}>
+            <TooltipTrigger
+              render={
+                <button
+                  type="button"
+                  onClick={() => onChange(option.id)}
+                  aria-label={option.help ?? option.id}
+                  aria-pressed={option.id === value}
+                  className={cn(
+                    SPRITE_CHIP_CLASS,
+                    'size-9 rounded-sm p-0 text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-primary aria-pressed:bg-accent aria-pressed:text-foreground',
+                  )}
+                />
+              }
+            >
+              {option.icon}
+            </TooltipTrigger>
+            {option.help ? (
+              <TooltipContent>{option.help}</TooltipContent>
+            ) : null}
+          </Tooltip>
+        ))}
+      </div>
+      <PagerArrow dir={1} disabled={pages <= 1} onClick={() => go(1)} />
+    </div>
+  );
+}
+

package/src/components/blocks/readability/fields.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import { CircleHelp } from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/popover';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+} from '@terrafirmagreg-team/ui/components/ui/field';
+import { Slider } from '@terrafirmagreg-team/ui/components/ui/slider';
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@terrafirmagreg-team/ui/components/ui/toggle-group';
+
+export function ReadabilityHelp({
+  title,
+  description,
+  items,
+}: {
+  title: string;
+  description?: string;
+  items?: { icon?: ReactNode; label: string; help: string }[];
+}) {
+  return (
+    <div className="space-y-2">
+      <div className="space-y-1">
+        <p className="font-medium">{title}</p>
+        {description && <FieldDescription className="text-xs">{description}</FieldDescription>}
+      </div>
+      {items?.map((item) => (
+        <div key={item.label} className="space-y-1 rounded-lg bg-muted/60 p-2.5">
+          <p className="flex items-center gap-1.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0">
+            {item.icon}
+            {item.label}
+          </p>
+          <FieldDescription className="text-xs">{item.help}</FieldDescription>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ReadabilityField({
+  label,
+  icon,
+  help,
+  children,
+}: {
+  label: ReactNode;
+  icon?: ReactNode;
+  help?: ReactNode;
+  children: ReactNode;
+}) {
+  const [helpOpen, setHelpOpen] = useState(false);
+  return (
+    <Field className="gap-1.5">
+      <div className="flex items-center gap-1 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0">
+        {icon}
+        <FieldLabel className="flex-1 text-xs text-muted-foreground">{label}</FieldLabel>
+        {help && (
+          <Popover onOpenChange={setHelpOpen}>
+            <PopoverTrigger
+              render={
+                <IconButton
+                  variant="ghost"
+                  size="icon-xs"
+                  tooltip={false}
+                  label={typeof label === 'string' ? label : 'Help'}
+                >
+                  <CircleHelp />
+                </IconButton>
+              }
+            />
+            <PopoverContent className="w-56">{help}</PopoverContent>
+          </Popover>
+        )}
+      </div>
+      <FieldContent
+        className={cn(
+          'rounded-lg outline-2 outline-offset-4 outline-dashed outline-transparent transition-[outline-color] duration-200',
+          helpOpen && 'outline-primary',
+        )}
+      >
+        {children}
+      </FieldContent>
+    </Field>
+  );
+}
+
+export function ReadabilitySlider({
+  label,
+  icon,
+  help,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  format = String,
+  disabled,
+  live,
+}: {
+  label: ReactNode;
+  icon?: ReactNode;
+  help?: ReactNode;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  format?: (value: number) => string;
+  disabled?: boolean;
+  live?: boolean;
+}) {
+  const [draft, setDraft] = useState<{ key: number; value: number }>({ key: value, value });
+  const shown = draft.key === value ? draft.value : value;
+  return (
+    <ReadabilityField label={label} icon={icon} help={help}>
+      <div className="flex items-center gap-3 rounded-lg bg-muted/70 px-3 py-2.5">
+        <Slider
+          min={min}
+          max={max}
+          step={step}
+          value={shown}
+          disabled={disabled}
+          className="flex-1 [&_[data-slot=slider-track]]:bg-muted-foreground/25"
+          onValueChange={(next) => {
+            if (live) onChange(next as number);
+            else setDraft({ key: value, value: next as number });
+          }}
+          onValueCommitted={() => {
+            if (!live && shown !== value) onChange(shown);
+          }}
+        />
+        <span className="w-9 shrink-0 text-end text-xs tabular-nums text-muted-foreground">
+          {format(shown)}
+        </span>
+      </div>
+    </ReadabilityField>
+  );
+}
+
+export function Segment<T extends string>({
+  options,
+  value,
+  onChange,
+  disabled,
+  itemContent,
+  itemLabel,
+  itemHelp,
+  itemClassName,
+}: {
+  options: readonly T[];
+  value: T;
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  itemContent: (id: T) => ReactNode;
+  itemLabel: (id: T) => string;
+  itemHelp: (id: T) => string;
+  itemClassName?: string;
+}) {
+  return (
+    <ToggleGroup
+      value={[value]}
+      onValueChange={(values) => {
+        const next = values.at(-1) as T | undefined;
+        if (next && next !== value) onChange(next);
+      }}
+      disabled={disabled}
+      size="sm"
+      spacing={1}
+      className="w-full rounded-lg bg-muted/70 p-1"
+    >
+      {options.map((id) => (
+        <Hint key={id} label={itemHelp(id)}>
+          <ToggleGroupItem
+            value={id}
+            aria-label={itemLabel(id)}
+            className={cn(
+              'flex-1 rounded-md text-muted-foreground hover:text-foreground aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-sm',
+              itemClassName,
+            )}
+          >
+            {itemContent(id)}
+          </ToggleGroupItem>
+        </Hint>
+      ))}
+    </ToggleGroup>
+  );
+}
+
+export function WidthField({
+  field,
+  icon,
+  value,
+  onChange,
+}: {
+  field: 'page_width' | 'content_width';
+  icon: ReactNode;
+  value: number;
+  onChange: (value: number) => void;
+}) {
+  const t = useTranslations();
+  const w = {
+    page_width: {
+      label: t('Page width', { note: 'ui.readability.page_width' }),
+      help: t('Adjust the maximum width of the page layout to fit different reading needs and screens', { note: 'ui.readability.page_width.help' }),
+      slider: t('Page width slider', { note: 'ui.readability.page_width.slider' }),
+      sliderHelp: t('A ranged slider to choose the maximum width of the page layout', { note: 'ui.readability.page_width.slider.help' }),
+    },
+    content_width: {
+      label: t('Content width', { note: 'ui.readability.content_width' }),
+      help: t('Adjust the maximum width of the text column to fit different reading needs and screens', { note: 'ui.readability.content_width.help' }),
+      slider: t('Content width slider', { note: 'ui.readability.content_width.slider' }),
+      sliderHelp: t('A ranged slider to choose the maximum width of the content column', { note: 'ui.readability.content_width.slider.help' }),
+    },
+  }[field];
+  return (
+    <ReadabilitySlider
+      live
+      label={w.label}
+      icon={icon}
+      help={
+        <ReadabilityHelp
+          title={w.label}
+          description={w.help}
+          items={[{ icon, label: w.slider, help: w.sliderHelp }]}
+        />
+      }
+      value={value}
+      onChange={onChange}
+      min={60}
+      max={100}
+      step={1}
+      format={(v) => `${v}%`}
+    />
+  );
+}
+