@etus/ui 0.1.0 → 0.1.2

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

@@ -1,455 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,69 +0,0 @@
-// 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>