@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/layouts/mdi-main/mdi-sidebar-navigation.tsx

@@ -0,0 +1,226 @@
+import { ChevronRightIcon, LayoutDashboardIcon } from 'lucide-react'
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@devxcrew/react-ui/components/collapsible'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@devxcrew/react-ui/components/sidebar'
+import { cn } from '@devxcrew/react-ui/lib/utils'
+
+import type { MdiNavigationItem, MdiNavigationSection } from './mdi-types'
+import { usePersistentOpenState } from './use-mdi-sidebar-state'
+
+export function NavigationSection({
+  section,
+  stateKey,
+}: {
+  section: MdiNavigationSection
+  stateKey?: string
+}) {
+  const hasActiveItem = section.items.some(hasActiveNavigationItem)
+  const [open, setOpen] = usePersistentOpenState(stateKey, section.defaultOpen ?? hasActiveItem)
+  const SectionIcon = section.icon ?? LayoutDashboardIcon
+
+  if (!section.label) {
+    return (
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <NavigationItems items={section.items} stateKey={stateKey} />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    )
+  }
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="group/navigation-section">
+      <SidebarGroup className="px-2 py-0.5">
+        <SidebarGroupLabel
+          render={
+            <CollapsibleTrigger className="h-9 w-full cursor-pointer gap-2 rounded-md px-2.5 text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground" />
+          }
+        >
+          <SectionIcon className="size-4" />
+          <span>{section.label}</span>
+          <ChevronRightIcon className="ml-auto size-4 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-open/navigation-section:rotate-90 motion-reduce:transition-none" />
+        </SidebarGroupLabel>
+        <CollapsibleContent className="h-0 overflow-hidden opacity-0 transition-[height,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-open:h-[var(--collapsible-panel-height)] data-open:opacity-100 motion-reduce:transition-none">
+          <SidebarGroupContent className="ml-5 w-auto border-l border-sidebar-border/80 py-1 pr-1 pl-2.5">
+            <NavigationItems compact items={section.items} stateKey={stateKey} />
+          </SidebarGroupContent>
+        </CollapsibleContent>
+      </SidebarGroup>
+    </Collapsible>
+  )
+}
+
+function NavigationItems({
+  compact = false,
+  items,
+  stateKey,
+}: {
+  compact?: boolean
+  items: MdiNavigationItem[]
+  stateKey?: string
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <NavigationItem
+          compact={compact}
+          item={item}
+          key={`${item.label}-${item.href ?? 'group'}`}
+          stateKey={stateKey ? `${stateKey}:item:${item.label}` : undefined}
+        />
+      ))}
+    </SidebarMenu>
+  )
+}
+
+function NavigationItem({
+  compact,
+  item,
+  stateKey,
+}: {
+  compact: boolean
+  item: MdiNavigationItem
+  stateKey?: string
+}) {
+  const children = item.children ?? []
+  if (children.length === 0) {
+    return (
+      <SidebarMenuItem>
+        <NavigationButton compact={compact} item={item} />
+        {item.badge !== undefined ? <SidebarMenuBadge>{item.badge}</SidebarMenuBadge> : null}
+      </SidebarMenuItem>
+    )
+  }
+
+  return <NavigationBranch compact={compact} item={item} stateKey={stateKey} />
+}
+
+function NavigationBranch({
+  compact,
+  item,
+  nested = false,
+  stateKey,
+}: {
+  compact: boolean
+  item: MdiNavigationItem
+  nested?: boolean
+  stateKey?: string
+}) {
+  const children = item.children ?? []
+  const containsActive = children.some(hasActiveNavigationItem)
+  const [open, setOpen] = usePersistentOpenState(stateKey, item.defaultOpen ?? containsActive)
+  const Icon = item.icon
+
+  const content = (
+    <Collapsible open={open} onOpenChange={setOpen} className="group/navigation-branch">
+      <CollapsibleTrigger
+        className={cn(
+          'flex h-8 w-full cursor-pointer items-center gap-2 rounded-md px-2 text-left text-sm text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+          compact && 'px-2',
+        )}
+      >
+        {Icon ? <Icon className="size-4 shrink-0" /> : <span className="size-4 shrink-0" />}
+        <span className="min-w-0 flex-1 truncate font-medium">{item.label}</span>
+        <ChevronRightIcon className="size-3.5 shrink-0 transition-transform duration-200 group-data-open/navigation-branch:rotate-90 motion-reduce:transition-none" />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="h-0 overflow-hidden opacity-0 transition-[height,opacity] duration-200 ease-out data-open:h-[var(--collapsible-panel-height)] data-open:opacity-100 motion-reduce:transition-none">
+        <SidebarMenuSub className="my-1 mr-0 ml-3.5">
+          {children.map((child) => (
+            <SidebarMenuSubItem key={`${child.label}-${child.href ?? 'group'}`}>
+              <NavigationSubtree
+                item={child}
+                stateKey={stateKey ? `${stateKey}:child:${child.label}` : undefined}
+              />
+            </SidebarMenuSubItem>
+          ))}
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+
+  return nested ? content : <SidebarMenuItem>{content}</SidebarMenuItem>
+}
+
+function NavigationSubtree({ item, stateKey }: { item: MdiNavigationItem; stateKey?: string }) {
+  const children = item.children ?? []
+  if (children.length === 0) return <NavigationSubButton item={item} />
+
+  return <NavigationBranch compact item={item} nested stateKey={stateKey} />
+}
+
+function NavigationSubButton({ item }: { item: MdiNavigationItem }) {
+  const Icon = item.icon
+  const content = (
+    <>
+      {Icon ? <Icon /> : <span className="size-4 shrink-0" />}
+      <span>{item.label}</span>
+    </>
+  )
+
+  return item.href ? (
+    <SidebarMenuSubButton
+      isActive={item.active}
+      render={<a href={item.href} />}
+      onClick={item.onSelect}
+    >
+      {content}
+    </SidebarMenuSubButton>
+  ) : (
+    <SidebarMenuSubButton
+      isActive={item.active}
+      render={<button type="button" />}
+      onClick={item.onSelect}
+    >
+      {content}
+    </SidebarMenuSubButton>
+  )
+}
+
+function hasActiveNavigationItem(item: MdiNavigationItem): boolean {
+  return item.active === true || item.children?.some(hasActiveNavigationItem) === true
+}
+
+function NavigationButton({ compact, item }: { compact: boolean; item: MdiNavigationItem }) {
+  const Icon = item.icon
+  const content = (
+    <>
+      {Icon ? <Icon /> : <span className="size-4 shrink-0" />}
+      <span>{item.label}</span>
+    </>
+  )
+
+  return item.href ? (
+    <SidebarMenuButton
+      className={compact ? 'h-8 px-2' : undefined}
+      isActive={item.active}
+      render={<a href={item.href} />}
+      onClick={item.onSelect}
+    >
+      {content}
+    </SidebarMenuButton>
+  ) : (
+    <SidebarMenuButton
+      className={compact ? 'h-8 px-2' : undefined}
+      isActive={item.active}
+      render={<button type="button" />}
+      onClick={item.onSelect}
+    >
+      {content}
+    </SidebarMenuButton>
+  )
+}

package/src/layouts/mdi-main/mdi-sidebar.tsx

@@ -0,0 +1,110 @@
+import { PlusIcon, Settings2Icon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "@devxcrew/react-ui/components/button";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@devxcrew/react-ui/components/sidebar";
+import { cn } from "@devxcrew/react-ui/lib/utils";
+import { TopologyMarker, TopologyRegion } from "../../features/interface-topology";
+
+import { NavigationSection } from "./mdi-sidebar-navigation";
+import type { MdiNavigationSection, MdiPrimaryAction } from "./mdi-types";
+import { useMdiTopology } from "./mdi-topology";
+import { usePersistentScrollPosition } from "./use-mdi-sidebar-state";
+
+type MdiSidebarProps = {
+  navigation: MdiNavigationSection[];
+  onOpenFeatures: () => void;
+  primaryAction?: MdiPrimaryAction | null;
+  sidebarContent?: ReactNode;
+  sidebarContentClassName?: string;
+  sidebarFooter?: ReactNode | null;
+  sidebarFooterClassName?: string;
+  stateKey?: string;
+};
+
+export function MdiSidebar({
+  navigation,
+  onOpenFeatures,
+  primaryAction,
+  sidebarContent,
+  sidebarContentClassName,
+  sidebarFooter,
+  sidebarFooterClassName,
+  stateKey,
+}: MdiSidebarProps) {
+  const topology = useMdiTopology();
+  const PrimaryActionIcon = primaryAction?.icon ?? PlusIcon;
+  const scrollPosition = usePersistentScrollPosition(stateKey ? `${stateKey}:scroll-position` : undefined);
+
+  return (
+    <Sidebar
+      className="absolute h-full data-[ito-highlighted=true]:ring-2 data-[ito-highlighted=true]:ring-inset data-[ito-highlighted=true]:ring-violet-700"
+      collapsible="offcanvas"
+      {...topology.regionProps("02")}
+    >
+      <TopologyMarker id="02" topology={topology} />
+      <SidebarContent
+        className={cn("scrollbar-gutter-stable scrollbar-slim pt-0", sidebarContentClassName)}
+        {...scrollPosition}
+      >
+        {primaryAction ? (
+          <TopologyRegion as={SidebarGroup} className="px-3 pt-3" id="02.2" topology={topology}>
+            <Button className="w-full justify-start" variant="secondary" onClick={primaryAction.onSelect}>
+              <PrimaryActionIcon />
+              {primaryAction.label}
+            </Button>
+          </TopologyRegion>
+        ) : null}
+        {sidebarContent !== undefined ? (
+          sidebarContent
+        ) : (
+          <TopologyRegion as="div" className="min-h-0 flex-1" id="02.3" topology={topology}>
+              {navigation.map((section, index) => (
+                <NavigationSection
+                  key={section.label ?? index}
+                  section={section}
+                  stateKey={stateKey ? `${stateKey}:section:${section.label ?? index}` : undefined}
+                />
+              ))}
+          </TopologyRegion>
+        )}
+      </SidebarContent>
+      {sidebarFooter === undefined ? (
+        <TopologyRegion
+          as={SidebarFooter}
+          className={cn("border-t p-3", sidebarFooterClassName)}
+          id="02.4"
+          topology={topology}
+        >
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton render={<button type="button" />} onClick={onOpenFeatures}>
+                <Settings2Icon />
+                <span>Settings</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </TopologyRegion>
+      ) : sidebarFooter === null ? null : (
+        <SidebarFooter className={cn("border-t p-3", sidebarFooterClassName)}>{sidebarFooter}</SidebarFooter>
+      )}
+      <TopologyRegion
+        as="div"
+        className="pointer-events-none absolute inset-y-0 right-0 w-4 [&>[data-ito-marker]]:left-auto [&>[data-ito-marker]]:right-2 [&>[data-ito-marker]]:top-20"
+        id="02.5"
+        topology={topology}
+      >
+        <SidebarRail className="pointer-events-auto" />
+      </TopologyRegion>
+    </Sidebar>
+  );
+}

package/src/layouts/mdi-main/mdi-status-bar.tsx

@@ -0,0 +1,26 @@
+import { Separator } from '@devxcrew/react-ui/components/separator'
+import type { ReactNode } from 'react'
+import { TopologyMarker } from '../../features/interface-topology'
+import { useMdiTopology } from './mdi-topology'
+
+type MdiStatusBarProps = {
+  statusLabel: string
+  statusEnd?: ReactNode
+  workspaceTitle: string
+}
+
+export function MdiStatusBar({ statusEnd, statusLabel, workspaceTitle }: MdiStatusBarProps) {
+  const topology = useMdiTopology()
+  return (
+    <footer
+      className="relative flex h-7 shrink-0 items-center border-t bg-muted/30 px-3 text-xs text-muted-foreground data-[ito-highlighted=true]:ring-2 data-[ito-highlighted=true]:ring-inset data-[ito-highlighted=true]:ring-violet-700"
+      {...topology.regionProps('04')}
+    >
+      <TopologyMarker id="04" topology={topology} />
+      <span>{statusLabel}</span>
+      <Separator orientation="vertical" className="mx-2 h-3" />
+      <span className="truncate">{workspaceTitle}</span>
+      {statusEnd ? <span className="ml-auto shrink-0">{statusEnd}</span> : null}
+    </footer>
+  )
+}

package/src/layouts/mdi-main/mdi-top-menu-control.ts

@@ -0,0 +1,4 @@
+export const mdiTopMenuSurfaceClassName =
+  'border border-border/80 bg-background text-foreground shadow-sm transition-colors hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring'
+
+export const mdiTopMenuButtonClassName = `${mdiTopMenuSurfaceClassName} relative size-10 rounded-full p-0`

package/src/layouts/mdi-main/mdi-top-menu.tsx

@@ -0,0 +1,117 @@
+import { MenuIcon, type LucideIcon } from 'lucide-react'
+
+import { Button } from '@devxcrew/react-ui/components/button'
+import { useSidebar } from '@devxcrew/react-ui/components/sidebar'
+import { TopologyMarker, TopologyRegion } from '../../features/interface-topology'
+
+import { MdiAppSwitcher } from './mdi-app-switcher'
+import { MdiGlobalSearch } from './mdi-global-search'
+import { MdiNotificationsMenu } from './mdi-notifications-menu'
+import { MdiProfileMenu } from './mdi-profile-menu'
+import { useMdiTopology } from './mdi-topology'
+import type {
+  MdiAppItem,
+  MdiFeatures,
+  MdiNavigationSection,
+  MdiNotification,
+  MdiUser,
+} from './mdi-types'
+
+type MdiTopMenuProps = {
+  applicationIcon: LucideIcon
+  applicationLogoUrl?: string
+  applicationName: string
+  apps: MdiAppItem[]
+  features: MdiFeatures
+  notificationCount: number
+  notifications: readonly MdiNotification[]
+  navigation: MdiNavigationSection[]
+  searchPlaceholder: string
+  searchValue?: string
+  user: MdiUser
+  onSearchChange?: (value: string) => void
+}
+
+export function MdiTopMenu({
+  applicationIcon: ApplicationIcon,
+  applicationLogoUrl,
+  applicationName,
+  apps,
+  features,
+  notificationCount,
+  notifications,
+  navigation,
+  searchPlaceholder,
+  searchValue,
+  user,
+  onSearchChange,
+}: MdiTopMenuProps) {
+  const { toggleSidebar } = useSidebar()
+  const topology = useMdiTopology()
+
+  return (
+    <header
+      className="relative flex h-14 shrink-0 items-center border-t-4 border-t-emerald-50 border-b border-b-border bg-background shadow-sm data-[ito-highlighted=true]:ring-2 data-[ito-highlighted=true]:ring-inset data-[ito-highlighted=true]:ring-violet-700"
+      {...topology.regionProps('01')}
+    >
+      <TopologyMarker id="01" topology={topology} />
+      <TopologyRegion
+        as="div"
+        className="grid h-full w-14 shrink-0 place-items-center border-r"
+        id="01.1"
+        topology={topology}
+      >
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={toggleSidebar}
+          aria-label="Toggle application navigation"
+        >
+          <MenuIcon />
+        </Button>
+      </TopologyRegion>
+      <div className="flex min-w-0 flex-1 items-center gap-5 px-5">
+        <TopologyRegion
+          as="div"
+          className="flex w-24 shrink-0 items-center gap-2 text-sm font-semibold"
+          id="01.2"
+          topology={topology}
+        >
+          {applicationLogoUrl ? (
+            <img alt="" className="size-7 shrink-0 object-contain" src={applicationLogoUrl} />
+          ) : (
+            <ApplicationIcon className="size-4" />
+          )}
+          <span className="truncate">{applicationName}</span>
+        </TopologyRegion>
+        <div className="ml-auto flex shrink-0 items-center gap-2">
+          <TopologyRegion as="div" id="01.3" topology={topology}>
+            <MdiGlobalSearch
+              applicationName={applicationName}
+              apps={apps}
+              navigation={navigation}
+              onSearchChange={onSearchChange}
+              placeholder={searchPlaceholder}
+              value={searchValue}
+            />
+          </TopologyRegion>
+          {features.notifications ? (
+            <TopologyRegion as="div" id="01.4" topology={topology}>
+              <MdiNotificationsMenu count={notificationCount} notifications={notifications} />
+            </TopologyRegion>
+          ) : null}
+          {features.appSwitcher ? (
+            <TopologyRegion as="div" id="01.5" topology={topology}>
+              <MdiAppSwitcher apps={apps} />
+            </TopologyRegion>
+          ) : null}
+          {features.profileMenu ? (
+            <TopologyRegion as="div" id="01.6" topology={topology}>
+              <MdiProfileMenu user={user} />
+            </TopologyRegion>
+          ) : null}
+        </div>
+      </div>
+    </header>
+  )
+}