@squadbase/vantage 0.6.2 → 0.7.0-dev1.1197de7

package/registry/ui/app-shell.tsx

@@ -0,0 +1,424 @@
+// Copied by `vantage add ui app-shell`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/app-shell.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * AppShell — the outermost application frame. `variant="sidebar"` (default)
+ * renders a collapsible sidebar with nested nav groups; `variant="header"`
+ * collapses the same nav into a single select in a top bar.
+ *
+ * Navigation is router-agnostic: pass `linkComponent` to render links with your
+ * router's Link, or leave it and `onNavigate` handles the header variant.
+ */
+import { forwardRef, type ElementType, type ReactNode } from "react"
+import { ChevronRight } from "lucide-react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@squadbase/vantage/ui"
+import { Separator } from "@squadbase/vantage/ui"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@squadbase/vantage/ui"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@squadbase/vantage/ui"
+import type { NavGroup, NavItem } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
+
+const PAGE_PLACEHOLDER = { ja: "ページを選択", en: "Select a page" }
+
+export interface AppShellSidebarProps {
+  variant?: "sidebar"
+  groups: NavGroup[]
+  actions?: ReactNode
+  header?: ReactNode
+  children: ReactNode
+  defaultOpen?: boolean
+  className?: string
+  linkComponent?: ElementType
+  onNavigate?: (href: string) => void
+}
+
+export interface AppShellHeaderProps {
+  variant: "header"
+  groups: NavGroup[]
+  actions?: ReactNode
+  header?: ReactNode
+  children: ReactNode
+  className?: string
+  linkComponent?: ElementType
+  onNavigate?: (href: string) => void
+}
+
+export type AppShellProps = AppShellSidebarProps | AppShellHeaderProps
+
+/** Nested groups collapse to their leaves — the select is a flat list. */
+function flattenItems(item: NavItem): NavItem[] {
+  if (item.children && item.children.length > 0) {
+    return item.children.flatMap(flattenItems)
+  }
+  return [item]
+}
+
+function NavSelect({
+  groups,
+  onNavigate,
+}: {
+  groups: NavGroup[]
+  onNavigate: (href: string) => void
+}) {
+  const allItems = groups.flatMap((g) => g.items.flatMap(flattenItems))
+  const currentValue = allItems.find((item) => item.isActive)?.href ?? ""
+  // Base UI's SelectValue renders the raw value (the href) unless `items` maps
+  // it to a label, so pass the page names explicitly.
+  const selectItems = allItems.map((item) => ({ value: item.href, label: item.label }))
+  const placeholder = PAGE_PLACEHOLDER[uiLanguage(useLocale())]
+
+  return (
+    <Select
+      items={selectItems}
+      value={currentValue}
+      onValueChange={(href) => {
+        // Base UI reports `null` when the selection is cleared; there is no
+        // page to navigate to in that case.
+        if (href !== null) onNavigate(href)
+      }}
+    >
+      <SelectTrigger size="sm" className="w-48">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      {/*
+        Page titles are author-written and often longer than the 12rem trigger,
+        so the list is allowed to grow past the anchor width (bounded by the
+        viewport) instead of clamping every title to the trigger's width.
+      */}
+      <SelectContent
+        align="start"
+        className="w-auto min-w-(--anchor-width) max-w-[min(24rem,var(--available-width))]"
+      >
+        {groups.map((group, index) => (
+          <SelectGroup key={group.label ?? index}>
+            {group.label && <SelectLabel>{group.label}</SelectLabel>}
+            {group.items.flatMap(flattenItems).map((item) => (
+              <SelectItem key={item.href} value={item.href} disabled={item.disabled}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+function NavItemWithChildren({
+  item,
+  linkComponent: LinkComponent = "a",
+}: {
+  item: NavItem
+  linkComponent?: ElementType
+}) {
+  return (
+    <Collapsible
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+      render={<SidebarMenuItem />}
+    >
+      <CollapsibleTrigger
+        render={
+          <SidebarMenuButton
+            tooltip={item.label}
+            aria-disabled={item.disabled}
+            className={cn(item.disabled && "pointer-events-none")}
+          />
+        }
+      >
+        {item.icon && <item.icon />}
+        <span>{item.label}</span>
+        <ChevronRight className="ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" />
+      </CollapsibleTrigger>
+      {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          {item.children!.map((child) => (
+            <SidebarMenuSubItem key={child.href}>
+              <SidebarMenuSubButton
+                isActive={child.isActive}
+                render={
+                  <LinkComponent
+                    href={child.href}
+                    aria-disabled={child.disabled}
+                    tabIndex={child.disabled ? -1 : undefined}
+                    className={cn(child.disabled && "pointer-events-none opacity-50")}
+                  />
+                }
+              >
+                {child.icon && <child.icon />}
+                <span>{child.label}</span>
+              </SidebarMenuSubButton>
+            </SidebarMenuSubItem>
+          ))}
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+function NavItemLink({
+  item,
+  linkComponent: LinkComponent = "a",
+}: {
+  item: NavItem
+  linkComponent?: ElementType
+}) {
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        tooltip={item.label}
+        isActive={item.isActive}
+        render={
+          <LinkComponent
+            href={item.href}
+            aria-disabled={item.disabled}
+            tabIndex={item.disabled ? -1 : undefined}
+            className={cn(item.disabled && "pointer-events-none")}
+          />
+        }
+      >
+        {item.icon && <item.icon />}
+        <span>{item.label}</span>
+      </SidebarMenuButton>
+      {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+    </SidebarMenuItem>
+  )
+}
+
+const defaultNavigate = (href: string) => {
+  window.location.assign(href)
+}
+
+export const AppShell = forwardRef<HTMLDivElement, AppShellProps>((props, ref) => {
+  const {
+    variant = "sidebar",
+    groups,
+    actions,
+    header,
+    children,
+    className,
+    linkComponent,
+    onNavigate = defaultNavigate,
+  } = props
+
+  if (variant === "header") {
+    return (
+      <div ref={ref} data-slot="app-shell" className={cn("flex h-full flex-col", className)}>
+        {header !== undefined ? (
+          header
+        ) : (
+          <header className="flex h-14 shrink-0 items-center gap-3 border-b px-4">
+            {groups.length > 0 && <NavSelect groups={groups} onNavigate={onNavigate} />}
+            {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+          </header>
+        )}
+        <main className="flex-1 overflow-auto">{children}</main>
+      </div>
+    )
+  }
+
+  const { defaultOpen = true } = props as AppShellSidebarProps
+
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      <Sidebar data-slot="app-sidebar" collapsible="offcanvas">
+        <SidebarContent>
+          {groups.map((group, index) => (
+            <SidebarGroup key={group.label ?? index}>
+              {group.label && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
+              <SidebarMenu>
+                {group.items.map((item) =>
+                  item.children && item.children.length > 0 ? (
+                    <NavItemWithChildren
+                      key={item.href}
+                      item={item}
+                      linkComponent={linkComponent}
+                    />
+                  ) : (
+                    <NavItemLink key={item.href} item={item} linkComponent={linkComponent} />
+                  ),
+                )}
+              </SidebarMenu>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+        {actions && <SidebarFooter>{actions}</SidebarFooter>}
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset ref={ref} data-slot="app-shell" className={className}>
+        {header !== undefined ? (
+          header
+        ) : (
+          <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="h-4" />
+          </header>
+        )}
+        <main className="flex-1 overflow-auto">{children}</main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+})
+AppShell.displayName = "AppShell"