@terrafirmagreg-team/ui 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/ui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "description": "Shared UI kit",
   "license": "LGPL-3.0-only",

package/src/components/blocks/canvas/flow-viewport.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef } from 'react';
 import {
   useReactFlow,
+  useStore,
   useStoreApi,
 } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
 import { readStoredViewport } from '@terrafirmagreg-team/ui/lib/canvas/viewport';
@@ -46,6 +47,7 @@ export function FlowViewport({
 }) {
   const { setCenter, setViewport, getZoom } = useReactFlow();
   const storeApi = useStoreApi();
+  const paneReady = useStore((s) => s.width > 0 && s.height > 0);
   const initRef = useRef<string | null>(null);
   const preInitRef = useRef<string | null>(null);
   const nodesRef = useRef(nodes);
@@ -66,6 +68,7 @@ export function FlowViewport({
 
   useEffect(() => {
     if (viewSize.w < 1 || viewSize.h < 1) return;
+    if (!paneReady) return;
     if (!ready) {
 
       initRef.current = null;
@@ -170,6 +173,7 @@ export function FlowViewport({
     initFocusId,
     nodes,
     onReady,
+    paneReady,
     ready,
     resetKey,
     restoreViewport,
@@ -229,7 +233,7 @@ export function FlowViewport({
   useEffect(() => {
     if (selectedId === lastSelectedRef.current) return;
     lastSelectedRef.current = selectedId ?? null;
-    if (initRef.current !== resetKey || !selectedId) return;
+    if (initRef.current !== initKey || !selectedId) return;
     if (selectedId === suppressPanRef?.current) return;
     const node = nodesRef.current.find((entry) => entry.id === selectedId);
     if (!node) return;
@@ -237,7 +241,7 @@ export function FlowViewport({
       zoom: getZoom() || focusZoom,
       duration: 300,
     });
-  }, [focusZoom, getZoom, resetKey, selectedId, suppressPanRef, setCenter]);
+  }, [focusZoom, getZoom, initKey, selectedId, suppressPanRef, setCenter]);
 
   return null;
 }

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

@@ -25,14 +25,19 @@ export function Heading({
   return (
     <As
       {...props}
+      onClick={(event) => {
+        props.onClick?.(event);
+        if (event.defaultPrevented) return;
+        if ((event.target as HTMLElement).closest('a,button,input,select,textarea,[role="button"],[role="link"]'))
+          return;
+        window.location.hash = props.id!;
+      }}
       className={cn(
-        'group/heading flex scroll-m-28 flex-row items-center gap-1',
+        'group/heading flex cursor-pointer scroll-m-28 flex-row items-center gap-1',
         props.className,
       )}
     >
-      <a data-card href={`#${props.id}`}>
-        {props.children}
-      </a>
+      {props.children}
       <button
         aria-live="polite"
         className={cn(

package/src/components/layouts/workspace/content.tsx

@@ -0,0 +1,53 @@
+'use client';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { ComponentProps } from 'react';
+
+export function WorkspaceBody({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="workspace-body"
+      {...props}
+      className={cn('prose flex-1', className)}
+    />
+  );
+}
+
+export function WorkspaceDescription({
+  children,
+  className,
+  ...props
+}: ComponentProps<'p'>) {
+  if (children === undefined) return null;
+  return (
+    <p
+      data-slot="workspace-description"
+      {...props}
+      className={cn('mb-8 text-lg text-muted-foreground', className)}
+    >
+      {children}
+    </p>
+  );
+}
+
+export function WorkspaceTitle({ className, ...props }: ComponentProps<'h1'>) {
+  return (
+    <h1
+      data-slot="workspace-title"
+      {...props}
+      className={cn('text-[1.75em] font-semibold', className)}
+    />
+  );
+}
+
+export function WorkspaceFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="workspace-footer"
+      className={cn('mt-auto empty:hidden', className)}
+      {...props}
+    />
+  );
+}

package/src/components/layouts/workspace/index.ts

@@ -0,0 +1,12 @@
+export type {
+  WorkspacePaginationItems,
+  WorkspaceProps,
+} from './workspace';
+export { Workspace } from './workspace';
+export {
+  WorkspaceBody,
+  WorkspaceDescription,
+  WorkspaceTitle,
+  WorkspaceFooter,
+} from './content';
+export { WorkspacePagination } from './pagination';

package/src/components/layouts/workspace/pagination.tsx

@@ -0,0 +1,73 @@
+'use client';
+import { type ComponentProps, useMemo } from 'react';
+import { usePathname } from 'next/navigation';
+import Link from '@terrafirmagreg-team/ui/components/blocks/nav/link';
+import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
+import { useFooterItems } from '@terrafirmagreg-team/ui/hooks/use-tree';
+import { useLocationSearch } from '@terrafirmagreg-team/ui/hooks/page/use-location-search';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { isNavItemActive } from '@terrafirmagreg-team/ui/lib/utils/nav-active';
+import type { WorkspacePaginationItems } from './workspace';
+
+export function WorkspacePagination({
+  items,
+  className,
+  ...props
+}: ComponentProps<'nav'> & { items?: WorkspacePaginationItems }) {
+  const footerList = useFooterItems();
+  const pathname = usePathname();
+  const search = useLocationSearch();
+  const { previous, next } = useMemo(() => {
+    if (items && (items.previous || items.next)) return items;
+    const idx = footerList.findIndex((item) =>
+      isNavItemActive(item.url, pathname, search),
+    );
+    if (idx === -1) return {};
+    return { previous: footerList[idx - 1], next: footerList[idx + 1] };
+  }, [footerList, items, pathname, search]);
+
+  if (!previous && !next) return null;
+  return (
+    <nav
+      data-slot="workspace-pagination"
+      className={cn('@container grid grid-cols-2 gap-3 mt-8', className)}
+      {...props}
+    >
+      {previous && <WorkspacePaginationItem item={previous} next={false} />}
+      {next && <WorkspacePaginationItem item={next} next />}
+    </nav>
+  );
+}
+
+function WorkspacePaginationItem({
+  item,
+  next,
+}: {
+  item: NonNullable<WorkspacePaginationItems['previous']>;
+  next: boolean;
+}) {
+  const t = useTranslations();
+  const Icon = next ? ArrowRightIcon : ArrowLeftIcon;
+
+  return (
+    <Link
+      href={item.url}
+      className={cn(
+        'group flex flex-col gap-1 rounded-2xl border p-4 text-sm transition-colors hover:bg-accent/40 @max-md:col-span-full',
+        next && 'col-start-2 items-end text-end',
+      )}
+    >
+      <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+        {!next && (
+          <Icon className="size-3.5 transition-transform group-hover:-translate-x-0.5 rtl:rotate-180" />
+        )}
+        {next ? t('Next Page', { note: 'ui.next_page' }) : t('Previous Page', { note: 'ui.prev_page' })}
+        {next && (
+          <Icon className="size-3.5 transition-transform group-hover:translate-x-0.5 rtl:rotate-180" />
+        )}
+      </span>
+      <span className="font-medium">{item.name}</span>
+    </Link>
+  );
+}

package/src/components/layouts/workspace/workspace.tsx

@@ -0,0 +1,101 @@
+'use client';
+import type { ComponentProps, ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import type * as PageTree from '@terrafirmagreg-team/translate/types/tree';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { PagePreviewData } from '@terrafirmagreg-team/ui/types/preview';
+import { LeftSidebarExpand } from '@terrafirmagreg-team/ui/components/layouts/left-sidebar';
+import { Breadcrumb } from '@terrafirmagreg-team/ui/components/blocks/nav/breadcrumb';
+import { WorkspaceFooter } from './content';
+import { WorkspacePagination } from './pagination';
+
+export type WorkspacePaginationItems = {
+  previous?: Pick<PageTree.Item, 'name' | 'description' | 'url'>;
+  next?: Pick<PageTree.Item, 'name' | 'description' | 'url'>;
+};
+
+export type WorkspaceProps = ComponentProps<'article'> & {
+  full?: boolean;
+  outlineDropdown?: ReactNode;
+  breadcrumb?: {
+    items?: { name: string; url?: string }[];
+    previews?: Record<string, PagePreviewData>;
+  };
+  pagination?: { items?: WorkspacePaginationItems } | false;
+  actions?: ReactNode;
+  footer?: ReactNode;
+};
+
+export function Workspace({
+  full = false,
+  outlineDropdown,
+  breadcrumb,
+  pagination = {},
+  actions,
+  footer,
+  className,
+  children,
+  ...props
+}: WorkspaceProps) {
+  const crumbs = breadcrumb?.items ?? [];
+  const hasCrumbs = crumbs.length > 0;
+  const pathname = usePathname();
+
+  return (
+    <div
+      key={pathname}
+      id="page-panel"
+      data-slot="workspace-panel"
+      className="@container relative flex flex-col min-w-0 min-h-0 [grid-area:main] mx-2 bg-background md:ms-0 md:my-2 md:overflow-clip md:rounded-2xl md:border md:shadow-sm print:overflow-visible"
+    >
+      <header
+        data-slot="workspace-header"
+        className={cn(
+          'absolute inset-x-0 top-0 z-10 flex items-center gap-1.5 h-(--header-height) ps-6 pe-4 bg-linear-to-b from-background to-transparent pointer-events-none *:pointer-events-auto max-md:hidden',
+          hasCrumbs || outlineDropdown ? 'from-50%' : 'to-40%',
+        )}
+      >
+        <LeftSidebarExpand />
+        {hasCrumbs && (
+          <Breadcrumb items={crumbs} previews={breadcrumb?.previews} />
+        )}
+        {outlineDropdown}
+        <div data-slot="workspace-actions" className="ms-auto">
+          {actions}
+        </div>
+      </header>
+      <div
+        data-slot="workspace-scroll"
+        className="flex flex-1 items-start px-4 md:min-h-0 md:pt-(--header-height) md:px-[max(--spacing(6),calc((100%_-_var(--page-width)_-_var(--toc-width))/2))] md:overflow-y-auto md:overscroll-y-contain md:scrollbar-thin md:scrollbar-gutter-stable md:[--docs-height:calc(var(--layout-height)_-_var(--spacing)*4_-_2px_-_var(--header-height))]"
+      >
+        <article
+          id="page"
+          data-slot="workspace"
+          data-full={full}
+          className={cn(
+            'flex flex-col gap-4 w-full min-w-0 max-w-(--page-width) pt-6 pb-8 md:min-h-(--docs-height)',
+            className,
+          )}
+          {...props}
+        >
+          {hasCrumbs && (
+            <Breadcrumb
+              items={crumbs}
+              previews={breadcrumb?.previews}
+              className="md:hidden"
+            />
+          )}
+          {children}
+          {pagination !== false || footer ? (
+            <WorkspaceFooter>
+              {pagination !== false && (
+                <WorkspacePagination items={pagination.items} />
+              )}
+              {footer}
+            </WorkspaceFooter>
+          ) : null}
+        </article>
+      </div>
+    </div>
+  );
+}

package/styles/workspace.css

@@ -12,6 +12,7 @@
 
 .viewport-body {
   display: flex;
+  flex-direction: column;
   flex: 1;
   max-width: none;
   min-height: 0;