@eggspot/ui 0.0.2 → 0.0.3

package/src/components/DashboardLayout/DashboardLayout.tsx

@@ -1,348 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@eggspot/ui/components/Resizable"
-import { ScrollArea } from "@eggspot/ui/components/ScrollArea"
-import { cn } from "@eggspot/ui/lib/utils"
-import type { ImperativePanelHandle } from "react-resizable-panels"
-
-// Context for sidebar state
-interface DashboardContextValue {
-  sidebarState: "expanded" | "collapsed"
-  setSidebarState: (state: "expanded" | "collapsed") => void
-  toggleSidebar: () => void
-  isMobile: boolean
-  expandedGroups: string[]
-  toggleGroup: (title: string) => void
-  activePath: string
-  setActivePath: (path: string) => void
-  /** Currently open flyout group (for collapsed sidebar) */
-  flyoutGroup: string | null
-  setFlyoutGroup: (group: string | null) => void
-  closeFlyout: () => void
-  /** Sidebar bounding rect for flyout positioning */
-  sidebarRect: DOMRect | null
-  /** @deprecated Use sidebarRect.width instead */
-  sidebarWidth: number
-  setSidebarRect: (rect: DOMRect | null) => void
-}
-
-const DashboardContext = React.createContext<DashboardContextValue | null>(null)
-
-export function useDashboard() {
-  const context = React.useContext(DashboardContext)
-  if (!context) {
-    throw new Error("useDashboard must be used within a DashboardLayout")
-  }
-  return context
-}
-
-export interface DashboardLayoutProps {
-  children: React.ReactNode
-  /** Default sidebar size as percentage (default: 14) */
-  defaultSidebarSize?: number
-  /** Minimum sidebar size as percentage (default: 5) */
-  minSidebarSize?: number
-  /** Maximum sidebar size as percentage (default: 20) */
-  maxSidebarSize?: number
-  /** Collapsed sidebar size as percentage (default: 5) */
-  collapsedSidebarSize?: number
-  /** Size threshold to switch to collapsed mode (default: 8) */
-  collapseThreshold?: number
-  /** Default expanded nav groups */
-  defaultExpandedGroups?: string[]
-  /** Current active path for highlighting */
-  activePath?: string
-  className?: string
-}
-
-export function DashboardLayout({
-  children,
-  defaultSidebarSize = 14,
-  minSidebarSize = 5,
-  maxSidebarSize = 20,
-  collapsedSidebarSize = 5,
-  collapseThreshold = 7,
-  defaultExpandedGroups = [],
-  activePath: initialActivePath = "/",
-  className,
-}: DashboardLayoutProps) {
-  const [sidebarState, setSidebarState] = React.useState<
-    "expanded" | "collapsed"
-  >("expanded")
-  const [isMobile, setIsMobile] = React.useState(false)
-  const [expandedGroups, setExpandedGroups] = React.useState<string[]>(
-    defaultExpandedGroups
-  )
-  const [activePath, setActivePath] = React.useState(initialActivePath)
-  const [flyoutGroup, setFlyoutGroup] = React.useState<string | null>(null)
-  const [sidebarRect, setSidebarRect] = React.useState<DOMRect | null>(null)
-  const sidebarPanelRef = React.useRef<ImperativePanelHandle>(null)
-
-  const closeFlyout = React.useCallback(() => setFlyoutGroup(null), [])
-
-  const toggleSidebar = React.useCallback(() => {
-    const panel = sidebarPanelRef.current
-    if (!panel) return
-
-    if (panel.isCollapsed()) {
-      panel.expand()
-    } else {
-      panel.collapse()
-    }
-  }, [])
-
-  const toggleGroup = React.useCallback((title: string) => {
-    setExpandedGroups((prev) =>
-      prev.includes(title) ? prev.filter((g) => g !== title) : [...prev, title]
-    )
-  }, [])
-
-  React.useEffect(() => {
-    const checkMobile = () => setIsMobile(window.innerWidth < 768)
-    checkMobile()
-    window.addEventListener("resize", checkMobile)
-    return () => window.removeEventListener("resize", checkMobile)
-  }, [])
-
-  const handleResize = React.useCallback(
-    (size: number) => {
-      const newState = size <= collapseThreshold ? "collapsed" : "expanded"
-      setSidebarState(newState)
-      if (newState === "expanded") {
-        setFlyoutGroup(null)
-      }
-    },
-    [collapseThreshold]
-  )
-
-  const sidebar = React.Children.toArray(children).find(
-    (child) => React.isValidElement(child) && child.type === Sidebar
-  )
-  const content = React.Children.toArray(children).find(
-    (child) => React.isValidElement(child) && child.type === DashboardContent
-  )
-
-  return (
-    <DashboardContext.Provider
-      value={{
-        sidebarState,
-        setSidebarState,
-        toggleSidebar,
-        isMobile,
-        expandedGroups,
-        toggleGroup,
-        activePath,
-        setActivePath,
-        flyoutGroup,
-        setFlyoutGroup,
-        closeFlyout,
-        sidebarRect,
-        sidebarWidth: sidebarRect?.width ?? 0,
-        setSidebarRect,
-      }}
-    >
-      <div className={cn("bg-gray-1 h-full", className)}>
-        <ResizablePanelGroup direction="horizontal" className="h-full">
-          <ResizablePanel
-            ref={sidebarPanelRef}
-            order={1}
-            defaultSize={defaultSidebarSize}
-            minSize={minSidebarSize}
-            maxSize={maxSidebarSize}
-            collapsible
-            collapsedSize={collapsedSidebarSize}
-            onResize={handleResize}
-          >
-            {sidebar}
-          </ResizablePanel>
-
-          <ResizableHandle />
-
-          <ResizablePanel
-            order={2}
-            defaultSize={100 - defaultSidebarSize}
-            minSize={60}
-          >
-            {content}
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
-    </DashboardContext.Provider>
-  )
-}
-
-// Sidebar Component
-export interface SidebarProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function Sidebar({ children, className }: SidebarProps) {
-  const { sidebarState, setSidebarRect } = useDashboard()
-  const sidebarRef = React.useRef<HTMLDivElement>(null)
-
-  // Update sidebar rect on resize and scroll
-  React.useEffect(() => {
-    const element = sidebarRef.current
-    if (!element) return
-
-    const updateRect = () => {
-      setSidebarRect(element.getBoundingClientRect())
-    }
-
-    const observer = new ResizeObserver(() => {
-      updateRect()
-    })
-
-    observer.observe(element)
-    updateRect()
-
-    // Also listen for scroll events in case sidebar moves
-    window.addEventListener("scroll", updateRect, true)
-
-    return () => {
-      observer.disconnect()
-      window.removeEventListener("scroll", updateRect, true)
-    }
-  }, [setSidebarRect])
-
-  return (
-    <div
-      ref={sidebarRef}
-      className={cn(
-        "flex h-full flex-col overflow-hidden",
-        "from-gray-2 to-gray-1 bg-linear-to-b",
-        className
-      )}
-      data-state={sidebarState}
-    >
-      {children}
-    </div>
-  )
-}
-
-// Sidebar Header (Logo area)
-export interface SidebarHeaderProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function SidebarHeader({ children, className }: SidebarHeaderProps) {
-  const { sidebarState } = useDashboard()
-
-  return (
-    <div
-      className={cn(
-        "flex shrink-0 items-center p-4 pb-0",
-        sidebarState === "collapsed"
-          ? "flex-col justify-center gap-2 px-3 pt-4"
-          : "justify-between",
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-// Sidebar Nav Container
-export interface SidebarNavProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function SidebarNav({ children, className }: SidebarNavProps) {
-  return (
-    <ScrollArea
-      className={cn(
-        "min-h-0 flex-1 overflow-hidden",
-        "[&>[data-slot=scroll-area-viewport]>div]:!block",
-        className
-      )}
-    >
-      <nav className="px-3 py-2">
-        <div className="space-y-2">{children}</div>
-      </nav>
-    </ScrollArea>
-  )
-}
-
-// Sidebar Footer (pinned to bottom)
-export interface SidebarFooterProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function SidebarFooter({ children, className }: SidebarFooterProps) {
-  const { sidebarState } = useDashboard()
-
-  return (
-    <div
-      className={cn(
-        "border-gray-6/50 mt-auto shrink-0 border-t p-3",
-        sidebarState === "collapsed" && "py-3",
-        className
-      )}
-    >
-      <div className="space-y-1.5">{children}</div>
-    </div>
-  )
-}
-
-// Dashboard Content Area
-export interface DashboardContentProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function DashboardContent({
-  children,
-  className,
-}: DashboardContentProps) {
-  return (
-    <div
-      className={cn(
-        "bg-gray-1 flex h-full flex-col overflow-hidden",
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-// Dashboard Header (in main content area)
-export interface DashboardHeaderProps {
-  children?: React.ReactNode
-  className?: string
-}
-
-export function DashboardHeader({ children, className }: DashboardHeaderProps) {
-  return (
-    <header
-      className={cn(
-        "border-gray-6 flex h-14 shrink-0 items-center justify-between border-b px-4",
-        className
-      )}
-    >
-      {children}
-    </header>
-  )
-}
-
-// Dashboard Main Content
-export interface DashboardMainProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function DashboardMain({ children, className }: DashboardMainProps) {
-  return (
-    <main className={cn("flex-1 overflow-auto", className)}>{children}</main>
-  )
-}