@majapisoftwares/ui 5.0.0 → 6.0.0

package/src/patterns/app-shell.tsx

@@ -1,70 +1,175 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { Button } from "../components/ui/button";
+import { cn } from "cn";
+import {
+  Sidebar,
+  SidebarCollapse,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  type SidebarMode,
+} from "../components/ui/sidebar";
+import { Separator } from "../components/ui/separator";
+import { TooltipProvider } from "../components/ui/tooltip";
 
 export interface NavigationItem {
   id: string;
   label: string;
-  count?: number;
   icon?: ReactNode;
+  count?: number;
+}
+export interface NavigationGroup {
+  label?: string;
+  items: NavigationItem[];
+}
+
+export interface AppShellProps {
+  /** Square logo; stays in place in every sidebar mode. */
+  logo: ReactNode;
+  /** App name next to the logo; fades out when the sidebar is compact. */
+  name: string;
+  navigation: NavigationGroup[];
+  activeId: string;
+  onNavigate: (id: string) => void;
+  /** Rendered in the header next to the sidebar trigger, e.g. breadcrumbs. */
+  header?: ReactNode;
+  /** Rendered at the end of the header, e.g. locale or theme switchers. */
+  actions?: ReactNode;
+  /** Sidebar footer, e.g. a user menu. */
+  footer?: ReactNode;
+  defaultMode?: SidebarMode;
+  defaultWidth?: number;
+  /**
+   * Locks the shell to the viewport height so content (e.g. a `DataTable
+   * fillHeight`) fills the remaining space and scrolls internally.
+   */
+  fillHeight?: boolean;
+  children: ReactNode;
+}
+
+// Items without an icon still need something to show in compact mode.
+function ItemIcon({ item }: { item: NavigationItem }) {
+  return (
+    item.icon ?? (
+      <span
+        aria-hidden="true"
+        className="flex size-4 items-center justify-center text-xs font-semibold"
+      >
+        {item.label.charAt(0).toUpperCase()}
+      </span>
+    )
+  );
+}
+
+// The collapse control lives inside the sidebar; reopening needs one outside.
+// Shown on mobile and, on desktop, only while the sidebar is hidden (CSS, so
+// it is right from the first paint).
+function HeaderTrigger() {
+  return (
+    <div className="flex items-center md:hidden md:group-has-data-[collapsible=offcanvas]/sidebar-wrapper:flex">
+      <SidebarTrigger className="-ml-1" />
+      <Separator
+        orientation="vertical"
+        className="mr-2 ml-2 h-4 self-center!"
+      />
+    </div>
+  );
 }
+
 export function AppShell({
-  title,
-  context,
+  logo,
+  name,
   navigation,
   activeId,
   onNavigate,
+  header,
+  actions,
+  footer,
+  defaultMode,
+  defaultWidth,
+  fillHeight = false,
   children,
-  footer = "Workspace local",
-  brand = "workbench",
-  brandMark = "w.",
-}: {
-  title: string;
-  context?: ReactNode;
-  navigation: NavigationItem[];
-  activeId: string;
-  onNavigate: (id: string) => void;
-  children: ReactNode;
-  footer?: ReactNode;
-  brand?: string;
-  brandMark?: ReactNode;
-}) {
+}: AppShellProps) {
   return (
-    <div className="wb-shell">
-      <aside className="wb-sidebar">
-        <div className="wb-brand">
-          <span>{brandMark}</span>
-          {brand}
-        </div>
-        <nav aria-label="Navegação principal">
-          {navigation.map((item) => (
-            <Button
-              key={item.id}
-              variant="navigation"
-              data-active={activeId === item.id}
-              aria-current={activeId === item.id ? "page" : undefined}
-              onClick={() => onNavigate(item.id)}
-            >
-              {item.icon}
-              {item.label}
-              {item.count !== undefined ? (
-                <span className="ml-auto">{item.count}</span>
-              ) : null}
-            </Button>
-          ))}
-        </nav>
-        <div className="wb-sidebar-footer">{footer}</div>
-      </aside>
-      <div className="min-w-0">
-        <header className="wb-topbar">
-          <span>
-            {brand} / {title}
-          </span>
-          {context}
-        </header>
-        <main className="wb-main">{children}</main>
-      </div>
-    </div>
+    <TooltipProvider delay={600}>
+      <SidebarProvider defaultMode={defaultMode} defaultWidth={defaultWidth}>
+        <Sidebar>
+          {/* Same height as the page header so their controls line up. */}
+          <SidebarHeader className="min-h-14 justify-center">
+            {/* The logo keeps its position across modes; only the name fades,
+                and it is clipped (never squeezed) by the sidebar width. */}
+            <div className="flex h-8 items-center gap-2 overflow-hidden">
+              <div className="flex size-8 shrink-0 items-center justify-center [&>*]:shrink-0">
+                {logo}
+              </div>
+              <span className="flex-1 truncate font-semibold whitespace-nowrap transition-opacity duration-200 ease-linear group-data-[collapsible=icon]:opacity-0">
+                {name}
+              </span>
+              <SidebarCollapse className="group-data-[collapsible=icon]:hidden" />
+            </div>
+            <div className="hidden group-data-[collapsible=icon]:block">
+              <SidebarCollapse />
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            {navigation.map((group, index) => (
+              <SidebarGroup key={group.label ?? index}>
+                {group.label ? (
+                  <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+                ) : null}
+                <SidebarMenu>
+                  {group.items.map((item) => (
+                    <SidebarMenuItem key={item.id}>
+                      <SidebarMenuButton
+                        isActive={item.id === activeId}
+                        tooltip={item.label}
+                        aria-current={item.id === activeId ? "page" : undefined}
+                        onClick={() => onNavigate(item.id)}
+                      >
+                        <ItemIcon item={item} />
+                        <span>{item.label}</span>
+                      </SidebarMenuButton>
+                      {item.count !== undefined ? (
+                        <SidebarMenuBadge>{item.count}</SidebarMenuBadge>
+                      ) : null}
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroup>
+            ))}
+          </SidebarContent>
+          {footer ? <SidebarFooter>{footer}</SidebarFooter> : null}
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset className={fillHeight ? "h-svh min-h-0" : undefined}>
+          <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4 md:px-6">
+            <HeaderTrigger />
+            <div className="min-w-0 flex-1">{header}</div>
+            {actions ? (
+              <div className="flex items-center gap-2">{actions}</div>
+            ) : null}
+          </header>
+          <div
+            className={cn(
+              "flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6",
+              fillHeight && "min-h-0 overflow-hidden",
+            )}
+          >
+            {children}
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
   );
 }