@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/kanban/kanban-board.tsx

@@ -0,0 +1,146 @@
+import {
+  closestCorners,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragOverEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core'
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable'
+import { useState } from 'react'
+import { cn } from '../../lib/utils'
+import { KanbanCard } from './kanban-card'
+import { KanbanColumn } from './kanban-column'
+import type { KanbanBoardProps, KanbanCardItem } from './kanban-types'
+
+export function KanbanBoard({
+  cards,
+  className,
+  columns,
+  emptyColumnMessage,
+  onAddCard,
+  onCardClick,
+  onCardMove,
+  renderCardFooter,
+  showAddCard = true,
+}: KanbanBoardProps) {
+  const [activeCard, setActiveCard] = useState<KanbanCardItem | null>(null)
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  )
+
+  function handleDragStart(event: DragStartEvent) {
+    const { active } = event
+    const foundCard = cards.find((c) => c.id === active.id)
+    if (foundCard) {
+      setActiveCard(foundCard)
+    }
+  }
+
+  function handleDragOver(event: DragOverEvent) {
+    const { active, over } = event
+    if (!over) return
+
+    const activeId = String(active.id)
+    const overId = String(over.id)
+
+    if (activeId === overId) return
+
+    const isActiveCard = active.data.current?.type === 'Card'
+    const isOverCard = over.data.current?.type === 'Card'
+    const isOverColumn = over.data.current?.type === 'Column'
+
+    if (!isActiveCard) return
+
+    const draggedCard = cards.find((c) => c.id === activeId)
+    if (!draggedCard) return
+
+    if (isOverCard) {
+      const overCard = cards.find((c) => c.id === overId)
+      if (overCard && draggedCard.columnId !== overCard.columnId) {
+        const columnCards = cards.filter((c) => c.columnId === overCard.columnId)
+        const targetIndex = columnCards.findIndex((c) => c.id === overId)
+        onCardMove?.(activeId, overCard.columnId, targetIndex >= 0 ? targetIndex : 0)
+      }
+    } else if (isOverColumn) {
+      if (draggedCard.columnId !== overId) {
+        const columnCards = cards.filter((c) => c.columnId === overId)
+        onCardMove?.(activeId, overId, columnCards.length)
+      }
+    }
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    setActiveCard(null)
+
+    if (!over) return
+
+    const activeId = String(active.id)
+    const overId = String(over.id)
+
+    const draggedCard = cards.find((c) => c.id === activeId)
+    if (!draggedCard) return
+
+    const isOverCard = over.data.current?.type === 'Card'
+    const isOverColumn = over.data.current?.type === 'Column'
+
+    if (isOverCard) {
+      const overCard = cards.find((c) => c.id === overId)
+      if (overCard) {
+        const columnCards = cards.filter((c) => c.columnId === overCard.columnId)
+        const newIndex = columnCards.findIndex((c) => c.id === overId)
+        onCardMove?.(activeId, overCard.columnId, newIndex >= 0 ? newIndex : 0)
+      }
+    } else if (isOverColumn) {
+      const columnCards = cards.filter((c) => c.columnId === overId)
+      onCardMove?.(activeId, overId, columnCards.length)
+    }
+  }
+
+  return (
+    <DndContext
+      collisionDetection={closestCorners}
+      sensors={sensors}
+      onDragEnd={handleDragEnd}
+      onDragOver={handleDragOver}
+      onDragStart={handleDragStart}
+    >
+      <div
+        className={cn('flex h-full w-full gap-4 overflow-x-auto pb-4 scrollbar-thin', className)}
+      >
+        {columns.map((column) => {
+          const columnCards = cards.filter((c) => c.columnId === column.id)
+          return (
+            <KanbanColumn
+              cards={columnCards}
+              column={column}
+              emptyMessage={emptyColumnMessage}
+              key={column.id}
+              onAddCard={onAddCard}
+              onCardClick={onCardClick}
+              renderCardFooter={renderCardFooter}
+              showAddCard={showAddCard}
+            />
+          )
+        })}
+      </div>
+
+      <DragOverlay>
+        {activeCard ? <KanbanCard card={activeCard} isDragOverlay /> : null}
+      </DragOverlay>
+    </DndContext>
+  )
+}

package/src/blocks/kanban/kanban-card.tsx

@@ -0,0 +1,149 @@
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Calendar, GripVertical } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { Badge } from '../../components/badge'
+import { cn } from '../../lib/utils'
+import type { KanbanCardItem, KanbanPriority } from './kanban-types'
+
+const priorityStyles: Record<KanbanPriority, { badge: string; border: string; label: string }> = {
+  low: {
+    badge: 'bg-muted text-muted-foreground border-transparent',
+    border: 'border-l-muted-foreground/40',
+    label: 'Low',
+  },
+  medium: {
+    badge: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20',
+    border: 'border-l-blue-500',
+    label: 'Medium',
+  },
+  high: {
+    badge: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20',
+    border: 'border-l-amber-500',
+    label: 'High',
+  },
+  urgent: {
+    badge: 'bg-destructive/10 text-destructive border-destructive/20',
+    border: 'border-l-destructive',
+    label: 'Urgent',
+  },
+}
+
+export interface KanbanCardProps {
+  card: KanbanCardItem
+  isDragOverlay?: boolean
+  onClick?: (card: KanbanCardItem) => void
+  renderFooter?: (card: KanbanCardItem) => ReactNode
+}
+
+export function KanbanCard({
+  card,
+  isDragOverlay = false,
+  onClick,
+  renderFooter,
+}: KanbanCardProps) {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+    data: { card, type: 'Card' },
+    id: card.id,
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  const priority = card.priority ? priorityStyles[card.priority] : null
+
+  return (
+    <div
+      className={cn(
+        'group relative flex flex-col gap-2 rounded-xl border border-border/80 bg-card p-3.5 text-card-foreground shadow-xs transition-shadow hover:border-foreground/25 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
+        priority?.border ? cn('border-l-4', priority.border) : '',
+        isDragging && 'opacity-40 shadow-inner',
+        isDragOverlay && 'rotate-1 shadow-lg ring-2 ring-primary/20 cursor-grabbing',
+      )}
+      ref={setNodeRef}
+      style={style}
+      tabIndex={0}
+      onClick={() => onClick?.(card)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onClick?.(card)
+        }
+      }}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <h4 className="text-sm font-medium leading-snug tracking-tight text-foreground select-none">
+          {card.title}
+        </h4>
+        <button
+          aria-label={`Drag card: ${card.title}`}
+          className="shrink-0 cursor-grab text-muted-foreground/50 opacity-60 transition-opacity hover:text-foreground hover:opacity-100 group-hover:opacity-100 focus-visible:opacity-100 active:cursor-grabbing"
+          type="button"
+          {...attributes}
+          {...listeners}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <GripVertical className="size-4" />
+        </button>
+      </div>
+
+      {card.description && (
+        <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground select-none">
+          {card.description}
+        </p>
+      )}
+
+      {(card.tags?.length || card.priority) && (
+        <div className="flex flex-wrap items-center gap-1.5 pt-1">
+          {priority && (
+            <Badge className={cn('text-[10px] font-semibold tracking-tight', priority.badge)}>
+              {priority.label}
+            </Badge>
+          )}
+          {card.tags?.map((tag) => (
+            <span
+              className="inline-flex items-center rounded-md bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground"
+              key={tag}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between gap-2 border-t border-border/40 pt-2 text-xs text-muted-foreground">
+        {card.dueDate ? (
+          <span className="flex items-center gap-1 text-[11px]">
+            <Calendar className="size-3" />
+            {card.dueDate}
+          </span>
+        ) : (
+          <span />
+        )}
+
+        {card.assignee && (
+          <div className="flex items-center gap-1.5" title={`Assigned to ${card.assignee.name}`}>
+            {card.assignee.avatarUrl ? (
+              <img
+                alt={card.assignee.name}
+                className="size-4.5 rounded-full object-cover ring-1 ring-border"
+                src={card.assignee.avatarUrl}
+              />
+            ) : (
+              <span className="flex size-4.5 items-center justify-center rounded-full bg-primary/10 text-[9px] font-semibold text-primary">
+                {card.assignee.name.charAt(0).toUpperCase()}
+              </span>
+            )}
+            <span className="max-w-20 truncate text-[11px] font-medium text-foreground/80">
+              {card.assignee.name}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {renderFooter?.(card)}
+    </div>
+  )
+}

package/src/blocks/kanban/kanban-column.tsx

@@ -0,0 +1,102 @@
+import { useDroppable } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { Plus } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { Badge } from '../../components/badge'
+import { Button } from '../../components/button'
+import { cn } from '../../lib/utils'
+import { KanbanCard } from './kanban-card'
+import type { KanbanCardItem, KanbanColumnItem } from './kanban-types'
+
+export interface KanbanColumnProps {
+  cards: readonly KanbanCardItem[]
+  column: KanbanColumnItem
+  emptyMessage?: string
+  onAddCard?: (columnId: string) => void
+  onCardClick?: (card: KanbanCardItem) => void
+  renderCardFooter?: (card: KanbanCardItem) => ReactNode
+  showAddCard?: boolean
+}
+
+export function KanbanColumn({
+  cards,
+  column,
+  emptyMessage = 'No cards in this column',
+  onAddCard,
+  onCardClick,
+  renderCardFooter,
+  showAddCard = true,
+}: KanbanColumnProps) {
+  const { isOver, setNodeRef } = useDroppable({
+    data: { column, type: 'Column' },
+    id: column.id,
+  })
+
+  const cardIds = cards.map((c) => c.id)
+  const isOverLimit = column.limit && cards.length > column.limit
+
+  return (
+    <div
+      className={cn(
+        'flex w-80 shrink-0 flex-col rounded-2xl border border-border/70 bg-muted/30 p-3 shadow-2xs transition-colors',
+        isOver && 'border-primary/50 bg-primary/5 ring-1 ring-primary/20',
+      )}
+    >
+      <header className="mb-3 flex items-center justify-between px-1.5 pt-1">
+        <div className="flex items-center gap-2">
+          {column.accentColor && (
+            <span
+              className="size-2.5 rounded-full"
+              style={{ backgroundColor: column.accentColor }}
+            />
+          )}
+          <h3 className="text-sm font-semibold tracking-tight text-foreground">{column.title}</h3>
+          <Badge
+            className={cn(
+              'h-5 px-1.5 text-[11px] font-medium',
+              isOverLimit ? 'bg-destructive/15 text-destructive' : 'bg-muted text-muted-foreground',
+            )}
+            variant="outline"
+          >
+            {cards.length}
+            {column.limit ? ` / ${column.limit}` : ''}
+          </Badge>
+        </div>
+
+        {showAddCard && onAddCard && (
+          <Button
+            aria-label={`Add card to ${column.title}`}
+            className="size-7 rounded-lg text-muted-foreground hover:text-foreground"
+            size="icon"
+            variant="ghost"
+            onClick={() => onAddCard(column.id)}
+          >
+            <Plus className="size-4" />
+          </Button>
+        )}
+      </header>
+
+      <div
+        className="flex flex-1 flex-col gap-2.5 overflow-y-auto min-h-32 px-0.5 pb-1"
+        ref={setNodeRef}
+      >
+        <SortableContext items={cardIds} strategy={verticalListSortingStrategy}>
+          {cards.map((card) => (
+            <KanbanCard
+              card={card}
+              key={card.id}
+              onClick={onCardClick}
+              renderFooter={renderCardFooter}
+            />
+          ))}
+        </SortableContext>
+
+        {cards.length === 0 && (
+          <div className="flex flex-1 items-center justify-center rounded-xl border border-dashed border-border/60 py-8 text-center text-xs text-muted-foreground/70">
+            {emptyMessage}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/blocks/kanban/kanban-types.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+
+export type KanbanPriority = 'low' | 'medium' | 'high' | 'urgent'
+
+export interface KanbanCardItem {
+  assignee?: {
+    avatarUrl?: string
+    name: string
+  }
+  columnId: string
+  description?: string
+  dueDate?: string
+  id: string
+  priority?: KanbanPriority
+  tags?: readonly string[]
+  title: string
+}
+
+export interface KanbanColumnItem {
+  accentColor?: string
+  cardIds?: readonly string[]
+  description?: string
+  id: string
+  limit?: number
+  title: string
+}
+
+export interface KanbanBoardProps {
+  cards: readonly KanbanCardItem[]
+  className?: string
+  columns: readonly KanbanColumnItem[]
+  emptyColumnMessage?: string
+  onAddCard?: (columnId: string) => void
+  onCardClick?: (card: KanbanCardItem) => void
+  onCardMove?: (cardId: string, targetColumnId: string, newIndex: number) => void
+  renderCardFooter?: (card: KanbanCardItem) => ReactNode
+  showAddCard?: boolean
+}

package/src/blocks/loader/global-loader.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useRef, useState, type ComponentProps } from 'react'
+
+import { Spinner } from '@devxcrew/react-ui/components/spinner'
+import { cn } from '@devxcrew/react-ui/lib/utils'
+
+type GlobalLoaderProps = ComponentProps<'div'> & {
+  active: boolean
+  delayMs?: number
+  label?: string
+  minimumDurationMs?: number
+  overlay?: boolean
+}
+
+const FADE_DURATION_MS = 160
+
+export function GlobalLoader({
+  active,
+  className,
+  delayMs = 120,
+  label = 'Loading',
+  minimumDurationMs = 220,
+  overlay = false,
+  ...props
+}: GlobalLoaderProps) {
+  const { mounted, visible } = useLoaderPresence(active, delayMs, minimumDurationMs)
+
+  if (!mounted) {
+    return null
+  }
+
+  return (
+    <div
+      aria-busy={active}
+      aria-hidden={!visible}
+      aria-live="polite"
+      data-slot="global-loader"
+      role="status"
+      className={cn(
+        'flex min-h-full items-center justify-center gap-3 bg-background px-6 text-sm text-muted-foreground transition-opacity duration-150 ease-out',
+        overlay && 'absolute inset-0 z-10',
+        visible ? 'opacity-100' : 'pointer-events-none opacity-0',
+        className,
+      )}
+      {...props}
+    >
+      <Spinner className="size-5 text-foreground" />
+      <span>{label}</span>
+    </div>
+  )
+}
+
+function useLoaderPresence(active: boolean, delayMs: number, minimumDurationMs: number) {
+  const [mounted, setMounted] = useState(active && delayMs === 0)
+  const [visible, setVisible] = useState(active && delayMs === 0)
+  const shownAt = useRef<number | undefined>(undefined)
+
+  useEffect(() => {
+    let hideTimer: ReturnType<typeof setTimeout> | undefined
+    let showTimer: ReturnType<typeof setTimeout> | undefined
+    let unmountTimer: ReturnType<typeof setTimeout> | undefined
+
+    if (active && !mounted) {
+      showTimer = setTimeout(() => {
+        shownAt.current = Date.now()
+        setMounted(true)
+        setVisible(true)
+      }, delayMs)
+    } else if (active) {
+      shownAt.current ??= Date.now()
+      setVisible(true)
+    } else if (mounted) {
+      const elapsed = shownAt.current ? Date.now() - shownAt.current : minimumDurationMs
+      hideTimer = setTimeout(
+        () => {
+          setVisible(false)
+          unmountTimer = setTimeout(() => setMounted(false), FADE_DURATION_MS)
+        },
+        Math.max(0, minimumDurationMs - elapsed),
+      )
+    }
+
+    return () => {
+      clearTimeout(hideTimer)
+      clearTimeout(showTimer)
+      clearTimeout(unmountTimer)
+    }
+  }, [active, delayMs, minimumDurationMs, mounted])
+
+  return { mounted, visible }
+}

package/src/blocks/loader/index.ts

@@ -0,0 +1 @@
+export { GlobalLoader } from './global-loader'

package/src/blocks/mascot/README.md

@@ -0,0 +1,21 @@
+# Mascot block
+
+The Mascot block provides the shared runtime for a cursor-aware, clickable character.
+
+## Asset contract
+
+Each character supplies two aligned 3x3 sprite atlases:
+
+- `directions`: nine head directions in clockwise pointer order with `center` in the middle.
+- `reactions`: nine expressions, including `blink`, `heart`, `sparkle`, and `dizzy`.
+
+The app owns these served or imported asset URLs. This keeps the package reusable across apps and
+allows each app to select a character or generate its own atlases without changing the component.
+Set `trackPointer={false}` for dense variant galleries where only click reactions are needed.
+
+## Runtime behavior
+
+The component selects a direction from the pointer sector, uses a dead zone and hysteresis to avoid
+jitter, and pre-mounts the reaction sheet so the first click does not fetch it late. Clicks cycle
+through payoff reactions, trigger `dizzy` after four quick boops, and respect
+`prefers-reduced-motion` for the squash animation.

package/src/blocks/mascot/index.ts

@@ -0,0 +1,2 @@
+export { Mascot } from "./mascot";
+export type { MascotProps } from "./mascot";