@etus/ui 0.1.1 → 0.1.3

package/src/components/layout/AppShell/AppShell.test.tsx

@@ -1,61 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import * as React from 'react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { AppShell } from './AppShell'
-import { useAppShell } from './AppShell.context'
-
-// Mock resize observer and matchMedia
-beforeAll(() => {
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: vi.fn().mockImplementation((query: string) => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: vi.fn(), // deprecated
-      removeListener: vi.fn(), // deprecated
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  })
-})
-
-const TestComponent = () => {
-  const { variant, sidebarState } = useAppShell()
-  return (
-    <div>
-      <span data-testid="variant">{variant}</span>
-      <span data-testid="sidebar-state">{sidebarState}</span>
-    </div>
-  )
-}
-
-describe('AppShell', () => {
-  it('renders children', () => {
-    render(<AppShell variant="sidebar-header"><div>Content</div></AppShell>)
-    expect(screen.getByText('Content')).toBeInTheDocument()
-  })
-
-  it('provides context', () => {
-    render(
-      <AppShell variant="sidebar-header">
-        <TestComponent />
-      </AppShell>
-    )
-    expect(screen.getByTestId('variant')).toHaveTextContent('sidebar-header')
-    expect(screen.getByTestId('sidebar-state')).toHaveTextContent('expanded')
-  })
-
-  it('applies variant classes', () => {
-    const { container } = render(<AppShell variant="sidebar-header"><div></div></AppShell>)
-    // Check if grid template areas class is present (partial match)
-    expect(container.firstChild).toHaveClass('grid-cols-[auto_1fr]')
-  })
-  
-  it('rail variant applies correct classes', () => {
-    const { container } = render(<AppShell variant="rail-sidebar"><div></div></AppShell>)
-    expect(container.firstChild).toHaveClass('grid-cols-[auto_auto_1fr]')
-  })
-})

package/src/components/layout/AppShell/AppShell.tsx

@@ -1,91 +0,0 @@
-import * as React from "react"
-
-import { useMediaQuery } from "../../../hooks/use-media-query"
-import { cn } from "../../../lib/utils"
-import { AppShellContext, type LayoutVariant } from "./AppShell.context"
-
-const BREAKPOINTS = {
-  MOBILE: "(max-width: 767px)",
-  TABLET: "(min-width: 768px) and (max-width: 1023px)",
-  DESKTOP: "(min-width: 1024px)",
-}
-
-export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  defaultRailState?: 'hidden' | 'visible'
-  defaultSidebarState?: 'collapsed' | 'expanded' | 'hidden'
-  variant: LayoutVariant
-}
-
-export function AppShell({ 
-  children, 
-  variant, 
-  defaultSidebarState = 'expanded',
-  defaultRailState = 'visible',
-  className,
-  ...props 
-}: AppShellProps) {
-  const isMobile = useMediaQuery(BREAKPOINTS.MOBILE)
-  const isTablet = useMediaQuery(BREAKPOINTS.TABLET)
-  const isDesktop = useMediaQuery(BREAKPOINTS.DESKTOP)
-
-  const [sidebarState, setSidebarState] = React.useState(defaultSidebarState)
-  const [railState, setRailState] = React.useState(defaultRailState)
-
-  // Auto-collapse sidebar on mobile/tablet based on plan rules
-  React.useEffect(() => {
-    if (isMobile) {
-      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-you-might-not-need-an-effect/no-derived-state
-      setSidebarState('hidden')
-    } else if (isTablet && ['sidebar-header', 'sidebar-breadcrumb', 'header-sidebar'].includes(variant)) {
-         // Plan: "Collapsed (64px)"
-         // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-you-might-not-need-an-effect/no-derived-state
-         setSidebarState('collapsed')
-    } else if (isDesktop && ['sidebar-header', 'sidebar-breadcrumb', 'header-sidebar'].includes(variant)) {
-         // Plan: "Expanded (240px)"
-         // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-you-might-not-need-an-effect/no-derived-state
-         setSidebarState('expanded')
-       }
-  }, [isMobile, isTablet, isDesktop, variant])
-
-  const toggleSidebar = React.useCallback(() => {
-    setSidebarState(prev => {
-      if (prev === 'expanded') return 'collapsed'
-      if (prev === 'collapsed') return 'expanded'
-      return 'expanded' // if hidden, show
-    })
-  }, [])
-
-  return (
-    <AppShellContext value={{
-      sidebarState,
-      setSidebarState,
-      toggleSidebar,
-      railState,
-      setRailState,
-      isMobile,
-      isTablet,
-      isDesktop,
-      variant
-    }}>
-      <div 
-        className={cn(
-          "grid min-h-screen w-full bg-[color:var(--surface-default)] text-[color:var(--text-primary)] transition-colors duration-300",
-          variant === 'sidebar-header' && "grid-cols-[auto_1fr] grid-rows-[auto_1fr] [grid-template-areas:'sidebar_header''sidebar_content']",
-          variant === 'sidebar-breadcrumb' && "grid-cols-[auto_1fr] grid-rows-[auto_1fr] [grid-template-areas:'sidebar_header''sidebar_content']",
-          variant === 'header-sidebar' && "grid-cols-[auto_1fr] grid-rows-[auto_1fr] [grid-template-areas:'header_header''sidebar_content']",
-          variant === 'header-only' && "grid-cols-[1fr] grid-rows-[auto_1fr] [grid-template-areas:'header''content']",
-          variant === 'centered' && "flex items-center justify-center",
-          variant === 'rail-sidebar' && "grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] [grid-template-areas:'rail_sidebar_header''rail_sidebar_content']",
-          variant === 'rail-only' && "grid-cols-[auto_1fr] grid-rows-[auto_1fr] [grid-template-areas:'rail_header''rail_content']",
-          className
-        )}
-        data-rail-state={railState}
-        data-sidebar-state={sidebarState}
-        data-variant={variant}
-        {...props}
-      >
-        {children}
-      </div>
-    </AppShellContext>
-  )
-}

package/src/components/layout/AppShell/AppShell.variants.ts

@@ -1,21 +0,0 @@
-import { cva } from "class-variance-authority"
-
-export const appShellVariants = cva(
-  "flex min-h-screen w-full bg-background transition-all duration-300 ease-in-out",
-  {
-    variants: {
-      variant: {
-        "sidebar-header": "flex-col md:flex-row",
-        "sidebar-breadcrumb": "flex-col md:flex-row",
-        "header-sidebar": "flex-col",
-        "header-only": "flex-col",
-        centered: "flex-col items-center justify-center bg-surface-secondary",
-        "rail-sidebar": "flex-row",
-        "rail-only": "flex-row",
-      },
-    },
-    defaultVariants: {
-      variant: "sidebar-header",
-    },
-  }
-)

package/src/components/layout/AppShell/index.ts

@@ -1,2 +0,0 @@
-export * from './AppShell'
-export * from './AppShell.context'

package/src/components/layout/AppSidebar/AppSidebar.test.tsx

@@ -1,69 +0,0 @@
-import { render, screen } from "@testing-library/react"
-import * as React from "react"
-import { describe, expect, it, vi } from "vitest"
-
-import { AppShell } from "../AppShell"
-import { AppSidebar, AppSidebarItem } from "./index"
-
-// Mock ResizeObserver
-;(globalThis as typeof globalThis & { ResizeObserver: unknown }).ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
-
-// Mock matchMedia
-const matchMediaMock = vi.fn().mockImplementation((query: string) => ({
-  matches: false,
-  media: query,
-  onchange: null,
-  addListener: vi.fn(), // deprecated
-  removeListener: vi.fn(), // deprecated
-  addEventListener: vi.fn(),
-  removeEventListener: vi.fn(),
-  dispatchEvent: vi.fn(),
-}))
-
-Object.defineProperty(window, "matchMedia", {
-  writable: true,
-  value: matchMediaMock,
-})
-
-describe("AppSidebar", () => {
-  it("renders correctly", () => {
-    render(
-      <AppShell variant="sidebar-header">
-        <AppSidebar>
-          <AppSidebarItem label="Home" />
-        </AppSidebar>
-      </AppShell>
-    )
-    expect(screen.getByText("Home")).toBeInTheDocument()
-  })
-
-  it("renders collapsed state", () => {
-    // Mock matchMedia to simulate tablet breakpoint
-    matchMediaMock.mockImplementation((query: string) => ({
-      matches: query.includes("768px") && query.includes("1023px"), // Simple check for tablet query
-      media: query,
-      onchange: null,
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    }))
-
-    render(
-      <AppShell variant="sidebar-header">
-        <AppSidebar>
-          <AppSidebarItem icon={<span data-testid="icon" />} label="Home" />
-        </AppSidebar>
-      </AppShell>
-    )
-    
-    // Label should not be visible (collapsed state)
-    expect(screen.queryByText("Home")).not.toBeInTheDocument()
-    expect(screen.getByTestId("icon")).toBeInTheDocument()
-  })
-})

package/src/components/layout/AppSidebar/AppSidebar.tsx

@@ -1,58 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import { Drawer, DrawerContent } from "../../navigation/Drawer"
-import { useAppShell } from "../AppShell"
-
-export interface AppSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  collapsedWidth?: number
-  collapsible?: boolean
-  width?: number
-}
-
-export function AppSidebar({
-  className,
-  children,
-  width = 240,
-  collapsedWidth = 64,
-  // collapsible = true, // Removed unused prop
-  ...props
-}: AppSidebarProps) {
-  const { sidebarState, setSidebarState, isMobile } = useAppShell()
-
-  if (isMobile) {
-     return (
-       <Drawer 
-         direction="left" 
-         open={sidebarState === 'expanded'}
-         onOpenChange={(open) => { setSidebarState(open ? 'expanded' : 'hidden'); }}
-       >
-         <DrawerContent className="w-[280px] h-full rounded-none border-r bg-[color:var(--sidebar-background)] p-0">
-             {children}
-         </DrawerContent>
-       </Drawer>
-     )
-  }
-  
-  // Desktop/Tablet Static Sidebar
-  const isCollapsed = sidebarState === 'collapsed'
-  const isHidden = sidebarState === 'hidden'
-  
-  if (isHidden) return null
-
-  return (
-    <aside
-      className={cn(
-        "group/sidebar relative z-20 flex h-full flex-col overflow-hidden border-r bg-[color:var(--sidebar-background)] transition-[width] duration-300 ease-in-out [grid-area:sidebar]",
-        className
-      )}
-      style={{
-        width: isCollapsed ? collapsedWidth : width
-      }}
-      data-collapsed={isCollapsed}
-      {...props}
-    >
-      {children}
-    </aside>
-  )
-}

package/src/components/layout/AppSidebar/AppSidebar.variants.ts

@@ -1,41 +0,0 @@
-import { cva } from "class-variance-authority"
-
-export const appSidebarVariants = cva(
-  "flex flex-col border-r bg-surface-sunken transition-all duration-300 ease-in-out h-full sticky top-0 overflow-hidden",
-  {
-    variants: {
-      collapsed: {
-        true: "w-layout-sidebar-collapsed-width",
-        false: "w-layout-sidebar-width",
-      },
-      floating: {
-        true: "h-auto m-4 rounded-xl border shadow-lg",
-        false: "",
-      }
-    },
-    defaultVariants: {
-      collapsed: false,
-      floating: false,
-    },
-  }
-)
-
-export const appSidebarItemVariants = cva(
-  "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-hover hover:text-foreground",
-  {
-    variants: {
-      isActive: {
-        true: "bg-surface-active text-primary",
-        false: "text-muted-foreground",
-      },
-      collapsed: {
-        true: "justify-center px-0",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isActive: false,
-      collapsed: false,
-    },
-  }
-)

package/src/components/layout/AppSidebar/AppSidebarContent.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import { ScrollArea } from "../../layout/ScrollArea"
-
-export type AppSidebarContentProps = React.HTMLAttributes<HTMLDivElement>
-
-export function AppSidebarContent({ className, children, ...props }: AppSidebarContentProps) {
-  return (
-    <div className={cn("flex-1 overflow-hidden", className)} {...props}>
-      <ScrollArea className="h-full">
-         <div className="p-2">
-            {children}
-         </div>
-      </ScrollArea>
-    </div>
-  )
-}

package/src/components/layout/AppSidebar/AppSidebarFooter.tsx

@@ -1,13 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-
-export type AppSidebarFooterProps = React.HTMLAttributes<HTMLDivElement>
-
-export function AppSidebarFooter({ className, children, ...props }: AppSidebarFooterProps) {
-  return (
-    <div className={cn("p-4 border-t border-[color:var(--sidebar-border)] shrink-0", className)} {...props}>
-      {children}
-    </div>
-  )
-}

package/src/components/layout/AppSidebar/AppSidebarGroup.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-
-export interface AppSidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  label?: string
-}
-
-export function AppSidebarGroup({ className, children, label, ...props }: AppSidebarGroupProps) {
-  return (
-    <div className={cn("py-2", className)} {...props}>
-      {label && (
-        <h4 className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-[color:var(--text-muted)] group-data-[collapsed=true]:hidden">
-          {label}
-        </h4>
-      )}
-      <div className="space-y-1">
-        {children}
-      </div>
-    </div>
-  )
-}

package/src/components/layout/AppSidebar/AppSidebarHeader.tsx

@@ -1,13 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-
-export type AppSidebarHeaderProps = React.HTMLAttributes<HTMLDivElement>
-
-export function AppSidebarHeader({ className, children, ...props }: AppSidebarHeaderProps) {
-  return (
-    <div className={cn("flex h-14 shrink-0 items-center px-4 border-b border-[color:var(--sidebar-border)]", className)} {...props}>
-      {children}
-    </div>
-  )
-}

package/src/components/layout/AppSidebar/AppSidebarItem.tsx

@@ -1,54 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import { useAppShell } from "../AppShell"
-
-export interface AppSidebarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  badge?: number | string
-  href?: string
-  icon?: React.ReactNode
-  isActive?: boolean
-  label: string
-  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>
-}
-
-export function AppSidebarItem({
-  className,
-  icon,
-  label,
-  isActive,
-  badge,
-  href,
-  onClick,
-  ...props
-}: AppSidebarItemProps) {  const { sidebarState } = useAppShell()
-  const isCollapsed = sidebarState === 'collapsed'
-  
-  const Component = href ? 'a' : 'button'
-
-  return (
-        <Component
-          className={cn(
-            "group flex w-full items-center gap-3 rounded-md px-2 py-2 text-sm font-medium transition-colors hover:bg-[color:var(--sidebar-accent)] hover:text-[color:var(--sidebar-accent-foreground)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--ring)]",
-            isActive && "bg-[color:var(--sidebar-accent)] text-[color:var(--sidebar-accent-foreground)]",
-            className
-          )}
-          href={href}
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
-                      onClick={onClick as any}
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                      {...props as any}
-                    >      {icon && <span className={cn("size-4 shrink-0", isCollapsed && "mx-auto")}>{icon}</span>}
-      
-      {!isCollapsed && (
-        <span className="flex-1 truncate">{label}</span>
-      )}
-      
-      {!isCollapsed && badge && (
-        <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-[color:var(--primary)] px-1.5 text-[10px] font-bold text-[color:var(--primary-foreground)]">
-          {badge}
-        </span>
-      )}
-    </Component>
-  )
-}

package/src/components/layout/AppSidebar/AppSidebarTrigger.tsx

@@ -1,25 +0,0 @@
-import { PanelLeft } from "lucide-react"
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import { Button } from "../../primitives/Button"
-import { useAppShell } from "../AppShell"
-
-export type AppSidebarTriggerProps = React.ComponentProps<typeof Button>
-
-export function AppSidebarTrigger({ className, ...props }: AppSidebarTriggerProps) {
-  const { toggleSidebar } = useAppShell()
-  
-  return (
-    <Button 
-      className={cn("h-8 w-8", className)} 
-      size="icon" 
-      variant="ghost" 
-      onClick={toggleSidebar}
-      {...props}
-    >
-      <PanelLeft className="h-4 w-4" />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-}

package/src/components/layout/AppSidebar/index.ts

@@ -1,7 +0,0 @@
-export * from './AppSidebar'
-export * from './AppSidebarHeader'
-export * from './AppSidebarContent'
-export * from './AppSidebarFooter'
-export * from './AppSidebarGroup'
-export * from './AppSidebarItem'
-export * from './AppSidebarTrigger'

package/src/components/layout/CLAUDE.md

@@ -1,112 +0,0 @@
-# Layout Components
-
-Structural components for organizing page content, managing space, and creating responsive layouts.
-
-## Purpose
-
-This category provides the building blocks for page structure:
-- **Containers**: Wrap and constrain content width
-- **Grids**: Arrange items in rows/columns
-- **Stacks**: Linear arrangements (vertical/horizontal)
-- **Panels**: Collapsible and resizable sections
-- **Overlays**: Slide-out panels (Sheet)
-
-These components don't display content themselves - they organize other components.
-
-## Components (12)
-
-| Component | Phase | Description |
-|-----------|-------|-------------|
-| **Container** | P0 | Max-width content wrapper with centering |
-| **Section** | P0 | Semantic page section with spacing |
-| **Card** | P0 | Bordered content container with shadow |
-| **Panel** | P0 | Collapsible content section |
-| **Grid** | P0 | CSS Grid layout wrapper |
-| **Flex** | P0 | Flexbox layout wrapper |
-| **Stack** | P0 | Vertical or horizontal stack with gap |
-| **ResponsiveContainer** | P0 | Breakpoint-aware container |
-| **ResizablePanels** | P1 | Draggable resizable panel groups |
-| **Collapsible** | P1 | Animated show/hide content |
-| **ScrollArea** | P2 | Custom styled scrollbar container |
-| **Sheet** | P2 | Slide-out side panel overlay |
-
-## Phase Distribution
-
-- **P0 (Essential)**: Container, Section, Card, Panel, Grid, Flex, Stack, ResponsiveContainer
-- **P1 (Important)**: ResizablePanels, Collapsible
-- **P2 (Useful)**: ScrollArea, Sheet
-
-## Component Hierarchy
-
-```
-Page Structure
-├── Container        → Width constraint
-├── Section          → Vertical page sections
-└── ResponsiveContainer → Breakpoint-aware wrapper
-
-Content Grouping
-├── Card             → Bordered box with shadow
-├── Panel            → Collapsible section
-└── Collapsible      → Generic show/hide
-
-Arrangement
-├── Grid             → 2D layouts (CSS Grid)
-├── Flex             → 1D layouts (Flexbox)
-└── Stack            → Simple linear arrangement
-
-Advanced
-├── ResizablePanels  → Draggable split views
-├── ScrollArea       → Custom scrollbars
-└── Sheet            → Slide-out overlay
-```
-
-## When to Use Which
-
-| Need | Component |
-|------|-----------|
-| Constrain page width | `Container` |
-| Group related content | `Card` |
-| Page sections with spacing | `Section` |
-| Horizontal or vertical list | `Stack` |
-| Complex 2D arrangement | `Grid` |
-| Flexible alignment | `Flex` |
-| Show/hide content | `Collapsible` or `Panel` |
-| Split pane editor | `ResizablePanels` |
-| Side navigation overlay | `Sheet` |
-| Custom scrollbar styling | `ScrollArea` |
-
-## Composition Patterns
-
-**Typical page structure:**
-```
-Container
-└── Stack (vertical, gap-8)
-    ├── Section (hero)
-    ├── Section (content)
-    │   └── Grid (3 columns)
-    │       └── Card (repeated)
-    └── Section (footer)
-```
-
-**Dashboard layout:**
-```
-ResizablePanels
-├── Panel (sidebar)
-│   └── ScrollArea
-└── Panel (main)
-    └── Grid
-        └── Card (widgets)
-```
-
-## Key Dependencies
-
-- `@radix-ui/react-collapsible` - Collapsible primitive
-- `@radix-ui/react-scroll-area` - ScrollArea primitive
-- `react-resizable-panels` - ResizablePanels functionality
-
-## Design Token Usage
-
-All spacing uses `@etus/tokens`:
-- `var(--spacing-*)` for gaps and padding
-- `var(--radius-*)` for border radius (Card, Panel)
-- `var(--shadow-*)` for elevation (Card)