@mdxui/issues 6.0.0

package/src/components/issue-card.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import * as React from 'react'
+import { Card, CardContent } from '@mdxui/primitives/card'
+import { cn } from '@mdxui/primitives/lib/utils'
+import { TypeBadge, PriorityBadge } from './issue-badges'
+import type { Issue } from '../types'
+
+export interface IssueCardProps {
+  issue: Issue
+  isSelected?: boolean
+  onClick?: () => void
+  onKeyDown?: (e: React.KeyboardEvent) => void
+  className?: string
+}
+
+export function IssueCard({ issue, isSelected, onClick, onKeyDown, className }: IssueCardProps) {
+  return (
+    <Card
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onClick?.()
+        }
+        onKeyDown?.(e)
+      }}
+      className={cn(
+        'cursor-pointer transition-colors hover:bg-muted/50',
+        isSelected && 'ring-2 ring-primary',
+        className
+      )}
+    >
+      <CardContent className="p-3 space-y-2">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="font-medium text-sm leading-tight line-clamp-2">
+            {issue.title}
+          </h3>
+        </div>
+        <div className="flex items-center gap-2 flex-wrap">
+          <TypeBadge type={issue.type} />
+          <PriorityBadge priority={issue.priority} />
+          <span className="text-xs text-muted-foreground ml-auto">
+            {issue.id}
+          </span>
+        </div>
+        {issue.assignee && (
+          <div className="text-xs text-muted-foreground">
+            {issue.assignee}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/issue-detail.tsx

@@ -0,0 +1,390 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@mdxui/primitives/button'
+import { Card, CardContent, CardHeader } from '@mdxui/primitives/card'
+import { Input } from '@mdxui/primitives/input'
+import { Textarea } from '@mdxui/primitives/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@mdxui/primitives/select'
+import { Separator } from '@mdxui/primitives/separator'
+import { cn } from '@mdxui/primitives/lib/utils'
+import { Edit2, Save, X, Plus, Link } from 'lucide-react'
+import { StatusBadge, TypeBadge, LabelBadge } from './issue-badges'
+import { useSelectedIssue, useIssuesStore } from '../hooks/use-issues-store'
+import { useIssueMutations, type UseIssueMutationsOptions } from '../hooks/use-issue-mutations'
+import type { Issue, IssueStatus, IssuePriority } from '../types'
+import { formatDistanceToNow } from 'date-fns'
+
+export interface IssueDetailProps {
+  /** Issue to display (overrides store selection) */
+  issue?: Issue
+  /** Mutation options (transport, callbacks) */
+  mutationOptions?: UseIssueMutationsOptions
+  /** Custom class name */
+  className?: string
+}
+
+interface EditableFieldProps {
+  label: string
+  value: string
+  onSave: (value: string) => void
+  multiline?: boolean
+  placeholder?: string
+}
+
+function EditableField({ label, value, onSave, multiline, placeholder }: EditableFieldProps) {
+  const [isEditing, setIsEditing] = React.useState(false)
+  const [editValue, setEditValue] = React.useState(value)
+
+  const handleSave = () => {
+    onSave(editValue)
+    setIsEditing(false)
+  }
+
+  const handleCancel = () => {
+    setEditValue(value)
+    setIsEditing(false)
+  }
+
+  if (isEditing) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-muted-foreground">{label}</label>
+          <div className="flex gap-1">
+            <Button variant="ghost" size="sm" onClick={handleSave}>
+              <Save className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="sm" onClick={handleCancel}>
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        {multiline ? (
+          <Textarea
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            placeholder={placeholder}
+            className="min-h-24"
+            autoFocus
+          />
+        ) : (
+          <Input
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            placeholder={placeholder}
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleSave()
+              if (e.key === 'Escape') handleCancel()
+            }}
+          />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-1 group">
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-medium text-muted-foreground">{label}</label>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="opacity-0 group-hover:opacity-100 transition-opacity"
+          onClick={() => setIsEditing(true)}
+        >
+          <Edit2 className="h-4 w-4" />
+        </Button>
+      </div>
+      {value ? (
+        <div className="text-sm whitespace-pre-wrap">{value}</div>
+      ) : (
+        <div className="text-sm text-muted-foreground italic">{placeholder ?? 'Not set'}</div>
+      )}
+    </div>
+  )
+}
+
+export function IssueDetail({
+  issue: propIssue,
+  mutationOptions,
+  className,
+}: IssueDetailProps) {
+  const storeIssue = useSelectedIssue()
+  const issues = useIssuesStore((s) => s.issues)
+  const issue = propIssue ?? storeIssue
+  const mutations = useIssueMutations(mutationOptions)
+  const [newLabel, setNewLabel] = React.useState('')
+
+  if (!issue) {
+    return (
+      <Card className={cn('h-full', className)}>
+        <CardContent className="flex items-center justify-center h-full text-muted-foreground">
+          Select an issue to view details
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const handleAddLabel = () => {
+    if (newLabel.trim()) {
+      mutations.addLabel(issue.id, newLabel.trim())
+      setNewLabel('')
+    }
+  }
+
+  const getDependencyIssue = (id: string) => issues.find((i) => i.id === id)
+
+  return (
+    <Card className={cn('h-full overflow-auto', className)}>
+      <CardHeader className="pb-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-sm text-muted-foreground">{issue.id}</span>
+              <TypeBadge type={issue.type} />
+            </div>
+            <EditableField
+              label=""
+              value={issue.title}
+              onSave={(title) => mutations.updateTitle(issue.id, title)}
+            />
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        {/* Status, Priority, Assignee */}
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-1">
+            <label className="text-sm font-medium text-muted-foreground">Status</label>
+            <Select
+              value={issue.status}
+              onValueChange={(value) => mutations.updateStatus(issue.id, value as IssueStatus)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="open">Open</SelectItem>
+                <SelectItem value="in_progress">In Progress</SelectItem>
+                <SelectItem value="blocked">Blocked</SelectItem>
+                <SelectItem value="closed">Closed</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1">
+            <label className="text-sm font-medium text-muted-foreground">Priority</label>
+            <Select
+              value={String(issue.priority)}
+              onValueChange={(value) =>
+                mutations.updatePriority(issue.id, Number(value) as IssuePriority)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="0">P0 - Critical</SelectItem>
+                <SelectItem value="1">P1 - High</SelectItem>
+                <SelectItem value="2">P2 - Medium</SelectItem>
+                <SelectItem value="3">P3 - Low</SelectItem>
+                <SelectItem value="4">P4 - Backlog</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1">
+            <label className="text-sm font-medium text-muted-foreground">Assignee</label>
+            <Input
+              value={issue.assignee ?? ''}
+              onChange={(e) => mutations.updateAssignee(issue.id, e.target.value || undefined)}
+              placeholder="Unassigned"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* Labels */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-muted-foreground">Labels</label>
+          <div className="flex flex-wrap gap-1">
+            {issue.labels.map((label: string) => (
+              <LabelBadge
+                key={label}
+                label={label}
+                onRemove={() => mutations.removeLabel(issue.id, label)}
+              />
+            ))}
+            <div className="flex items-center gap-1">
+              <Input
+                value={newLabel}
+                onChange={(e) => setNewLabel(e.target.value)}
+                placeholder="Add label"
+                className="h-6 w-24 text-xs"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleAddLabel()
+                }}
+              />
+              <Button variant="ghost" size="sm" onClick={handleAddLabel}>
+                <Plus className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* Description */}
+        <EditableField
+          label="Description"
+          value={issue.description ?? ''}
+          onSave={(description) => mutations.updateDescription(issue.id, description)}
+          multiline
+          placeholder="Add a description..."
+        />
+
+        {/* Design Notes */}
+        <EditableField
+          label="Design Notes"
+          value={issue.design ?? ''}
+          onSave={(design) => mutations.updateDesign(issue.id, design)}
+          multiline
+          placeholder="Add design notes..."
+        />
+
+        {/* Acceptance Criteria */}
+        <EditableField
+          label="Acceptance Criteria"
+          value={issue.acceptance ?? ''}
+          onSave={(acceptance) => mutations.updateAcceptance(issue.id, acceptance)}
+          multiline
+          placeholder="Add acceptance criteria..."
+        />
+
+        {/* Notes */}
+        <EditableField
+          label="Notes"
+          value={issue.notes ?? ''}
+          onSave={(notes) => mutations.updateNotes(issue.id, notes)}
+          multiline
+          placeholder="Add notes..."
+        />
+
+        <Separator />
+
+        {/* Dependencies */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-muted-foreground flex items-center gap-1">
+            <Link className="h-4 w-4" />
+            Dependencies
+          </label>
+          {issue.dependencies.length === 0 ? (
+            <div className="text-sm text-muted-foreground italic">No dependencies</div>
+          ) : (
+            <div className="space-y-1">
+              {issue.dependencies.map((depId: string) => {
+                const dep = getDependencyIssue(depId)
+                return (
+                  <div
+                    key={depId}
+                    className="flex items-center gap-2 text-sm p-2 rounded border"
+                  >
+                    <span className="font-mono text-muted-foreground">{depId}</span>
+                    {dep && (
+                      <>
+                        <span className="flex-1 truncate">{dep.title}</span>
+                        <StatusBadge status={dep.status} />
+                      </>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => mutations.removeDependency(issue.id, depId)}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Dependents */}
+        {issue.dependents.length > 0 && (
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-muted-foreground">
+              Blocked by this issue
+            </label>
+            <div className="space-y-1">
+              {issue.dependents.map((depId: string) => {
+                const dep = getDependencyIssue(depId)
+                return (
+                  <div
+                    key={depId}
+                    className="flex items-center gap-2 text-sm p-2 rounded border"
+                  >
+                    <span className="font-mono text-muted-foreground">{depId}</span>
+                    {dep && (
+                      <>
+                        <span className="flex-1 truncate">{dep.title}</span>
+                        <StatusBadge status={dep.status} />
+                      </>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        <Separator />
+
+        {/* Timestamps */}
+        <div className="text-xs text-muted-foreground space-y-1">
+          <div>
+            Created {formatDistanceToNow(new Date(issue.createdAt), { addSuffix: true })}
+          </div>
+          <div>
+            Updated {formatDistanceToNow(new Date(issue.updatedAt), { addSuffix: true })}
+          </div>
+          {issue.closedAt && (
+            <div>
+              Closed {formatDistanceToNow(new Date(issue.closedAt), { addSuffix: true })}
+              {issue.closeReason && ` - ${issue.closeReason}`}
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2 pt-4">
+          {issue.status === 'closed' ? (
+            <Button onClick={() => mutations.reopenIssue(issue.id)}>Reopen Issue</Button>
+          ) : (
+            <Button onClick={() => mutations.closeIssue(issue.id)}>Close Issue</Button>
+          )}
+          <Button
+            variant="destructive"
+            onClick={() => {
+              if (confirm('Are you sure you want to delete this issue?')) {
+                mutations.deleteIssue(issue.id)
+              }
+            }}
+          >
+            Delete
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/issue-dialog.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import * as React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@mdxui/primitives/dialog'
+import { Button } from '@mdxui/primitives/button'
+import { Input } from '@mdxui/primitives/input'
+import { Textarea } from '@mdxui/primitives/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@mdxui/primitives/select'
+import { Label } from '@mdxui/primitives/label'
+import { Plus } from 'lucide-react'
+import { useIssueMutations, type UseIssueMutationsOptions } from '../hooks/use-issue-mutations'
+import type { IssueType, IssuePriority } from '../types'
+
+export interface NewIssueDialogProps {
+  /** Trigger element (defaults to + button) */
+  trigger?: React.ReactNode
+  /** Default values */
+  defaults?: {
+    type?: IssueType
+    priority?: IssuePriority
+    epic?: string
+    labels?: string[]
+  }
+  /** Mutation options */
+  mutationOptions?: UseIssueMutationsOptions
+  /** Callback after issue is created */
+  onCreated?: (issue: { id: string; title: string }) => void
+}
+
+export function NewIssueDialog({
+  trigger,
+  defaults,
+  mutationOptions,
+  onCreated,
+}: NewIssueDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const [title, setTitle] = React.useState('')
+  const [description, setDescription] = React.useState('')
+  const [type, setType] = React.useState<IssueType>(defaults?.type ?? 'task')
+  const [priority, setPriority] = React.useState<IssuePriority>(defaults?.priority ?? 2)
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+  const mutations = useIssueMutations(mutationOptions)
+
+  const resetForm = () => {
+    setTitle('')
+    setDescription('')
+    setType(defaults?.type ?? 'task')
+    setPriority(defaults?.priority ?? 2)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!title.trim()) return
+
+    setIsSubmitting(true)
+    try {
+      const issue = await mutations.createIssue({
+        title: title.trim(),
+        description: description.trim() || undefined,
+        type,
+        priority,
+        status: 'open',
+        labels: defaults?.labels ?? [],
+        epic: defaults?.epic,
+        dependencies: [],
+        dependents: [],
+      })
+      onCreated?.(issue)
+      resetForm()
+      setOpen(false)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button>
+            <Plus className="h-4 w-4 mr-2" />
+            New Issue
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Create New Issue</DialogTitle>
+            <DialogDescription>
+              Add a new issue to track work or report a bug.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="title">Title</Label>
+              <Input
+                id="title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Issue title..."
+                autoFocus
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="type">Type</Label>
+                <Select value={type} onValueChange={(v) => setType(v as IssueType)}>
+                  <SelectTrigger id="type">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="task">Task</SelectItem>
+                    <SelectItem value="bug">Bug</SelectItem>
+                    <SelectItem value="feature">Feature</SelectItem>
+                    <SelectItem value="epic">Epic</SelectItem>
+                    <SelectItem value="story">Story</SelectItem>
+                    <SelectItem value="chore">Chore</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="priority">Priority</Label>
+                <Select
+                  value={String(priority)}
+                  onValueChange={(v) => setPriority(Number(v) as IssuePriority)}
+                >
+                  <SelectTrigger id="priority">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="0">P0 - Critical</SelectItem>
+                    <SelectItem value="1">P1 - High</SelectItem>
+                    <SelectItem value="2">P2 - Medium</SelectItem>
+                    <SelectItem value="3">P3 - Low</SelectItem>
+                    <SelectItem value="4">P4 - Backlog</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description (optional)</Label>
+              <Textarea
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Describe the issue..."
+                className="min-h-24"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!title.trim() || isSubmitting}>
+              {isSubmitting ? 'Creating...' : 'Create Issue'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}