@mdxui/issues 6.0.0

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,5 @@
+
+
+> @mdxui/issues@5.0.2 typecheck /Users/chrisrisner/Workspace/dot-do/ui/packages/issues
+> tsc --noEmit
+

package/CHANGELOG.md

@@ -0,0 +1,80 @@
+# @mdxui/issues
+
+## 6.0.0
+
+### Patch Changes
+
+- @mdxui/primitives@6.0.0
+- mdxui@6.0.0
+
+## 5.0.2
+
+### Patch Changes
+
+- @mdxui/primitives@5.0.2
+- mdxui@5.0.2
+
+## 5.0.1
+
+### Patch Changes
+
+- @mdxui/primitives@5.0.1
+- mdxui@5.0.1
+
+## 5.0.0
+
+### Patch Changes
+
+- @mdxui/primitives@5.0.0
+- mdxui@5.0.0
+
+## 4.0.0
+
+### Patch Changes
+
+- @mdxui/primitives@4.0.0
+- mdxui@4.0.0
+
+## 3.0.1
+
+### Patch Changes
+
+- @mdxui/primitives@3.0.1
+- mdxui@3.0.1
+
+## 3.0.0
+
+### Patch Changes
+
+- @mdxui/primitives@3.0.0
+- mdxui@3.0.0
+
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - mdxui@2.1.1
+  - @mdxui/primitives@2.1.1
+
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies [8101194]
+  - mdxui@2.0.0
+
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [defc863]
+  - mdxui@1.0.0
+
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [4d0d1a0]
+  - mdxui@0.4.1
+  - @mdxui/primitives@0.4.1

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@mdxui/issues",
+  "version": "6.0.0",
+  "sideEffects": false,
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./components": "./src/components/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./types": "./src/types/index.ts"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "5.9.3",
+    "@mdxui/typescript-config": "6.0.0"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.3",
+    "zod": "^4.3.5",
+    "zustand": "^5.0.9",
+    "mdxui": "6.0.0",
+    "@mdxui/primitives": "6.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf .turbo node_modules"
+  }
+}

package/src/components/epic-list.tsx

@@ -0,0 +1,210 @@
+'use client'
+
+import * as React from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@mdxui/primitives/card'
+import { Progress } from '@mdxui/primitives/progress'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@mdxui/primitives/collapsible'
+import { cn } from '@mdxui/primitives/lib/utils'
+import { ChevronRight, ChevronDown } from 'lucide-react'
+import { TypeBadge, PriorityBadge, StatusBadge } from './issue-badges'
+import { useIssuesStore } from '../hooks/use-issues-store'
+import type { Issue, Epic } from '../types'
+
+export interface EpicListProps {
+  /** Epics to display */
+  epics?: Epic[]
+  /** All issues (for calculating epic progress) */
+  issues?: Issue[]
+  /** Callback when an issue is selected */
+  onSelectIssue?: (issue: Issue) => void
+  /** Custom class name */
+  className?: string
+}
+
+export function EpicList({
+  epics: propEpics,
+  issues: propIssues,
+  onSelectIssue,
+  className,
+}: EpicListProps) {
+  const storeIssues = useIssuesStore((s) => s.issues)
+  const selectIssue = useIssuesStore((s) => s.selectIssue)
+  const selectedId = useIssuesStore((s) => s.selectedId)
+
+  const issues = propIssues ?? storeIssues
+
+  // Derive epics from issues with type='epic' if not provided
+  const epics = React.useMemo(() => {
+    if (propEpics) return propEpics
+
+    // Find all epic-type issues
+    const epicIssues = issues.filter((i) => i.type === 'epic')
+
+    return epicIssues.map((epic) => {
+      // Find issues that belong to this epic
+      const epicChildIssues = issues.filter((i) => i.epic === epic.id)
+      const closedCount = epicChildIssues.filter((i) => i.status === 'closed').length
+      const progress =
+        epicChildIssues.length > 0 ? Math.round((closedCount / epicChildIssues.length) * 100) : 0
+
+      return {
+        id: epic.id,
+        title: epic.title,
+        description: epic.description,
+        issues: epicChildIssues.map((i) => i.id),
+        progress,
+        createdAt: epic.createdAt,
+        updatedAt: epic.updatedAt,
+      } satisfies Epic
+    })
+  }, [propEpics, issues])
+
+  const handleSelectIssue = (issue: Issue) => {
+    selectIssue(issue.id)
+    onSelectIssue?.(issue)
+  }
+
+  const getEpicIssues = (epicId: string): Issue[] => {
+    return issues.filter((i) => i.epic === epicId)
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {epics.length === 0 ? (
+        <Card>
+          <CardContent className="py-8 text-center text-muted-foreground">
+            No epics found
+          </CardContent>
+        </Card>
+      ) : (
+        epics.map((epic) => {
+          const epicIssues = getEpicIssues(epic.id)
+          const closedCount = epicIssues.filter((i) => i.status === 'closed').length
+          const inProgressCount = epicIssues.filter((i) => i.status === 'in_progress').length
+          const blockedCount = epicIssues.filter((i) => i.status === 'blocked').length
+
+          return (
+            <EpicCard
+              key={epic.id}
+              epic={epic}
+              issues={epicIssues}
+              stats={{
+                total: epicIssues.length,
+                closed: closedCount,
+                inProgress: inProgressCount,
+                blocked: blockedCount,
+              }}
+              selectedId={selectedId}
+              onSelectIssue={handleSelectIssue}
+            />
+          )
+        })
+      )}
+    </div>
+  )
+}
+
+interface EpicCardProps {
+  epic: Epic
+  issues: Issue[]
+  stats: {
+    total: number
+    closed: number
+    inProgress: number
+    blocked: number
+  }
+  selectedId: string | null
+  onSelectIssue: (issue: Issue) => void
+}
+
+function EpicCard({ epic, issues, stats, selectedId, onSelectIssue }: EpicCardProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Card>
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CollapsibleTrigger asChild>
+          <CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors">
+            <div className="flex items-start gap-3">
+              <div className="mt-1">
+                {isOpen ? (
+                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                ) : (
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                )}
+              </div>
+              <div className="flex-1 space-y-2">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-base">{epic.title}</CardTitle>
+                  <span className="text-sm text-muted-foreground font-mono">{epic.id}</span>
+                </div>
+                {epic.description && (
+                  <p className="text-sm text-muted-foreground line-clamp-2">
+                    {epic.description}
+                  </p>
+                )}
+                <div className="flex items-center gap-4">
+                  <div className="flex-1">
+                    <Progress value={epic.progress} className="h-2" />
+                  </div>
+                  <span className="text-sm font-medium">{epic.progress}%</span>
+                </div>
+                <div className="flex gap-4 text-xs text-muted-foreground">
+                  <span>{stats.total} issues</span>
+                  <span className="text-green-600">{stats.closed} closed</span>
+                  <span className="text-yellow-600">{stats.inProgress} in progress</span>
+                  {stats.blocked > 0 && (
+                    <span className="text-red-600">{stats.blocked} blocked</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </CardHeader>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <CardContent className="pt-0">
+            <div className="border-t pt-4 space-y-2">
+              {issues.length === 0 ? (
+                <div className="text-sm text-muted-foreground italic">
+                  No issues in this epic
+                </div>
+              ) : (
+                issues.map((issue) => (
+                  <div
+                    key={issue.id}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => onSelectIssue(issue)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        onSelectIssue(issue)
+                      }
+                    }}
+                    className={cn(
+                      'flex items-center gap-3 p-2 rounded-md cursor-pointer hover:bg-muted/50 transition-colors',
+                      issue.id === selectedId && 'bg-muted'
+                    )}
+                  >
+                    <span className="font-mono text-xs text-muted-foreground w-24 shrink-0">
+                      {issue.id}
+                    </span>
+                    <TypeBadge type={issue.type} />
+                    <span className="flex-1 text-sm truncate">{issue.title}</span>
+                    <StatusBadge status={issue.status} />
+                    <PriorityBadge priority={issue.priority} />
+                  </div>
+                ))
+              )}
+            </div>
+          </CardContent>
+        </CollapsibleContent>
+      </Collapsible>
+    </Card>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './issue-list'
+export * from './issue-board'
+export * from './issue-detail'
+export * from './issue-card'
+export * from './issue-row'
+export * from './issue-dialog'
+export * from './issue-filters'
+export * from './issue-badges'
+export * from './epic-list'

package/src/components/issue-badges.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { Badge } from '@mdxui/primitives/badge'
+import { cn } from '@mdxui/primitives/lib/utils'
+import type { IssueStatus, IssueType, IssuePriority } from '../types'
+
+// =============================================================================
+// Status Badge
+// =============================================================================
+
+const statusConfig: Record<IssueStatus, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }> = {
+  open: { label: 'Open', variant: 'secondary' },
+  in_progress: { label: 'In Progress', variant: 'default' },
+  blocked: { label: 'Blocked', variant: 'destructive' },
+  closed: { label: 'Closed', variant: 'outline' },
+}
+
+export interface StatusBadgeProps {
+  status: IssueStatus
+  className?: string
+}
+
+export function StatusBadge({ status, className }: StatusBadgeProps) {
+  const config = statusConfig[status]
+  return (
+    <Badge variant={config.variant} className={className}>
+      {config.label}
+    </Badge>
+  )
+}
+
+// =============================================================================
+// Type Badge
+// =============================================================================
+
+const typeConfig: Record<IssueType, { label: string; color: string }> = {
+  task: { label: 'Task', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' },
+  bug: { label: 'Bug', color: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' },
+  feature: { label: 'Feature', color: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' },
+  epic: { label: 'Epic', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' },
+  story: { label: 'Story', color: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200' },
+  chore: { label: 'Chore', color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200' },
+}
+
+export interface TypeBadgeProps {
+  type: IssueType
+  className?: string
+}
+
+export function TypeBadge({ type, className }: TypeBadgeProps) {
+  const config = typeConfig[type]
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium',
+        config.color,
+        className
+      )}
+    >
+      {config.label}
+    </span>
+  )
+}
+
+// =============================================================================
+// Priority Badge
+// =============================================================================
+
+const priorityConfig: Record<IssuePriority, { label: string; color: string }> = {
+  0: { label: 'P0', color: 'bg-red-500 text-white' },
+  1: { label: 'P1', color: 'bg-orange-500 text-white' },
+  2: { label: 'P2', color: 'bg-yellow-500 text-black' },
+  3: { label: 'P3', color: 'bg-blue-500 text-white' },
+  4: { label: 'P4', color: 'bg-gray-400 text-white' },
+}
+
+export interface PriorityBadgeProps {
+  priority: IssuePriority
+  className?: string
+}
+
+export function PriorityBadge({ priority, className }: PriorityBadgeProps) {
+  const config = priorityConfig[priority] ?? priorityConfig[2]
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded px-1.5 py-0.5 text-xs font-bold',
+        config.color,
+        className
+      )}
+    >
+      {config.label}
+    </span>
+  )
+}
+
+// =============================================================================
+// Label Badge
+// =============================================================================
+
+export interface LabelBadgeProps {
+  label: string
+  onRemove?: () => void
+  className?: string
+}
+
+export function LabelBadge({ label, onRemove, className }: LabelBadgeProps) {
+  return (
+    <Badge variant="outline" className={cn('gap-1', className)}>
+      {label}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="ml-1 rounded-full hover:bg-muted p-0.5"
+          aria-label={`Remove ${label}`}
+        >
+          <svg
+            className="h-3 w-3"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      )}
+    </Badge>
+  )
+}

package/src/components/issue-board.tsx

@@ -0,0 +1,211 @@
+'use client'
+
+import * as React from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@mdxui/primitives/card'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@mdxui/primitives/select'
+import { cn } from '@mdxui/primitives/lib/utils'
+import { IssueCard } from './issue-card'
+import { useIssuesStore, useFilteredIssues } from '../hooks/use-issues-store'
+import {
+  defaultBoardColumns,
+  type Issue,
+  type BoardColumn,
+  type ClosedTimeRange,
+} from '../types'
+
+export interface IssueBoardProps {
+  /** Issues to display (overrides store) */
+  issues?: Issue[]
+  /** Board columns configuration */
+  columns?: BoardColumn[]
+  /** Currently selected issue ID */
+  selectedId?: string
+  /** Callback when an issue is selected */
+  onSelect?: (issue: Issue) => void
+  /** Custom class name */
+  className?: string
+}
+
+export function IssueBoard({
+  issues: propIssues,
+  columns = defaultBoardColumns,
+  selectedId: propSelectedId,
+  onSelect,
+  className,
+}: IssueBoardProps) {
+  const storeIssues = useFilteredIssues()
+  const storeSelectedId = useIssuesStore((s) => s.selectedId)
+  const selectIssue = useIssuesStore((s) => s.selectIssue)
+  const closedTimeRange = useIssuesStore((s) => s.closedTimeRange)
+  const setClosedTimeRange = useIssuesStore((s) => s.setClosedTimeRange)
+
+  const issues = propIssues ?? storeIssues
+  const selectedId = propSelectedId ?? storeSelectedId
+
+  // Group issues by column
+  const getColumnIssues = (column: BoardColumn): Issue[] => {
+    let columnIssues = issues.filter((issue) => column.statuses.includes(issue.status))
+
+    // For closed column, apply time range filter
+    if (column.id === 'closed' && closedTimeRange !== 'all') {
+      const now = new Date()
+      const cutoff = new Date()
+
+      if (closedTimeRange === 'today') {
+        cutoff.setDate(now.getDate() - 1)
+      } else if (closedTimeRange === 'last3days') {
+        cutoff.setDate(now.getDate() - 3)
+      } else if (closedTimeRange === 'last7days') {
+        cutoff.setDate(now.getDate() - 7)
+      }
+
+      columnIssues = columnIssues.filter((i) => {
+        if (i.closedAt) {
+          return new Date(i.closedAt) >= cutoff
+        }
+        return false
+      })
+    }
+
+    // Sort: active columns by priority asc, closed by closedAt desc
+    if (column.id === 'closed') {
+      columnIssues.sort((a, b) => {
+        const aDate = a.closedAt ? new Date(a.closedAt).getTime() : 0
+        const bDate = b.closedAt ? new Date(b.closedAt).getTime() : 0
+        return bDate - aDate
+      })
+    } else {
+      columnIssues.sort((a, b) => {
+        if (a.priority !== b.priority) return a.priority - b.priority
+        return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      })
+    }
+
+    return columnIssues
+  }
+
+  const handleSelect = (issue: Issue) => {
+    selectIssue(issue.id)
+    onSelect?.(issue)
+  }
+
+  // Keyboard navigation
+  const handleKeyDown = (
+    e: React.KeyboardEvent,
+    columnIndex: number,
+    issueIndex: number,
+    columnIssues: Issue[]
+  ) => {
+    const allColumns = columns.map((col) => getColumnIssues(col))
+
+    if (e.key === 'ArrowDown' && issueIndex < columnIssues.length - 1) {
+      e.preventDefault()
+      handleSelect(columnIssues[issueIndex + 1])
+    } else if (e.key === 'ArrowUp' && issueIndex > 0) {
+      e.preventDefault()
+      handleSelect(columnIssues[issueIndex - 1])
+    } else if (e.key === 'ArrowRight' && columnIndex < columns.length - 1) {
+      e.preventDefault()
+      const nextColIssues = allColumns[columnIndex + 1]
+      if (nextColIssues.length > 0) {
+        handleSelect(nextColIssues[Math.min(issueIndex, nextColIssues.length - 1)])
+      }
+    } else if (e.key === 'ArrowLeft' && columnIndex > 0) {
+      e.preventDefault()
+      const prevColIssues = allColumns[columnIndex - 1]
+      if (prevColIssues.length > 0) {
+        handleSelect(prevColIssues[Math.min(issueIndex, prevColIssues.length - 1)])
+      }
+    }
+  }
+
+  const getColumnColorClass = (color?: string) => {
+    switch (color) {
+      case 'red':
+        return 'border-t-red-500'
+      case 'blue':
+        return 'border-t-blue-500'
+      case 'yellow':
+        return 'border-t-yellow-500'
+      case 'green':
+        return 'border-t-green-500'
+      default:
+        return 'border-t-muted-foreground'
+    }
+  }
+
+  return (
+    <div className={cn('flex gap-4 overflow-x-auto pb-4', className)}>
+      {columns.map((column, columnIndex) => {
+        const columnIssues = getColumnIssues(column)
+
+        return (
+          <Card
+            key={column.id}
+            className={cn(
+              'flex-shrink-0 w-72 flex flex-col max-h-[calc(100vh-12rem)]',
+              'border-t-4',
+              getColumnColorClass(column.color)
+            )}
+          >
+            <CardHeader className="pb-2">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm font-medium flex items-center gap-2">
+                  {column.title}
+                  <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                    {columnIssues.length}
+                  </span>
+                </CardTitle>
+
+                {/* Closed column time filter */}
+                {column.id === 'closed' && (
+                  <Select
+                    value={closedTimeRange}
+                    onValueChange={(value) => setClosedTimeRange(value as ClosedTimeRange)}
+                  >
+                    <SelectTrigger className="h-7 w-28 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="today">Today</SelectItem>
+                      <SelectItem value="last3days">Last 3 days</SelectItem>
+                      <SelectItem value="last7days">Last 7 days</SelectItem>
+                      <SelectItem value="all">All time</SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+            </CardHeader>
+            <CardContent className="flex-1 overflow-auto p-2">
+              <div className="space-y-2 pr-2">
+                {columnIssues.length === 0 ? (
+                  <div className="text-center text-sm text-muted-foreground py-8">
+                    No issues
+                  </div>
+                ) : (
+                  columnIssues.map((issue, issueIndex) => (
+                    <IssueCard
+                      key={issue.id}
+                      issue={issue}
+                      isSelected={issue.id === selectedId}
+                      onClick={() => handleSelect(issue)}
+                      onKeyDown={(e) =>
+                        handleKeyDown(e, columnIndex, issueIndex, columnIssues)
+                      }
+                    />
+                  ))
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}