{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "peer-discussion-forum", "title": "Peer Discussion Forum", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/peer-discussion-forum/PeerDiscussionForum.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowLeft,\n ArrowUpRight,\n Award,\n Bell,\n BellOff,\n Bold,\n Bookmark,\n Check,\n CheckCircle2,\n ChevronDown,\n ChevronUp,\n Code,\n Copy,\n ExternalLink,\n Eye,\n Flag,\n HelpCircle,\n Italic,\n Link2,\n List,\n MessageSquare,\n Plus,\n Quote,\n BookOpen,\n Share2,\n Tag,\n ThumbsUp,\n User,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport interface PeerDiscussionForumProps {\n className?: string\n}\n\ninterface CommunityAnswer {\n id: string\n authorName: string\n authorRole: string\n avatarText: string\n postedTime: string\n score: number\n content: string\n userVote?: 'up' | 'down' | null\n}\n\nexport function PeerDiscussionForum({ className }: PeerDiscussionForumProps) {\n // Question State\n const [questionScore, setQuestionScore] = React.useState(42)\n const [questionVote, setQuestionVote] = React.useState<'up' | 'down' | null>(null)\n const [isQuestionBookmarked, setIsQuestionBookmarked] = React.useState(false)\n const [isSubscribed, setIsSubscribed] = React.useState(true)\n const [copiedQuestionSnippet, setCopiedQuestionSnippet] = React.useState(false)\n const [copiedLink, setCopiedLink] = React.useState(false)\n\n function voteQuestion(type: 'up' | 'down') {\n if (questionVote === type) {\n setQuestionVote(null)\n setQuestionScore((prev) => prev + (type === 'up' ? -1 : 1))\n } else {\n let delta = type === 'up' ? 1 : -1\n if (questionVote === 'up') delta -= 1\n if (questionVote === 'down') delta += 1\n setQuestionVote(type)\n setQuestionScore((prev) => prev + delta)\n }\n }\n\n // Answer 1 State (Accepted Instructor Answer)\n const [answer1Score, setAnswer1Score] = React.useState(89)\n const [answer1Vote, setAnswer1Vote] = React.useState<'up' | 'down' | null>(null)\n const [isAnswer1Bookmarked, setIsAnswer1Bookmarked] = React.useState(false)\n const [copiedAnswer1Snippet, setCopiedAnswer1Snippet] = React.useState(false)\n\n function voteAnswer1(type: 'up' | 'down') {\n if (answer1Vote === type) {\n setAnswer1Vote(null)\n setAnswer1Score((prev) => prev + (type === 'up' ? -1 : 1))\n } else {\n let delta = type === 'up' ? 1 : -1\n if (answer1Vote === 'up') delta -= 1\n if (answer1Vote === 'down') delta += 1\n setAnswer1Vote(type)\n setAnswer1Score((prev) => prev + delta)\n }\n }\n\n // Answer 2 State (Peer Response)\n const [answer2Score, setAnswer2Score] = React.useState(14)\n const [answer2Vote, setAnswer2Vote] = React.useState<'up' | 'down' | null>(null)\n const [isAnswer2Bookmarked, setIsAnswer2Bookmarked] = React.useState(false)\n\n function voteAnswer2(type: 'up' | 'down') {\n if (answer2Vote === type) {\n setAnswer2Vote(null)\n setAnswer2Score((prev) => prev + (type === 'up' ? -1 : 1))\n } else {\n let delta = type === 'up' ? 1 : -1\n if (answer2Vote === 'up') delta -= 1\n if (answer2Vote === 'down') delta += 1\n setAnswer2Vote(type)\n setAnswer2Score((prev) => prev + delta)\n }\n }\n\n // Composer & Dynamic Answers State\n const [replyDraft, setReplyDraft] = React.useState('')\n const [customAnswers, setCustomAnswers] = React.useState([])\n\n function applyFormat(type: 'bold' | 'italic' | 'code' | 'link' | 'list' | 'quote') {\n if (type === 'bold') {\n setReplyDraft((prev) => (prev ? `${prev} **bold text**` : '**bold text**'))\n } else if (type === 'italic') {\n setReplyDraft((prev) => (prev ? `${prev} *italic text*` : '*italic text*'))\n } else if (type === 'code') {\n setReplyDraft((prev) =>\n prev ? `${prev}\\n\\`\\`\\`ts\\n// your code snippet here\\n\\`\\`\\`\\n` : '```ts\\n// your code snippet here\\n```\\n',\n )\n } else if (type === 'link') {\n setReplyDraft((prev) =>\n prev ? `${prev} [link title](https://example.com)` : '[link title](https://example.com)',\n )\n } else if (type === 'list') {\n setReplyDraft((prev) => (prev ? `${prev}\\n- Key insight 1\\n- Key insight 2` : '- Key insight 1\\n- Key insight 2'))\n } else if (type === 'quote') {\n setReplyDraft((prev) => (prev ? `${prev}\\n> Quote from documentation` : '> Quote from documentation'))\n }\n }\n\n function handlePostAnswer() {\n const text = replyDraft.trim()\n if (!text) return\n const newAnswer: CommunityAnswer = {\n id: `ans-${Date.now()}`,\n authorName: 'Alex Rivera',\n authorRole: 'Peer Student',\n avatarText: 'AR',\n postedTime: 'Just now',\n score: 1,\n content: text,\n userVote: 'up',\n }\n setCustomAnswers((prev) => [...prev, newAnswer])\n setReplyDraft('')\n }\n\n function voteCustomAnswer(id: string, type: 'up' | 'down') {\n setCustomAnswers((prev) =>\n prev.map((ans) => {\n if (ans.id !== id) return ans\n if (ans.userVote === type) {\n return {\n ...ans,\n userVote: null,\n score: ans.score + (type === 'up' ? -1 : 1),\n }\n }\n let delta = type === 'up' ? 1 : -1\n if (ans.userVote === 'up') delta -= 1\n if (ans.userVote === 'down') delta += 1\n return {\n ...ans,\n userVote: type,\n score: ans.score + delta,\n }\n }),\n )\n }\n\n function copyQuestionCode() {\n setCopiedQuestionSnippet(true)\n setTimeout(() => {\n setCopiedQuestionSnippet(false)\n }, 2000)\n }\n\n function copyAnswer1Code() {\n setCopiedAnswer1Snippet(true)\n setTimeout(() => {\n setCopiedAnswer1Snippet(false)\n }, 2000)\n }\n\n function shareThread() {\n setCopiedLink(true)\n setTimeout(() => {\n setCopiedLink(false)\n }, 2000)\n }\n\n const totalAnswersCount = 2 + customAnswers.length\n\n return (\n
\n {/* Top Navigation & Breadcrumb Header */}\n
\n
\n {/* Breadcrumb & Top Action */}\n
\n
\n CS-314 Advanced Frontend Architecture\n /\n Discussions\n /\n #DISC-2048\n
\n\n
\n \n \n
\n
\n\n {/* Thread Title & Status Row */}\n
\n
\n \n \n Solved · 1 Accepted Answer\n \n \n Vue 3.5 & Vite\n \n
\n\n

\n How to properly avoid circular dependencies in Vue 3.5 SFC variants with CVA?\n

\n\n {/* Tags List */}\n
\n \n \n #architecture\n \n \n \n #reka-ui\n \n \n \n #typescript\n \n \n \n #cva\n \n
\n
\n\n \n\n {/* Metadata Strip */}\n
\n
\n Asked \n 2 days ago\n
\n
\n Modified \n 18 hours ago\n
\n
\n Viewed \n 1,420 times\n
\n
\n Module \n Component Registry Architecture\n
\n
\n
\n
\n\n {/* 2-Column Main Workspace */}\n
\n {/* Left Column: Discussion Thread & Answers (8 cols) */}\n
\n {/* Question Post Card */}\n
\n
\n {/* Upvote / Downvote Counter Widget */}\n
\n voteQuestion('up')}\n >\n \n \n \n {questionScore}\n \n voteQuestion('down')}\n >\n \n \n\n setIsQuestionBookmarked(!isQuestionBookmarked)}\n >\n \n \n
\n\n {/* Question Body & Author Meta */}\n
\n {/* Author Header */}\n
\n
\n \n DC\n \n
\n
\n David Chen\n \n Student\n \n
\n

Posted 2 days ago · Oct 22, 2026 at 14:32

\n
\n
\n\n setIsSubscribed(!isSubscribed)}\n >\n {isSubscribed ? : }\n {isSubscribed ? 'Subscribed' : 'Subscribe'}\n \n
\n\n {/* Problem Narrative Prose */}\n
\n

\n While implementing unbundled UI primitives for our course project using Vue 3.5, TypeScript, and{' '}\n \n class-variance-authority\n \n , we ran into a perplexing runtime error during dev SSR and fast refresh:\n

\n\n
\n TypeError: $setup.buttonVariants is not a function at Button.vue:24\n
\n\n

\n Our initial project structure placed both the component export and the CVA variant definition in the\n same barrel file:\n

\n\n {/* Problem Code Snippet Block */}\n
\n
\n
\n \n components/ui/button/index.ts (Problematic Barrel)\n
\n \n {copiedQuestionSnippet ? (\n \n ) : (\n \n )}\n {copiedQuestionSnippet ? 'Copied' : 'Copy code'}\n \n
\n 
\n                      \n                        \n                          // ❌ Circular dependency: index.ts re-exports Button.vue, while Button.vue imports\n                          buttonVariants from index.ts\n                        \n                        {'\\n'}\n                        import {'{'} cva {'}'}{' '}\n                        from{' '}\n                        'class-variance-authority'\n                        {'\\n\\n'}\n                        export {'{'} default{' '}\n                        as Button {'}'} from{' '}\n                        './Button.vue'\n                        {'\\n\\n'}\n                        export const{' '}\n                        buttonVariants = cva({'\\n'}{' '}\n                        \n                          'inline-flex items-center justify-center font-medium transition-colors'\n                        \n                        ,{'\\n'} {'{'}\n                        {'\\n'} variants: {'{'}\n                        {'\\n'} variant: {'{'}\n                        {'\\n'} default:{' '}\n                        'bg-primary text-primary-foreground shadow-xs',\n                        {'\\n'} outline:{' '}\n                        \n                          'border border-input bg-background hover:bg-accent'\n                        \n                        ,{'\\n'} {'}'},{'\\n'} {'}'},{'\\n'} {'}'}\n                        {'\\n'})\n                      \n
\n
\n\n

\n Because{' '}\n Button.vue{' '}\n imports{' '}\n \n buttonVariants\n {' '}\n from{' '}\n ./index.ts\n , Vite evaluates the module in a cycle where the variant function binding is uninitialized during\n the Vue SFC component setup.\n

\n

\n What is the canonical architecture pattern to cleanly break this circular import while maintaining\n convenient barrel exports for consumers?\n

\n
\n\n {/* Question Action Bar */}\n
\n
\n \n \n Share\n \n \n
\n\n
\n \n 1.4k views\n
\n
\n
\n
\n
\n\n {/* Answers Section Header */}\n
\n

{totalAnswersCount} Answers

\n \n Sorted by: Highest score\n \n
\n\n {/* Answer 1: Accepted Instructor Answer */}\n
\n {/* Accepted Solution Top Ribbon */}\n
\n
\n \n Accepted by Author · Verified Solution\n
\n Instructor Solution\n
\n\n
\n
\n {/* Upvote Widget with Checkmark Badge */}\n
\n voteAnswer1('up')}\n >\n \n \n \n {answer1Score}\n \n voteAnswer1('down')}\n >\n \n \n\n {/* Accepted Checkmark Pill */}\n \n \n
\n
\n\n {/* Answer Body */}\n
\n {/* Author Header */}\n
\n
\n \n MV\n \n
\n
\n Marcus Vance\n \n Course Instructor\n \n \n Staff\n \n
\n

Answered 1 day ago · Edited 18h ago

\n
\n
\n\n setIsAnswer1Bookmarked(!isAnswer1Bookmarked)}\n >\n \n {isAnswer1Bookmarked ? 'Saved' : 'Save'}\n \n
\n\n {/* Solution Content Prose */}\n
\n

\n Great question, David. This is one of the most frequent traps when building unbundled component\n registries with Vue 3.5 and Vite.\n

\n

\n The Vue SFC compiler compiles{' '}\n \n <script setup>\n {' '}\n into a self-contained ES module execution wrapper. When{' '}\n \n Button.vue\n {' '}\n imports from{' '}\n \n ./index.ts\n \n , and{' '}\n index.ts{' '}\n simultaneously imports{' '}\n \n Button.vue\n \n , JavaScript enters a Temporal Dead Zone (TDZ) for the uninitialized{' '}\n \n buttonVariants\n {' '}\n export.\n

\n\n

\n The Solution: Three-File Sidecar Architecture\n

\n\n

\n To completely eliminate cyclic dependencies and ensure 100% reliable SSR and Vite HMR, extract all\n CVA definitions into a dedicated{' '}\n \n <name>.variants.ts\n {' '}\n file:\n

\n\n {/* Solution Code Snippet 1 */}\n
\n
\n
\n \n components/ui/button/button.variants.ts\n
\n \n {copiedAnswer1Snippet ? (\n \n ) : (\n \n )}\n {copiedAnswer1Snippet ? 'Copied' : 'Copy code'}\n \n
\n 
\n                        \n                          import {'{'} cva,{' '}\n                          type VariantProps {'}'}{' '}\n                          from{' '}\n                          'class-variance-authority'\n                          {'\\n\\n'}\n                          export const{' '}\n                          buttonVariants = cva({'\\n'}{' '}\n                          \n                            'inline-flex items-center justify-center rounded-md font-medium transition-colors\n                            focus-visible:ring-2 focus-visible:outline-none'\n                          \n                          ,{'\\n'} {'{'}\n                          {'\\n'} variants: {'{'}\n                          {'\\n'} variant: {'{'}\n                          {'\\n'} default:{' '}\n                          \n                            'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90'\n                          \n                          ,{'\\n'} secondary:{' '}\n                          \n                            'bg-secondary text-secondary-foreground hover:bg-secondary/80'\n                          \n                          ,{'\\n'} outline:{' '}\n                          \n                            'border border-input bg-background hover:bg-accent hover:text-accent-foreground'\n                          \n                          ,{'\\n'} destructive:{' '}\n                          \n                            'bg-destructive text-destructive-foreground hover:bg-destructive/90'\n                          \n                          ,{'\\n'} {'}'},{'\\n'} size: {'{'}\n                          {'\\n'} default: 'h-9 px-4 py-2 text-sm',{'\\n'}{' '}\n                          sm: 'h-8 px-3 text-xs rounded-md',{'\\n'} lg:{' '}\n                          'h-10 px-8 text-base rounded-md',{'\\n'} {'}'},\n                          {'\\n'} {'}'},{'\\n'} defaultVariants: {'{'}\n                          {'\\n'} variant: 'default',{'\\n'} size:{' '}\n                          'default',{'\\n'} {'}'},{'\\n'} {'}'}\n                          {'\\n'}){'\\n\\n'}\n                          export type{' '}\n                          ButtonVariants = VariantProps<\n                          typeof buttonVariants>\n                        \n
\n
\n\n {/* Companion Barrel & SFC Snippet */}\n
\n
\n
\n \n components/ui/button/index.ts & Button.vue\n
\n
\n 
\n                        \n                          // index.ts — Clean consumer re-exports\n                          {'\\n'}\n                          export {'{'}{' '}\n                          default as Button{' '}\n                          {'}'} from{' '}\n                          './Button.vue'\n                          {'\\n'}\n                          export {'{'} buttonVariants,{' '}\n                          type ButtonVariants {'}'}{' '}\n                          from{' '}\n                          './button.variants'\n                          {'\\n\\n'}\n                          // In Button.vue <script setup lang=\"ts\">\n                          {'\\n'}\n                          import {'{'} buttonVariants,{' '}\n                          type ButtonVariants {'}'}{' '}\n                          from{' '}\n                          './button.variants'{' '}\n                          // ✅ Direct sibling import\n                        \n
\n
\n\n
    \n
  • \n Acyclic Dependency Graph:{' '}\n Button.vue{' '}\n imports strictly from{' '}\n \n ./button.variants\n \n .\n
    • \n
  • \n Tree-Shakable: Consumers can import just the variant generator without mounting\n the Vue SFC component instance.\n
    • \n
  • \n Cross-Framework Ready: The variant file is pure TypeScript, making it 100%\n shareable across Vue and React registry packages.\n
    • \n
\n
\n\n {/* Action Bar */}\n
\n
\n voteAnswer1('up')}\n >\n \n Helpful ({answer1Score})\n \n \n \n Share\n \n
\n 89 students found this helpful\n
\n
\n
\n
\n \n\n {/* Answer 2: Peer Response */}\n
\n
\n {/* Upvote Widget */}\n
\n voteAnswer2('up')}\n >\n \n \n \n {answer2Score}\n \n voteAnswer2('down')}\n >\n \n \n
\n\n {/* Answer Body */}\n
\n {/* Author Header */}\n
\n
\n \n SL\n \n
\n
\n Sophia Lin\n \n Teaching Assistant\n \n
\n

Answered 2 days ago · Oct 22, 2026 at 18:40

\n
\n
\n\n setIsAnswer2Bookmarked(!isAnswer2Bookmarked)}\n >\n \n {isAnswer2Bookmarked ? 'Saved' : 'Save'}\n \n
\n\n {/* Content Prose */}\n
\n

\n Adding to Marcus's answer: another huge benefit of isolating{' '}\n \n <name>.variants.ts\n {' '}\n is for monorepos or dual-framework setups.\n

\n

\n When you have both Vue and React registry components (like in UIPKGE), the variant definitions can\n be shared verbatim in a shared token package without bringing in any Vue SFC or JSX compiler\n dependencies. This keeps design tokens consistent across both stacks.\n

\n
\n\n {/* Action Bar */}\n
\n
\n voteAnswer2('up')}\n >\n \n Helpful ({answer2Score})\n \n \n \n Share\n \n
\n 14 students found this helpful\n
\n
\n
\n
\n\n {/* Dynamic User Submitted Answers */}\n {customAnswers.map((ans) => (\n
\n
\n {/* Upvote Widget */}\n
\n voteCustomAnswer(ans.id, 'up')}\n >\n \n \n {ans.score}\n voteCustomAnswer(ans.id, 'down')}\n >\n \n \n
\n\n {/* Answer Body */}\n
\n {/* Author Header */}\n
\n
\n \n \n {ans.avatarText}\n \n \n
\n
\n {ans.authorName}\n \n {ans.authorRole}\n \n
\n

{ans.postedTime}

\n
\n
\n
\n\n {/* Content Prose */}\n
{ans.content}
\n
\n
\n
\n ))}\n\n {/* Reply / Answer Composer */}\n
\n
\n

Post Your Answer

\n

\n Provide thorough explanations, actionable code examples, and reference architectural best practices.\n

\n
\n\n
\n {/* Formatting Toolbar */}\n
\n applyFormat('bold')}\n >\n \n \n applyFormat('italic')}\n >\n \n \n applyFormat('code')}\n >\n \n \n applyFormat('link')}\n >\n \n \n applyFormat('list')}\n >\n \n \n applyFormat('quote')}\n >\n \n \n Markdown syntax supported\n
\n\n {/* Rich Textarea */}\n setReplyDraft(v)}\n placeholder=\"Write your detailed answer with code blocks (e.g. ```ts ... ```)...\"\n rows={6}\n className=\"resize-y font-sans text-sm\"\n />\n\n {/* Post Button & Guidelines */}\n
\n \n Draft saved automatically · Be constructive & cite official docs\n \n \n \n Post Your Answer\n \n
\n
\n
\n \n\n {/* Right Column: Sidebar Metadata & Related Discussions (4 cols) */}\n \n
\n \n )\n}\n\nexport default PeerDiscussionForum\n", "type": "registry:block", "target": "~/components/blocks/PeerDiscussionForum.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "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/separator.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "StackOverflow and EdStem style student community Q&A thread with upvoting, accepted instructor answers, markdown code formatting, rich answer composer, and related discussions sidebar.", "categories": [ "education", "app", "community" ] }