@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/layouts/left-sidebar/index.ts

@@ -0,0 +1,29 @@
+export type { SettingsMenuComponent } from './context';
+export {
+  LeftSidebarPortalProvider,
+  LeftSidebarPortal,
+} from './context';
+export { LeftSidebar } from './sidebar';
+export { LeftSidebarExpand } from './expand';
+export {
+  LeftSidebarSearchTrigger,
+  LeftSidebarSearch,
+} from './search';
+export { LeftSidebarContent } from './content';
+export {
+  LeftSidebarFooter,
+  LeftSidebarLanguage,
+  LeftSidebarPlate,
+  LeftSidebarActions,
+} from './footer';
+export {
+  LeftSidebarFolder,
+  LeftSidebarSeparator,
+  LeftSidebarItem,
+  LeftSidebarFolderTrigger,
+  LeftSidebarFolderLink,
+  LeftSidebarFolderContent,
+  LeftSidebarLabel,
+} from './items';
+export { LeftSidebarTree, LeftSidebarTreeItem } from './tree';
+

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

@@ -0,0 +1,103 @@
+'use client';
+import type { ComponentProps } from 'react';
+import { useFolderDepth, useSidebar } from '@terrafirmagreg-team/ui/hooks/use-sidebar';
+import { SidebarFolder, SidebarFolderContent as BaseFolderContent, SidebarFolderLink as BaseFolderLink, SidebarFolderTrigger as BaseFolderTrigger, SidebarItem as BaseItem } from '@terrafirmagreg-team/ui/components/blocks/sidebar';
+import { Separator } from '@terrafirmagreg-team/ui/components/ui/separator';
+
+export { SidebarFolder as LeftSidebarFolder };
+
+export function LeftSidebarSeparator({
+  orientation = 'horizontal',
+  ...props
+}: ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      orientation={orientation}
+      data-slot="left-sidebar-separator"
+      {...props}
+    />
+  );
+}
+
+export function LeftSidebarItem({
+  className,
+  onClick,
+  ...props
+}: ComponentProps<typeof BaseItem>) {
+  const { setOpen } = useSidebar();
+  return (
+    <BaseItem
+      data-slot="left-sidebar-item"
+      onClick={(event) => {
+        setOpen(false);
+        onClick?.(event);
+      }}
+      className={className}
+      {...props}
+    />
+  );
+}
+
+export function LeftSidebarFolderTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof BaseFolderTrigger>) {
+  return (
+    <BaseFolderTrigger
+      data-slot="left-sidebar-folder-trigger"
+      className={className}
+      {...props}
+    />
+  );
+}
+
+export function LeftSidebarFolderLink({
+  className,
+  onClick,
+  ...props
+}: ComponentProps<typeof BaseFolderLink>) {
+  const { setOpen } = useSidebar();
+  return (
+    <BaseFolderLink
+      data-slot="left-sidebar-folder-link"
+      onClick={(event) => {
+        setOpen(false);
+        onClick?.(event);
+      }}
+      className={className}
+      {...props}
+    />
+  );
+}
+
+export function LeftSidebarFolderContent({
+  children,
+  className,
+  ...props
+}: ComponentProps<typeof BaseFolderContent>) {
+  return (
+    <BaseFolderContent
+      data-slot="left-sidebar-folder-content"
+      className={className}
+      {...props}
+    >
+      {children}
+    </BaseFolderContent>
+  );
+}
+
+export function LeftSidebarLabel({
+  className,
+  ...props
+}: ComponentProps<'p'>) {
+  const depth = useFolderDepth();
+  return (
+    <p
+      data-slot="left-sidebar-label"
+      data-nested={depth > 0 || undefined}
+      className={className}
+      {...props}
+    />
+  );
+}
+

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

@@ -0,0 +1,75 @@
+'use client';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { ComponentProps, ReactNode } from 'react';
+import { Search } from 'lucide-react';
+import { useSearchContext } from '@terrafirmagreg-team/ui/hooks/search/use-provider';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+
+export function LeftSidebarSearchTrigger({
+  label,
+  hint,
+  keys = ['Ctrl', 'K'],
+  icon,
+  className,
+  ...props
+}: ComponentProps<'button'> & {
+  label?: ReactNode;
+  hint?: ReactNode;
+  keys?: readonly ReactNode[];
+  icon?: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      data-slot="left-sidebar-search-trigger"
+      className={cn(
+        'flex h-10 w-full items-center gap-3 rounded-xl border bg-secondary/50 ps-2.5 pe-2 text-sm text-muted-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    >
+      {icon ?? <Search className="size-4" aria-hidden />}
+      <span className="flex-1 truncate text-start">{label}</span>
+      {hint ?? (
+        <span className="ms-auto inline-flex gap-0.5" aria-hidden>
+          {keys.map((k, i) => (
+            <kbd key={i} className="rounded-md border bg-background px-1.5">
+              {k}
+            </kbd>
+          ))}
+        </span>
+      )}
+    </button>
+  );
+}
+
+export function LeftSidebarSearch({
+  variant = 'full',
+}: {
+  variant?: 'full' | 'icon';
+}) {
+  const { enabled, hotKey, setOpenSearch } = useSearchContext();
+  const t = useTranslations();
+  if (!enabled) return null;
+  if (variant === 'icon')
+    return (
+      <IconButton
+        label={t('Search', { note: 'ui.search_trigger' })}
+        variant="ghost"
+        size="icon-sm"
+        tooltip={false}
+        onClick={() => setOpenSearch(true)}
+      >
+        <Search />
+      </IconButton>
+    );
+  return (
+    <LeftSidebarSearchTrigger
+      label={t('Search', { note: 'ui.search_trigger' })}
+      onClick={() => setOpenSearch(true)}
+      keys={hotKey?.map((k) => k.display)}
+    />
+  );
+}
+

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

@@ -0,0 +1,189 @@
+'use client';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import type { ComponentProps, ReactNode } from 'react';
+import { SidebarIcon } from 'lucide-react';
+import { useSidebar } from '@terrafirmagreg-team/ui/hooks/use-sidebar';
+import { SidebarCollapseTrigger, SidebarDrawerContent, SidebarDrawerOverlay, SidebarTrigger } from '@terrafirmagreg-team/ui/components/blocks/sidebar';
+import { useLayout } from '@terrafirmagreg-team/ui/hooks/use-layout';
+import { LeftSidebarContent } from './content';
+import { LeftSidebarFooter } from './footer';
+import type { LeftSidebarParts } from './context';
+
+export function LeftSidebar({
+  className,
+  controls,
+  content,
+  footer,
+  menu,
+  match,
+  navKeys,
+  settings,
+  ...props
+}: LeftSidebarParts & Omit<ComponentProps<'aside'>, 'content'>) {
+  const { mode } = useSidebar();
+  const parts = { controls, content, footer, menu, match, navKeys, settings };
+  return (
+    <>
+      {mode === 'full' && (
+        <LeftSidebarAside className={className} {...parts} {...props} />
+      )}
+      <LeftSidebarDrawer {...parts} />
+    </>
+  );
+}
+
+function LeftSidebarAside({
+  className,
+  controls,
+  content,
+  footer,
+  menu,
+  match,
+  navKeys,
+  settings,
+  ...props
+}: LeftSidebarParts & Omit<ComponentProps<'aside'>, 'content'>) {
+  const { collapsed } = useSidebar();
+  const { navTitle: Title } = useLayout();
+  return (
+    <aside
+      id="sidebar"
+      data-slot="left-sidebar"
+      data-collapsed={collapsed || undefined}
+      inert={collapsed}
+      className={cn(
+        'flex min-h-0 w-67 flex-col overflow-hidden text-sm transition-[width,translate,opacity] duration-300 ease-expo *:transition-[opacity,translate] *:duration-200 data-[collapsed=true]:w-2 data-[collapsed=true]:*:pointer-events-none data-[collapsed=true]:*:opacity-0 data-[collapsed=true]:*:-translate-x-3 [grid-area:sidebar] md:layout:[--sidebar-width:268px] max-md:hidden',
+        collapsed && 'md:layout:[--sidebar-col:--spacing(2)]',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex min-h-0 flex-1 flex-col w-(--sidebar-width)">
+        <LeftSidebarRegions
+          title={
+            <Title className="inline-flex items-center gap-2 min-w-0 me-auto text-nav-title font-semibold" />
+          }
+          collapse={
+            <SidebarCollapseTrigger
+              className={cn(
+                buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
+                'size-8 text-muted-foreground! aria-expanded:bg-transparent',
+              )}
+            >
+              <SidebarIcon />
+            </SidebarCollapseTrigger>
+          }
+          controls={controls}
+          content={content}
+          footer={footer}
+          menu={menu}
+          match={match}
+          navKeys={navKeys}
+          settings={settings}
+        />
+      </div>
+    </aside>
+  );
+}
+
+function LeftSidebarDrawer(props: LeftSidebarParts) {
+  const { navTitle: Title } = useLayout();
+  return (
+    <>
+      <SidebarDrawerOverlay className="fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out" />
+      <SidebarDrawerContent className="fixed z-40 inset-e-0 inset-y-0 flex flex-col w-[85%] max-w-95 text-nav-title bg-background border-s shadow-lg data-[state=open]:animate-sidebar-in data-[state=closed]:animate-sidebar-out">
+        <LeftSidebarRegions
+          headerClassName="h-(--header-height) my-2 ps-5.5 pe-3"
+          title={
+            <Title className="inline-flex items-center gap-2 min-w-0 me-auto text-nav-title font-semibold" />
+          }
+          collapse={
+            <SidebarTrigger
+              className={cn(
+                buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
+                'size-8 text-muted-foreground',
+              )}
+            >
+              <SidebarIcon />
+            </SidebarTrigger>
+          }
+          contentClassName="mt-2"
+          {...props}
+        />
+      </SidebarDrawerContent>
+    </>
+  );
+}
+
+function LeftSidebarRegions({
+  title,
+  collapse,
+  controls,
+  content,
+  footer,
+  menu,
+  match,
+  navKeys,
+  settings,
+  headerClassName,
+  controlsClassName,
+  contentClassName,
+  viewportClassName,
+  footerClassName,
+}: LeftSidebarParts & {
+  title?: ReactNode;
+  collapse?: ReactNode;
+  headerClassName?: string;
+  controlsClassName?: string;
+  contentClassName?: string;
+  viewportClassName?: string;
+  footerClassName?: string;
+}) {
+  return (
+    <>
+      {(title != null || collapse != null || menu != null) && (
+        <header
+          data-slot="left-sidebar-header"
+          className={cn(
+            'my-2 flex h-14 shrink-0 items-center gap-2 ps-5.5 pe-3',
+            headerClassName,
+          )}
+        >
+          {title}
+          {menu}
+          {collapse}
+        </header>
+      )}
+      <div
+        data-slot="left-sidebar-controls"
+        className={cn(
+          'flex shrink-0 flex-col gap-2 px-3 empty:hidden',
+          controlsClassName,
+        )}
+      >
+        {controls}
+      </div>
+      <LeftSidebarContent
+        className={contentClassName}
+        viewportClassName={viewportClassName}
+        match={match}
+        navKeys={navKeys}
+      >
+        {content}
+      </LeftSidebarContent>
+      {(footer ?? <LeftSidebarFooter settings={settings} />) != null && (
+        <footer
+          data-slot="left-sidebar-footer"
+          className={cn(
+            'flex shrink-0 flex-col gap-1.5 px-3 py-2.5 empty:hidden',
+            footerClassName,
+          )}
+        >
+          {footer ?? <LeftSidebarFooter settings={settings} />}
+        </footer>
+      )}
+    </>
+  );
+}
+

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

@@ -0,0 +1,157 @@
+'use client';
+import {
+  createContext,
+  use,
+  useMemo,
+  type ReactNode,
+} from 'react';
+import { Fragment } from 'react';
+import { usePathname } from 'next/navigation';
+import type * as PageTree from '@terrafirmagreg-team/translate/types/tree';
+import { useTreeContext, useTreePath } from '@terrafirmagreg-team/ui/hooks/use-tree';
+import { useLocaleRegistry } from '@terrafirmagreg-team/translate/hooks/use-locale-registry';
+import { useLocationSearch } from '@terrafirmagreg-team/ui/hooks/page/use-location-search';
+import {
+  hasActiveDescendant,
+  isNavItemActive,
+  langScopeKey,
+  type NavItemMatch,
+} from '@terrafirmagreg-team/ui/lib/utils/nav-active';
+import {
+  LeftSidebarFolder,
+  LeftSidebarFolderContent,
+  LeftSidebarFolderLink,
+  LeftSidebarFolderTrigger,
+  LeftSidebarItem,
+  LeftSidebarLabel,
+} from './items';
+
+type TreeRenderer = (props: {
+  item: PageTree.Node;
+  children: ReactNode;
+}) => ReactNode;
+
+const RendererContext = createContext<{
+  Separator?: TreeRenderer;
+  Item?: TreeRenderer;
+  Folder?: TreeRenderer;
+  pathname: string;
+  search: string;
+  match?: NavItemMatch;
+  navKeys?: ReadonlySet<string>;
+} | null>(null);
+
+export function LeftSidebarTree({
+  tree,
+  match,
+  navKeys,
+  Separator,
+  Item,
+  Folder,
+}: {
+  tree?: PageTree.Root;
+  match?: NavItemMatch;
+  navKeys?: ReadonlySet<string>;
+  Separator?: TreeRenderer;
+  Item?: TreeRenderer;
+  Folder?: TreeRenderer;
+}) {
+  const { root } = useTreeContext();
+  const pathname = usePathname();
+  const search = useLocationSearch();
+  const { languages } = useLocaleRegistry();
+  const resolved = tree ?? root;
+  return (
+    <RendererContext
+      value={useMemo(
+        () => ({ Separator, Item, Folder, pathname, search, match, navKeys }),
+        [Separator, Item, Folder, pathname, search, match, navKeys],
+      )}
+    >
+      <Fragment key={langScopeKey(resolved.$id, languages)}>
+        {resolved.children.map((node, i) => (
+          <LeftSidebarTreeItem key={i} node={node} />
+        ))}
+      </Fragment>
+    </RendererContext>
+  );
+}
+
+export function LeftSidebarTreeItem({ node }: { node: PageTree.Node }) {
+  const ctx = use(RendererContext);
+  const path = useTreePath();
+  if (!ctx) return null;
+  const {
+    Separator: CustomSeparator,
+    Item: CustomItem,
+    Folder: CustomFolder,
+    pathname,
+    search,
+    match,
+    navKeys,
+  } = ctx;
+  const isActive: NavItemMatch =
+    match ?? ((url) => isNavItemActive(url, pathname, search, navKeys));
+  if (node.type === 'separator') {
+    if (CustomSeparator)
+      return <CustomSeparator item={node}>{null}</CustomSeparator>;
+    return (
+      <LeftSidebarLabel>
+        {node.icon}
+        {node.name}
+      </LeftSidebarLabel>
+    );
+  }
+  if (node.type === 'folder') {
+    if (CustomFolder)
+      return (
+        <CustomFolder item={node}>
+          {node.children.map((child, i) => (
+            <LeftSidebarTreeItem key={i} node={child} />
+          ))}
+        </CustomFolder>
+      );
+    return (
+      <LeftSidebarFolder
+        collapsible={node.collapsible}
+        active={
+          path.includes(node) || hasActiveDescendant(node, isActive)
+        }
+        defaultOpen={node.defaultOpen}
+      >
+        {node.index ? (
+          <LeftSidebarFolderLink
+            href={node.index.url}
+            active={isActive(node.index.url)}
+            external={node.index.external}
+          >
+            {node.icon}
+            {node.name}
+          </LeftSidebarFolderLink>
+        ) : (
+          <LeftSidebarFolderTrigger>
+            {node.icon}
+            {node.name}
+          </LeftSidebarFolderTrigger>
+        )}
+        <LeftSidebarFolderContent>
+          {node.children.map((child, i) => (
+            <LeftSidebarTreeItem key={i} node={child} />
+          ))}
+        </LeftSidebarFolderContent>
+      </LeftSidebarFolder>
+    );
+  }
+  if (CustomItem) return <CustomItem item={node}>{null}</CustomItem>;
+  return (
+    <LeftSidebarItem
+      href={node.url}
+      external={node.external}
+      active={isActive(node.url)}
+      icon={node.icon}
+    >
+      {node.name}
+    </LeftSidebarItem>
+  );
+}
+

package/src/components/layouts/right-sidebar.tsx

@@ -0,0 +1,96 @@
+'use client';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+const RightSidebarContext = createContext<HTMLElement | null>(null);
+
+export function RightSidebar({ children, className, ...props }: ComponentProps<'div'>) {
+  const [el, setEl] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    if (!el) return;
+    const onWheel = (event: WheelEvent) => {
+      let node = event.target as HTMLElement | null;
+      while (node && node !== el) {
+        const style = getComputedStyle(node);
+        if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+          const canScroll = event.deltaY > 0
+            ? node.scrollTop + node.clientHeight < node.scrollHeight - 1
+            : node.scrollTop > 0;
+          if (canScroll) return;
+        }
+        node = node.parentElement;
+      }
+      const page = document.getElementById('page')?.parentElement;
+      if (!page || page.scrollHeight <= page.clientHeight) return;
+      event.preventDefault();
+      page.scrollBy({ top: event.deltaY });
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [el]);
+  return (
+    <RightSidebarContext.Provider value={el}>
+      {children}
+      <div
+        ref={setEl}
+        data-slot="right-sidebar"
+        className={cn('flex min-h-0 flex-col gap-2 lg:my-2 lg:w-96 lg:px-3 [grid-area:right] [grid-row:main]', className)}
+        {...props}
+      />
+    </RightSidebarContext.Provider>
+  );
+}
+
+export function RightSidebarPortal({ children }: ComponentProps<'div'>) {
+  const el = useContext(RightSidebarContext);
+  return el ? createPortal(children, el) : null;
+}
+
+export function RightSidebarPanel({
+  header,
+  footer,
+  children,
+  className,
+  ...props
+}: ComponentProps<'div'> & { header?: ReactNode; footer?: ReactNode }) {
+  return (
+    <div
+      data-slot="panel"
+      className={cn('hidden h-full min-h-0 w-90 min-w-0 flex-col lg:flex', className)}
+      {...props}
+    >
+      {header}
+      {children}
+      {footer}
+    </div>
+  );
+}
+
+export function RightSidebarPanelHeader({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="panel-header"
+      className={cn('flex shrink-0 items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+export function RightSidebarPanelBody({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="panel-body"
+      className={cn('flex min-h-0 flex-1 flex-col', className)}
+      {...props}
+    />
+  );
+}
+

package/src/components/layouts/tree-context.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import { useMemo, useRef, type ReactNode } from 'react';
+import type * as PageTree from '@terrafirmagreg-team/translate/types/tree';
+import { PathContext, TreeContext } from '@terrafirmagreg-team/ui/hooks/use-tree';
+import { searchPath } from '@terrafirmagreg-team/ui/lib/tree';
+
+export function TreeContextProvider({
+  tree: rawTree,
+  children,
+}: {
+  tree: PageTree.Root;
+  children: ReactNode;
+}) {
+  const nextIdRef = useRef(0);
+  const pathname = usePathname();
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: reset memoized tree only when its $id changes
+  const tree = useMemo(() => rawTree, [rawTree.$id]);
+
+  const path = useMemo(() => {
+    return (
+      searchPath(tree.children, pathname) ??
+      (tree.fallback ? searchPath(tree.fallback.children, pathname) : null) ??
+      []
+    );
+  }, [tree, pathname]);
+
+  const root =
+    (path.findLast(
+      (item) => item.type === 'folder' && item.root,
+    ) as PageTree.Folder | undefined) ?? tree;
+  root.$id ??= String(nextIdRef.current++);
+
+  return (
+    <TreeContext
+      value={useMemo(() => ({ root, full: tree }), [root, tree])}
+    >
+      <PathContext value={path}>{children}</PathContext>
+    </TreeContext>
+  );
+}
+