@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/blocks/viewer/controls.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import { useEffect, useState, type ReactNode } from 'react';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Expand,
+  Maximize2,
+  Settings2,
+  Shrink,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-react';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { ButtonGroupText } from '@terrafirmagreg-team/ui/components/ui/button-group';
+import { useInFloatBar } from '@terrafirmagreg-team/ui/hooks/viewer/use-in-float-bar';
+import { FloatBar } from '@terrafirmagreg-team/ui/components/blocks/viewer/float-bar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/popover';
+import {
+  Field,
+  FieldContent,
+  FieldGroup,
+  FieldLabel,
+} from '@terrafirmagreg-team/ui/components/ui/field';
+import { Slider } from '@terrafirmagreg-team/ui/components/ui/slider';
+import { Switch } from '@terrafirmagreg-team/ui/components/ui/switch';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import type {
+  ExpandButtonProps,
+  PagerControlsProps,
+  ViewerControlsProps,
+  ViewerSettingsProps,
+  ViewerSliderSetting,
+  ZoomControlsProps,
+} from '@terrafirmagreg-team/ui/types/viewer';
+
+export function ViewerToolbar({ children }: { children: ReactNode }) {
+  return (
+    <div className="absolute right-2 top-2 z-10">
+      <FloatBar>{children}</FloatBar>
+    </div>
+  );
+}
+
+export function ViewerZoomControls({
+  onZoomIn,
+  onZoomOut,
+  onFit,
+  fitLabel,
+}: ZoomControlsProps) {
+  const t = useTranslations();
+  return (
+    <>
+      <IconButton overlay label={t('Zoom in', { note: 'ui.canvas.zoom_in' })} onClick={onZoomIn}>
+        <ZoomIn className="size-3.5" />
+      </IconButton>
+      <IconButton overlay label={t('Zoom out', { note: 'ui.canvas.zoom_out' })} onClick={onZoomOut}>
+        <ZoomOut className="size-3.5" />
+      </IconButton>
+      {onFit ? (
+        <IconButton
+          overlay
+          label={fitLabel ?? t('Fit view', { note: 'ui.canvas.fit' })}
+          onClick={onFit}
+        >
+          <Maximize2 className="size-3.5" />
+        </IconButton>
+      ) : null}
+    </>
+  );
+}
+
+export function ViewerPagerControls({
+  index,
+  count,
+  onSelect,
+}: PagerControlsProps) {
+  const t = useTranslations();
+  const inFloatBar = useInFloatBar();
+  return (
+    <>
+      <IconButton
+        overlay
+        label={t('Previous', { note: 'ui.canvas.prev' })}
+        disabled={index === 0}
+        onClick={() => onSelect(index - 1)}
+      >
+        <ChevronLeft className="size-3.5" />
+      </IconButton>
+      <ButtonGroupText
+        className={
+          inFloatBar
+            ? 'border-0 bg-transparent text-xs'
+            : 'bg-float/92 text-xs backdrop-blur-md'
+        }
+      >
+        {index + 1} / {count}
+      </ButtonGroupText>
+      <IconButton
+        overlay
+        label={t('Next', { note: 'ui.canvas.next' })}
+        disabled={index === count - 1}
+        onClick={() => onSelect(index + 1)}
+      >
+        <ChevronRight className="size-3.5" />
+      </IconButton>
+    </>
+  );
+}
+
+export function ViewerExpandButton({ target }: ExpandButtonProps) {
+  const t = useTranslations();
+  const [active, setActive] = useState(false);
+  const [fallback, setFallback] = useState(false);
+
+  useEffect(() => {
+    const onChange = () =>
+      setActive(document.fullscreenElement === target.current);
+    document.addEventListener('fullscreenchange', onChange);
+    return () => document.removeEventListener('fullscreenchange', onChange);
+  }, [target]);
+
+  useEffect(() => {
+    const el = target.current;
+    if (!fallback || !el) return;
+    el.classList.add('viewer-fallback-fullscreen');
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setFallback(false);
+    };
+    document.addEventListener('keydown', onKey);
+    return () => {
+      el.classList.remove('viewer-fallback-fullscreen');
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [fallback, target]);
+
+  const expanded = active || fallback;
+  return (
+    <IconButton
+      overlay
+      aria-expanded={expanded}
+      label={
+        expanded
+          ? t('Exit fullscreen', { note: 'ui.canvas.exit_fullscreen' })
+          : t('Fullscreen', { note: 'ui.canvas.fullscreen' })
+      }
+      onClick={() => {
+        const el = target.current;
+        if (fallback) {
+          setFallback(false);
+          return;
+        }
+        if (!el) return;
+        if (document.fullscreenElement) {
+          void document.exitFullscreen();
+        } else if (el.requestFullscreen) {
+          void el.requestFullscreen().catch(() => setFallback(true));
+        } else {
+          setFallback(true);
+        }
+      }}
+    >
+      {expanded ? (
+        <Shrink className="size-3.5" />
+      ) : (
+        <Expand className="size-3.5" />
+      )}
+    </IconButton>
+  );
+}
+
+function ViewerSlider({
+  label,
+  icon,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  format = String,
+  disabled,
+  live,
+}: ViewerSliderSetting) {
+  const [draft, setDraft] = useState<{ key: number; value: number }>({
+    key: value,
+    value,
+  });
+  const shown = draft.key === value ? draft.value : value;
+  return (
+    <Field className="gap-1.5">
+      <FieldLabel className="text-xs text-muted-foreground">
+        {icon}
+        {label}
+      </FieldLabel>
+      <FieldContent className="rounded-lg bg-muted/70 px-3 py-2.5">
+        <div className="flex items-center gap-3">
+          <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>
+      </FieldContent>
+    </Field>
+  );
+}
+
+export function ViewerSettings({
+  label,
+  sliders,
+  toggles,
+}: ViewerSettingsProps) {
+  if (!sliders?.length && !toggles?.length) return null;
+  return (
+    <Popover>
+      <PopoverTrigger render={<IconButton overlay label={label} />}>
+        <Settings2 className="size-3.5" />
+      </PopoverTrigger>
+      <PopoverContent side="bottom" align="end" className="w-60 space-y-3 p-3">
+        {sliders?.map((slider, index) => (
+          <ViewerSlider key={index} {...slider} />
+        ))}
+        {toggles?.length ? (
+          <FieldGroup className="gap-1.5 rounded-lg bg-muted/60 p-2">
+            {toggles.map((toggle, index) => (
+              <Field key={index} orientation="horizontal" className="w-auto gap-1.5">
+                <Switch
+                  size="sm"
+                  checked={toggle.checked}
+                  onCheckedChange={toggle.onChange}
+                />
+                {toggle.icon}
+                <FieldLabel className="text-sm font-normal">
+                  {toggle.label}
+                </FieldLabel>
+              </Field>
+            ))}
+          </FieldGroup>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function ViewerControls({
+  start,
+  pager,
+  zoom,
+  expand,
+  extra,
+  settings,
+}: ViewerControlsProps) {
+  return (
+    <>
+      {start}
+      {pager ? <ViewerPagerControls {...pager} /> : null}
+      {zoom ? <ViewerZoomControls {...zoom} /> : null}
+      {expand ? <ViewerExpandButton {...expand} /> : null}
+      {extra}
+      {settings ? <ViewerSettings {...settings} /> : null}
+    </>
+  );
+}
+

package/src/components/blocks/viewer/float-bar.tsx

@@ -0,0 +1,51 @@
+'use client';
+import { type ComponentProps, type ReactNode } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+import { FloatBarContext } from '@terrafirmagreg-team/ui/hooks/viewer/use-in-float-bar';
+
+export function FloatBar({ className, children, ...props }: ComponentProps<'div'>) {
+  return (
+    <FloatBarContext.Provider value>
+      <div
+        role="group"
+        data-slot="float-bar"
+        className={cn(
+          'flex h-7 items-stretch overflow-hidden rounded-lg bg-float/92 shadow-sm ring-1 ring-foreground/10 backdrop-blur-md',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </FloatBarContext.Provider>
+  );
+}
+
+export function FloatBarItem({
+  label,
+  className,
+  children,
+}: {
+  label?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <span
+      data-slot="float-bar-item"
+      className={cn(
+        'inline-flex items-center justify-center gap-1 px-3 font-mono text-[11.5px] leading-none whitespace-pre text-foreground',
+        className,
+      )}
+    >
+      {label != null && (
+        <span className="text-[9px] font-semibold uppercase tracking-[0.06em] text-foreground/65">
+          {label}
+        </span>
+      )}
+      {children}
+    </span>
+  );
+}
+

package/src/components/layouts/layout.tsx

@@ -0,0 +1,94 @@
+'use client';
+import {
+  useMemo,
+  type ComponentProps,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
+import type * as PageTree from '@terrafirmagreg-team/translate/types/tree';
+import Link from '@terrafirmagreg-team/ui/components/blocks/nav/link';
+import { SidebarIcon } from 'lucide-react';
+
+import { LayoutContext, useLayout } from '@terrafirmagreg-team/ui/hooks/use-layout';
+import { TreeContextProvider } from '@terrafirmagreg-team/ui/components/layouts/tree-context';
+import {
+  SidebarProvider,
+  SidebarTrigger,
+} from '@terrafirmagreg-team/ui/components/blocks/sidebar';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { RightSidebar } from '@terrafirmagreg-team/ui/components/layouts/right-sidebar';
+import {
+  LeftSidebarPortalProvider,
+  LeftSidebarSearch,
+} from '@terrafirmagreg-team/ui/components/layouts/left-sidebar';
+
+export type LayoutProps = {
+  tree: PageTree.Root;
+
+  sidebar?: ReactNode;
+  navTitle?: ComponentType<ComponentProps<'a'>>;
+  header?: ReactNode;
+  children?: ReactNode;
+};
+
+const EmptyTitle: ComponentType<ComponentProps<'a'>> = (props) => (
+  <Link href="/" {...props} />
+);
+
+export function Layout({
+  tree,
+  sidebar,
+  navTitle: Title = EmptyTitle,
+  header = <LayoutHeader />,
+  children,
+}: LayoutProps) {
+  return (
+    <LayoutContext value={useMemo(() => ({ navTitle: Title }), [Title])}>
+      <TreeContextProvider tree={tree}>
+        <SidebarProvider>
+          <LeftSidebarPortalProvider>
+            <div
+              id="spacious-layout"
+              data-slot="layout"
+              className="relative grid min-h-(--layout-height) bg-card transition-[grid-template-columns] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none [--layout-height:calc(100dvh_-_var(--banner-height,0px))] [--header-height:--spacing(14)] [--page-width:100%] [--sidebar-width:0px] [--sidebar-col:var(--sidebar-width)] [--toc-width:0px] max-md:[--docs-row-3:calc(var(--banner-height,0px)+var(--header-height)+var(--toc-popover-height,0px))] md:h-(--layout-height) md:overflow-clip print:h-auto print:overflow-visible"
+              style={{
+                gridTemplate: `"sidebar header right" auto
+"sidebar toc-popover right" var(--toc-popover-height, 0px)
+"sidebar main right" 1fr / var(--sidebar-col) minmax(0, 1fr) auto`,
+              }}
+            >
+              {sidebar}
+              {header}
+              <RightSidebar>{children}</RightSidebar>
+            </div>
+          </LeftSidebarPortalProvider>
+        </SidebarProvider>
+      </TreeContextProvider>
+    </LayoutContext>
+  );
+}
+
+export function LayoutHeader({ className, ...props }: ComponentProps<'header'>) {
+  const { navTitle: Title } = useLayout();
+  return (
+    <header
+      id="subnav"
+      data-slot="layout-header"
+      className={cn(
+        'sticky top-(--banner-height,0px) z-30 [grid-area:header] flex items-center h-(--header-height) ps-4 pe-2.5 bg-card md:hidden',
+        className,
+      )}
+      {...props}
+    >
+      <Title className="inline-flex items-center gap-2.5 me-auto font-semibold" />
+      <LeftSidebarSearch variant="icon" />
+      <SidebarTrigger
+        className={buttonVariants({ variant: 'ghost', size: 'icon-sm', className: 'p-2' })}
+      >
+        <SidebarIcon />
+      </SidebarTrigger>
+    </header>
+  );
+}
+

package/src/components/layouts/left-sidebar/content.tsx

@@ -0,0 +1,63 @@
+'use client';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { ComponentProps } from 'react';
+import { ScrollArea } from '@base-ui/react/scroll-area';
+import { useHoverFollow } from '@terrafirmagreg-team/ui/hooks/use-hover-follow';
+import type { NavItemMatch } from '@terrafirmagreg-team/ui/lib/utils/nav-active';
+import { LeftSidebarPortalTarget } from './context';
+import { LeftSidebarTree } from './tree';
+
+export function LeftSidebarContent({
+  children,
+  match,
+  navKeys,
+  className,
+  viewportClassName,
+  ...props
+}: ComponentProps<'div'> & {
+  match?: NavItemMatch;
+  navKeys?: ReadonlySet<string>;
+  viewportClassName?: string;
+}) {
+  return (
+    <ScrollArea.Root
+      data-slot="left-sidebar-content"
+      className={cn('relative min-h-0 flex-1', className)}
+      {...props}
+    >
+      <ScrollArea.Viewport
+        data-slot="left-sidebar-viewport"
+        className={cn(
+          'size-full overscroll-contain px-3 py-2 mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]',
+          viewportClassName,
+        )}
+      >
+        <nav
+          ref={useHoverFollow()}
+          className="relative flex flex-col gap-1"
+        >
+          <div
+            aria-hidden
+            className="absolute top-0 left-0 py-0.5 rounded-lg bg-accent/60 bg-clip-content opacity-0 pointer-events-none transition-opacity duration-200 ease-expo motion-safe:transition-[translate,width,height,opacity]"
+          />
+          <LeftSidebarPortalTarget />
+          <div data-slot="left-sidebar-tree" className="flex flex-col">
+            {children ?? <LeftSidebarTree match={match} navKeys={navKeys} />}
+          </div>
+        </nav>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar
+        className={(state) =>
+          cn(
+            'flex h-full w-1.5 touch-none p-px transition-opacity select-none',
+            !state.hovering && 'opacity-0',
+          )
+        }
+      >
+        <ScrollArea.Thumb className="relative flex-1 rounded-full bg-border" />
+      </ScrollArea.Scrollbar>
+      <ScrollArea.Corner />
+    </ScrollArea.Root>
+  );
+}
+

package/src/components/layouts/left-sidebar/context.tsx

@@ -0,0 +1,55 @@
+'use client';
+import {
+  createContext,
+  use,
+  useMemo,
+  useState,
+  type ComponentProps,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import type { PopoverContent } from '@terrafirmagreg-team/ui/components/ui/popover';
+import type { NavItemMatch } from '@terrafirmagreg-team/ui/lib/utils/nav-active';
+
+export type SettingsMenuComponent = ComponentType<{
+  anchor?: ComponentProps<typeof PopoverContent>['anchor'];
+}>;
+
+export type LeftSidebarParts = {
+  controls?: ReactNode;
+  content?: ReactNode;
+  footer?: ReactNode;
+
+  menu?: ReactNode;
+  match?: NavItemMatch;
+  navKeys?: ReadonlySet<string>;
+  settings?: SettingsMenuComponent;
+};
+
+const LeftSidebarPortalContext = createContext<{
+  target: HTMLElement | null;
+  setTarget: (el: HTMLElement | null) => void;
+} | null>(null);
+
+export function LeftSidebarPortalProvider({ children }: { children: ReactNode }) {
+  const [target, setTarget] = useState<HTMLElement | null>(null);
+  return (
+    <LeftSidebarPortalContext
+      value={useMemo(() => ({ target, setTarget }), [target])}
+    >
+      {children}
+    </LeftSidebarPortalContext>
+  );
+}
+
+export function LeftSidebarPortal({ children }: { children?: ReactNode }) {
+  const ctx = use(LeftSidebarPortalContext);
+  return ctx?.target ? createPortal(children, ctx.target) : null;
+}
+
+export function LeftSidebarPortalTarget() {
+  const ctx = use(LeftSidebarPortalContext);
+  return <div data-slot="left-sidebar-portal" ref={ctx?.setTarget} />;
+}
+

package/src/components/layouts/left-sidebar/expand.tsx

@@ -0,0 +1,23 @@
+'use client';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { SidebarIcon } from 'lucide-react';
+import { useSidebar } from '@terrafirmagreg-team/ui/hooks/use-sidebar';
+import { SidebarCollapseTrigger } from '@terrafirmagreg-team/ui/components/blocks/sidebar';
+
+export function LeftSidebarExpand() {
+  const { collapsed } = useSidebar();
+  if (!collapsed) return;
+
+  return (
+    <SidebarCollapseTrigger
+      className={cn(
+        buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
+        '-ms-2 size-8 text-muted-foreground',
+      )}
+    >
+      <SidebarIcon />
+    </SidebarCollapseTrigger>
+  );
+}
+

package/src/components/layouts/left-sidebar/footer.tsx

@@ -0,0 +1,111 @@
+'use client';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import {
+  isValidElement,
+  useRef,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+import { useTheme } from 'next-themes';
+import { useLang } from '@terrafirmagreg-team/translate/provider';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { LangSwitcher } from '@terrafirmagreg-team/ui/components/blocks/lang/switcher';
+import { ThemeToggle } from '@terrafirmagreg-team/ui/components/blocks/theme/toggle';
+import { Separator } from '@terrafirmagreg-team/ui/components/ui/separator';
+import type { SettingsMenuComponent } from './context';
+
+export function LeftSidebarFooter({
+  settings,
+}: {
+  settings?: SettingsMenuComponent;
+}) {
+  return (
+    <>
+      <LeftSidebarLanguage />
+      <LeftSidebarActions settings={settings} />
+    </>
+  );
+}
+
+export function LeftSidebarLanguage() {
+  const t = useTranslations();
+  const { locale, locales, onLocaleChange } = useLang();
+  if (!locales?.length) return null;
+  return (
+    <LangSwitcher
+      locales={locales}
+      selected={locale}
+      onSelect={(value) => onLocaleChange?.(value)}
+      label={t('Choose a language', { note: 'ui.choose_language' })}
+    />
+  );
+}
+
+const isThemeProps = (
+  value: unknown,
+): value is ComponentProps<typeof ThemeToggle> =>
+  typeof value === 'object' && value !== null && !isValidElement(value);
+
+export function LeftSidebarPlate({
+  tools,
+  theme,
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'> & {
+  tools?: ReactNode;
+  theme?: ComponentProps<typeof ThemeToggle> | ReactNode;
+}) {
+  return (
+    <div
+      data-slot="left-sidebar-plate"
+      className={cn(
+        'flex h-10 items-center gap-0.5 rounded-xl border bg-secondary/50 px-1',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {(tools != null || theme != null) && (
+        <div className="ms-auto flex items-center gap-0.5">
+          {tools}
+          {tools != null && theme != null && (
+            <Separator
+              orientation="vertical"
+              className="mx-1 h-5 self-center! bg-muted-foreground/30"
+              aria-hidden
+            />
+          )}
+          {isThemeProps(theme) ? <ThemeToggle {...theme} /> : theme}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function LeftSidebarActions({
+  settings: SettingsMenu,
+  children,
+}: {
+  settings?: SettingsMenuComponent;
+
+  children?: ReactNode;
+}) {
+  const { theme, setTheme } = useTheme();
+  const plateRef = useRef<HTMLDivElement>(null);
+  return (
+    <LeftSidebarPlate
+      ref={plateRef}
+      tools={SettingsMenu ? <SettingsMenu anchor={plateRef} /> : undefined}
+      theme={{
+        value: theme,
+        onValueChange: setTheme,
+        className: 'p-0',
+        buttonClassName: 'size-7',
+      }}
+    >
+      {children}
+    </LeftSidebarPlate>
+  );
+}
+