@nocobase/app-template-default 0.0.0-stage → 1.0.0-beta.57

package/client/components/route-overlay.tsx

@@ -0,0 +1,190 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { useTranslation } from '@nocobase/i18n/client';
+import { XIcon } from 'lucide-react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import { useLocation, useNavigate, type To } from 'react-router';
+
+import { Button } from '#components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+} from '#components/ui/dialog';
+import { cn } from 'cn';
+
+import { RouteOverlayContext } from './use-route-overlay.js';
+
+export interface RouteOverlayProps {
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  readonly children?: ReactNode;
+  readonly footer?: ReactNode;
+  /** Where closing navigates. Defaults to the parent route, keeping the current search string. */
+  readonly closeTo?: To;
+  /** Runs before every close; resolving `false` keeps the overlay open, for example to guard unsaved changes. */
+  readonly beforeClose?: () => boolean | Promise<boolean>;
+  readonly className?: string;
+}
+
+// Lets an overlay rendered through another overlay's outlet return focus into
+// the enclosing panel. Two overlays reached by one URL mount in the same
+// commit, so the nested one never observes the parent panel taking focus and
+// would otherwise fall back to `document.body`.
+const ParentPopupContext =
+  createContext<RefObject<HTMLDivElement | null> | null>(null);
+
+/**
+ * The shared implementation of `RouteDialog` and `RouteDrawer`: a modal that is open for as long as its route matches,
+ * and closes by navigating away from it. Route registration stays with the application.
+ */
+export function RouteOverlay({
+  title,
+  description,
+  children,
+  footer,
+  closeTo,
+  beforeClose,
+  className,
+  drawer = false,
+}: RouteOverlayProps & { readonly drawer?: boolean }): ReactElement {
+  const { t } = useTranslation();
+  const parentPopup = useContext(ParentPopupContext);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+  useLayoutEffect(() => {
+    previousFocusRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+  }, []);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [closingLocation, setClosingLocation] = useState<
+    typeof location | null
+  >(null);
+  const isClosing = closingLocation === location;
+  const pendingRef = useRef<Promise<void> | null>(null);
+  const generationRef = useRef(0);
+
+  // A still-mounted parent can change location while its confirmation is pending.
+  // Invalidate that request as well as requests from an unmounted route.
+  useLayoutEffect(() => {
+    generationRef.current += 1;
+    pendingRef.current = null;
+    return () => {
+      generationRef.current += 1;
+    };
+  }, [location]);
+
+  const close = useCallback((): Promise<void> => {
+    if (pendingRef.current) return pendingRef.current;
+    const requestGeneration = generationRef.current;
+    setClosingLocation(location);
+    const request = Promise.resolve()
+      .then(async () => {
+        const allowed = beforeClose ? await beforeClose() : true;
+        if (allowed && generationRef.current === requestGeneration) {
+          await navigate(
+            closeTo ?? { pathname: '..', search: location.search, hash: '' },
+            { relative: 'route', replace: true },
+          );
+        }
+      })
+      .finally(() => {
+        if (generationRef.current === requestGeneration) {
+          pendingRef.current = null;
+          setClosingLocation(null);
+        }
+      });
+    pendingRef.current = request;
+    return request;
+  }, [beforeClose, closeTo, location, navigate]);
+  const value = useMemo(() => ({ close, isClosing }), [close, isClosing]);
+
+  return (
+    <RouteOverlayContext.Provider value={value}>
+      {/* Covers the panel body too, so an overlay placed at this page's outlet
+          finds the enclosing panel without knowing where the outlet lives. */}
+      <ParentPopupContext.Provider value={popupRef}>
+        <Dialog
+          open
+          onOpenChange={(open) => {
+            if (!open)
+              void close().catch((error: unknown) => {
+                console.error('Failed to close route overlay', error);
+              });
+          }}
+        >
+          <DialogPortal>
+            {/* Each nested panel needs its own backdrop above its parent panel. */}
+            <DialogOverlay forceRender />
+            <DialogPrimitive.Popup
+              ref={popupRef}
+              finalFocus={() => {
+                const previous = previousFocusRef.current;
+                if (parentPopup?.current) {
+                  return previous?.isConnected &&
+                    parentPopup.current.contains(previous)
+                    ? previous
+                    : parentPopup.current;
+                }
+                return true;
+              }}
+              className={cn(
+                'fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-popover text-popover-foreground shadow-lg outline-none duration-150 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',
+                'flex max-h-[calc(100dvh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl',
+                // The viewport constraints are deliberate; all ordinary styling uses theme tokens.
+                drawer &&
+                  'top-0 right-0 left-auto h-dvh max-h-dvh w-full max-w-full translate-x-0 translate-y-0 rounded-none sm:max-w-xl data-open:slide-in-from-right data-open:zoom-in-100',
+                className,
+              )}
+            >
+              <header className='shrink-0 space-y-2 border-b p-4 pr-12'>
+                <DialogTitle>{title}</DialogTitle>
+                {description != null && (
+                  <DialogDescription>{description}</DialogDescription>
+                )}
+              </header>
+              <div className='min-h-0 flex-1 overflow-y-auto p-4'>
+                {children}
+              </div>
+              {footer != null && (
+                <footer className='flex shrink-0 flex-wrap justify-end gap-2 border-t p-4'>
+                  {footer}
+                </footer>
+              )}
+              <DialogClose
+                render={
+                  <Button
+                    variant='ghost'
+                    size='icon-sm'
+                    className='absolute top-2 right-2'
+                  />
+                }
+              >
+                <XIcon />
+                <span className='sr-only'>
+                  {t('routeOverlay.close', { defaultValue: 'Close' })}
+                </span>
+              </DialogClose>
+            </DialogPrimitive.Popup>
+          </DialogPortal>
+        </Dialog>
+      </ParentPopupContext.Provider>
+    </RouteOverlayContext.Provider>
+  );
+}

package/client/components/ui/alert.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from 'cn';
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot='alert'
+      role='alert'
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='alert-title'
+      className={cn(
+        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='alert-description'
+      className={cn(
+        'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='alert-action'
+      className={cn('absolute top-2 right-2', className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/client/components/ui/badge.tsx

@@ -0,0 +1,51 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from 'cn';
+
+const badgeVariants = cva(
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary:
+          'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+        outline:
+          'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost:
+          'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'badge',
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/client/components/ui/breadcrumb.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cn } from 'cn';
+import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      aria-label='breadcrumb'
+      data-slot='breadcrumb'
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot='breadcrumb-list'
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot='breadcrumb-item'
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'a'>) {
+  return useRender({
+    defaultTagName: 'a',
+    props: mergeProps<'a'>(
+      {
+        className: cn('transition-colors hover:text-foreground', className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'breadcrumb-link',
+    },
+  });
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='breadcrumb-page'
+      role='link'
+      aria-disabled='true'
+      aria-current='page'
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot='breadcrumb-separator'
+      role='presentation'
+      aria-hidden='true'
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='breadcrumb-ellipsis'
+      role='presentation'
+      aria-hidden='true'
+      className={cn(
+        'flex size-5 items-center justify-center [&>svg]:size-4',
+        className,
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className='sr-only'>More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/client/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from 'cn';
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+        destructive:
+          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-sm in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot='button'
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/client/components/ui/collapsible.tsx

@@ -0,0 +1,19 @@
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot='collapsible-trigger' {...props} />
+  );
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot='collapsible-content' {...props} />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };