@terrafirmagreg-team/ui 0.0.0-stage → 0.1.0

package/src/components/blocks/search/provider.tsx

@@ -0,0 +1,117 @@
+'use client';
+import {
+  type ComponentType,
+  type ReactNode,
+  Suspense,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { useHotKey } from '@terrafirmagreg-team/ui/hooks/use-hot-key';
+import {
+  dialogHandle,
+  SearchContext,
+  useSearchContext,
+} from '@terrafirmagreg-team/ui/hooks/search/provider';
+import type { SharedProps } from '@terrafirmagreg-team/ui/types/search';
+export type { SharedProps } from '@terrafirmagreg-team/ui/types/search';
+
+interface HotKey {
+  display: ReactNode;
+
+  key: string | ((e: KeyboardEvent) => boolean);
+}
+
+export type SearchLink = [name: string, href: string];
+
+export interface TagItem {
+  name: string;
+  value: string;
+}
+
+export interface SearchProviderProps<DialogProps extends SharedProps = SharedProps> {
+
+  links?: SearchLink[];
+
+  hotKey?: HotKey[];
+
+  SearchDialog: ComponentType<DialogProps>;
+
+  options?: Partial<DialogProps>;
+
+  children?: ReactNode;
+}
+
+const noop = () => () => {};
+
+function MetaOrControl() {
+
+  const isClient = useSyncExternalStore(
+    noop,
+    () => true,
+    () => false,
+  );
+
+  return isClient && /Windows|Linux/i.test(navigator.userAgent) ? 'Ctrl' : '⌘';
+}
+
+const DEFAULT_HOT_KEYS: HotKey[] = [
+  {
+    key: (e) => e.metaKey || e.ctrlKey,
+    display: <MetaOrControl />,
+  },
+  {
+    key: 'k',
+    display: 'K',
+  },
+];
+
+export function SearchProvider<DialogProps extends SharedProps = SharedProps>({
+  SearchDialog,
+  children,
+  options,
+  hotKey = DEFAULT_HOT_KEYS,
+  links,
+}: SearchProviderProps<DialogProps>) {
+  const [isOpen, setIsOpen] = useState(false);
+  useHotKey((e) => {
+    if (hotKey.every((v) => (typeof v.key === 'string' ? e.key === v.key : v.key(e)))) {
+      setIsOpen((open) => !open);
+      e.preventDefault();
+    }
+  });
+
+  return (
+    <SearchContext
+      value={useMemo(
+        () => ({
+          enabled: true,
+          open: isOpen,
+          hotKey,
+          dialogHandle,
+          setOpenSearch: setIsOpen,
+        }),
+        [isOpen, hotKey],
+      )}
+    >
+      <Suspense fallback={null}>
+        {/* @ts-expect-error -- assume all required props are filled */}
+        <SearchDialog
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          links={links}
+          dialogHandle={dialogHandle}
+          {...options}
+        />
+      </Suspense>
+
+      {children}
+    </SearchContext>
+  );
+}
+
+export function SearchOnly({ children }: { children: ReactNode }) {
+  const search = useSearchContext();
+
+  if (search.enabled) return children;
+}

package/src/components/blocks/sidebar.tsx

@@ -0,0 +1,406 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import {
+  use,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import ReactDOM from 'react-dom';
+import { ScrollArea } from '@base-ui/react/scroll-area';
+import { ChevronDown, ExternalLink } from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useHotKey } from '@terrafirmagreg-team/ui/hooks/use-hot-key';
+import { useMediaQuery } from '@terrafirmagreg-team/ui/hooks/use-media-query';
+import { useOnChange } from '@terrafirmagreg-team/ui/hooks/use-on-change';
+import {
+  FolderContext,
+  SidebarContext,
+  useAutoScroll,
+  useFolderDepth,
+  useSidebar,
+} from '@terrafirmagreg-team/ui/hooks/sidebar';
+import { Link } from '@terrafirmagreg-team/ui/components/blocks/nav/link';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/collapsible';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+export type { SidebarContextValue } from '@terrafirmagreg-team/ui/hooks/sidebar';
+
+export function SidebarProvider({
+  defaultOpenLevel = 0,
+  prefetch,
+  collapsible = true,
+  children,
+}: {
+  defaultOpenLevel?: number;
+  prefetch?: boolean;
+  collapsible?: boolean;
+  children: ReactNode;
+}) {
+  const closeOnRedirect = useRef(true);
+  const [open, setOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const pathname = usePathname();
+  const mode = useMediaQuery('(width < 768px)') ? 'drawer' : 'full';
+
+  useOnChange(pathname, () => {
+    if (closeOnRedirect.current) setOpen(false);
+    closeOnRedirect.current = true;
+  });
+
+  useHotKey(
+    (e) => {
+      if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey || e.key !== 'b')
+        return;
+      e.preventDefault();
+      setCollapsed((prev) => !prev);
+    },
+    { enabled: collapsible && mode === 'full', ignoreTyping: true },
+  );
+
+  return (
+    <SidebarContext
+      value={useMemo(
+        () => ({
+          open,
+          setOpen,
+          collapsed,
+          setCollapsed,
+          closeOnRedirect,
+          defaultOpenLevel,
+          prefetch,
+          mode,
+        }),
+        [open, collapsed, defaultOpenLevel, prefetch, mode],
+      )}
+    >
+      {children}
+    </SidebarContext>
+  );
+}
+
+export function SidebarContent({
+  children,
+}: {
+  children: (props: {
+    ref: RefObject<HTMLElement | null>;
+    collapsed: boolean;
+    hovered: boolean;
+    onPointerEnter: (e: React.PointerEvent<HTMLElement>) => void;
+    onPointerLeave: (e: React.PointerEvent<HTMLElement>) => void;
+  }) => ReactNode;
+}) {
+  const { collapsed, mode } = useSidebar();
+  const [hover, setHover] = useState(false);
+  const ref = useRef<HTMLElement>(null);
+  const timerRef = useRef(0);
+
+  useOnChange(collapsed, () => {
+    if (collapsed) setHover(false);
+  });
+
+  if (mode !== 'full') return null;
+
+  function shouldIgnoreHover(e: React.PointerEvent<HTMLElement>) {
+    const element = ref.current;
+    if (!element) return true;
+    return (
+      !collapsed || e.pointerType === 'touch' || element.getAnimations().length > 0
+    );
+  }
+
+  // eslint-disable-next-line react-hooks/refs -- render-prop contract: the ref object is handed to the caller, never read here
+  return children({
+    ref,
+    collapsed,
+    hovered: hover,
+    onPointerEnter(e) {
+      if (shouldIgnoreHover(e)) return;
+      window.clearTimeout(timerRef.current);
+      setHover(true);
+    },
+    onPointerLeave(e) {
+      if (shouldIgnoreHover(e)) return;
+      window.clearTimeout(timerRef.current);
+      timerRef.current = window.setTimeout(
+        () => setHover(false),
+        Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
+          ? 0
+          : 500,
+      );
+    },
+  });
+}
+
+export function SidebarDrawerOverlay(props: ComponentProps<'div'>) {
+  const { open, setOpen, mode } = useSidebar();
+  const [hidden, setHidden] = useState(!open);
+
+  if (open && hidden) setHidden(false);
+  if (mode !== 'drawer' || hidden) return null;
+
+  return (
+    <div
+      data-state={open ? 'open' : 'closed'}
+      onClick={() => setOpen(false)}
+      onAnimationEnd={() => {
+        if (!open) ReactDOM.flushSync(() => setHidden(true));
+      }}
+      {...props}
+    />
+  );
+}
+
+export function SidebarDrawerContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<'aside'>) {
+  const { open, mode } = useSidebar();
+  const [hidden, setHidden] = useState(!open);
+
+  if (open && hidden) setHidden(false);
+  if (mode !== 'drawer') return null;
+
+  return (
+    <aside
+      id="sidebar-mobile"
+      data-state={open ? 'open' : 'closed'}
+      className={cn(hidden && 'invisible', className)}
+      onAnimationEnd={() => {
+        if (!open) ReactDOM.flushSync(() => setHidden(true));
+      }}
+      {...props}
+    >
+      {children}
+    </aside>
+  );
+}
+
+export function SidebarViewport({
+  className,
+  ...props
+}: ComponentProps<typeof ScrollArea.Root>) {
+  return (
+    <ScrollArea.Root
+      className={(s) =>
+        cn('min-h-0 flex-1', typeof className === 'function' ? className(s) : className)
+      }
+      {...props}
+    >
+      <ScrollArea.Viewport className="size-full rounded-[inherit] p-4 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]">
+        {props.children}
+      </ScrollArea.Viewport>
+      <ScrollArea.Corner />
+      <ScrollArea.Scrollbar
+        className={(s) =>
+          cn(
+            'flex h-full w-1.5 select-none transition-opacity',
+            !s.hovering && 'opacity-0',
+          )
+        }
+      >
+        <ScrollArea.Thumb className="relative flex-1 rounded-full bg-border" />
+      </ScrollArea.Scrollbar>
+    </ScrollArea.Root>
+  );
+}
+
+export function SidebarSeparator(props: ComponentProps<'p'>) {
+  const depth = useFolderDepth();
+  return (
+    <p
+      {...props}
+      className={cn(
+        'inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0',
+        depth === 0 && 'first:mt-0',
+        props.className,
+      )}
+    >
+      {props.children}
+    </p>
+  );
+}
+
+export function SidebarItem({
+  icon,
+  active = false,
+  children,
+  ...props
+}: ComponentProps<typeof Link> & {
+  icon?: ReactNode;
+  active?: boolean;
+}) {
+  const ref = useRef<HTMLAnchorElement>(null);
+  const { prefetch } = useSidebar();
+  useAutoScroll(active, ref);
+
+  return (
+    <Link ref={ref} data-active={active} prefetch={prefetch} {...props}>
+      {icon ?? (props.external ? <ExternalLink /> : null)}
+      {children}
+    </Link>
+  );
+}
+
+export function SidebarFolder({
+  defaultOpen: defaultOpenProp,
+  collapsible = true,
+  active = false,
+  children,
+  ...props
+}: ComponentProps<'div'> & {
+  defaultOpen?: boolean;
+  collapsible?: boolean;
+  active?: boolean;
+}) {
+  const { defaultOpenLevel } = useSidebar();
+  const depth = useFolderDepth() + 1;
+  const defaultOpen =
+    collapsible === false || active || (defaultOpenProp ?? defaultOpenLevel >= depth);
+  const [open, setOpen] = useState(defaultOpen);
+
+  useOnChange(defaultOpen, (v) => {
+    if (v) setOpen(v);
+  });
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} disabled={!collapsible} {...props}>
+      <FolderContext
+        value={useMemo(
+          () => ({ open, setOpen, depth, collapsible }),
+          [collapsible, depth, open],
+        )}
+      >
+        {children}
+      </FolderContext>
+    </Collapsible>
+  );
+}
+
+export function SidebarFolderTrigger({
+  children,
+  ...props
+}: ComponentProps<'button'>) {
+  const folder = use(FolderContext);
+  if (folder?.collapsible)
+    return (
+      <CollapsibleTrigger {...props}>
+        {children}
+        <ChevronDown
+          data-icon
+          className={cn(
+            'ms-auto transition-transform',
+            !folder.open && '-rotate-90 rtl:rotate-90',
+          )}
+        />
+      </CollapsibleTrigger>
+    );
+  return <div {...(props as ComponentProps<'div'>)}>{children}</div>;
+}
+
+export function SidebarFolderLink({
+  children,
+  active = false,
+  ...props
+}: ComponentProps<typeof Link> & { active?: boolean }) {
+  const ref = useRef<HTMLAnchorElement>(null);
+  const folder = use(FolderContext);
+  const { prefetch } = useSidebar();
+  useAutoScroll(active, ref);
+
+  return (
+    <Link
+      ref={ref}
+      data-active={active}
+      onClick={(e) => {
+        if (!folder?.collapsible) return;
+        if (
+          e.target instanceof Element &&
+          e.target.matches('[data-icon], [data-icon] *')
+        ) {
+          folder.setOpen(!folder.open);
+          e.preventDefault();
+        } else folder.setOpen(active ? !folder.open : true);
+      }}
+      prefetch={prefetch}
+      {...props}
+    >
+      {children}
+      {folder?.collapsible && (
+        <ChevronDown
+          data-icon
+          className={cn(
+            'ms-auto transition-transform',
+            !folder.open && '-rotate-90 rtl:rotate-90',
+          )}
+        />
+      )}
+    </Link>
+  );
+}
+
+export function SidebarFolderContent(props: ComponentProps<'div'>) {
+  return <CollapsibleContent {...props}>{props.children}</CollapsibleContent>;
+}
+
+export function SidebarTrigger({
+  children,
+  ...props
+}: ComponentProps<'button'>) {
+  const { open, setOpen } = useSidebar();
+  const t = useTranslations();
+
+  return (
+    <button
+      type="button"
+      aria-label={
+        open
+          ? t('ui.sidebar_close', )
+          : t('ui.sidebar_open', )
+      }
+      aria-expanded={open}
+      aria-controls="sidebar-mobile"
+      onClick={() => setOpen(!open)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function SidebarCollapseTrigger(props: ComponentProps<'button'>) {
+  const { collapsed, setCollapsed } = useSidebar();
+  const t = useTranslations();
+
+  return (
+    <button
+      type="button"
+      aria-label={t('ui.sidebar_collapse', )}
+      aria-controls="sidebar"
+      aria-expanded={!collapsed}
+      data-collapsed={collapsed}
+      onClick={(e) => {
+        const button = e.currentTarget;
+        ReactDOM.flushSync(() => setCollapsed((prev) => !prev));
+        if (button.matches('[inert] *'))
+          document
+            .querySelector<HTMLElement>(
+              '[aria-controls="sidebar"]:not([inert] *)',
+            )
+            ?.focus();
+      }}
+      {...props}
+    >
+      {props.children}
+    </button>
+  );
+}
+

package/src/components/blocks/theme/toggle.tsx

@@ -0,0 +1,71 @@
+'use client';
+import type { ComponentProps } from 'react';
+import { useSyncExternalStore } from 'react';
+import { flushSync } from 'react-dom';
+import { Airplay, Moon, Sun } from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+
+const noop = () => () => {};
+
+const icons = { light: Sun, dark: Moon, system: Airplay } as const;
+export type ThemeToggleMode = keyof typeof icons;
+
+export function ThemeToggle({
+  value,
+  onValueChange,
+  modes = ['light', 'dark', 'system'],
+  labels,
+  className,
+  ...props
+}: ComponentProps<'div'> & {
+  value?: string;
+  onValueChange?: (mode: ThemeToggleMode) => void;
+  modes?: readonly ThemeToggleMode[];
+  labels?: Partial<Record<ThemeToggleMode, string>>;
+}) {
+  const mounted = useSyncExternalStore(
+    noop,
+    () => true,
+    () => false,
+  );
+  const current = mounted ? value : undefined;
+  const select = (mode: ThemeToggleMode) => {
+    if (document?.startViewTransition) {
+      document.startViewTransition(() => flushSync(() => onValueChange?.(mode)));
+    } else {
+      onValueChange?.(mode);
+    }
+  };
+  return (
+    <div
+      data-theme-toggle
+      className={cn(
+        'inline-flex items-center rounded-full p-1 overflow-hidden *:rounded-full',
+        className,
+      )}
+      {...props}
+    >
+      {modes.map((mode) => {
+        const ModeIcon = icons[mode];
+        const active = current === mode;
+        return (
+          <Hint key={mode} label={labels?.[mode] ?? mode}>
+            <button
+              type="button"
+              aria-label={labels?.[mode] ?? mode}
+              aria-pressed={active}
+              className={cn(
+                'size-6.5 p-1.5 text-muted-foreground',
+                active && 'bg-accent text-accent-foreground',
+              )}
+              onClick={() => select(mode)}
+            >
+              <ModeIcon className="size-full" fill="currentColor" aria-hidden />
+            </button>
+          </Hint>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/blocks/tooltip/hint.tsx

@@ -0,0 +1,27 @@
+'use client';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+
+export function Hint({
+  label,
+  children,
+  ...props
+}: {
+  label: ReactNode;
+  children: ReactElement;
+} & Pick<
+  ComponentProps<typeof TooltipContent>,
+  'side' | 'align' | 'sideOffset'
+>) {
+  if (label == null || label === '') return children;
+  return (
+    <Tooltip>
+      <TooltipTrigger render={children} />
+      <TooltipContent {...props}>{label}</TooltipContent>
+    </Tooltip>
+  );
+}