@etus/ui 0.1.0 → 0.1.2

package/src/components/data-display/Item/Item.test.tsx

@@ -1,476 +0,0 @@
-import { render, screen } from "@testing-library/react"
-import { describe, expect, it } from "vitest"
-
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemFooter,
-  ItemGroup,
-  ItemHeader,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-} from "./Item"
-
-// ============================================
-// ITEM TESTS
-// ============================================
-describe("Item", () => {
-  describe("Data Slot Attributes", () => {
-    it("renders Item with data-slot='item'", () => {
-      render(<Item data-testid="item">Content</Item>)
-      expect(screen.getByTestId("item")).toHaveAttribute("data-slot", "item")
-    })
-  })
-
-  describe("Variant Prop", () => {
-    it("supports default variant", () => {
-      render(
-        <Item data-testid="item" variant="default">
-          Content
-        </Item>
-      )
-      const item = screen.getByTestId("item")
-      expect(item).toHaveAttribute("data-variant", "default")
-      expect(item).toHaveClass("bg-transparent")
-    })
-
-    it("supports outline variant", () => {
-      render(
-        <Item data-testid="item" variant="outline">
-          Content
-        </Item>
-      )
-      const item = screen.getByTestId("item")
-      expect(item).toHaveAttribute("data-variant", "outline")
-      expect(item).toHaveClass("border-border")
-    })
-
-    it("supports muted variant", () => {
-      render(
-        <Item data-testid="item" variant="muted">
-          Content
-        </Item>
-      )
-      const item = screen.getByTestId("item")
-      expect(item).toHaveAttribute("data-variant", "muted")
-      expect(item).toHaveClass("bg-muted/50")
-    })
-
-    it("uses default variant when not specified", () => {
-      render(<Item data-testid="item">Content</Item>)
-      const item = screen.getByTestId("item")
-      expect(item).toHaveAttribute("data-variant", "default")
-    })
-  })
-
-  describe("Size Prop", () => {
-    it("supports default size", () => {
-      render(
-        <Item data-testid="item" size="default">
-          Content
-        </Item>
-      )
-      const item = screen.getByTestId("item")
-      expect(item).toHaveAttribute("data-size", "default")
-      expect(item).toHaveClass("p-4")
-      expect(item).toHaveClass("gap-4")
-    })
-
-    it("supports sm size", () => {
-      render(
-        <Item data-testid="item" size="sm">
-          Content
-        </Item>
-      )
-      const item = screen.getByTestId("item")
-      expect(item).toHaveAttribute("data-size", "sm")
-      expect(item).toHaveClass("py-3")
-      expect(item).toHaveClass("px-4")
-      expect(item).toHaveClass("gap-2.5")
-    })
-
-    it("uses default size when not specified", () => {
-      render(<Item data-testid="item">Content</Item>)
-      const item = screen.getByTestId("item")
-      expect(item).toHaveAttribute("data-size", "default")
-    })
-  })
-
-  describe("asChild Prop", () => {
-    it("renders as div by default", () => {
-      render(<Item data-testid="item">Content</Item>)
-      expect(screen.getByTestId("item").tagName).toBe("DIV")
-    })
-
-    it("supports asChild prop with anchor element", () => {
-      render(
-        <Item asChild>
-          <a data-testid="item-link" href="/test">
-            Link Content
-          </a>
-        </Item>
-      )
-      const link = screen.getByTestId("item-link")
-      expect(link.tagName).toBe("A")
-      expect(link).toHaveAttribute("href", "/test")
-      expect(link).toHaveAttribute("data-slot", "item")
-    })
-
-    it("supports asChild prop with button element", () => {
-      render(
-        <Item asChild>
-          <button data-testid="item-button" type="button">
-            Button Content
-          </button>
-        </Item>
-      )
-      const button = screen.getByTestId("item-button")
-      expect(button.tagName).toBe("BUTTON")
-      expect(button).toHaveAttribute("data-slot", "item")
-    })
-  })
-
-  describe("ClassName", () => {
-    it("applies custom className", () => {
-      render(
-        <Item className="custom-class" data-testid="item">
-          Content
-        </Item>
-      )
-      expect(screen.getByTestId("item")).toHaveClass("custom-class")
-    })
-  })
-})
-
-// ============================================
-// ITEMGROUP TESTS
-// ============================================
-describe("ItemGroup", () => {
-  describe("Data Slot Attributes", () => {
-    it("renders ItemGroup with data-slot='item-group'", () => {
-      render(<ItemGroup data-testid="group">Children</ItemGroup>)
-      expect(screen.getByTestId("group")).toHaveAttribute(
-        "data-slot",
-        "item-group"
-      )
-    })
-  })
-
-  describe("Accessibility", () => {
-    it("has role='list'", () => {
-      render(<ItemGroup data-testid="group">Children</ItemGroup>)
-      expect(screen.getByTestId("group")).toHaveAttribute("role", "list")
-    })
-  })
-
-  describe("ClassName", () => {
-    it("applies custom className", () => {
-      render(
-        <ItemGroup className="custom-class" data-testid="group">
-          Children
-        </ItemGroup>
-      )
-      expect(screen.getByTestId("group")).toHaveClass("custom-class")
-    })
-
-    it("has flex column layout", () => {
-      render(<ItemGroup data-testid="group">Children</ItemGroup>)
-      expect(screen.getByTestId("group")).toHaveClass("flex")
-      expect(screen.getByTestId("group")).toHaveClass("flex-col")
-    })
-  })
-})
-
-// ============================================
-// ITEMMEDIA TESTS
-// ============================================
-describe("ItemMedia", () => {
-  describe("Data Slot Attributes", () => {
-    it("renders ItemMedia with data-slot='item-media'", () => {
-      render(<ItemMedia data-testid="media">Icon</ItemMedia>)
-      expect(screen.getByTestId("media")).toHaveAttribute(
-        "data-slot",
-        "item-media"
-      )
-    })
-  })
-
-  describe("Variant Prop", () => {
-    it("supports default variant", () => {
-      render(
-        <ItemMedia data-testid="media" variant="default">
-          Content
-        </ItemMedia>
-      )
-      const media = screen.getByTestId("media")
-      expect(media).toHaveAttribute("data-variant", "default")
-      expect(media).toHaveClass("bg-transparent")
-    })
-
-    it("supports icon variant", () => {
-      render(
-        <ItemMedia data-testid="media" variant="icon">
-          Icon
-        </ItemMedia>
-      )
-      const media = screen.getByTestId("media")
-      expect(media).toHaveAttribute("data-variant", "icon")
-      expect(media).toHaveClass("size-8")
-      expect(media).toHaveClass("border")
-      expect(media).toHaveClass("rounded-sm")
-      expect(media).toHaveClass("bg-muted")
-    })
-
-    it("supports image variant", () => {
-      render(
-        <ItemMedia data-testid="media" variant="image">
-          <img alt="test" src="/test.jpg" />
-        </ItemMedia>
-      )
-      const media = screen.getByTestId("media")
-      expect(media).toHaveAttribute("data-variant", "image")
-      expect(media).toHaveClass("size-10")
-      expect(media).toHaveClass("rounded-sm")
-      expect(media).toHaveClass("overflow-hidden")
-    })
-
-    it("uses default variant when not specified", () => {
-      render(<ItemMedia data-testid="media">Content</ItemMedia>)
-      expect(screen.getByTestId("media")).toHaveAttribute(
-        "data-variant",
-        "default"
-      )
-    })
-  })
-})
-
-// ============================================
-// SUB-COMPONENT DATA SLOT TESTS
-// ============================================
-describe("Item Sub-components", () => {
-  describe("ItemSeparator", () => {
-    it("renders with data-slot='item-separator'", () => {
-      render(<ItemSeparator data-testid="separator" />)
-      expect(screen.getByTestId("separator")).toHaveAttribute(
-        "data-slot",
-        "item-separator"
-      )
-    })
-  })
-
-  describe("ItemContent", () => {
-    it("renders with data-slot='item-content'", () => {
-      render(<ItemContent data-testid="content">Content</ItemContent>)
-      expect(screen.getByTestId("content")).toHaveAttribute(
-        "data-slot",
-        "item-content"
-      )
-    })
-
-    it("applies custom className", () => {
-      render(
-        <ItemContent className="custom-class" data-testid="content">
-          Content
-        </ItemContent>
-      )
-      expect(screen.getByTestId("content")).toHaveClass("custom-class")
-    })
-  })
-
-  describe("ItemTitle", () => {
-    it("renders with data-slot='item-title'", () => {
-      render(<ItemTitle data-testid="title">Title</ItemTitle>)
-      expect(screen.getByTestId("title")).toHaveAttribute(
-        "data-slot",
-        "item-title"
-      )
-    })
-
-    it("applies custom className", () => {
-      render(
-        <ItemTitle className="custom-class" data-testid="title">
-          Title
-        </ItemTitle>
-      )
-      expect(screen.getByTestId("title")).toHaveClass("custom-class")
-    })
-  })
-
-  describe("ItemDescription", () => {
-    it("renders with data-slot='item-description'", () => {
-      render(
-        <ItemDescription data-testid="description">Description</ItemDescription>
-      )
-      expect(screen.getByTestId("description")).toHaveAttribute(
-        "data-slot",
-        "item-description"
-      )
-    })
-
-    it("applies custom className", () => {
-      render(
-        <ItemDescription className="custom-class" data-testid="description">
-          Description
-        </ItemDescription>
-      )
-      expect(screen.getByTestId("description")).toHaveClass("custom-class")
-    })
-
-    it("renders as paragraph element", () => {
-      render(
-        <ItemDescription data-testid="description">Description</ItemDescription>
-      )
-      expect(screen.getByTestId("description").tagName).toBe("P")
-    })
-  })
-
-  describe("ItemActions", () => {
-    it("renders with data-slot='item-actions'", () => {
-      render(<ItemActions data-testid="actions">Actions</ItemActions>)
-      expect(screen.getByTestId("actions")).toHaveAttribute(
-        "data-slot",
-        "item-actions"
-      )
-    })
-
-    it("applies custom className", () => {
-      render(
-        <ItemActions className="custom-class" data-testid="actions">
-          Actions
-        </ItemActions>
-      )
-      expect(screen.getByTestId("actions")).toHaveClass("custom-class")
-    })
-  })
-
-  describe("ItemHeader", () => {
-    it("renders with data-slot='item-header'", () => {
-      render(<ItemHeader data-testid="header">Header</ItemHeader>)
-      expect(screen.getByTestId("header")).toHaveAttribute(
-        "data-slot",
-        "item-header"
-      )
-    })
-
-    it("applies custom className", () => {
-      render(
-        <ItemHeader className="custom-class" data-testid="header">
-          Header
-        </ItemHeader>
-      )
-      expect(screen.getByTestId("header")).toHaveClass("custom-class")
-    })
-  })
-
-  describe("ItemFooter", () => {
-    it("renders with data-slot='item-footer'", () => {
-      render(<ItemFooter data-testid="footer">Footer</ItemFooter>)
-      expect(screen.getByTestId("footer")).toHaveAttribute(
-        "data-slot",
-        "item-footer"
-      )
-    })
-
-    it("applies custom className", () => {
-      render(
-        <ItemFooter className="custom-class" data-testid="footer">
-          Footer
-        </ItemFooter>
-      )
-      expect(screen.getByTestId("footer")).toHaveClass("custom-class")
-    })
-  })
-})
-
-// ============================================
-// INTEGRATION TESTS
-// ============================================
-describe("Item Integration", () => {
-  it("renders complete Item with all sub-components", () => {
-    render(
-      <ItemGroup data-testid="group">
-        <Item data-testid="item">
-          <ItemMedia data-testid="media" variant="icon">
-            <span>Icon</span>
-          </ItemMedia>
-          <ItemContent data-testid="content">
-            <ItemTitle data-testid="title">Item Title</ItemTitle>
-            <ItemDescription data-testid="description">
-              Item description text
-            </ItemDescription>
-          </ItemContent>
-          <ItemActions data-testid="actions">
-            <button>Action</button>
-          </ItemActions>
-        </Item>
-        <ItemSeparator data-testid="separator" />
-        <Item>
-          <ItemHeader data-testid="header">Header Content</ItemHeader>
-          <ItemFooter data-testid="footer">Footer Content</ItemFooter>
-        </Item>
-      </ItemGroup>
-    )
-
-    expect(screen.getByTestId("group")).toBeInTheDocument()
-    expect(screen.getByTestId("item")).toBeInTheDocument()
-    expect(screen.getByTestId("media")).toBeInTheDocument()
-    expect(screen.getByTestId("content")).toBeInTheDocument()
-    expect(screen.getByTestId("title")).toBeInTheDocument()
-    expect(screen.getByTestId("description")).toBeInTheDocument()
-    expect(screen.getByTestId("actions")).toBeInTheDocument()
-    expect(screen.getByTestId("separator")).toBeInTheDocument()
-    expect(screen.getByTestId("header")).toBeInTheDocument()
-    expect(screen.getByTestId("footer")).toBeInTheDocument()
-  })
-
-  it("renders list of items with different variants", () => {
-    render(
-      <ItemGroup>
-        <Item data-testid="item-default" variant="default">
-          Default Item
-        </Item>
-        <Item data-testid="item-outline" variant="outline">
-          Outline Item
-        </Item>
-        <Item data-testid="item-muted" variant="muted">
-          Muted Item
-        </Item>
-      </ItemGroup>
-    )
-
-    expect(screen.getByTestId("item-default")).toHaveAttribute(
-      "data-variant",
-      "default"
-    )
-    expect(screen.getByTestId("item-outline")).toHaveAttribute(
-      "data-variant",
-      "outline"
-    )
-    expect(screen.getByTestId("item-muted")).toHaveAttribute(
-      "data-variant",
-      "muted"
-    )
-  })
-
-  it("renders clickable item using asChild", () => {
-    render(
-      <ItemGroup>
-        <Item asChild>
-          <a data-testid="clickable-item" href="/page">
-            <ItemContent>
-              <ItemTitle>Clickable Item</ItemTitle>
-            </ItemContent>
-          </a>
-        </Item>
-      </ItemGroup>
-    )
-
-    const link = screen.getByTestId("clickable-item")
-    expect(link.tagName).toBe("A")
-    expect(link).toHaveAttribute("href", "/page")
-    expect(screen.getByText("Clickable Item")).toBeInTheDocument()
-  })
-})

package/src/components/data-display/Item/Item.tsx

@@ -1,195 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import { Divider } from "../../primitives/Divider"
-
-function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("group/item-group flex flex-col", className)}
-      data-slot="item-group"
-      role="list"
-      {...props}
-    />
-  )
-}
-
-function ItemSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Divider>) {
-  return (
-    <Divider
-      className={cn("my-0", className)}
-      data-slot="item-separator"
-      orientation="horizontal"
-      {...props}
-    />
-  )
-}
-
-const itemVariants = cva(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border-border",
-        muted: "bg-muted/50",
-      },
-      size: {
-        default: "p-4 gap-4 ",
-        sm: "py-3 px-4 gap-2.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Item({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> &
-  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
-  return (
-    <Comp
-      className={cn(itemVariants({ variant, size, className }))}
-      data-size={size}
-      data-slot="item"
-      data-variant={variant}
-      {...props}
-    />
-  )
-}
-
-const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
-        image:
-          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function ItemMedia({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
-  return (
-    <div
-      className={cn(itemMediaVariants({ variant, className }))}
-      data-slot="item-media"
-      data-variant={variant}
-      {...props}
-    />
-  )
-}
-
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
-        className
-      )}
-      data-slot="item-content"
-      {...props}
-    />
-  )
-}
-
-function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
-        className
-      )}
-      data-slot="item-title"
-      {...props}
-    />
-  )
-}
-
-function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      className={cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      data-slot="item-description"
-      {...props}
-    />
-  )
-}
-
-function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("flex items-center gap-2", className)}
-      data-slot="item-actions"
-      {...props}
-    />
-  )
-}
-
-function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      data-slot="item-header"
-      {...props}
-    />
-  )
-}
-
-function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      data-slot="item-footer"
-      {...props}
-    />
-  )
-}
-
-export {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemFooter,
-  ItemGroup,
-  ItemHeader,
-  ItemMedia,
-  itemMediaVariants,
-  ItemSeparator,
-  ItemTitle,
-  itemVariants,
-}

package/src/components/data-display/Item/Item.types.ts

@@ -1,23 +0,0 @@
-import type { itemMediaVariants, itemVariants } from "./Item"
-import type { VariantProps } from "class-variance-authority"
-
-/**
- * Available item variants
- */
-export type ItemVariant = NonNullable<
-  VariantProps<typeof itemVariants>["variant"]
->
-
-/**
- * Available item sizes
- */
-export type ItemSize = NonNullable<
-  VariantProps<typeof itemVariants>["size"]
->
-
-/**
- * Available item media variants
- */
-export type ItemMediaVariant = NonNullable<
-  VariantProps<typeof itemMediaVariants>["variant"]
->