{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "peer-discussion-forum", "title": "Peer Discussion Forum", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/peer-discussion-forum/peer-discussion-forum.component.ts", "content": "// StackOverflow / EdStem style student community Q&A thread: breadcrumb header with share\n// actions, solved badges and tags, a question card with voting + bookmark + subscribe, an\n// accepted instructor answer with solution snippets, a peer answer, a markdown composer that\n// appends answers, and a sidebar with discussion info, related threads and etiquette.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n ArrowUpRight,\n Award,\n Bell,\n BellOff,\n Bold,\n BookOpen,\n Bookmark,\n Check,\n CheckCircle2,\n ChevronDown,\n ChevronUp,\n Code,\n Copy,\n Eye,\n Flag,\n Italic,\n Link2,\n List,\n LucideAngularModule,\n MessageSquare,\n Plus,\n Quote,\n Share2,\n Tag,\n ThumbsUp,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport type ForumVote = 'up' | 'down' | null\nexport type ComposerFormat = 'bold' | 'italic' | 'code' | 'link' | 'list' | 'quote'\n\nexport interface CommunityAnswer {\n id: string\n authorName: string\n authorRole: string\n avatarText: string\n postedTime: string\n score: number\n content: string\n userVote?: ForumVote\n}\n\ninterface RelatedDiscussion {\n title: string\n status: 'Solved' | 'Open'\n upvotes: string\n answers: string\n}\n\nconst relatedDiscussions: RelatedDiscussion[] = [\n {\n title: 'How to type polymorphic asChild props with Reka UI in Vue 3.5?',\n status: 'Solved',\n upvotes: '38 upvotes',\n answers: '4 answers',\n },\n {\n title: 'Configuring OKLCH Tailwind v4 themes with Nuxt 4',\n status: 'Solved',\n upvotes: '24 upvotes',\n answers: '2 answers',\n },\n {\n title: 'Best practices for CVA compoundVariants in TypeScript',\n status: 'Open',\n upvotes: '19 upvotes',\n answers: '1 answer',\n },\n {\n title: 'Hydration mismatches with client-side theme switchers in Astro SSG',\n status: 'Solved',\n upvotes: '52 upvotes',\n answers: '6 answers',\n },\n]\n\nconst etiquetteItems = [\n 'Isolate reproducible snippets using [name].variants.ts patterns.',\n 'Search existing questions before posting duplicate topics.',\n 'Mark the accepted solution once your issue is verified.',\n]\n\nfunction applyVote(\n score: number,\n current: ForumVote,\n type: Exclude,\n): { score: number; vote: ForumVote } {\n if (current === type) return { score: score + (type === 'up' ? -1 : 1), vote: null }\n let delta = type === 'up' ? 1 : -1\n if (current === 'up') delta -= 1\n if (current === 'down') delta += 1\n return { score: score + delta, vote: type }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-peer-discussion-forum, [ui-peer-discussion-forum]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n
\n
\n
\n
\n CS-314 Advanced Frontend Architecture\n /\n Discussions\n /\n #DISC-2048\n
\n
\n \n \n
\n
\n\n
\n
\n \n \n Solved · 1 Accepted Answer\n \n Vue 3.5 & Vite\n
\n

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

\n
\n @for (tag of tags; track tag) {\n \n \n {{ tag }}\n \n }\n
\n
\n\n \n\n
\n
Asked 2 days ago
\n
Modified 18 hours ago
\n
Viewed 1,420 times
\n
\n Module Component Registry Architecture\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n \n \n {{\n questionScore()\n }}\n \n \n \n \n \n \n
\n\n
\n
\n
\n \n DC\n \n
\n
\n David Chen\n Student\n
\n

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

\n
\n
\n \n @if (isSubscribed()) {\n \n } @else {\n \n }\n {{ isSubscribed() ? 'Subscribed' : 'Subscribe' }}\n \n
\n\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 TypeError: $setup.buttonVariants is not a function at Button.vue:24\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 \n
\n \n components/ui/button/index.ts (Problematic Barrel)\n
\n \n @if (copiedQuestionSnippet()) {\n \n } @else {\n \n }\n {{ copiedQuestionSnippet() ? 'Copied' : 'Copy code' }}\n \n
\n import {{ '{' }} cva {{ '}' }} from 'class-variance-authority'\n\nexport {{ '{' }} default as Button {{ '}' }} from './Button.vue'\n
\n

\n Because\n Button.vue\n imports\n buttonVariants\n from\n ./index.ts,\n Vite evaluates the module in a cycle where the variant function binding is uninitialized during the\n 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
\n
\n \n \n Share\n \n \n
\n
\n \n 1.4k views\n
\n
\n
\n
\n \n\n
\n

\n {{ totalAnswersCount() }} Answers\n

\n \n Sorted by: Highest score\n \n
\n\n \n \n
\n \n Accepted by Author · Verified Solution\n
\n Instructor Solution\n
\n
\n
\n
\n \n \n \n {{\n answer1Score()\n }}\n \n \n \n \n \n
\n
\n\n
\n
\n
\n \n MV\n \n
\n
\n Marcus Vance\n \n Course Instructor\n \n Staff\n
\n

Answered 1 day ago · Edited 18h ago

\n
\n
\n \n \n {{ isAnswer1Bookmarked() ? 'Saved' : 'Save' }}\n \n
\n\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 Solution: Three-File Sidecar Architecture\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 <name>.variants.ts\n file:\n

\n
\n \n
\n \n components/ui/button/button.variants.ts\n
\n \n @if (copiedAnswer1Snippet()) {\n \n } @else {\n \n }\n {{ copiedAnswer1Snippet() ? 'Copied' : 'Copy code' }}\n \n
\n export const buttonVariants = cva('inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none', {{ '{' }} variants: {{ '{' }} variant: {{ '{' }} default: 'bg-primary text-primary-foreground shadow-xs' {{ '}' }} {{ '}' }} {{ '}' }})\n
\n
    \n
  • \n Acyclic Dependency Graph: Button.vue imports strictly from ./button.variants.\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
\n
\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
\n
\n
\n \n \n \n {{\n answer2Score()\n }}\n \n \n \n
\n\n
\n
\n
\n \n SL\n \n
\n
\n Sophia Lin\n Teaching Assistant\n
\n

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

\n
\n
\n \n \n {{ isAnswer2Bookmarked() ? 'Saved' : 'Save' }}\n \n
\n\n
\n

\n Adding to Marcus's answer: another huge benefit of isolating\n <name>.variants.ts\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
\n
\n \n \n Helpful ({{ answer2Score() }})\n \n \n \n Share\n \n
\n 14 students found this helpful\n
\n
\n
\n
\n\n @for (ans of customAnswers(); track ans.id) {\n
\n
\n
\n \n \n \n {{ ans.score }}\n \n \n \n
\n
\n
\n
\n \n {{\n ans.avatarText\n }}\n \n
\n
\n {{ ans.authorName }}\n {{ ans.authorRole }}\n
\n

{{ ans.postedTime }}

\n
\n
\n
\n
{{ ans.content }}
\n
\n
\n
\n }\n\n
\n
\n

Post Your Answer

\n

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

\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Markdown syntax supported\n
\n \n
\n Draft saved automatically · Be constructive & cite official docs\n \n \n Post Your Answer\n \n
\n
\n
\n \n\n \n \n \n `,\n})\nexport class UiPeerDiscussionForumComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Award = Award\n protected readonly Bell = Bell\n protected readonly BellOff = BellOff\n protected readonly Bold = Bold\n protected readonly BookOpen = BookOpen\n protected readonly Bookmark = Bookmark\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronDown = ChevronDown\n protected readonly ChevronUp = ChevronUp\n protected readonly Code = Code\n protected readonly Copy = Copy\n protected readonly Eye = Eye\n protected readonly Flag = Flag\n protected readonly Italic = Italic\n protected readonly Link2 = Link2\n protected readonly List = List\n protected readonly MessageSquare = MessageSquare\n protected readonly Plus = Plus\n protected readonly Quote = Quote\n protected readonly Share2 = Share2\n protected readonly Tag = Tag\n protected readonly ThumbsUp = ThumbsUp\n\n @Input('class') className?: string\n\n protected readonly tags = ['#architecture', '#reka-ui', '#typescript', '#cva']\n protected readonly relatedDiscussions = relatedDiscussions\n protected readonly etiquetteItems = etiquetteItems\n\n readonly questionScore = signal(42)\n readonly questionVote = signal(null)\n readonly isQuestionBookmarked = signal(false)\n readonly isSubscribed = signal(true)\n readonly copiedQuestionSnippet = signal(false)\n readonly copiedLink = signal(false)\n\n readonly answer1Score = signal(89)\n readonly answer1Vote = signal(null)\n readonly isAnswer1Bookmarked = signal(false)\n readonly copiedAnswer1Snippet = signal(false)\n\n readonly answer2Score = signal(14)\n readonly answer2Vote = signal(null)\n readonly isAnswer2Bookmarked = signal(false)\n\n readonly replyDraft = signal('')\n readonly customAnswers = signal([])\n\n readonly totalAnswersCount = computed(() => 2 + this.customAnswers().length)\n\n private timers: ReturnType[] = []\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full space-y-6', this.className)\n }\n\n private voteBtn(base: string, vote: ForumVote, type: 'up' | 'down', activeUp: string, activeDown: string): string {\n if (vote === 'up') return cn(base, activeUp)\n if (vote === 'down') return cn(base, activeDown)\n return cn(base, 'text-muted-foreground hover:text-foreground')\n }\n\n get questionUpClass(): string {\n return this.voteBtn(\n 'size-9 rounded-lg border',\n this.questionVote(),\n 'up',\n 'border-primary bg-primary/10 text-primary hover:bg-primary/20',\n 'text-muted-foreground hover:text-foreground',\n ).replace(\n 'text-muted-foreground hover:text-foreground',\n this.questionVote() === 'up' ? '' : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n get questionDownClass(): string {\n return cn(\n 'size-9 rounded-lg border',\n this.questionVote() === 'down'\n ? 'border-destructive bg-destructive/10 text-destructive hover:bg-destructive/20'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n get questionBookmarkClass(): string {\n return cn(\n 'mt-3 size-8 rounded-md',\n this.isQuestionBookmarked() ? 'text-primary' : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n get questionBookmarkIconClass(): string {\n return cn('size-4', this.isQuestionBookmarked() && 'fill-current')\n }\n\n get subscribeClass(): string {\n return cn('h-7 gap-1.5 text-xs', this.isSubscribed() ? 'text-primary' : 'text-muted-foreground')\n }\n\n get answer1UpClass(): string {\n return cn(\n 'size-9 rounded-lg border',\n this.answer1Vote() === 'up'\n ? 'border-success bg-success/10 text-success hover:bg-success/20'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n get answer1DownClass(): string {\n return cn(\n 'size-9 rounded-lg border',\n this.answer1Vote() === 'down'\n ? 'border-destructive bg-destructive/10 text-destructive hover:bg-destructive/20'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n get answer1BookmarkIconClass(): string {\n return cn('size-3.5', this.isAnswer1Bookmarked() && 'fill-primary text-primary')\n }\n\n get answer2UpClass(): string {\n return cn(\n 'size-9 rounded-lg border',\n this.answer2Vote() === 'up'\n ? 'border-primary bg-primary/10 text-primary hover:bg-primary/20'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n get answer2DownClass(): string {\n return cn(\n 'size-9 rounded-lg border',\n this.answer2Vote() === 'down'\n ? 'border-destructive bg-destructive/10 text-destructive hover:bg-destructive/20'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n get answer2BookmarkIconClass(): string {\n return cn('size-3.5', this.isAnswer2Bookmarked() && 'fill-primary text-primary')\n }\n\n customUpClass(ans: CommunityAnswer): string {\n return cn(\n 'size-9 rounded-lg border',\n ans.userVote === 'up'\n ? 'border-primary bg-primary/10 text-primary'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n customDownClass(ans: CommunityAnswer): string {\n return cn(\n 'size-9 rounded-lg border',\n ans.userVote === 'down'\n ? 'border-destructive bg-destructive/10 text-destructive'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n voteQuestion(type: 'up' | 'down'): void {\n const next = applyVote(this.questionScore(), this.questionVote(), type)\n this.questionScore.set(next.score)\n this.questionVote.set(next.vote)\n }\n\n voteAnswer1(type: 'up' | 'down'): void {\n const next = applyVote(this.answer1Score(), this.answer1Vote(), type)\n this.answer1Score.set(next.score)\n this.answer1Vote.set(next.vote)\n }\n\n voteAnswer2(type: 'up' | 'down'): void {\n const next = applyVote(this.answer2Score(), this.answer2Vote(), type)\n this.answer2Score.set(next.score)\n this.answer2Vote.set(next.vote)\n }\n\n applyFormat(type: ComposerFormat): void {\n const prev = this.replyDraft()\n if (type === 'bold') this.replyDraft.set(prev ? `${prev} **bold text**` : '**bold text**')\n else if (type === 'italic') this.replyDraft.set(prev ? `${prev} *italic text*` : '*italic text*')\n else if (type === 'code')\n this.replyDraft.set(\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 this.replyDraft.set(prev ? `${prev} [link title](https://example.com)` : '[link title](https://example.com)')\n else if (type === 'list')\n this.replyDraft.set(prev ? `${prev}\\n- Key insight 1\\n- Key insight 2` : '- Key insight 1\\n- Key insight 2')\n else this.replyDraft.set(prev ? `${prev}\\n> Quote from documentation` : '> Quote from documentation')\n }\n\n handlePostAnswer(): void {\n const text = this.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 this.customAnswers.update((prev) => [...prev, newAnswer])\n this.replyDraft.set('')\n }\n\n voteCustomAnswer(id: string, type: 'up' | 'down'): void {\n this.customAnswers.update((prev) =>\n prev.map((ans) => {\n if (ans.id !== id) return ans\n const next = applyVote(ans.score, ans.userVote ?? null, type)\n return { ...ans, score: next.score, userVote: next.vote }\n }),\n )\n }\n\n private flash(setter: (v: boolean) => void): void {\n setter(true)\n this.timers.push(setTimeout(() => setter(false), 2000))\n }\n\n copyQuestionCode(): void {\n this.flash((v) => this.copiedQuestionSnippet.set(v))\n }\n\n copyAnswer1Code(): void {\n this.flash((v) => this.copiedAnswer1Snippet.set(v))\n }\n\n shareThread(): void {\n this.flash((v) => this.copiedLink.set(v))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/peer-discussion-forum/peer-discussion-forum.component.ts" }, { "path": "packages/registry-angular/blocks/peer-discussion-forum/index.ts", "content": "export {\n UiPeerDiscussionForumComponent,\n type ForumVote,\n type ComposerFormat,\n type CommunityAnswer,\n} from './peer-discussion-forum.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/peer-discussion-forum/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }