@mdxui/issues 6.0.0

package/src/hooks/use-issue-mutations.ts

@@ -0,0 +1,260 @@
+import { useCallback } from 'react'
+import { useIssuesStore } from './use-issues-store'
+import type { Issue, IssueStatus, IssuePriority } from '../types'
+
+export interface IssueMutations {
+  /** Update issue title */
+  updateTitle: (id: string, title: string) => Promise<void>
+  /** Update issue status */
+  updateStatus: (id: string, status: IssueStatus) => Promise<void>
+  /** Update issue priority */
+  updatePriority: (id: string, priority: IssuePriority) => Promise<void>
+  /** Update issue assignee */
+  updateAssignee: (id: string, assignee: string | undefined) => Promise<void>
+  /** Add label to issue */
+  addLabel: (id: string, label: string) => Promise<void>
+  /** Remove label from issue */
+  removeLabel: (id: string, label: string) => Promise<void>
+  /** Update description */
+  updateDescription: (id: string, description: string) => Promise<void>
+  /** Update design notes */
+  updateDesign: (id: string, design: string) => Promise<void>
+  /** Update acceptance criteria */
+  updateAcceptance: (id: string, acceptance: string) => Promise<void>
+  /** Update notes */
+  updateNotes: (id: string, notes: string) => Promise<void>
+  /** Add dependency */
+  addDependency: (id: string, dependsOn: string) => Promise<void>
+  /** Remove dependency */
+  removeDependency: (id: string, dependsOn: string) => Promise<void>
+  /** Close issue */
+  closeIssue: (id: string, reason?: string) => Promise<void>
+  /** Reopen issue */
+  reopenIssue: (id: string) => Promise<void>
+  /** Create issue */
+  createIssue: (issue: Omit<Issue, 'id' | 'createdAt' | 'updatedAt'>) => Promise<Issue>
+  /** Delete issue */
+  deleteIssue: (id: string) => Promise<void>
+}
+
+export interface UseIssueMutationsOptions {
+  /** RPC transport function for beads CLI */
+  transport?: (method: string, params: Record<string, unknown>) => Promise<unknown>
+  /** On mutation success */
+  onSuccess?: (method: string, result: unknown) => void
+  /** On mutation error */
+  onError?: (method: string, error: Error) => void
+}
+
+export function useIssueMutations(options: UseIssueMutationsOptions = {}): IssueMutations {
+  const { transport, onSuccess, onError } = options
+  const updateIssue = useIssuesStore((s) => s.updateIssue)
+  const addIssue = useIssuesStore((s) => s.addIssue)
+  const removeIssue = useIssuesStore((s) => s.removeIssue)
+
+  const mutate = useCallback(
+    async (method: string, params: Record<string, unknown>) => {
+      try {
+        const result = transport ? await transport(method, params) : undefined
+        onSuccess?.(method, result)
+        return result
+      } catch (error) {
+        onError?.(method, error as Error)
+        throw error
+      }
+    },
+    [transport, onSuccess, onError]
+  )
+
+  const updateTitle = useCallback(
+    async (id: string, title: string) => {
+      updateIssue(id, { title })
+      await mutate('update', { id, title })
+    },
+    [updateIssue, mutate]
+  )
+
+  const updateStatus = useCallback(
+    async (id: string, status: IssueStatus) => {
+      const updates: Partial<Issue> = { status }
+      if (status === 'closed') {
+        updates.closedAt = new Date().toISOString()
+      } else {
+        updates.closedAt = undefined
+      }
+      updateIssue(id, updates)
+      await mutate('update', { id, status })
+    },
+    [updateIssue, mutate]
+  )
+
+  const updatePriority = useCallback(
+    async (id: string, priority: IssuePriority) => {
+      updateIssue(id, { priority })
+      await mutate('update', { id, priority })
+    },
+    [updateIssue, mutate]
+  )
+
+  const updateAssignee = useCallback(
+    async (id: string, assignee: string | undefined) => {
+      updateIssue(id, { assignee })
+      await mutate('update', { id, assignee: assignee ?? null })
+    },
+    [updateIssue, mutate]
+  )
+
+  const addLabel = useCallback(
+    async (id: string, label: string) => {
+      const issue = useIssuesStore.getState().issues.find((i) => i.id === id)
+      if (issue && !issue.labels.includes(label)) {
+        const labels = [...issue.labels, label]
+        updateIssue(id, { labels })
+        await mutate('label', { id, add: [label] })
+      }
+    },
+    [updateIssue, mutate]
+  )
+
+  const removeLabel = useCallback(
+    async (id: string, label: string) => {
+      const issue = useIssuesStore.getState().issues.find((i) => i.id === id)
+      if (issue) {
+        const labels = issue.labels.filter((l: string) => l !== label)
+        updateIssue(id, { labels })
+        await mutate('label', { id, remove: [label] })
+      }
+    },
+    [updateIssue, mutate]
+  )
+
+  const updateDescription = useCallback(
+    async (id: string, description: string) => {
+      updateIssue(id, { description })
+      await mutate('update', { id, description })
+    },
+    [updateIssue, mutate]
+  )
+
+  const updateDesign = useCallback(
+    async (id: string, design: string) => {
+      updateIssue(id, { design })
+      await mutate('update', { id, design })
+    },
+    [updateIssue, mutate]
+  )
+
+  const updateAcceptance = useCallback(
+    async (id: string, acceptance: string) => {
+      updateIssue(id, { acceptance })
+      await mutate('update', { id, acceptance })
+    },
+    [updateIssue, mutate]
+  )
+
+  const updateNotes = useCallback(
+    async (id: string, notes: string) => {
+      updateIssue(id, { notes })
+      await mutate('update', { id, notes })
+    },
+    [updateIssue, mutate]
+  )
+
+  const addDependency = useCallback(
+    async (id: string, dependsOn: string) => {
+      const issue = useIssuesStore.getState().issues.find((i) => i.id === id)
+      if (issue && !issue.dependencies.includes(dependsOn)) {
+        updateIssue(id, { dependencies: [...issue.dependencies, dependsOn] })
+        await mutate('dep', { id, add: dependsOn })
+      }
+    },
+    [updateIssue, mutate]
+  )
+
+  const removeDependency = useCallback(
+    async (id: string, dependsOn: string) => {
+      const issue = useIssuesStore.getState().issues.find((i) => i.id === id)
+      if (issue) {
+        updateIssue(id, { dependencies: issue.dependencies.filter((d: string) => d !== dependsOn) })
+        await mutate('dep', { id, remove: dependsOn })
+      }
+    },
+    [updateIssue, mutate]
+  )
+
+  const closeIssue = useCallback(
+    async (id: string, reason?: string) => {
+      updateIssue(id, {
+        status: 'closed',
+        closedAt: new Date().toISOString(),
+        closeReason: reason,
+      })
+      await mutate('close', { id, reason })
+    },
+    [updateIssue, mutate]
+  )
+
+  const reopenIssue = useCallback(
+    async (id: string) => {
+      updateIssue(id, {
+        status: 'open',
+        closedAt: undefined,
+        closeReason: undefined,
+      })
+      await mutate('reopen', { id })
+    },
+    [updateIssue, mutate]
+  )
+
+  const createIssue = useCallback(
+    async (data: Omit<Issue, 'id' | 'createdAt' | 'updatedAt'>) => {
+      const now = new Date().toISOString()
+      const tempId = `temp-${Date.now()}`
+      const issue: Issue = {
+        ...data,
+        id: tempId,
+        createdAt: now,
+        updatedAt: now,
+      }
+      addIssue(issue)
+
+      const result = (await mutate('create', data)) as { id: string } | undefined
+      if (result?.id && result.id !== tempId) {
+        // Update with real ID from server
+        removeIssue(tempId)
+        const realIssue = { ...issue, id: result.id }
+        addIssue(realIssue)
+        return realIssue
+      }
+      return issue
+    },
+    [addIssue, removeIssue, mutate]
+  )
+
+  const deleteIssue = useCallback(
+    async (id: string) => {
+      removeIssue(id)
+      await mutate('delete', { id })
+    },
+    [removeIssue, mutate]
+  )
+
+  return {
+    updateTitle,
+    updateStatus,
+    updatePriority,
+    updateAssignee,
+    addLabel,
+    removeLabel,
+    updateDescription,
+    updateDesign,
+    updateAcceptance,
+    updateNotes,
+    addDependency,
+    removeDependency,
+    closeIssue,
+    reopenIssue,
+    createIssue,
+    deleteIssue,
+  }
+}

package/src/hooks/use-issues-store.ts

@@ -0,0 +1,210 @@
+import { create } from 'zustand'
+import type { Issue, IssueFilters, IssueSort, ClosedTimeRange } from '../types'
+
+interface IssuesState {
+  /** All issues */
+  issues: Issue[]
+  /** Currently selected issue ID */
+  selectedId: string | null
+  /** Current filters */
+  filters: IssueFilters
+  /** Current sort */
+  sort: IssueSort
+  /** Closed column time filter */
+  closedTimeRange: ClosedTimeRange
+  /** Loading state */
+  isLoading: boolean
+  /** Error state */
+  error: string | null
+
+  // Actions
+  setIssues: (issues: Issue[]) => void
+  addIssue: (issue: Issue) => void
+  updateIssue: (id: string, updates: Partial<Issue>) => void
+  removeIssue: (id: string) => void
+  selectIssue: (id: string | null) => void
+  setFilters: (filters: IssueFilters) => void
+  setSort: (sort: IssueSort) => void
+  setClosedTimeRange: (range: ClosedTimeRange) => void
+  setLoading: (loading: boolean) => void
+  setError: (error: string | null) => void
+}
+
+export const useIssuesStore = create<IssuesState>((set) => ({
+  issues: [],
+  selectedId: null,
+  filters: {},
+  sort: { field: 'priority', direction: 'asc' },
+  closedTimeRange: 'last7days',
+  isLoading: false,
+  error: null,
+
+  setIssues: (issues) => set({ issues }),
+
+  addIssue: (issue) =>
+    set((state) => ({
+      issues: [...state.issues, issue],
+    })),
+
+  updateIssue: (id, updates) =>
+    set((state) => ({
+      issues: state.issues.map((issue) =>
+        issue.id === id ? { ...issue, ...updates, updatedAt: new Date().toISOString() } : issue
+      ),
+    })),
+
+  removeIssue: (id) =>
+    set((state) => ({
+      issues: state.issues.filter((issue) => issue.id !== id),
+      selectedId: state.selectedId === id ? null : state.selectedId,
+    })),
+
+  selectIssue: (id) => set({ selectedId: id }),
+
+  setFilters: (filters) => set({ filters }),
+
+  setSort: (sort) => set({ sort }),
+
+  setClosedTimeRange: (closedTimeRange) => set({ closedTimeRange }),
+
+  setLoading: (isLoading) => set({ isLoading }),
+
+  setError: (error) => set({ error }),
+}))
+
+// Selector helpers
+export const useIssue = (id: string | null) => {
+  return useIssuesStore((state) => (id ? state.issues.find((i) => i.id === id) : undefined))
+}
+
+export const useSelectedIssue = () => {
+  return useIssuesStore((state) =>
+    state.selectedId ? state.issues.find((i) => i.id === state.selectedId) : undefined
+  )
+}
+
+export const useFilteredIssues = () => {
+  return useIssuesStore((state) => {
+    let filtered = [...state.issues]
+
+    const { filters, sort, closedTimeRange } = state
+
+    // Apply status filter
+    if (filters.status?.length) {
+      filtered = filtered.filter((i) => filters.status!.includes(i.status))
+    }
+
+    // Apply type filter
+    if (filters.type?.length) {
+      filtered = filtered.filter((i) => filters.type!.includes(i.type))
+    }
+
+    // Apply priority filter
+    if (filters.priority?.length) {
+      filtered = filtered.filter((i) => filters.priority!.includes(i.priority))
+    }
+
+    // Apply assignee filter
+    if (filters.assignee) {
+      filtered = filtered.filter((i) => i.assignee === filters.assignee)
+    }
+
+    // Apply labels filter
+    if (filters.labels?.length) {
+      filtered = filtered.filter((i) => filters.labels!.some((l: string) => i.labels.includes(l)))
+    }
+
+    // Apply epic filter
+    if (filters.epic) {
+      filtered = filtered.filter((i) => i.epic === filters.epic)
+    }
+
+    // Apply search filter
+    if (filters.search) {
+      const search = filters.search.toLowerCase()
+      filtered = filtered.filter(
+        (i) => i.id.toLowerCase().includes(search) || i.title.toLowerCase().includes(search)
+      )
+    }
+
+    // Apply blocked filter
+    if (filters.blocked) {
+      filtered = filtered.filter((i) => i.status === 'blocked')
+    }
+
+    // Apply ready filter (no dependencies in non-closed status)
+    if (filters.ready) {
+      filtered = filtered.filter(
+        (i) =>
+          i.status === 'open' &&
+          !i.dependencies.some((depId: string) => {
+            const dep = state.issues.find((d) => d.id === depId)
+            return dep && dep.status !== 'closed'
+          })
+      )
+    }
+
+    // Apply closed time range filter for closed issues
+    if (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)
+      }
+
+      filtered = filtered.filter((i) => {
+        if (i.status === 'closed' && i.closedAt) {
+          return new Date(i.closedAt) >= cutoff
+        }
+        return true
+      })
+    }
+
+    // Apply sort
+    filtered.sort((a, b) => {
+      let aVal: string | number
+      let bVal: string | number
+
+      switch (sort.field) {
+        case 'priority':
+          aVal = a.priority
+          bVal = b.priority
+          break
+        case 'createdAt':
+          aVal = a.createdAt
+          bVal = b.createdAt
+          break
+        case 'updatedAt':
+          aVal = a.updatedAt
+          bVal = b.updatedAt
+          break
+        case 'closedAt':
+          aVal = a.closedAt ?? ''
+          bVal = b.closedAt ?? ''
+          break
+        case 'title':
+          aVal = a.title.toLowerCase()
+          bVal = b.title.toLowerCase()
+          break
+        case 'status':
+          aVal = a.status
+          bVal = b.status
+          break
+        default:
+          aVal = a.createdAt
+          bVal = b.createdAt
+      }
+
+      if (aVal < bVal) return sort.direction === 'asc' ? -1 : 1
+      if (aVal > bVal) return sort.direction === 'asc' ? 1 : -1
+      return 0
+    })
+
+    return filtered
+  })
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+// Types
+export type {
+  Issue,
+  IssueStatus,
+  IssueType,
+  IssuePriority,
+  IssueComment,
+  Epic,
+  IssueFilters,
+  IssueSort,
+  BoardColumn,
+  ClosedTimeRange,
+} from './types'
+export { defaultBoardColumns } from './types'
+
+// Hooks
+export * from './hooks'
+
+// Components
+export * from './components'

package/src/types/index.ts

@@ -0,0 +1,194 @@
+import { z } from 'zod'
+
+// =============================================================================
+// Issue Status
+// =============================================================================
+
+export const IssueStatusSchema = z.enum([
+  'open',
+  'in_progress',
+  'blocked',
+  'closed',
+])
+export type IssueStatus = z.infer<typeof IssueStatusSchema>
+
+// =============================================================================
+// Issue Type
+// =============================================================================
+
+export const IssueTypeSchema = z.enum([
+  'task',
+  'bug',
+  'feature',
+  'epic',
+  'story',
+  'chore',
+])
+export type IssueType = z.infer<typeof IssueTypeSchema>
+
+// =============================================================================
+// Issue Priority (0-4, 0=critical, 4=backlog)
+// =============================================================================
+
+export const IssuePrioritySchema = z.number().min(0).max(4)
+export type IssuePriority = z.infer<typeof IssuePrioritySchema>
+
+// =============================================================================
+// Issue - Core data type
+// =============================================================================
+
+export const IssueSchema = z.object({
+  /** Unique issue ID (e.g., "beads-001") */
+  id: z.string(),
+  /** Issue title */
+  title: z.string(),
+  /** Detailed description (markdown) */
+  description: z.string().optional(),
+  /** Issue type */
+  type: IssueTypeSchema,
+  /** Issue status */
+  status: IssueStatusSchema,
+  /** Priority (0=critical, 4=backlog) */
+  priority: IssuePrioritySchema,
+  /** Assignee username */
+  assignee: z.string().optional(),
+  /** Labels */
+  labels: z.array(z.string()).default([]),
+  /** Parent epic ID */
+  epic: z.string().optional(),
+  /** IDs this issue depends on */
+  dependencies: z.array(z.string()).default([]),
+  /** IDs that depend on this issue */
+  dependents: z.array(z.string()).default([]),
+  /** Design notes (markdown) */
+  design: z.string().optional(),
+  /** Acceptance criteria (markdown) */
+  acceptance: z.string().optional(),
+  /** General notes (markdown) */
+  notes: z.string().optional(),
+  /** Created timestamp */
+  createdAt: z.string(),
+  /** Updated timestamp */
+  updatedAt: z.string(),
+  /** Closed timestamp */
+  closedAt: z.string().optional(),
+  /** Close reason */
+  closeReason: z.string().optional(),
+})
+
+export type Issue = z.infer<typeof IssueSchema>
+
+// =============================================================================
+// Issue Comment
+// =============================================================================
+
+export const IssueCommentSchema = z.object({
+  /** Comment ID */
+  id: z.string(),
+  /** Comment author */
+  author: z.string(),
+  /** Comment content (markdown) */
+  content: z.string(),
+  /** Created timestamp */
+  createdAt: z.string(),
+  /** Updated timestamp */
+  updatedAt: z.string().optional(),
+})
+
+export type IssueComment = z.infer<typeof IssueCommentSchema>
+
+// =============================================================================
+// Epic - Grouping of issues
+// =============================================================================
+
+export const EpicSchema = z.object({
+  /** Epic ID */
+  id: z.string(),
+  /** Epic title */
+  title: z.string(),
+  /** Epic description */
+  description: z.string().optional(),
+  /** Child issue IDs */
+  issues: z.array(z.string()).default([]),
+  /** Progress (0-100) */
+  progress: z.number().min(0).max(100).default(0),
+  /** Created timestamp */
+  createdAt: z.string(),
+  /** Updated timestamp */
+  updatedAt: z.string(),
+})
+
+export type Epic = z.infer<typeof EpicSchema>
+
+// =============================================================================
+// Issue Filters
+// =============================================================================
+
+export const IssueFiltersSchema = z.object({
+  /** Status filter */
+  status: z.array(IssueStatusSchema).optional(),
+  /** Type filter */
+  type: z.array(IssueTypeSchema).optional(),
+  /** Priority filter */
+  priority: z.array(IssuePrioritySchema).optional(),
+  /** Assignee filter */
+  assignee: z.string().optional(),
+  /** Label filter */
+  labels: z.array(z.string()).optional(),
+  /** Epic filter */
+  epic: z.string().optional(),
+  /** Search text */
+  search: z.string().optional(),
+  /** Only show blocked issues */
+  blocked: z.boolean().optional(),
+  /** Only show ready issues (no blockers) */
+  ready: z.boolean().optional(),
+})
+
+export type IssueFilters = z.infer<typeof IssueFiltersSchema>
+
+// =============================================================================
+// Issue Sort
+// =============================================================================
+
+export const IssueSortSchema = z.object({
+  field: z.enum(['priority', 'createdAt', 'updatedAt', 'closedAt', 'title', 'status']),
+  direction: z.enum(['asc', 'desc']),
+})
+
+export type IssueSort = z.infer<typeof IssueSortSchema>
+
+// =============================================================================
+// Board Column Configuration
+// =============================================================================
+
+export const BoardColumnSchema = z.object({
+  /** Column ID */
+  id: z.string(),
+  /** Column title */
+  title: z.string(),
+  /** Status values for this column */
+  statuses: z.array(IssueStatusSchema),
+  /** Column color */
+  color: z.string().optional(),
+})
+
+export type BoardColumn = z.infer<typeof BoardColumnSchema>
+
+// =============================================================================
+// Default board columns (matches beads-ui)
+// =============================================================================
+
+export const defaultBoardColumns: BoardColumn[] = [
+  { id: 'blocked', title: 'Blocked', statuses: ['blocked'], color: 'red' },
+  { id: 'ready', title: 'Ready', statuses: ['open'], color: 'blue' },
+  { id: 'in_progress', title: 'In Progress', statuses: ['in_progress'], color: 'yellow' },
+  { id: 'closed', title: 'Closed', statuses: ['closed'], color: 'green' },
+]
+
+// =============================================================================
+// Closed Time Range Filter
+// =============================================================================
+
+export const ClosedTimeRangeSchema = z.enum(['today', 'last3days', 'last7days', 'all'])
+export type ClosedTimeRange = z.infer<typeof ClosedTimeRangeSchema>

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@mdxui/typescript-config/react-library.json",
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules", "../primitives"]
+}