@terrafirmagreg-team/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,53 @@
+'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('ui.copied_anchor', )
+            : t('ui.copy_anchor', )}
+        </span>
+      </button>
+    </As>
+  );
+}

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

@@ -0,0 +1,112 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import type { MouseEvent, ReactNode } from 'react';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+} from '@terrafirmagreg-team/ui/components/ui/pagination';
+import { Progress } from '@terrafirmagreg-team/ui/components/ui/progress';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+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 ?? t(dir < 0 ? 'ui.prev_page' : '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>
+  );
+}

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

@@ -0,0 +1,431 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import { useState, type ComponentProps, type ReactNode } from 'react';
+import {
+  AlignStartVertical,
+  CircleHelp,
+  Columns2,
+  Flashlight,
+  FoldHorizontal,
+  Layers,
+  Maximize2,
+  Minimize2,
+  Palette,
+  PanelLeft,
+  Proportions,
+  Settings,
+  UnfoldHorizontal,
+} from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useReadability } from '@terrafirmagreg-team/ui/hooks/readability/provider';
+import { readabilityConfig } from '@terrafirmagreg-team/ui/lib/readability/config';
+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';
+import {
+  readabilityLayouts,
+  spotlightStyles,
+  type ReadabilityLayout,
+  type SpotlightStyle,
+} from '@terrafirmagreg-team/ui/types/readability';
+
+const layoutIcons: Record<ReadabilityLayout, ReactNode> = {
+  full: <Maximize2 />,
+  sidebar: <PanelLeft />,
+  both: <Columns2 />,
+  original: <Minimize2 />,
+};
+
+const styleIcons: Record<SpotlightStyle, ReactNode> = {
+  under: <Layers />,
+  aside: <AlignStartVertical />,
+};
+
+const switches = ['on', 'off'] as const;
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+function WidthField({
+  field,
+  icon,
+  value,
+  onChange,
+}: {
+  field: 'page_width' | 'content_width';
+  icon: ReactNode;
+  value: number;
+  onChange: (value: number) => void;
+}) {
+  const t = useTranslations();
+  return (
+    <ReadabilitySlider
+      live
+      label={t(`ui.readability.${field}`)}
+      icon={icon}
+      help={
+        <ReadabilityHelp
+          title={t(`ui.readability.${field}`)}
+          description={t(`ui.readability.${field}.help`)}
+          items={[
+            {
+              icon,
+              label: t(`ui.readability.${field}.slider`),
+              help: t(`ui.readability.${field}.slider.help`),
+            },
+          ]}
+        />
+      }
+      value={value}
+      onChange={onChange}
+      min={60}
+      max={100}
+      step={1}
+      format={(v) => `${v}%`}
+    />
+  );
+}
+
+export function ReadabilityMenu({
+  anchor,
+}: {
+  anchor?: ComponentProps<typeof PopoverContent>['anchor'];
+}) {
+  const t = useTranslations();
+  const {
+    layout,
+    setLayout,
+    pageWidth,
+    setPageWidth,
+    contentWidth,
+    setContentWidth,
+    spotlight,
+    setSpotlight,
+    spotlightStyle,
+    setSpotlightStyle,
+    coarsePointer,
+    smallScreen,
+  } = useReadability();
+
+  const layoutDisabled = smallScreen;
+  const pathname = usePathname();
+  const spotlightDisabled =
+    coarsePointer || (readabilityConfig().isSpotlightDisabled?.(pathname) ?? false);
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <IconButton
+            variant="ghost"
+            size="icon-sm"
+            tooltip={false}
+            label={t('ui.readability.menu')}
+            className="text-muted-foreground! data-[popup-open]:bg-accent! data-[popup-open]:text-accent-foreground!"
+          >
+            <Settings />
+          </IconButton>
+        }
+      />
+      <PopoverContent
+        anchor={anchor}
+        side="top"
+        align="center"
+        sideOffset={8}
+        className="w-64 space-y-3 p-3"
+      >
+        <ReadabilityField
+          label={t('ui.readability.layout')}
+          icon={<Proportions />}
+          help={
+            <ReadabilityHelp
+              title={t('ui.readability.layout')}
+              description={
+                layoutDisabled
+                  ? t('ui.readability.layout.unavailable')
+                  : t('ui.readability.layout.help')
+              }
+              items={readabilityLayouts.map((id) => ({
+                icon: layoutIcons[id],
+                label: t(`ui.readability.layout.${id}`),
+                help: t(`ui.readability.layout.${id}.help`),
+              }))}
+            />
+          }
+        >
+          <Segment
+            options={readabilityLayouts}
+            value={layout}
+            onChange={setLayout}
+            disabled={layoutDisabled}
+            itemContent={(id) => layoutIcons[id]}
+            itemLabel={(id) => t(`ui.readability.layout.${id}`)}
+            itemHelp={(id) => t(`ui.readability.layout.${id}.help`)}
+          />
+        </ReadabilityField>
+        {(layout === 'sidebar' || layout === 'both') && !smallScreen && (
+          <WidthField
+            field="page_width"
+            icon={<UnfoldHorizontal />}
+            value={pageWidth}
+            onChange={setPageWidth}
+          />
+        )}
+        {layout === 'both' && !smallScreen && (
+          <WidthField
+            field="content_width"
+            icon={<FoldHorizontal />}
+            value={contentWidth}
+            onChange={setContentWidth}
+          />
+        )}
+        <ReadabilityField
+          label={t('ui.readability.spotlight')}
+          icon={<Flashlight />}
+          help={
+            <ReadabilityHelp
+              title={t('ui.readability.spotlight')}
+              description={
+                spotlightDisabled
+                  ? t('ui.readability.spotlight.unavailable')
+                  : t('ui.readability.spotlight.help')
+              }
+              items={switches.map((id) => ({
+                label: t(`ui.readability.spotlight.${id}`),
+                help: t(`ui.readability.spotlight.${id}.help`),
+              }))}
+            />
+          }
+        >
+          <Segment
+            options={switches}
+            value={spotlight ? 'on' : 'off'}
+            onChange={(id) => setSpotlight(id === 'on')}
+            disabled={spotlightDisabled}
+            itemContent={(id) => t(`ui.readability.spotlight.${id}`)}
+            itemLabel={(id) => t(`ui.readability.spotlight.${id}`)}
+            itemHelp={(id) => t(`ui.readability.spotlight.${id}.help`)}
+            itemClassName="text-xs"
+          />
+        </ReadabilityField>
+        {spotlight && !spotlightDisabled && (
+          <ReadabilityField
+            label={t('ui.readability.spotlight.styles')}
+            icon={<Palette />}
+            help={
+              <ReadabilityHelp
+                title={t('ui.readability.spotlight.styles')}
+                description={t('ui.readability.spotlight.styles.help')}
+                items={spotlightStyles.map((id) => ({
+                  icon: styleIcons[id],
+                  label: t(`ui.readability.spotlight.${id}`),
+                  help: t(`ui.readability.spotlight.${id}.help`),
+                }))}
+              />
+            }
+          >
+            <Segment
+              options={spotlightStyles}
+              value={spotlightStyle}
+              onChange={setSpotlightStyle}
+              disabled={spotlightDisabled || !spotlight}
+              itemContent={(id) => styleIcons[id]}
+              itemLabel={(id) => t(`ui.readability.spotlight.${id}`)}
+              itemHelp={(id) => t(`ui.readability.spotlight.${id}.help`)}
+            />
+          </ReadabilityField>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}