{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "decision-matrix-table", "title": "Decision Matrix Table", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/decision-matrix-table/DecisionMatrixTable.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertCircle,\n Award,\n BarChart3,\n Check,\n CheckCircle2,\n ChevronDown,\n ChevronUp,\n FileCode2,\n HelpCircle,\n Info,\n Plus,\n RefreshCw,\n Scale,\n ShieldCheck,\n SlidersHorizontal,\n PlusCircle,\n Trash2,\n XCircle,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type FrameworkType = 'weighted-matrix' | 'rice'\n\nexport interface DecisionMatrixTableProps extends React.HTMLAttributes {\n title?: string\n subtitle?: string\n defaultFramework?: FrameworkType\n}\n\nexport interface CriterionDef {\n key: 'impact' | 'confidence' | 'effort' | 'dx' | 'maintenance'\n label: string\n shortLabel: string\n description: string\n defaultWeight: number\n}\n\nexport interface MatrixOption {\n id: string\n name: string\n architecture: string\n summary: string\n keyRisk: string\n color: string\n pros: string[]\n cons: string[]\n scores: {\n impact: number // 1 to 5\n confidence: number // 1 to 5\n effort: number // 1 to 5 (simplicity / low effort)\n dx: number // 1 to 5 (dx ownership)\n maintenance: number // 1 to 5 (low maintenance overhead)\n }\n rice: {\n reach: number // 0 to 100 (% of engineers / services)\n impact: number // 1 to 5 multiplier\n confidence: number // 50 to 100 (%)\n effort: number // 1 to 5 person-sprints\n }\n isCustom?: boolean\n}\n\nconst criteriaList: CriterionDef[] = [\n {\n key: 'impact',\n label: 'Engineering Impact',\n shortLabel: 'Impact',\n description: 'System modularity, bundle footprint reduction, and runtime performance gains.',\n defaultWeight: 25,\n },\n {\n key: 'confidence',\n label: 'Confidence / Feasibility',\n shortLabel: 'Confidence',\n description: 'Ecosystem support, library maturity, and developer team readiness.',\n defaultWeight: 25,\n },\n {\n key: 'effort',\n label: 'Simplicity (Low Effort)',\n shortLabel: 'Low Effort',\n description: 'Frictionless adoption curve, zero monolith refactors, fast time to market.',\n defaultWeight: 15,\n },\n {\n key: 'dx',\n label: 'DX & Consumer Ownership',\n shortLabel: 'DX Ownership',\n description: 'Full source access, effortless Tailwind styling customization, zero semver lock-in.',\n defaultWeight: 20,\n },\n {\n key: 'maintenance',\n label: 'Low Maintenance',\n shortLabel: 'Low Maint.',\n description: 'Decoupled component lifecycles, zero breaking upstream transitive dependency cascades.',\n defaultWeight: 15,\n },\n]\n\nconst initialOptions: MatrixOption[] = [\n {\n id: 'opt-a',\n name: 'Option A: Unbundled Registry architecture',\n architecture: 'UIPKGE / shadcn Model',\n summary:\n 'Components copy directly into consumer source tree. Zero semver locks, complete styling autonomy, and unconstrained design customization.',\n keyRisk: 'Downstream drift from upstream patches managed through automated registry diffing.',\n color: '#10b981',\n pros: [\n 'Zero npm package version lock-in or dependency gridlock',\n 'Immediate Tailwind class-level and DOM customization',\n '100% dead-code elimination and optimal bundle footprint',\n ],\n cons: ['Manual or CLI-assisted updates when upstream security patches land'],\n scores: {\n impact: 4.8,\n confidence: 4.7,\n effort: 4.5,\n dx: 5.0,\n maintenance: 4.4,\n },\n rice: {\n reach: 96,\n impact: 5.0,\n confidence: 95,\n effort: 1.8,\n },\n },\n {\n id: 'opt-b',\n name: 'Option B: Monolithic Multi-Framework NPM',\n architecture: 'Centralized Monorepo Package',\n summary:\n 'Single heavy versioned library published to private registry. Standardized tokens but painful breaking version cascades across product suites.',\n keyRisk: 'High cross-team dependency coupling and blocked semver upgrades.',\n color: '#f59e0b',\n pros: [\n 'Single point of governance for security and accessibility patches',\n 'Familiar `npm install` workflow for junior developers',\n ],\n cons: [\n 'Massive wrapper overhead and difficult Tailwind class overrides',\n 'Breaking changes in one component delay releases for entire company',\n 'Bloated runtime JS bundle containing unused component code',\n ],\n scores: {\n impact: 3.2,\n confidence: 4.1,\n effort: 3.8,\n dx: 2.3,\n maintenance: 2.6,\n },\n rice: {\n reach: 82,\n impact: 3.0,\n confidence: 85,\n effort: 3.6,\n },\n },\n {\n id: 'opt-c',\n name: 'Option C: Custom Web Components Wrapper',\n architecture: 'Custom Elements v1 & Shadow DOM',\n summary:\n 'Framework-agnostic web components encapsulated in Shadow DOM. Cross-platform runtime interoperability, but major SSR hydration and styling friction.',\n keyRisk: 'SSR rendering latency and challenging CSS theme token propagation through shadow boundaries.',\n color: '#6366f1',\n pros: [\n 'Universal encapsulation across Vue, React, Angular, and vanilla HTML',\n 'Strict CSS isolation prevents accidental style collisions',\n ],\n cons: [\n 'Complex SSR and Declarative Shadow DOM hydration mechanics',\n 'Difficult theme token synchronization and slot styling gymnastics',\n 'Suboptimal ergonomics with React synthetic event systems',\n ],\n scores: {\n impact: 3.7,\n confidence: 3.4,\n effort: 2.8,\n dx: 3.1,\n maintenance: 3.5,\n },\n rice: {\n reach: 90,\n impact: 3.5,\n confidence: 70,\n effort: 3.2,\n },\n },\n {\n id: 'opt-d',\n name: 'Option D: Micro-Frontend Module Federation',\n architecture: 'Webpack / Vite Runtime Federation',\n summary:\n 'Dynamic runtime module stitching over HTTP. Independent team deployments, but vulnerable to CSS leakage, network latency, and orchestration failures.',\n keyRisk: 'Runtime script evaluation latency and version mismatch instability in production.',\n color: '#ef4444',\n pros: ['Fully decentralized team deployments without monorepo synchronization'],\n cons: [\n 'High network overhead and cumulative layout shifts on initial load',\n 'Complex local development sandbox and shared singleton debugging',\n 'Runtime failures when remote hosts experience temporary downtime',\n ],\n scores: {\n impact: 3.0,\n confidence: 2.5,\n effort: 1.8,\n dx: 2.6,\n maintenance: 1.6,\n },\n rice: {\n reach: 58,\n impact: 3.0,\n confidence: 55,\n effort: 4.6,\n },\n },\n]\n\nexport function DecisionMatrixTable({\n className,\n title = 'Architectural Decision Matrix (RICE / Weighted Scoring)',\n subtitle = 'Evaluate technical options against weighted business and engineering criteria.',\n defaultFramework = 'weighted-matrix',\n ...props\n}: DecisionMatrixTableProps) {\n const [activeFramework, setActiveFramework] = React.useState(defaultFramework)\n const [showWeightEditor, setShowWeightEditor] = React.useState(false)\n const [showAddOptionForm, setShowAddOptionForm] = React.useState(false)\n const [selectedOptionId, setSelectedOptionId] = React.useState('opt-a')\n\n const [criterionWeights, setCriterionWeights] = React.useState>({\n impact: 25,\n confidence: 25,\n effort: 15,\n dx: 20,\n maintenance: 15,\n })\n\n const [options, setOptions] = React.useState(initialOptions)\n\n // Add custom option inputs\n const [newOptionName, setNewOptionName] = React.useState('')\n const [newOptionParadigm, setNewOptionParadigm] = React.useState('')\n const [newOptionSummary, setNewOptionSummary] = React.useState('')\n const [newOptionScores, setNewOptionScores] = React.useState({\n impact: 4.0,\n confidence: 4.0,\n effort: 3.5,\n dx: 4.0,\n maintenance: 3.5,\n })\n\n const totalWeight = React.useMemo(() => {\n return Object.values(criterionWeights).reduce((sum, w) => sum + (Number(w) || 0), 0)\n }, [criterionWeights])\n\n const resetWeights = () => {\n const fresh: Record = {}\n criteriaList.forEach((c) => {\n fresh[c.key] = c.defaultWeight\n })\n setCriterionWeights(fresh)\n }\n\n const resetOptions = () => {\n setOptions(initialOptions)\n setSelectedOptionId('opt-a')\n }\n\n const handleAddOption = () => {\n if (!newOptionName.trim()) return\n\n const newId = `opt-custom-${Date.now()}`\n const created: MatrixOption = {\n id: newId,\n name: newOptionName.trim(),\n architecture: newOptionParadigm.trim() || 'Custom Technical Architecture',\n summary: newOptionSummary.trim() || 'Custom evaluated technical approach for this architectural decision.',\n keyRisk: 'Requires comprehensive proof-of-concept testing in staging environments.',\n color: '#06b6d4',\n pros: ['Tailored to immediate domain constraints', 'Custom architectural design'],\n cons: ['Needs dedicated long-term ownership and testing framework'],\n scores: { ...newOptionScores },\n rice: {\n reach: 75,\n impact: newOptionScores.impact,\n confidence: Number((newOptionScores.confidence * 20).toFixed(0)),\n effort: Number((6 - newOptionScores.effort).toFixed(1)),\n },\n isCustom: true,\n }\n\n setOptions((prev) => [...prev, created])\n setSelectedOptionId(newId)\n setNewOptionName('')\n setNewOptionParadigm('')\n setNewOptionSummary('')\n setShowAddOptionForm(false)\n }\n\n const removeOption = (id: string) => {\n setOptions((prev) => prev.filter((opt) => opt.id !== id))\n if (selectedOptionId === id) {\n setSelectedOptionId(options[0]?.id || '')\n }\n }\n\n // Scored Options Calculation\n const scoredOptions = React.useMemo(() => {\n const sumW = totalWeight || 100\n\n const calculated = options.map((opt) => {\n const weightedSum =\n opt.scores.impact * (criterionWeights.impact ?? 25) +\n opt.scores.confidence * (criterionWeights.confidence ?? 25) +\n opt.scores.effort * (criterionWeights.effort ?? 15) +\n opt.scores.dx * (criterionWeights.dx ?? 20) +\n opt.scores.maintenance * (criterionWeights.maintenance ?? 15)\n\n const weightedScore = Number(((weightedSum / (5 * sumW)) * 100).toFixed(1))\n\n const reachFactor = opt.rice.reach\n const impactFactor = opt.rice.impact\n const confidenceFactor = opt.rice.confidence / 100\n const effortFactor = Math.max(0.5, opt.rice.effort)\n const riceScore = Number(((reachFactor * impactFactor * confidenceFactor) / effortFactor).toFixed(1))\n\n return {\n ...opt,\n weightedScore,\n riceScore,\n rank: 0,\n verdict: 'Discarded' as const,\n verdictVariant: 'destructive' as const,\n }\n })\n\n calculated.sort((a, b) => {\n if (activeFramework === 'rice') {\n return b.riceScore - a.riceScore\n }\n return b.weightedScore - a.weightedScore\n })\n\n return calculated.map((item, index) => {\n const rank = index + 1\n let verdict: 'Recommended Winner' | 'Second Choice' | 'Alternative' | 'Discarded' = 'Discarded'\n let verdictVariant: 'success' | 'info' | 'warning' | 'destructive' = 'destructive'\n\n if (rank === 1) {\n verdict = 'Recommended Winner'\n verdictVariant = 'success'\n } else if (rank === 2) {\n verdict = 'Second Choice'\n verdictVariant = 'info'\n } else if (rank === 3) {\n verdict = 'Alternative'\n verdictVariant = 'warning'\n } else {\n verdict = 'Discarded'\n verdictVariant = 'destructive'\n }\n\n return {\n ...item,\n rank,\n verdict,\n verdictVariant,\n }\n })\n }, [options, totalWeight, criterionWeights, activeFramework])\n\n const winningOption = scoredOptions[0]\n const activeSelectedOption = scoredOptions.find((opt) => opt.id === selectedOptionId) ?? winningOption\n\n // Radar chart SVG geometry\n const radarCenter = { x: 170, y: 155 }\n const radarRadius = 95\n const radarAxesCount = 5\n\n const getRadarPoint = (axisIndex: number, scoreValue: number, maxVal = 5) => {\n const angle = -Math.PI / 2 + (axisIndex * 2 * Math.PI) / radarAxesCount\n const ratio = Math.min(1, Math.max(0, scoreValue / maxVal))\n const r = radarRadius * ratio\n const x = radarCenter.x + r * Math.cos(angle)\n const y = radarCenter.y + r * Math.sin(angle)\n return { x, y }\n }\n\n const getRadarPolygon = (scores: {\n impact: number\n confidence: number\n effort: number\n dx: number\n maintenance: number\n }) => {\n const values = [scores.impact, scores.confidence, scores.effort, scores.dx, scores.maintenance]\n return values\n .map((val, idx) => {\n const pt = getRadarPoint(idx, val)\n return `${pt.x.toFixed(1)},${pt.y.toFixed(1)}`\n })\n .join(' ')\n }\n\n const getRingPolygon = (ratio: number) => {\n return Array.from({ length: radarAxesCount })\n .map((_, idx) => {\n const pt = getRadarPoint(idx, ratio * 5)\n return `${pt.x.toFixed(1)},${pt.y.toFixed(1)}`\n })\n .join(' ')\n }\n\n const radarAxisLabels = [\n { index: 0, label: 'Impact', x: 170, y: 38, anchor: 'middle' as const },\n { index: 1, label: 'Confidence', x: 285, y: 115, anchor: 'start' as const },\n { index: 2, label: 'Simplicity', x: 245, y: 258, anchor: 'middle' as const },\n { index: 3, label: 'DX & Own', x: 95, y: 258, anchor: 'middle' as const },\n { index: 4, label: 'Low Maint', x: 55, y: 115, anchor: 'end' as const },\n ]\n\n const getScoreBadgeVariant = (score: number): 'success' | 'default' | 'secondary' | 'outline' => {\n if (score >= 4.5) return 'success'\n if (score >= 3.5) return 'default'\n if (score >= 2.5) return 'secondary'\n return 'outline'\n }\n\n return (\n \n {/* Header Card: Controls and Metadata */}\n \n \n
\n
\n
\n \n \n ADR-042 Evaluation\n \n \n Updated Aug 2026\n \n
\n {title}\n {subtitle}\n
\n\n {/* Framework Switcher & Action Toolbar */}\n
\n
\n setActiveFramework('weighted-matrix')}\n >\n Weighted Value-Risk Matrix\n \n setActiveFramework('rice')}\n >\n RICE Framework\n \n
\n\n {activeFramework === 'weighted-matrix' && (\n setShowWeightEditor((v) => !v)}\n >\n \n Criterion Weights\n \n {totalWeight}%\n \n {!showWeightEditor ? (\n \n ) : (\n \n )}\n \n )}\n\n \n
\n
\n \n\n {/* Expandable Criterion Weights Adjuster */}\n {showWeightEditor && activeFramework === 'weighted-matrix' && (\n
\n
\n
\n
\n

\n Calibrate Evaluation Criteria Weights\n

\n

\n Adjust criteria percentages to reflect your organization's architectural priorities.\n

\n
\n
\n \n {totalWeight === 100 ? : }\n Total Weight: {totalWeight}%\n \n \n \n Reset Defaults\n \n
\n
\n\n
\n {criteriaList.map((criterion) => (\n \n
\n \n {criterion.label}\n \n \n {criterionWeights[criterion.key] ?? criterion.defaultWeight}%\n \n
\n

\n {criterion.description}\n

\n
\n \n setCriterionWeights((prev) => ({\n ...prev,\n [criterion.key]: vals[0] ?? 0,\n }))\n }\n />\n
\n
\n ))}\n
\n
\n \n )}\n\n {/* Expandable Add Custom Proposal Form */}\n {showAddOptionForm && (\n
\n
\n
\n

\n \n Add Technical Architecture Option to Matrix\n

\n \n
\n\n
\n
\n \n setNewOptionName(e.target.value)}\n placeholder=\"e.g. Option E: Shared UI Submodule\"\n size=\"small\"\n />\n
\n
\n \n setNewOptionParadigm(e.target.value)}\n placeholder=\"e.g. Git Submodule & Monorepo Link\"\n size=\"small\"\n />\n
\n
\n\n
\n \n setNewOptionSummary(e.target.value)}\n placeholder=\"Brief summary of distribution mechanics, bundle characteristics, and DX impact...\"\n size=\"small\"\n />\n
\n\n
\n \n
\n {criteriaList.map((criterion) => (\n
\n
{criterion.shortLabel}
\n
\n {newOptionScores[criterion.key]} / 5\n
\n
\n \n setNewOptionScores((prev) => ({\n ...prev,\n [criterion.key]: vals[0] ?? 3,\n }))\n }\n />\n
\n
\n ))}\n
\n
\n\n
\n \n \n
\n
\n
\n )}\n \n\n {/* Main Scoring Matrix Table */}\n \n
\n \n \n \n \n Rank\n \n \n Technical Option & architecture\n \n\n {activeFramework === 'weighted-matrix' ? (\n <>\n {criteriaList.map((criterion) => (\n \n
\n {criterion.shortLabel}\n \n {criterionWeights[criterion.key] ?? criterion.defaultWeight}% wt\n \n
\n \n ))}\n \n Weighted Score\n \n \n ) : (\n <>\n \n
\n Reach\n Dev Scale %\n
\n \n \n
\n Impact\n Multiplier (1-5)\n
\n \n \n
\n Confidence\n % Certainty\n
\n \n \n
\n Effort\n Sprints (1-5)\n
\n \n \n RICE Score\n \n \n )}\n\n \n ADR Verdict\n \n \n Inspect\n \n \n \n\n \n {scoredOptions.map((opt) => (\n setSelectedOptionId(opt.id)}\n >\n {/* Rank Column */}\n \n \n {opt.rank}\n \n \n\n {/* Proposal Name & Summary */}\n \n
\n
\n {opt.name}\n \n {opt.isCustom && (\n \n Custom\n \n )}\n
\n
{opt.architecture}
\n

{opt.summary}

\n
\n \n\n {/* Matrix Criteria Columns */}\n {activeFramework === 'weighted-matrix' ? (\n <>\n {criteriaList.map((criterion) => (\n \n
\n \n {opt.scores[criterion.key].toFixed(1)}\n \n
\n {[1, 2, 3, 4, 5].map((seg) => (\n \n ))}\n
\n
\n \n ))}\n\n {/* Weighted Score */}\n \n
\n = 70\n ? 'text-foreground'\n : 'text-muted-foreground',\n )}\n >\n {opt.weightedScore}\n / 100\n \n
\n = 70\n ? 'bg-info'\n : opt.weightedScore >= 50\n ? 'bg-warning'\n : 'bg-destructive',\n )}\n style={{ width: `${opt.weightedScore}%` }}\n />\n
\n
\n \n \n ) : (\n <>\n \n {opt.rice.reach}%\n \n \n {opt.rice.impact.toFixed(1)}x\n \n \n {opt.rice.confidence}%\n \n \n {opt.rice.effort.toFixed(1)} sprints\n \n \n
\n {opt.riceScore}\n RICE Pts\n
\n \n \n )}\n\n {/* Verdict Column */}\n \n {opt.rank === 1 ? (\n \n \n Recommended Winner\n \n ) : opt.rank === 2 ? (\n \n \n Second Choice\n \n ) : opt.rank === 3 ? (\n \n \n Alternative\n \n ) : (\n \n \n Discarded\n \n )}\n \n\n {/* Action / Inspect */}\n e.stopPropagation()}>\n {opt.isCustom ? (\n removeOption(opt.id)}\n >\n \n \n ) : (\n setSelectedOptionId(opt.id)}\n >\n \n \n )}\n \n \n ))}\n \n
\n
\n\n \n
\n \n Scores normalize dynamically to a 0–100 scale based on active criteria weights.\n
\n
\n \n
\n \n \n\n {/* Tradeoff Visualizer & ADR Recommendation Section */}\n
\n {/* Radar Chart: Multi-Option Criteria Comparison */}\n \n \n
\n
\n \n \n Decision Tradeoff Radar\n \n \n Multi-dimensional polygon overlay comparing architectural options.\n \n
\n \n 5 Axes (1-5)\n \n
\n \n\n \n {/* SVG Radar Canvas */}\n
\n \n {/* Background Concentric Grid Rings */}\n {[0.2, 0.4, 0.6, 0.8, 1.0].map((ring) => (\n \n ))}\n\n {/* Radial Axes Lines */}\n {Array.from({ length: radarAxesCount }).map((_, idx) => (\n \n ))}\n\n {/* Polygons for non-selected options */}\n {scoredOptions.map(\n (opt) =>\n opt.id !== activeSelectedOption.id && (\n setSelectedOptionId(opt.id)}\n />\n ),\n )}\n\n {/* Polygon for Selected Option */}\n \n\n {/* Vertex Dots for Selected Option */}\n {[\n activeSelectedOption.scores.impact,\n activeSelectedOption.scores.confidence,\n activeSelectedOption.scores.effort,\n activeSelectedOption.scores.dx,\n activeSelectedOption.scores.maintenance,\n ].map((val, idx) => (\n \n ))}\n\n {/* Axis Labels */}\n {radarAxisLabels.map((axis) => (\n \n {axis.label}\n \n ))}\n \n
\n\n {/* Radar Chart Legend */}\n
\n {scoredOptions.map((opt) => (\n setSelectedOptionId(opt.id)}\n >\n \n {opt.name.split(':')[0]}\n \n ))}\n
\n \n \n\n {/* Architectural Consensus & Tradeoff Detail Card */}\n \n \n
\n
\n
\n \n Selected Option Details\n \n \n {activeSelectedOption.verdict}\n \n
\n \n {activeSelectedOption.name}\n \n \n {activeSelectedOption.architecture}\n \n
\n
\n
\n {activeFramework === 'rice' ? activeSelectedOption.riceScore : activeSelectedOption.weightedScore}\n
\n
\n {activeFramework === 'rice' ? 'RICE Score' : 'Weighted Total'}\n
\n
\n
\n \n\n \n {/* Summary paragraph */}\n

{activeSelectedOption.summary}

\n\n \n\n {/* Pros & Cons Grid */}\n
\n {/* Advantages */}\n
\n \n \n Strategic Advantages\n \n
    \n {activeSelectedOption.pros.map((pro, idx) => (\n
  • \n •\n {pro}\n
    • \n ))}\n
\n
\n\n {/* Friction & Tradeoffs */}\n
\n \n \n Compromises & Friction\n \n
    \n {activeSelectedOption.cons.map((con, idx) => (\n
  • \n •\n {con}\n
    • \n ))}\n
\n
\n
\n\n {/* Risk Mitigation */}\n
\n \n \n Risk Mitigation & Governance Policy:\n \n

{activeSelectedOption.keyRisk}

\n
\n \n\n \n
\n \n ADR Record Consensus: \n \n {winningOption.name.split(':')[1] || winningOption.name}\n \n
\n \n \n Rank #{activeSelectedOption.rank}\n \n \n \n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/DecisionMatrixTable.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/slider.json", "https://uipkge.dev/r/react/table.json" ], "description": "Product and architectural decision matrix with dynamic weighted scoring algorithms (Impact, Confidence, Effort, Risk), RICE framework toggle, interactive weight sliders, option creator, multi-dimensional SVG tradeoff radar, and ADR consensus breakdown.", "categories": [ "productivity", "app", "table" ] }