@etus/ui 0.1.0

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

@@ -0,0 +1,3 @@
+export * from './Grid'
+export type * from './Grid.types'
+export * from './Grid.variants'

package/src/components/layout/PageContent/PageContent.tsx

@@ -0,0 +1,13 @@
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+
+export type PageContentProps = React.HTMLAttributes<HTMLDivElement>
+
+export function PageContent({ className, children, ...props }: PageContentProps) {
+  return (
+    <div className={cn("space-y-6", className)} {...props}>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1 @@
+export * from "./PageContent"

package/src/components/layout/PageHeader/PageHeader.tsx

@@ -0,0 +1,43 @@
+import { ChevronLeft } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  actions?: React.ReactNode
+  backHref?: string
+  breadcrumbs?: React.ReactNode
+  description?: string
+  title: string
+}
+
+export function PageHeader({
+  className,
+  title,
+  description,
+  actions,
+  breadcrumbs,
+  backHref,
+  children,
+  ...props
+}: PageHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-4 pb-6", className)} {...props}>
+      {breadcrumbs && <div className="mb-2">{breadcrumbs}</div>}
+      {backHref && !breadcrumbs && (
+        <a className="mb-2 flex items-center text-sm text-muted-foreground hover:text-foreground" href={backHref}>
+          <ChevronLeft className="mr-1 h-4 w-4" />
+          Back
+        </a>
+      )}
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+          {description && <p className="text-muted-foreground text-sm">{description}</p>}
+        </div>
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </div>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1 @@
+export * from "./PageHeader"

package/src/components/layout/PageSection/PageSection.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+
+export interface PageSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  description?: string
+  title?: string
+}
+
+export function PageSection({
+  className,
+  title,
+  description,
+  children,
+  ...props
+}: PageSectionProps) {
+  return (
+    <section className={cn("space-y-4", className)} {...props}>
+      {(title !== undefined || description !== undefined) && (
+        <div className="space-y-1">
+          {title && <h3 className="text-lg font-medium">{title}</h3>}
+          {description && <p className="text-muted-foreground text-sm">{description}</p>}
+        </div>
+      )}
+      {children}
+    </section>
+  )
+}

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

@@ -0,0 +1 @@
+export * from "./PageSection"

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

@@ -0,0 +1,427 @@
+// Panel/Panel.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import { Panel, PanelContent, PanelFooter, PanelHeader } from "./Panel"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("Panel", () => {
+  describe("Rendering", () => {
+    it("renders children correctly", () => {
+      render(<Panel>Panel Content</Panel>)
+      expect(screen.getByText("Panel Content")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<Panel className="custom-class">Content</Panel>)
+      expect(screen.getByText("Content")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(<Panel data-testid="panel">Content</Panel>)
+      expect(screen.getByTestId("panel")).toHaveAttribute("data-slot", "panel")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <Panel data-custom="value" data-testid="test-panel">
+          Content
+        </Panel>
+      )
+      expect(screen.getByTestId("test-panel")).toHaveAttribute(
+        "data-custom",
+        "value"
+      )
+    })
+
+    it("renders as aside element", () => {
+      render(<Panel as="aside">Sidebar</Panel>)
+      expect(screen.getByRole("complementary")).toBeInTheDocument()
+    })
+
+    it("renders as nav element", () => {
+      render(<Panel as="nav">Navigation</Panel>)
+      expect(screen.getByRole("navigation")).toBeInTheDocument()
+    })
+
+    it("renders as section element", () => {
+      render(
+        <Panel aria-label="Test Section" as="section">
+          Section Content
+        </Panel>
+      )
+      expect(screen.getByRole("region")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // VARIANT TESTS
+  // ============================================
+  describe("Variants", () => {
+    it("applies default variant classes", () => {
+      render(<Panel variant="default">Default</Panel>)
+      expect(screen.getByText("Default")).toHaveClass("bg-background", "border")
+    })
+
+    it("applies subtle variant classes", () => {
+      render(<Panel variant="subtle">Subtle</Panel>)
+      expect(screen.getByText("Subtle")).toHaveClass("bg-muted")
+    })
+
+    it("applies outlined variant classes", () => {
+      render(<Panel variant="outlined">Outlined</Panel>)
+      expect(screen.getByText("Outlined")).toHaveClass("border", "bg-transparent")
+    })
+
+    it("applies elevated variant classes", () => {
+      render(<Panel variant="elevated">Elevated</Panel>)
+      expect(screen.getByText("Elevated")).toHaveClass("bg-background", "shadow-md")
+    })
+
+    it("applies inset variant classes", () => {
+      render(<Panel variant="inset">Inset</Panel>)
+      expect(screen.getByText("Inset")).toHaveClass("bg-muted/50", "shadow-inner")
+    })
+
+    it("uses default variant when not specified", () => {
+      render(<Panel>No Variant</Panel>)
+      expect(screen.getByText("No Variant")).toHaveClass("bg-background", "border")
+    })
+  })
+
+  // ============================================
+  // SIZE TESTS
+  // ============================================
+  describe("Sizes", () => {
+    it("applies xs size", () => {
+      render(<Panel data-testid="panel" size="xs">XS</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("w-60")
+    })
+
+    it("applies sm size", () => {
+      render(<Panel data-testid="panel" size="sm">SM</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("w-70")
+    })
+
+    it("applies md size", () => {
+      render(<Panel data-testid="panel" size="md">MD</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("w-80")
+    })
+
+    it("applies lg size", () => {
+      render(<Panel data-testid="panel" size="lg">LG</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("w-100")
+    })
+
+    it("applies xl size", () => {
+      render(<Panel data-testid="panel" size="xl">XL</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("w-120")
+    })
+
+    it("applies auto size (default)", () => {
+      render(<Panel data-testid="panel">Auto</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("w-auto")
+    })
+
+    it("applies full size", () => {
+      render(<Panel data-testid="panel" size="full">Full</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("w-full")
+    })
+  })
+
+  // ============================================
+  // POSITION TESTS
+  // ============================================
+  describe("Positions", () => {
+    it("applies left position", () => {
+      render(<Panel data-testid="panel" position="left">Left</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("border-r")
+    })
+
+    it("applies right position", () => {
+      render(<Panel data-testid="panel" position="right">Right</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("border-l")
+    })
+
+    it("applies top position", () => {
+      render(<Panel data-testid="panel" position="top">Top</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("border-b")
+    })
+
+    it("applies bottom position", () => {
+      render(<Panel data-testid="panel" position="bottom">Bottom</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("border-t")
+    })
+  })
+
+  // ============================================
+  // COLLAPSIBLE TESTS
+  // ============================================
+  describe("Collapsible", () => {
+    it("sets data-collapsible when collapsible", () => {
+      render(
+        <Panel collapsible data-testid="panel">
+          Collapsible
+        </Panel>
+      )
+      expect(screen.getByTestId("panel")).toHaveAttribute("data-collapsible")
+    })
+
+    it("sets data-collapsed when collapsed", () => {
+      render(
+        <Panel collapsed collapsible data-testid="panel">
+          Collapsed
+        </Panel>
+      )
+      expect(screen.getByTestId("panel")).toHaveAttribute("data-collapsed")
+    })
+
+    it("sets data-state to expanded when not collapsed", () => {
+      render(
+        <Panel collapsible collapsed={false} data-testid="panel">
+          Expanded
+        </Panel>
+      )
+      expect(screen.getByTestId("panel")).toHaveAttribute("data-state", "expanded")
+    })
+
+    it("sets data-state to collapsed when collapsed", () => {
+      render(
+        <Panel collapsible collapsed={true} data-testid="panel">
+          Collapsed
+        </Panel>
+      )
+      expect(screen.getByTestId("panel")).toHaveAttribute("data-state", "collapsed")
+    })
+  })
+
+  // ============================================
+  // COMPOUND COMPONENT TESTS
+  // ============================================
+  describe("Compound Components", () => {
+    it("renders all compound components correctly", () => {
+      render(
+        <Panel>
+          <PanelHeader>Header</PanelHeader>
+          <PanelContent>Content</PanelContent>
+          <PanelFooter>Footer</PanelFooter>
+        </Panel>
+      )
+
+      expect(screen.getByText("Header")).toBeInTheDocument()
+      expect(screen.getByText("Content")).toBeInTheDocument()
+      expect(screen.getByText("Footer")).toBeInTheDocument()
+    })
+
+    it("PanelHeader has correct data-slot", () => {
+      render(<PanelHeader data-testid="header">Header</PanelHeader>)
+      expect(screen.getByTestId("header")).toHaveAttribute(
+        "data-slot",
+        "panel-header"
+      )
+    })
+
+    it("PanelContent has correct data-slot", () => {
+      render(<PanelContent data-testid="content">Content</PanelContent>)
+      expect(screen.getByTestId("content")).toHaveAttribute(
+        "data-slot",
+        "panel-content"
+      )
+    })
+
+    it("PanelFooter has correct data-slot", () => {
+      render(<PanelFooter data-testid="footer">Footer</PanelFooter>)
+      expect(screen.getByTestId("footer")).toHaveAttribute(
+        "data-slot",
+        "panel-footer"
+      )
+    })
+  })
+
+  // ============================================
+  // STYLING TESTS
+  // ============================================
+  describe("Styling", () => {
+    it("Panel has flex flex-col", () => {
+      render(<Panel data-testid="panel">Content</Panel>)
+      expect(screen.getByTestId("panel")).toHaveClass("flex", "flex-col")
+    })
+
+    it("PanelHeader has correct padding and shrink", () => {
+      render(<PanelHeader data-testid="header">Header</PanelHeader>)
+      expect(screen.getByTestId("header")).toHaveClass("px-4", "py-3", "shrink-0")
+    })
+
+    it("PanelContent has flex-1", () => {
+      render(<PanelContent data-testid="content">Content</PanelContent>)
+      expect(screen.getByTestId("content")).toHaveClass("flex-1")
+    })
+
+    it("PanelContent with scrollable has overflow-auto", () => {
+      render(
+        <PanelContent scrollable data-testid="content">
+          Scrollable Content
+        </PanelContent>
+      )
+      expect(screen.getByTestId("content")).toHaveClass("overflow-auto")
+    })
+
+    it("PanelFooter has correct padding and shrink", () => {
+      render(<PanelFooter data-testid="footer">Footer</PanelFooter>)
+      expect(screen.getByTestId("footer")).toHaveClass("px-4", "py-3", "shrink-0")
+    })
+  })
+
+  // ============================================
+  // CLASSNAME MERGE TESTS
+  // ============================================
+  describe("ClassName Merge", () => {
+    it("merges custom className with Panel variants", () => {
+      render(
+        <Panel className="h-screen" variant="elevated">
+          Content
+        </Panel>
+      )
+      expect(screen.getByText("Content")).toHaveClass("h-screen", "shadow-md")
+    })
+
+    it("merges custom className with PanelHeader", () => {
+      render(
+        <PanelHeader className="border-b" data-testid="header">
+          Header
+        </PanelHeader>
+      )
+      expect(screen.getByTestId("header")).toHaveClass("border-b", "px-4")
+    })
+
+    it("merges custom className with PanelContent", () => {
+      render(
+        <PanelContent className="space-y-4" data-testid="content">
+          Content
+        </PanelContent>
+      )
+      expect(screen.getByTestId("content")).toHaveClass("space-y-4", "flex-1")
+    })
+
+    it("merges custom className with PanelFooter", () => {
+      render(
+        <PanelFooter className="border-t" data-testid="footer">
+          Footer
+        </PanelFooter>
+      )
+      expect(screen.getByTestId("footer")).toHaveClass("border-t", "px-4")
+    })
+  })
+
+  // ============================================
+  // INTERACTION TESTS
+  // ============================================
+  describe("Interactions", () => {
+    it("panel can receive click handler", async () => {
+      const user = userEvent.setup()
+      const handleClick = vi.fn()
+
+      render(<Panel onClick={handleClick}>Click me</Panel>)
+      await user.click(screen.getByText("Click me"))
+
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it("panel can be activated with keyboard", async () => {
+      const user = userEvent.setup()
+      const handleKeyDown = vi.fn()
+
+      render(
+        <Panel
+          data-testid="panel"
+          role="button"
+          tabIndex={0}
+          onKeyDown={handleKeyDown}
+        >
+          Interactive
+        </Panel>
+      )
+
+      const panel = screen.getByTestId("panel")
+      panel.focus()
+      await user.keyboard("{Enter}")
+
+      expect(handleKeyDown).toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <Panel>
+          <PanelHeader>Header</PanelHeader>
+          <PanelContent>Content</PanelContent>
+          <PanelFooter>Footer</PanelFooter>
+        </Panel>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all variants", async () => {
+      const { container } = render(
+        <div>
+          <Panel variant="default">Default</Panel>
+          <Panel variant="subtle">Subtle</Panel>
+          <Panel variant="outlined">Outlined</Panel>
+          <Panel variant="elevated">Elevated</Panel>
+          <Panel variant="inset">Inset</Panel>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("aside panel has no violations", async () => {
+      const { container } = render(
+        <Panel as="aside">
+          <PanelHeader>Sidebar</PanelHeader>
+          <PanelContent>Navigation content</PanelContent>
+        </Panel>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("nav panel has no violations", async () => {
+      const { container } = render(
+        <Panel aria-label="Main navigation" as="nav">
+          <PanelContent>
+            <ul>
+              <li>
+                <a href="/">Home</a>
+              </li>
+            </ul>
+          </PanelContent>
+        </Panel>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("collapsible panel has no violations", async () => {
+      const { container } = render(
+        <Panel collapsible aria-label="Collapsible panel" collapsed={false}>
+          <PanelHeader>Collapsible</PanelHeader>
+          <PanelContent>Content</PanelContent>
+        </Panel>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/layout/Panel/Panel.tsx

@@ -0,0 +1,75 @@
+import type {
+  PanelContentProps,
+  PanelFooterProps,
+  PanelHeaderProps,
+  PanelProps,
+} from "./Panel.types"
+
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  panelContentVariants,
+  panelFooterVariants,
+  panelHeaderVariants,
+  panelVariants,
+} from "./Panel.variants"
+
+function Panel({
+  as: Component = "div",
+  variant,
+  size,
+  position,
+  collapsible,
+  collapsed,
+  onCollapse: _onCollapse,
+  className,
+  ...props
+}: PanelProps) {
+  return (
+    <Component
+      className={cn(panelVariants({ variant, size, position }), className)}
+      data-collapsed={collapsed ?? undefined}
+      data-collapsible={collapsible ?? undefined}
+      data-slot="panel"
+      data-state={collapsible ? (collapsed ? "collapsed" : "expanded") : undefined}
+      {...props}
+    />
+  )
+}
+
+function PanelHeader({ className, ...props }: PanelHeaderProps) {
+  return (
+    <div
+      className={cn(panelHeaderVariants(), className)}
+      data-slot="panel-header"
+      {...props}
+    />
+  )
+}
+
+function PanelContent({
+  scrollable = false,
+  className,
+  ...props
+}: PanelContentProps) {
+  return (
+    <div
+      className={cn(panelContentVariants({ scrollable }), className)}
+      data-slot="panel-content"
+      {...props}
+    />
+  )
+}
+
+function PanelFooter({ className, ...props }: PanelFooterProps) {
+  return (
+    <div
+      className={cn(panelFooterVariants(), className)}
+      data-slot="panel-footer"
+      {...props}
+    />
+  )
+}
+
+export { Panel, PanelContent, PanelFooter, PanelHeader }

package/src/components/layout/Panel/Panel.types.ts

@@ -0,0 +1,59 @@
+import type { panelVariants } from "./Panel.variants"
+import type { VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+
+/**
+ * Panel component props
+ * Layout container for sidebars, inspectors, and section panels
+ */
+export interface PanelProps
+  extends ComponentProps<"div">,
+    VariantProps<typeof panelVariants> {
+  /** Semantic element to render */
+  as?: "aside" | "div" | "nav" | "section"
+  /** Controlled collapsed state */
+  collapsed?: boolean
+  /** Allows the panel to be collapsed */
+  collapsible?: boolean
+  /** Callback when collapse state changes */
+  onCollapse?: (collapsed: boolean) => void
+}
+
+/**
+ * PanelHeader component props
+ * Header section of the panel
+ */
+export interface PanelHeaderProps extends ComponentProps<"div"> {
+  /** Show toggle button when panel is collapsible */
+  showToggle?: boolean
+}
+
+/**
+ * PanelContent component props
+ * Main content area of the panel
+ */
+export interface PanelContentProps extends ComponentProps<"div"> {
+  /** Enable internal scrolling */
+  scrollable?: boolean
+}
+
+/**
+ * PanelFooter component props
+ * Footer section of the panel
+ */
+export interface PanelFooterProps extends ComponentProps<"div"> {}
+
+/**
+ * Available panel variants
+ */
+export type PanelVariant = NonNullable<VariantProps<typeof panelVariants>["variant"]>
+
+/**
+ * Available panel sizes
+ */
+export type PanelSize = NonNullable<VariantProps<typeof panelVariants>["size"]>
+
+/**
+ * Available panel positions
+ */
+export type PanelPosition = NonNullable<VariantProps<typeof panelVariants>["position"]>