{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "flashcard-study-deck", "title": "Flashcard Study Deck", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/flashcard-study-deck/flashcard-study-deck.component.ts", "content": "// Anki and Quizlet style spaced-repetition flashcard study deck with smooth 3D flip card\n// interaction, WCAG 2.2 accessibility curriculum, hint drawer, mastery percentage tracking,\n// keyboard shortcuts, and SM-2 interval rating buttons. Port of the React block 1:1.\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n Input,\n OnDestroy,\n OnInit,\n computed,\n inject,\n signal,\n} from '@angular/core'\nimport {\n Bookmark,\n Check,\n ChevronLeft,\n ChevronRight,\n Copy,\n Flame,\n GraduationCap,\n Lightbulb,\n LucideAngularModule,\n RotateCw,\n Shuffle,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface Flashcard {\n id: string\n category: string\n difficulty?: 'Level A' | 'Level AA' | 'Level AAA' | 'Design System' | 'Engineering'\n question: string\n hint: string\n answer: string\n codeSnippet?: string\n codeLanguage?: string\n source?: string\n}\n\nexport type RatingInterval = 'again' | 'hard' | 'good' | 'easy'\n\nconst DEFAULT_DECK_TITLE = 'Design Engineering & Web Accessibility (WCAG 2.2)'\n\nconst DEFAULT_CARDS: Flashcard[] = [\n {\n id: 'wcag-1-4-3',\n category: 'WCAG Criterion 1.4.3',\n difficulty: 'Level AA',\n question: 'What is the minimum contrast ratio required for regular body text under WCAG AA standards?',\n hint: 'Consider standard text (< 18pt or < 14pt bold) versus large display headings (≥ 18pt or ≥ 14pt bold).',\n answer: '4.5:1 for normal text (< 18pt or < 14pt bold) and 3:1 for large text (≥ 18pt or ≥ 14pt bold).',\n codeSnippet: 'color: oklch(0.20 0 0); /* on oklch(0.98 0 0) -> 14.2:1 passes AA/AAA */',\n codeLanguage: 'css',\n source: 'WCAG 2.2 § 1.4.3 Contrast (Minimum)',\n },\n {\n id: 'wcag-2-5-8',\n category: 'WCAG Criterion 2.5.8',\n difficulty: 'Level AA',\n question: 'What is the minimum interactive touch target size required in WCAG 2.2 Level AA?',\n hint: 'Introduced in WCAG 2.2 to prevent accidental taps on mobile touchscreens without requiring 44×44px AAA.',\n answer:\n 'At least 24×24 CSS pixels, or have sufficient spacing (undersized targets surrounded by at least 24px diameter clear space).',\n codeSnippet: '\n \n \n\n \n
\n
\n \n Question Prompt\n \n

\n {{ card.question }}\n

\n
\n\n \n @if (card.hint) {\n
\n \n \n {{ showHint() ? 'Hide Hint' : 'Show Hint' }}\n [H]\n \n\n @if (showHint()) {\n \n \n
\n Hint: \n {{ card.hint }}\n
\n
\n }\n
\n }\n \n\n \n
\n
\n
\n Press Space or click\n button\n \n \n Flip Card to Reveal Answer\n \n
\n
\n \n\n \n
\n \n
\n
\n {{ card.category }}\n \n Answer Revealed\n \n
\n\n \n \n Flip Back\n \n
\n\n \n
\n
\n Answer Explanation \n

{{ card.answer }}

\n
\n\n \n @if (card.codeSnippet) {\n
\n
\n Code / Token Example\n \n @if (copiedSnippet()) {\n \n } @else {\n \n }\n {{ copiedSnippet() ? 'Copied' : 'Copy' }}\n \n
\n {{ card.codeSnippet }}\n @if (card.source) {\n

Source: {{ card.source }}

\n }\n
\n }\n
\n\n \n
\n
\n Rate recall difficulty (SM-2 Spaced Repetition):\n @if (lastRatingFeedback()) {\n {{ lastRatingFeedback() }}\n }\n
\n\n
\n \n Again\n < 1 min [1]\n \n\n \n Hard\n 12 hours [2]\n \n\n \n Good\n 2 days [3]\n \n\n \n Easy\n 4 days [4]\n \n
\n
\n
\n \n \n\n \n
\n
\n \n \n Previous\n \n\n \n
\n\n
\n \n\n \n Next\n \n \n
\n
\n\n \n
\n

\n Shortcuts: ← / → Navigate ·\n Space Flip ·\n H Hint ·\n 1-4 Rate Interval\n

\n
\n }\n \n `,\n})\nexport class UiFlashcardStudyDeckComponent implements OnInit, OnDestroy {\n protected readonly Bookmark = Bookmark\n protected readonly Check = Check\n protected readonly ChevronLeft = ChevronLeft\n protected readonly ChevronRight = ChevronRight\n protected readonly Copy = Copy\n protected readonly Flame = Flame\n protected readonly GraduationCap = GraduationCap\n protected readonly Lightbulb = Lightbulb\n protected readonly RotateCw = RotateCw\n protected readonly Shuffle = Shuffle\n\n @Input() initialTitle?: string\n @Input() initialCards?: Flashcard[]\n @Input('class') className?: string\n\n readonly deck = signal(DEFAULT_CARDS.map((c) => ({ ...c })))\n readonly currentIndex = signal(0)\n readonly isFlipped = signal(false)\n readonly showHint = signal(false)\n readonly copiedSnippet = signal(false)\n readonly bookmarkedCards = signal>(new Set())\n readonly cardScores = signal>({})\n readonly lastRatingFeedback = signal(null)\n\n private timers: ReturnType[] = []\n private onKeyDown = (event: KeyboardEvent): void => this.handleKeyDown(event)\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n for (const t of this.timers) clearTimeout(t)\n if (typeof window !== 'undefined') window.removeEventListener('keydown', this.onKeyDown)\n })\n }\n\n ngOnInit(): void {\n if (this.initialCards) this.deck.set(this.initialCards.map((c) => ({ ...c })))\n if (typeof window !== 'undefined') window.addEventListener('keydown', this.onKeyDown)\n }\n\n ngOnDestroy(): void {\n if (typeof window !== 'undefined') window.removeEventListener('keydown', this.onKeyDown)\n }\n\n readonly currentCard = computed(() => this.deck()[this.currentIndex()] ?? this.deck()[0])\n readonly totalCards = computed(() => this.deck().length)\n readonly currentNumber = computed(() => this.currentIndex() + 1)\n readonly progressPercentage = computed(() => Math.round((this.currentNumber() / this.totalCards()) * 100))\n readonly reviewedCount = computed(() => Object.keys(this.cardScores()).length)\n\n readonly masteryPercentage = computed(() => {\n const keys = Object.keys(this.cardScores())\n if (keys.length === 0) return 0\n const total = keys.reduce((sum, key) => sum + (this.cardScores()[key] ?? 0), 0)\n return Math.min(100, Math.round(total / this.totalCards()))\n })\n\n readonly isBookmarked = computed(() => {\n const card = this.currentCard()\n return card ? this.bookmarkedCards().has(card.id) : false\n })\n\n get deckTitle(): string {\n return this.initialTitle ?? DEFAULT_DECK_TITLE\n }\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-4xl space-y-6 p-4 md:p-6 lg:p-8', this.className)\n }\n\n get flipClass(): string {\n return cn(\n 'relative min-h-[440px] w-full rounded-xl transition-transform duration-500 [transform-style:preserve-3d] md:min-h-[460px]',\n this.isFlipped() && '[transform:rotateY(180deg)]',\n )\n }\n\n get frontCardClass(): string {\n return cn(\n 'border-border bg-card absolute inset-0 flex h-full w-full flex-col justify-between rounded-xl border p-6 shadow-xs [backface-visibility:hidden] md:p-8',\n this.isFlipped() ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100',\n )\n }\n\n get backCardClass(): string {\n return cn(\n 'border-border bg-card absolute inset-0 flex h-full w-full [transform:rotateY(180deg)] flex-col justify-between rounded-xl border p-6 shadow-xs [backface-visibility:hidden] md:p-8',\n this.isFlipped() ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0',\n )\n }\n\n get bookmarkBtnClass(): string {\n return cn('text-muted-foreground hover:text-foreground', this.isBookmarked() && 'text-warning')\n }\n\n get bookmarkIconClass(): string {\n return cn('size-4', this.isBookmarked() && 'fill-warning text-warning')\n }\n\n toggleFlip(event?: Event): void {\n event?.stopPropagation()\n this.isFlipped.update((v) => !v)\n }\n\n toggleHint(event?: Event): void {\n event?.stopPropagation()\n this.showHint.update((v) => !v)\n }\n\n toggleBookmark(event?: Event): void {\n event?.stopPropagation()\n const card = this.currentCard()\n if (!card) return\n this.bookmarkedCards.update((prev) => {\n const next = new Set(prev)\n if (next.has(card.id)) next.delete(card.id)\n else next.add(card.id)\n return next\n })\n }\n\n handlePrev(): void {\n if (this.currentIndex() > 0) {\n this.currentIndex.update((i) => i - 1)\n this.isFlipped.set(false)\n this.showHint.set(false)\n this.lastRatingFeedback.set(null)\n }\n }\n\n handleNext(): void {\n if (this.currentIndex() < this.totalCards() - 1) {\n this.currentIndex.update((i) => i + 1)\n this.isFlipped.set(false)\n this.showHint.set(false)\n this.lastRatingFeedback.set(null)\n }\n }\n\n handleShuffle(): void {\n const shuffled = [...this.deck()]\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1))\n ;[shuffled[i], shuffled[j]] = [shuffled[j]!, shuffled[i]!]\n }\n this.deck.set(shuffled)\n this.currentIndex.set(0)\n this.isFlipped.set(false)\n this.showHint.set(false)\n this.lastRatingFeedback.set('Deck shuffled')\n this.timers.push(\n setTimeout(() => {\n if (this.lastRatingFeedback() === 'Deck shuffled') this.lastRatingFeedback.set(null)\n }, 2000),\n )\n }\n\n handleRate(interval: RatingInterval, event?: Event): void {\n event?.stopPropagation()\n const card = this.currentCard()\n if (!card) return\n const scoreMap: Record = {\n again: { score: 25, label: 'Again (< 1 min)' },\n hard: { score: 50, label: 'Hard (12 hours)' },\n good: { score: 80, label: 'Good (2 days)' },\n easy: { score: 100, label: 'Easy (4 days)' },\n }\n const { score, label } = scoreMap[interval]\n this.cardScores.update((prev) => ({ ...prev, [card.id]: score }))\n this.lastRatingFeedback.set(`Rated: ${label}`)\n this.timers.push(\n setTimeout(() => {\n if (this.currentIndex() < this.totalCards() - 1) this.handleNext()\n else {\n this.isFlipped.set(false)\n this.showHint.set(false)\n }\n }, 350),\n )\n }\n\n async copyCodeSnippet(event?: Event): Promise {\n event?.stopPropagation()\n const snippet = this.currentCard()?.codeSnippet\n if (!snippet) return\n try {\n await navigator.clipboard.writeText(snippet)\n this.copiedSnippet.set(true)\n this.timers.push(setTimeout(() => this.copiedSnippet.set(false), 2000))\n } catch {\n // Clipboard permission fallback\n }\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n const target = event.target as HTMLElement | null\n if (target && ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) return\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n this.handlePrev()\n } else if (event.key === 'ArrowRight') {\n event.preventDefault()\n this.handleNext()\n } else if (event.key === ' ' || event.code === 'Space') {\n event.preventDefault()\n this.toggleFlip()\n } else if (event.key.toLowerCase() === 'h') {\n event.preventDefault()\n this.toggleHint()\n } else if (this.isFlipped()) {\n if (event.key === '1') {\n event.preventDefault()\n this.handleRate('again')\n } else if (event.key === '2') {\n event.preventDefault()\n this.handleRate('hard')\n } else if (event.key === '3') {\n event.preventDefault()\n this.handleRate('good')\n } else if (event.key === '4') {\n event.preventDefault()\n this.handleRate('easy')\n }\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/flashcard-study-deck/flashcard-study-deck.component.ts" }, { "path": "packages/registry-angular/blocks/flashcard-study-deck/index.ts", "content": "export { UiFlashcardStudyDeckComponent, type Flashcard, type RatingInterval } from './flashcard-study-deck.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/flashcard-study-deck/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "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/progress.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Anki and Quizlet style spaced-repetition flashcard study deck with smooth 3D flip card interaction, WCAG 2.2 accessibility curriculum, hint drawer, mastery percentage tracking, keyboard shortcuts, and SM-2 interval rating buttons.", "categories": [ "education", "app" ] }