@etus/ui 0.1.1 → 0.1.3

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

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

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

@@ -1,601 +0,0 @@
-// Grid/Grid.test.tsx
-import { render, screen } from "@testing-library/react"
-import { describe, expect, it } from "vitest"
-
-import { Grid } from "./Grid"
-import { gridVariants } from "./Grid.variants"
-
-// ============================================
-// RENDERING TESTS
-// ============================================
-describe("Grid", () => {
-  describe("Rendering", () => {
-    it("renders with grid display", () => {
-      render(<Grid data-testid="grid">Content</Grid>)
-      expect(screen.getByTestId("grid")).toHaveClass("grid")
-    })
-
-    it("renders children correctly", () => {
-      render(
-        <Grid>
-          <div data-testid="child-1">Item 1</div>
-          <div data-testid="child-2">Item 2</div>
-          <div data-testid="child-3">Item 3</div>
-        </Grid>
-      )
-
-      expect(screen.getByTestId("child-1")).toBeInTheDocument()
-      expect(screen.getByTestId("child-2")).toBeInTheDocument()
-      expect(screen.getByTestId("child-3")).toBeInTheDocument()
-    })
-
-    it("renders with custom className", () => {
-      render(
-        <Grid className="custom-class" data-testid="grid">
-          Content
-        </Grid>
-      )
-
-      expect(screen.getByTestId("grid")).toHaveClass("custom-class")
-    })
-  })
-
-  // ============================================
-  // DATA SLOT TESTS
-  // ============================================
-  describe("Data Slots", () => {
-    it("has data-slot on grid", () => {
-      render(<Grid data-testid="grid">Content</Grid>)
-
-      expect(screen.getByTestId("grid")).toHaveAttribute("data-slot", "grid")
-    })
-  })
-
-  // ============================================
-  // COLS VARIANT TESTS
-  // ============================================
-  describe("Cols Variants", () => {
-    it("applies 1 column", () => {
-      render(
-        <Grid cols={1} data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-1")
-    })
-
-    it("applies 2 columns", () => {
-      render(
-        <Grid cols={2} data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-2")
-    })
-
-    it("applies 3 columns", () => {
-      render(
-        <Grid cols={3} data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-3")
-    })
-
-    it("applies 4 columns", () => {
-      render(
-        <Grid cols={4} data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-4")
-    })
-
-    it("applies 6 columns", () => {
-      render(
-        <Grid cols={6} data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-6")
-    })
-
-    it("applies 12 columns", () => {
-      render(
-        <Grid cols={12} data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-12")
-    })
-
-    it("applies none columns", () => {
-      render(
-        <Grid cols="none" data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-none")
-    })
-  })
-
-  // ============================================
-  // ROWS VARIANT TESTS
-  // ============================================
-  describe("Rows Variants", () => {
-    it("applies 1 row", () => {
-      render(
-        <Grid data-testid="grid" rows={1}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-rows-1")
-    })
-
-    it("applies 2 rows", () => {
-      render(
-        <Grid data-testid="grid" rows={2}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-rows-2")
-    })
-
-    it("applies 3 rows", () => {
-      render(
-        <Grid data-testid="grid" rows={3}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-rows-3")
-    })
-
-    it("applies 4 rows", () => {
-      render(
-        <Grid data-testid="grid" rows={4}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-rows-4")
-    })
-
-    it("applies 6 rows", () => {
-      render(
-        <Grid data-testid="grid" rows={6}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-rows-6")
-    })
-  })
-
-  // ============================================
-  // GAP VARIANT TESTS
-  // ============================================
-  describe("Gap Variants", () => {
-    it("applies gap-0", () => {
-      render(
-        <Grid data-testid="grid" gap={0}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("gap-0")
-    })
-
-    it("applies gap-1", () => {
-      render(
-        <Grid data-testid="grid" gap={1}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("gap-1")
-    })
-
-    it("applies gap-2", () => {
-      render(
-        <Grid data-testid="grid" gap={2}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("gap-2")
-    })
-
-    it("applies gap-4 by default", () => {
-      render(<Grid data-testid="grid">Content</Grid>)
-      expect(screen.getByTestId("grid")).toHaveClass("gap-4")
-    })
-
-    it("applies gap-6", () => {
-      render(
-        <Grid data-testid="grid" gap={6}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("gap-6")
-    })
-
-    it("applies gap-8", () => {
-      render(
-        <Grid data-testid="grid" gap={8}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("gap-8")
-    })
-  })
-
-  // ============================================
-  // GAP-X AND GAP-Y TESTS
-  // ============================================
-  describe("GapX and GapY Variants", () => {
-    it("applies separate gap-x", () => {
-      render(
-        <Grid data-testid="grid" gapX={4}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("gap-x-4")
-    })
-
-    it("applies separate gap-y", () => {
-      render(
-        <Grid data-testid="grid" gapY={2}>
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("gap-y-2")
-    })
-
-    it("applies both gap-x and gap-y", () => {
-      render(
-        <Grid data-testid="grid" gapX={8} gapY={4}>
-          Content
-        </Grid>
-      )
-      const grid = screen.getByTestId("grid")
-      expect(grid).toHaveClass("gap-x-8")
-      expect(grid).toHaveClass("gap-y-4")
-    })
-
-    it("gapX/gapY override gap", () => {
-      render(
-        <Grid data-testid="grid" gap={6} gapX={2}>
-          Content
-        </Grid>
-      )
-      const grid = screen.getByTestId("grid")
-      expect(grid).toHaveClass("gap-x-2")
-      expect(grid).not.toHaveClass("gap-6")
-    })
-  })
-
-  // ============================================
-  // ITEMS VARIANT TESTS
-  // ============================================
-  describe("Items Variants", () => {
-    it("applies items-start", () => {
-      render(
-        <Grid data-testid="grid" items="start">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("items-start")
-    })
-
-    it("applies items-center", () => {
-      render(
-        <Grid data-testid="grid" items="center">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("items-center")
-    })
-
-    it("applies items-end", () => {
-      render(
-        <Grid data-testid="grid" items="end">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("items-end")
-    })
-
-    it("applies items-stretch", () => {
-      render(
-        <Grid data-testid="grid" items="stretch">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("items-stretch")
-    })
-  })
-
-  // ============================================
-  // JUSTIFY VARIANT TESTS
-  // ============================================
-  describe("Justify Variants", () => {
-    it("applies justify-items-start", () => {
-      render(
-        <Grid data-testid="grid" justify="start">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("justify-items-start")
-    })
-
-    it("applies justify-items-center", () => {
-      render(
-        <Grid data-testid="grid" justify="center">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("justify-items-center")
-    })
-
-    it("applies justify-items-end", () => {
-      render(
-        <Grid data-testid="grid" justify="end">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("justify-items-end")
-    })
-
-    it("applies justify-items-stretch", () => {
-      render(
-        <Grid data-testid="grid" justify="stretch">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("justify-items-stretch")
-    })
-  })
-
-  // ============================================
-  // FLOW VARIANT TESTS
-  // ============================================
-  describe("Flow Variants", () => {
-    it("applies grid-flow-row", () => {
-      render(
-        <Grid data-testid="grid" flow="row">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-flow-row")
-    })
-
-    it("applies grid-flow-col", () => {
-      render(
-        <Grid data-testid="grid" flow="col">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-flow-col")
-    })
-
-    it("applies grid-flow-dense", () => {
-      render(
-        <Grid data-testid="grid" flow="dense">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-flow-dense")
-    })
-
-    it("applies grid-flow-row-dense", () => {
-      render(
-        <Grid data-testid="grid" flow="row-dense">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-flow-row-dense")
-    })
-
-    it("applies grid-flow-col-dense", () => {
-      render(
-        <Grid data-testid="grid" flow="col-dense">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid")).toHaveClass("grid-flow-col-dense")
-    })
-  })
-
-  // ============================================
-  // AS PROP TESTS
-  // ============================================
-  describe("As Prop (Polymorphism)", () => {
-    it("renders as div by default", () => {
-      render(<Grid data-testid="grid">Content</Grid>)
-      expect(screen.getByTestId("grid").tagName).toBe("DIV")
-    })
-
-    it("renders as section", () => {
-      render(
-        <Grid as="section" data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid").tagName).toBe("SECTION")
-    })
-
-    it("renders as article", () => {
-      render(
-        <Grid as="article" data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid").tagName).toBe("ARTICLE")
-    })
-
-    it("renders as main", () => {
-      render(
-        <Grid as="main" data-testid="grid">
-          Content
-        </Grid>
-      )
-      expect(screen.getByTestId("grid").tagName).toBe("MAIN")
-    })
-
-    it("renders as ul", () => {
-      render(
-        <Grid as="ul" data-testid="grid">
-          <li>Item</li>
-        </Grid>
-      )
-      expect(screen.getByTestId("grid").tagName).toBe("UL")
-    })
-
-    it("renders as ol", () => {
-      render(
-        <Grid as="ol" data-testid="grid">
-          <li>Item</li>
-        </Grid>
-      )
-      expect(screen.getByTestId("grid").tagName).toBe("OL")
-    })
-  })
-
-  // ============================================
-  // VARIANT FUNCTION TESTS
-  // ============================================
-  describe("Variant Functions", () => {
-    it("returns grid base class", () => {
-      const classes = gridVariants()
-      expect(classes).toContain("grid")
-    })
-
-    it("combines multiple variants", () => {
-      const classes = gridVariants({
-        cols: 3,
-        gap: 6,
-        items: "center",
-        justify: "center",
-      })
-      expect(classes).toContain("grid")
-      expect(classes).toContain("grid-cols-3")
-      expect(classes).toContain("gap-6")
-      expect(classes).toContain("items-center")
-      expect(classes).toContain("justify-items-center")
-    })
-  })
-
-  // ============================================
-  // COMBINED VARIANTS TESTS
-  // ============================================
-  describe("Combined Variants", () => {
-    it("applies all variants together", () => {
-      render(
-        <Grid
-          cols={4}
-          data-testid="grid"
-          flow="row"
-          gap={6}
-          items="center"
-          justify="start"
-          rows={2}
-        >
-          Content
-        </Grid>
-      )
-
-      const grid = screen.getByTestId("grid")
-      expect(grid).toHaveClass("grid")
-      expect(grid).toHaveClass("grid-cols-4")
-      expect(grid).toHaveClass("grid-rows-2")
-      expect(grid).toHaveClass("gap-6")
-      expect(grid).toHaveClass("items-center")
-      expect(grid).toHaveClass("justify-items-start")
-      expect(grid).toHaveClass("grid-flow-row")
-    })
-  })
-
-  // ============================================
-  // PROPS PASSTHROUGH TESTS
-  // ============================================
-  describe("Props Passthrough", () => {
-    it("passes additional props", () => {
-      render(
-        <Grid aria-label="Grid layout" data-testid="grid" id="my-grid">
-          Content
-        </Grid>
-      )
-
-      const grid = screen.getByTestId("grid")
-      expect(grid).toHaveAttribute("aria-label", "Grid layout")
-      expect(grid).toHaveAttribute("id", "my-grid")
-    })
-
-    it("passes style prop", () => {
-      render(
-        <Grid data-testid="grid" style={{ minHeight: "200px" }}>
-          Content
-        </Grid>
-      )
-
-      expect(screen.getByTestId("grid")).toHaveStyle({ minHeight: "200px" })
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("maintains content accessibility", () => {
-      render(
-        <Grid>
-          <button type="button">Click me</button>
-          <a href="#test">Link</a>
-        </Grid>
-      )
-
-      expect(
-        screen.getByRole("button", { name: "Click me" })
-      ).toBeInTheDocument()
-      expect(screen.getByRole("link", { name: "Link" })).toBeInTheDocument()
-    })
-
-    it("preserves semantic structure with as prop", () => {
-      render(
-        <Grid as="ul" data-testid="grid">
-          <li>Item 1</li>
-          <li>Item 2</li>
-        </Grid>
-      )
-
-      expect(screen.getByRole("list")).toBeInTheDocument()
-      expect(screen.getAllByRole("listitem")).toHaveLength(2)
-    })
-
-    it("supports aria attributes", () => {
-      render(
-        <Grid
-          aria-labelledby="grid-title"
-          data-testid="grid"
-          role="region"
-        >
-          Content
-        </Grid>
-      )
-
-      const grid = screen.getByTestId("grid")
-      expect(grid).toHaveAttribute("role", "region")
-      expect(grid).toHaveAttribute("aria-labelledby", "grid-title")
-    })
-  })
-
-  // ============================================
-  // EXPORT TESTS
-  // ============================================
-  describe("Exports", () => {
-    it("Grid is exported", () => {
-      expect(Grid).toBeDefined()
-      expect(typeof Grid).toBe("function")
-    })
-
-    it("gridVariants is exported", () => {
-      expect(gridVariants).toBeDefined()
-      expect(typeof gridVariants).toBe("function")
-    })
-  })
-})

package/src/components/layout/Grid/Grid.tsx

@@ -1,61 +0,0 @@
-"use client"
-
-import type { GridProps } from "./Grid.types"
-
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import { gridVariants } from "./Grid.variants"
-
-/**
- * Grid component for CSS Grid-based layouts
- *
- * Provides a declarative API for creating complex grid layouts with
- * support for columns, rows, gaps, and alignment.
- *
- * @example
- * ```tsx
- * <Grid cols={3} gap={4}>
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- *   <div>Item 3</div>
- * </Grid>
- * ```
- */
-function Grid({
-  as = "div",
-  cols,
-  rows,
-  gap,
-  gapX,
-  gapY,
-  items,
-  justify,
-  flow,
-  className,
-  ...props
-}: GridProps) {
-  const Component = as
-  return (
-    <Component
-      className={cn(
-        gridVariants({
-          cols,
-          rows,
-          // Only apply gap if gapX and gapY are not specified
-          gap: gapX !== undefined || gapY !== undefined ? undefined : gap,
-          gapX,
-          gapY,
-          items,
-          justify,
-          flow,
-        }),
-        className
-      )}
-      data-slot="grid"
-      {...(props as Record<string, unknown>)}
-    />
-  )
-}
-
-export { Grid }

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

@@ -1,47 +0,0 @@
-import type { gridVariants } from "./Grid.variants"
-import type { VariantProps } from "class-variance-authority"
-import type { ComponentProps } from "react"
-
-/**
- * Allowed element types for the Grid component
- */
-export type GridElement = "article" | "div" | "main" | "ol" | "section" | "ul"
-
-/**
- * Grid component props
- * CSS Grid-based layout with declarative API for complex layouts
- */
-export interface GridProps
-  extends ComponentProps<"div">,
-    VariantProps<typeof gridVariants> {
-  /**
-   * The HTML element to render
-   * @default 'div'
-   */
-  as?: GridElement
-}
-
-/**
- * Number of grid columns
- */
-export type GridCols = NonNullable<VariantProps<typeof gridVariants>["cols"]>
-
-/**
- * Number of grid rows
- */
-export type GridRows = NonNullable<VariantProps<typeof gridVariants>["rows"]>
-
-/**
- * Grid gap values
- */
-export type GridGap = NonNullable<VariantProps<typeof gridVariants>["gap"]>
-
-/**
- * Grid alignment values
- */
-export type GridAlign = NonNullable<VariantProps<typeof gridVariants>["items"]>
-
-/**
- * Grid flow values
- */
-export type GridFlow = NonNullable<VariantProps<typeof gridVariants>["flow"]>