@etus/ui 0.1.0

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

@@ -0,0 +1,455 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "../../primitives/Avatar"
+import { Badge } from "../../primitives/Badge"
+import { SkeletonLoader } from "../../primitives/SkeletonLoader"
+
+// ============================================
+// TYPES
+// ============================================
+interface ListItem {
+  avatar?: string
+  badge?: string
+  description?: string
+  disabled?: boolean
+  id: string
+  label: string
+  onClick?: () => void
+}
+
+// ============================================
+// VARIANTS
+// ============================================
+const listVariants = cva(
+  "flex flex-col bg-background text-foreground transition-colors duration-150",
+  {
+    variants: {
+      variant: {
+        default: "border border-border rounded-md",
+        flat: "divide-y divide-border",
+        card: "gap-4 flex-col",
+        minimal: "divide-y divide-border border-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const listItemVariants = cva(
+  "group/list-item flex items-center text-sm transition-colors duration-150 outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border-b border-border last:border-b-0",
+        flat: "",
+        card: "border border-border rounded-md bg-background",
+        minimal: "",
+      },
+      size: {
+        sm: "px-3 py-2 min-h-8 gap-2",
+        default: "px-4 py-3 min-h-10 gap-3",
+        lg: "px-5 py-4 min-h-12 gap-4",
+      },
+      selectable: {
+        true: "cursor-pointer hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        false: "",
+      },
+      selected: {
+        true: "bg-muted",
+        false: "",
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      selectable: false,
+      selected: false,
+      disabled: false,
+    },
+  }
+)
+
+// ============================================
+// LIST COMPONENT
+// ============================================
+type ListProps = React.ComponentProps<"ul"> &
+  VariantProps<typeof listVariants> & {
+    items?: ListItem[]
+    loading?: boolean
+    multiple?: boolean
+    onSelect?: (item: ListItem) => void
+    selectable?: boolean
+  }
+
+function List({
+  className,
+  variant = "default",
+  items,
+  selectable = false,
+  multiple = false,
+  loading = false,
+  onSelect,
+  children,
+  ref,
+  ...props
+}: ListProps) {
+  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set())
+  const [focusedIndex, setFocusedIndex] = React.useState<number>(-1)
+  const itemRefsRef = React.useRef<Map<number, HTMLLIElement>>(new Map())
+
+  const handleSelect = React.useCallback(
+    (item: ListItem) => {
+      if (item.disabled) return
+
+      if (multiple) {
+        setSelectedIds((prev) => {
+          const newSet = new Set(prev)
+          if (newSet.has(item.id)) {
+            newSet.delete(item.id)
+          } else {
+            newSet.add(item.id)
+          }
+          return newSet
+        })
+      } else {
+        setSelectedIds(new Set([item.id]))
+      }
+
+      onSelect?.(item)
+      item.onClick?.()
+    },
+    [multiple, onSelect]
+  )
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLUListElement>) => {
+      if (!items || items.length === 0) return
+
+      const enabledIndices = items
+        .map((item, index) => (item.disabled ? -1 : index))
+        .filter((i) => i !== -1)
+
+      let newIndex = focusedIndex
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault()
+          if (focusedIndex === -1) {
+            newIndex = enabledIndices[0] ?? -1
+          } else {
+            const currentEnabledPos = enabledIndices.indexOf(focusedIndex)
+            const nextPos = Math.min(
+              currentEnabledPos + 1,
+              enabledIndices.length - 1
+            )
+            newIndex = enabledIndices[nextPos] ?? focusedIndex
+          }
+          break
+        case "ArrowUp":
+          e.preventDefault()
+          if (focusedIndex === -1) {
+            newIndex = enabledIndices[enabledIndices.length - 1] ?? -1
+          } else {
+            const currentEnabledPos = enabledIndices.indexOf(focusedIndex)
+            const prevPos = Math.max(currentEnabledPos - 1, 0)
+            newIndex = enabledIndices[prevPos] ?? focusedIndex
+          }
+          break
+        case "Enter":
+        case " ":
+          e.preventDefault()
+          if (focusedIndex >= 0 && selectable && items[focusedIndex]) {
+            handleSelect(items[focusedIndex])
+          }
+          break
+        case "Home":
+          e.preventDefault()
+          newIndex = enabledIndices[0] ?? -1
+          break
+        case "End":
+          e.preventDefault()
+          newIndex = enabledIndices[enabledIndices.length - 1] ?? -1
+          break
+      }
+
+      if (newIndex !== focusedIndex) {
+        setFocusedIndex(newIndex)
+        itemRefsRef.current.get(newIndex)?.focus()
+      }
+    },
+    [items, focusedIndex, selectable, handleSelect]
+  )
+
+  // Loading skeleton
+  if (loading) {
+    return (
+      <ul
+        ref={ref}
+        data-loading
+        aria-busy="true"
+        aria-label="Loading list"
+        className={cn(listVariants({ variant }), className)}
+        data-slot="list"
+        data-variant={variant}
+        role="list"
+        {...props}
+      >
+        {[1, 2, 3].map((i) => (
+          <li
+            key={i}
+            className={cn(listItemVariants({ variant, size: "default" }))}
+            data-slot="list-item"
+          >
+            <SkeletonLoader className="size-10 rounded-full" />
+            <div className="flex flex-1 flex-col gap-1">
+              <SkeletonLoader className="h-4 w-32" />
+              <SkeletonLoader className="h-3 w-24" />
+            </div>
+          </li>
+        ))}
+      </ul>
+    )
+  }
+
+  // Render with items prop
+  if (items && items.length > 0) {
+    return (
+      <ul
+        ref={ref}
+        aria-label={props["aria-label"]}
+        className={cn(listVariants({ variant }), className)}
+        data-slot="list"
+        data-variant={variant}
+        role={selectable ? "listbox" : "list"}
+        tabIndex={selectable ? 0 : undefined}
+        onKeyDown={selectable ? handleKeyDown : undefined}
+        {...props}
+      >
+        {items.map((item, index) => {
+          const isSelected = selectedIds.has(item.id)
+          const isFocused = focusedIndex === index
+
+          return (
+            <ListItemInternal
+              key={item.id}
+              ref={(el) => {
+                if (el) {
+                  itemRefsRef.current.set(index, el)
+                } else {
+                  itemRefsRef.current.delete(index)
+                }
+              }}
+              tabIndex={
+                selectable
+                  ? isFocused || (focusedIndex === -1 && index === 0)
+                    ? 0
+                    : -1
+                  : undefined
+              }
+              aria-disabled={item.disabled ? true : undefined}
+              aria-selected={selectable ? isSelected : undefined}
+              data-focused={isFocused ? true : undefined}
+              data-selected={isSelected ? true : undefined}
+              disabled={item.disabled}
+              isFocused={isFocused}
+              item={item}
+              selectable={selectable}
+              selected={isSelected}
+              variant={variant}
+              onClick={
+                selectable && !item.disabled
+                  ? () => { handleSelect(item); }
+                  : undefined
+              }
+            />
+          )
+        })}
+      </ul>
+    )
+  }
+
+  // Render with children
+  return (
+    <ul
+      ref={ref}
+      aria-label={props["aria-label"]}
+      className={cn(listVariants({ variant }), className)}
+      data-slot="list"
+      data-variant={variant}
+      role="list"
+      {...props}
+    >
+      {children}
+    </ul>
+  )
+}
+
+// ============================================
+// INTERNAL LIST ITEM (for items prop rendering)
+// ============================================
+interface ListItemInternalProps
+  extends Omit<React.ComponentProps<"li">, "onClick"> {
+  disabled?: boolean
+  isFocused?: boolean
+  item: ListItem
+  onClick?: () => void
+  selectable?: boolean
+  selected?: boolean
+  variant?: "card" | "default" | "flat" | "minimal" | null
+}
+
+function ListItemInternal({
+  ref,
+  item,
+  variant = "default",
+  selectable = false,
+  selected = false,
+  disabled = false,
+  isFocused = false,
+  onClick,
+  className,
+  ...props
+}: ListItemInternalProps & { ref?: React.Ref<HTMLLIElement | null> }) {
+    return (
+      <li
+        ref={ref}
+        className={cn(
+          listItemVariants({
+            variant,
+            size: "default",
+            selectable,
+            selected,
+            disabled,
+          }),
+          isFocused && "ring-[3px] ring-ring/50",
+          className
+        )}
+        data-slot="list-item"
+        role={selectable ? "option" : undefined}
+        onClick={onClick}
+        {...props}
+      >
+        {item.avatar && (
+          <Avatar className="size-10" data-slot="list-item-avatar">
+            <AvatarImage alt={item.label} src={item.avatar} />
+            <AvatarFallback>
+              {item.label.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+        )}
+
+        <div className="flex flex-1 flex-col gap-0.5" data-slot="list-item-content">
+          <span className="font-medium leading-snug">{item.label}</span>
+          {item.description && (
+            <span
+              className="text-muted-foreground text-xs leading-normal"
+              data-slot="list-item-description"
+            >
+              {item.description}
+            </span>
+          )}
+        </div>
+
+        {item.badge && (
+          <div data-slot="list-item-actions">
+            <Badge color="muted" type="pill-color">{item.badge}</Badge>
+          </div>
+        )}
+      </li>
+    )
+  }
+
+// ============================================
+// PUBLIC LIST ITEM COMPONENT
+// ============================================
+interface ListItemProps extends Omit<React.ComponentProps<"li">, "disabled"> {
+  disabled?: boolean
+  selectable?: boolean
+  selected?: boolean
+  size?: "default" | "lg" | "sm"
+  variant?: "card" | "default" | "flat" | "minimal"
+}
+
+function ListItem({
+  className,
+  variant = "default",
+  size = "default",
+  selectable = false,
+  selected = false,
+  disabled = false,
+  ref,
+  ...restProps
+}: ListItemProps) {
+  return (
+    <li
+      ref={ref}
+      className={cn(
+        listItemVariants({ variant, size, selectable, selected, disabled }),
+        className
+      )}
+      aria-disabled={disabled ? true : undefined}
+      aria-selected={selectable ? selected : undefined}
+      data-disabled={disabled ? true : undefined}
+      data-selected={selected ? true : undefined}
+      data-size={size}
+      data-slot="list-item"
+      data-variant={variant}
+      role={selectable ? "option" : undefined}
+      tabIndex={selectable && !disabled ? 0 : undefined}
+      {...restProps}
+    />
+  )
+}
+
+// ============================================
+// LIST ITEM CONTENT
+// ============================================
+function ListItemContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-1 flex-col gap-0.5", className)}
+      data-slot="list-item-content"
+      {...props}
+    />
+  )
+}
+
+// ============================================
+// LIST ITEM ACTIONS
+// ============================================
+function ListItemActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex items-center gap-2", className)}
+      data-slot="list-item-actions"
+      {...props}
+    />
+  )
+}
+
+// ============================================
+// EXPORTS
+// ============================================
+export {
+  List,
+  ListItem,
+  ListItemActions,
+  ListItemContent,
+  listItemVariants,
+  listVariants,
+}
+export type { ListItemProps, ListItem as ListItemType, ListProps }

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

@@ -0,0 +1,67 @@
+import type { listItemVariants, listVariants } from "./List"
+import type { VariantProps } from "class-variance-authority"
+
+/**
+ * Single item in a List when using the items prop
+ */
+export interface ListItemData {
+  /** Optional avatar URL */
+  avatar?: string
+  /** Optional badge text */
+  badge?: string
+  /** Optional description text */
+  description?: string
+  /** Whether the item is disabled */
+  disabled?: boolean
+  /** Unique identifier for the item */
+  id: string
+  /** Primary label text */
+  label: string
+  /** Click handler for the item */
+  onClick?: () => void
+}
+
+/**
+ * Props for the List component
+ */
+export type ListProps = React.ComponentProps<"ul"> &
+  VariantProps<typeof listVariants> & {
+    /** Array of items to render (alternative to children) */
+    items?: ListItemData[]
+    /** Whether the list is in a loading state */
+    loading?: boolean
+    /** Allow multiple selection when selectable is true */
+    multiple?: boolean
+    /** Callback when an item is selected */
+    onSelect?: (item: ListItemData) => void
+    /** Enable item selection mode */
+    selectable?: boolean
+  }
+
+/**
+ * Props for the ListItem component
+ */
+export interface ListItemProps
+  extends Omit<React.ComponentProps<"li">, "disabled">,
+    VariantProps<typeof listItemVariants> {
+  /** Whether the item is disabled */
+  disabled?: boolean
+  /** Enable selection styling */
+  selectable?: boolean
+  /** Whether the item is currently selected */
+  selected?: boolean
+}
+
+/**
+ * Props for internal list item rendering
+ */
+export interface ListItemInternalProps
+  extends Omit<React.ComponentProps<"li">, "onClick"> {
+  disabled?: boolean
+  isFocused?: boolean
+  item: ListItemData
+  onClick?: () => void
+  selectable?: boolean
+  selected?: boolean
+  variant?: "card" | "default" | "flat" | "minimal" | null
+}

package/src/components/data-display/List/List.variants.ts

@@ -0,0 +1,69 @@
+// List/List.variants.ts
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * List container style variants using CVA
+ *
+ * @see https://cva.style/docs
+ */
+export const listVariants = cva(
+  "flex flex-col bg-background text-foreground transition-colors duration-150",
+  {
+    variants: {
+      variant: {
+        default: "border border-border rounded-md",
+        flat: "divide-y divide-border",
+        card: "gap-4 flex-col",
+        minimal: "divide-y divide-border border-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * List item style variants
+ */
+export const listItemVariants = cva(
+  "group/list-item flex items-center text-sm transition-colors duration-150 outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border-b border-border last:border-b-0",
+        flat: "",
+        card: "border border-border rounded-md bg-background",
+        minimal: "",
+      },
+      size: {
+        sm: "px-3 py-2 min-h-8 gap-2",
+        default: "px-4 py-3 min-h-10 gap-3",
+        lg: "px-5 py-4 min-h-12 gap-4",
+      },
+      selectable: {
+        true: "cursor-pointer hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        false: "",
+      },
+      selected: {
+        true: "bg-muted",
+        false: "",
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      selectable: false,
+      selected: false,
+      disabled: false,
+    },
+  }
+)
+
+// Export variant prop types
+export type ListVariantProps = VariantProps<typeof listVariants>
+export type ListItemVariantProps = VariantProps<typeof listItemVariants>