{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "comment-01", "title": "Thread with replies", "description": "Comments with replies one level deep, a reply field that opens in place and replies that fold under their count", "dependencies": [ "date-fns", "motion" ], "registryDependencies": [ "https://ui.ndekocode.dev/r/animated-size.json", "https://ui.ndekocode.dev/r/avatar.json", "https://ui.ndekocode.dev/r/button.json", "https://ui.ndekocode.dev/r/icons.json", "https://ui.ndekocode.dev/r/textarea.json", "https://ui.ndekocode.dev/r/theme.json", "https://ui.ndekocode.dev/r/use-prefers-reduced-motion.json", "https://ui.ndekocode.dev/r/utils.json" ], "files": [ { "path": "registry/ndeko/components/comment/comment-01.tsx", "content": "'use client';\n\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useId, useState } from 'react';\n\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport { ChevronDownIcon } from '@/registry/ndeko/lib/icons';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { AnimatedSize } from '@/registry/ndeko/ui/animated-size';\n\nimport { CommentField } from './_parts/comment-field';\nimport {\n draftCommentOf,\n replyWordOf,\n type CommentItem,\n} from './_parts/comment-model';\nimport { CommentBlock, TEXT_ACTION } from './_parts/comment-parts';\nimport { heightPresenceOf, Swap } from './_parts/motion-parts';\n\ntype Thread = {\n comment: CommentItem;\n replies: CommentItem[];\n};\n\nconst THREADS: Thread[] = [\n {\n comment: {\n id: 'c1',\n authorId: 'sana',\n at: '2026-11-05T08:40:00',\n body: 'Should the export include voided invoices? Finance filters them out by hand today.',\n },\n replies: [\n {\n id: 'c2',\n authorId: 'leo',\n at: '2026-11-05T09:05:00',\n body: 'I would keep them with a Status column, so the totals still match the ledger.',\n },\n {\n id: 'c3',\n authorId: 'tomas',\n at: '2026-11-05T09:22:00',\n body: 'Agreed. @Sana Iqbal can you confirm with finance before Léo adds the column?',\n },\n ],\n },\n {\n comment: {\n id: 'c4',\n authorId: 'mei',\n at: '2026-11-05T10:10:00',\n body: 'The download button can sit next to the date filter, since it reads the same range.',\n },\n replies: [],\n },\n];\n\nfunction foldLabelOf(count: number, showsReplies: boolean) {\n if (showsReplies) {\n return `Hide ${replyWordOf(count)}`;\n }\n return `Show ${count} ${replyWordOf(count)}`;\n}\n\nfunction ReplyRow({ reply }: { reply: CommentItem }) {\n const shouldReduceMotion = usePrefersReducedMotion();\n return (\n \n \n \n );\n}\n\nfunction ThreadView({ thread }: { thread: Thread }) {\n const shouldReduceMotion = usePrefersReducedMotion();\n const presence = heightPresenceOf(shouldReduceMotion);\n const [replies, setReplies] = useState(thread.replies);\n const [showsReplies, setShowsReplies] = useState(true);\n const [isReplying, setIsReplying] = useState(false);\n const repliesId = useId();\n const replyCount = replies.length;\n const hasReplies = replyCount > 0;\n const foldLabel = foldLabelOf(replyCount, showsReplies);\n\n function postReply(body: string) {\n setReplies((current) => [...current, draftCommentOf(body)]);\n setShowsReplies(true);\n setIsReplying(false);\n }\n\n return (\n
  • \n \n
    \n setIsReplying(true)}\n className={TEXT_ACTION}\n >\n Reply\n \n {hasReplies && (\n setShowsReplies((current) => !current)}\n className={TEXT_ACTION}\n >\n \n \n {foldLabel}\n \n \n )}\n
    \n
    \n \n {showsReplies && (\n \n \n {replies.map((reply) => (\n \n ))}\n \n \n )}\n \n \n {isReplying && (\n \n setIsReplying(false)}\n className='pt-3'\n />\n \n )}\n \n
    \n
    • \n );\n}\n\nexport default function Comment01() {\n return (\n
    \n

    Comments

    \n
      \n {THREADS.map((thread) => (\n \n ))}\n
    \n
    \n );\n}\n", "type": "registry:component", "target": "components/comment/comment-01.tsx" }, { "path": "registry/ndeko/components/comment/_parts/comment-field.tsx", "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { Button } from '@/registry/ndeko/ui/button';\nimport { Textarea } from '@/registry/ndeko/ui/textarea';\n\nimport { PersonAvatar } from './comment-parts';\nimport { currentUser } from './people';\n\ntype CommentFieldProps = {\n placeholder: string;\n submitLabel?: string;\n onSubmit: (body: string) => void;\n onCancel?: () => void;\n autoFocus?: boolean;\n showsAvatar?: boolean;\n className?: string;\n};\n\nfunction isSendKey(event: React.KeyboardEvent) {\n const isCommand = event.metaKey || event.ctrlKey;\n return isCommand && event.key === 'Enter';\n}\n\n/** A comment field that grows with its text; Cmd or Ctrl and Enter sends, Escape leaves. */\nexport function CommentField({\n placeholder,\n submitLabel = 'Comment',\n onSubmit,\n onCancel,\n autoFocus = false,\n showsAvatar = true,\n className,\n}: CommentFieldProps) {\n const [body, setBody] = useState('');\n const me = currentUser();\n const trimmed = body.trim();\n const canSend = trimmed.length > 0;\n\n function submit() {\n if (!canSend) {\n return;\n }\n onSubmit(trimmed);\n setBody('');\n }\n\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault();\n submit();\n }\n\n function handleKeyDown(event: React.KeyboardEvent) {\n if (isSendKey(event)) {\n event.preventDefault();\n submit();\n return;\n }\n if (event.key !== 'Escape') {\n return;\n }\n event.stopPropagation();\n if (onCancel) {\n onCancel();\n return;\n }\n event.currentTarget.blur();\n }\n\n return (\n \n {showsAvatar && }\n
    \n setBody(event.target.value)}\n onKeyDown={handleKeyDown}\n rows={1}\n aria-label={placeholder}\n placeholder={placeholder}\n className='min-h-9 py-2 pe-24'\n />\n \n {submitLabel}\n \n
    \n \n );\n}\n", "type": "registry:component", "target": "components/comment/_parts/comment-field.tsx" }, { "path": "registry/ndeko/components/comment/_parts/comment-model.ts", "content": "import { CURRENT_USER_ID, PEOPLE } from './people';\nimport { NOW } from './time';\n\nexport type CommentItem = {\n id: string;\n authorId: string;\n at: string;\n body: string;\n editedAt?: string;\n};\n\nexport type Segment = {\n text: string;\n isMention: boolean;\n};\n\nexport const MENTION_TRIGGER = '@';\n\nexport const MENTION_NAMES = PEOPLE.map((person) => person.name);\n\nfunction mentionTokensOf(names: string[]) {\n const tokens = names.map((name) => `${MENTION_TRIGGER}${name}`);\n return tokens.sort((first, second) => second.length - first.length);\n}\n\nfunction pushPlain(segments: Segment[], text: string) {\n if (text.length === 0) {\n return;\n }\n segments.push({ text, isMention: false });\n}\n\n/** Splits a comment into plain text and mentions of known people, written \"@First Last\". */\nexport function segmentsOf(text: string, names: string[] = MENTION_NAMES) {\n const tokens = mentionTokensOf(names);\n const segments: Segment[] = [];\n let plain = '';\n let index = 0;\n while (index < text.length) {\n const token = tokens.find((candidate) => text.startsWith(candidate, index));\n if (token) {\n pushPlain(segments, plain);\n segments.push({ text: token, isMention: true });\n plain = '';\n index += token.length;\n continue;\n }\n plain += text[index];\n index += 1;\n }\n pushPlain(segments, plain);\n return segments;\n}\n\nlet draftCount = 0;\n\n/** A comment the signed-in person just wrote, stamped with the previews' fixed now. */\nexport function draftCommentOf(body: string): CommentItem {\n draftCount += 1;\n return {\n id: `draft-${draftCount}`,\n authorId: CURRENT_USER_ID,\n at: NOW,\n body,\n };\n}\n\nexport function commentWordOf(count: number) {\n if (count === 1) {\n return 'comment';\n }\n return 'comments';\n}\n\nexport function replyWordOf(count: number) {\n if (count === 1) {\n return 'reply';\n }\n return 'replies';\n}\n", "type": "registry:component", "target": "components/comment/_parts/comment-model.ts" }, { "path": "registry/ndeko/components/comment/_parts/comment-parts.tsx", "content": "import { cn } from '@/registry/ndeko/lib/utils';\nimport { Avatar } from '@/registry/ndeko/ui/avatar';\n\nimport { segmentsOf, type CommentItem } from './comment-model';\nimport { actorNameOf, personOf, type Person } from './people';\nimport { relativeTimeOf } from './time';\n\nexport const MENTION_CHIP =\n 'rounded-[4px] bg-primary/10 px-0.5 font-medium text-primary-ink dark:bg-primary/20';\n\nexport const TEXT_ACTION =\n 'text-muted-foreground hover:text-foreground focus-visible:ring-ring/25 inline-flex h-6 cursor-pointer items-center gap-1 rounded-md text-xs font-medium transition-colors outline-none focus-visible:ring-[3px]';\n\nexport function PersonAvatar({\n person,\n className,\n}: {\n person: Person;\n className?: string;\n}) {\n return (\n \n );\n}\n\n/** A comment's words, with each mention of a known person drawn as a tinted chip. */\nexport function CommentText({\n body,\n className,\n}: {\n body: string;\n className?: string;\n}) {\n const segments = segmentsOf(body);\n return (\n \n {segments.map((segment, index) => {\n const key = `${index}-${segment.text}`;\n if (segment.isMention) {\n return (\n \n {segment.text}\n \n );\n }\n return {segment.text};\n })}\n

    \n );\n}\n\nexport function CommentMeta({\n comment,\n children,\n}: {\n comment: CommentItem;\n children?: React.ReactNode;\n}) {\n return (\n

    \n \n {actorNameOf(comment.authorId)}\n \n \n \n {relativeTimeOf(comment.at)}\n \n {children}\n

    \n );\n}\n\ntype CommentBlockProps = {\n comment: CommentItem;\n avatarClassName?: string;\n meta?: React.ReactNode;\n actions?: React.ReactNode;\n children?: React.ReactNode;\n className?: string;\n};\n\n/** Avatar, author and time, then the words aligned under the name. */\nexport function CommentBlock({\n comment,\n avatarClassName,\n meta,\n actions,\n children,\n className,\n}: CommentBlockProps) {\n return (\n
    \n \n
    \n
    \n {meta}\n {actions}\n
    \n {children}\n {!children && }\n
    \n
    \n );\n}\n", "type": "registry:component", "target": "components/comment/_parts/comment-parts.tsx" }, { "path": "registry/ndeko/components/comment/_parts/motion-parts.tsx", "content": "'use client';\n\nimport {\n AnimatePresence,\n motion,\n type MotionProps,\n type Transition,\n type Variants,\n} from 'motion/react';\nimport { useState } from 'react';\n\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport { cn } from '@/registry/ndeko/lib/utils';\n\nexport const EASE_OUT_STRONG: [number, number, number, number] = [\n 0.23, 1, 0.32, 1,\n];\n\nexport const ENTER: Transition = { duration: 0.2, ease: EASE_OUT_STRONG };\n\nexport const EXIT: Transition = { duration: 0.15, ease: EASE_OUT_STRONG };\n\nexport type PresenceProps = Pick<\n MotionProps,\n 'initial' | 'animate' | 'exit' | 'transition'\n>;\n\nconst HEIGHT_PRESENCE: PresenceProps = {\n initial: { height: 0, opacity: 0 },\n animate: { height: 'auto', opacity: 1 },\n exit: { height: 0, opacity: 0, transition: EXIT },\n transition: ENTER,\n};\n\nconst FADE_PRESENCE: PresenceProps = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0, transition: EXIT },\n transition: ENTER,\n};\n\n/** Rows that arrive or leave a list: their height opens and closes so the rows after them slide. */\nexport function heightPresenceOf(shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return FADE_PRESENCE;\n }\n return HEIGHT_PRESENCE;\n}\n\nconst SWAP_TRANSITION: Transition = { duration: 0.15, ease: EASE_OUT_STRONG };\n\nconst SWAP_VARIANTS: Variants = {\n hidden: { opacity: 0, scale: 0.6, filter: 'blur(2px)' },\n shown: { opacity: 1, scale: 1, filter: 'blur(0px)' },\n};\n\nconst FADE_VARIANTS: Variants = {\n hidden: { opacity: 0 },\n shown: { opacity: 1 },\n};\n\nfunction swapVariantsOf(shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return FADE_VARIANTS;\n }\n return SWAP_VARIANTS;\n}\n\ntype SwapProps = {\n swapKey: string;\n children: React.ReactNode;\n className?: string;\n};\n\n/** An icon or a short label that becomes another one in place. */\nexport function Swap({ swapKey, children, className }: SwapProps) {\n const shouldReduceMotion = usePrefersReducedMotion();\n\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nconst COUNT_SLIDE = 8;\n\nconst COUNT_TRANSITION: Transition = { duration: 0.18, ease: EASE_OUT_STRONG };\n\nconst COUNT_VARIANTS: Variants = {\n enter: (offset: number) => ({ y: offset, opacity: 0 }),\n center: { y: 0, opacity: 1 },\n leave: (offset: number) => ({ y: -offset, opacity: 0 }),\n};\n\nfunction directionOf(previous: number, next: number) {\n if (next < previous) {\n return -1;\n }\n return 1;\n}\n\nfunction offsetOf(direction: number, shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return 0;\n }\n return direction * COUNT_SLIDE;\n}\n\ntype RollingCountProps = {\n value: number;\n /** Writes the value, such as a duration; the digits still roll on the number. */\n format?: (value: number) => string;\n className?: string;\n};\n\nfunction plainNumber(value: number) {\n return String(value);\n}\n\n/** A figure the person just changed: the new digits slide in from the side of the change. */\nexport function RollingCount({\n value,\n format = plainNumber,\n className,\n}: RollingCountProps) {\n const shouldReduceMotion = usePrefersReducedMotion();\n const [previous, setPrevious] = useState(value);\n const [direction, setDirection] = useState(1);\n\n if (previous !== value) {\n setDirection(directionOf(previous, value));\n setPrevious(value);\n }\n\n const offset = offsetOf(direction, shouldReduceMotion);\n\n return (\n \n \n \n {format(value)}\n \n \n \n );\n}\n", "type": "registry:component", "target": "components/comment/_parts/motion-parts.tsx" }, { "path": "registry/ndeko/components/comment/_parts/people.ts", "content": "export type Person = {\n id: string;\n name: string;\n firstName: string;\n};\n\nexport const CURRENT_USER_ID = 'amara';\n\nexport const PEOPLE: Person[] = [\n {\n id: 'amara',\n name: 'Amara Okafor',\n firstName: 'Amara',\n },\n {\n id: 'leo',\n name: 'Léo Martin',\n firstName: 'Léo',\n },\n {\n id: 'sana',\n name: 'Sana Iqbal',\n firstName: 'Sana',\n },\n {\n id: 'tomas',\n name: 'Tomás Rivera',\n firstName: 'Tomás',\n },\n {\n id: 'mei',\n name: 'Mei Lin',\n firstName: 'Mei',\n },\n {\n id: 'jonah',\n name: 'Jonah Brandt',\n firstName: 'Jonah',\n },\n];\n\nexport function personOf(id: string) {\n const found = PEOPLE.find((person) => person.id === id);\n if (found) {\n return found;\n }\n return PEOPLE[0];\n}\n\nexport function isCurrentUser(id: string) {\n return id === CURRENT_USER_ID;\n}\n\nexport function actorNameOf(id: string) {\n if (isCurrentUser(id)) {\n return 'You';\n }\n return personOf(id).name;\n}\n\nexport function currentUser() {\n return personOf(CURRENT_USER_ID);\n}\n", "type": "registry:component", "target": "components/comment/_parts/people.ts" }, { "path": "registry/ndeko/components/comment/_parts/time.ts", "content": "import {\n differenceInCalendarDays,\n differenceInMinutes,\n format,\n parseISO,\n} from 'date-fns';\n\n/** The previews read every time against one fixed moment, so the server and the browser print the same labels. */\nexport const NOW = '2026-11-05T11:00:00';\n\nconst MINUTES_PER_HOUR = 60;\n\nfunction daysBeforeNow(iso: string) {\n return differenceInCalendarDays(parseISO(NOW), parseISO(iso));\n}\n\nexport function relativeTimeOf(iso: string) {\n const minutes = differenceInMinutes(parseISO(NOW), parseISO(iso));\n if (minutes < 1) {\n return 'Just now';\n }\n if (minutes < MINUTES_PER_HOUR) {\n return `${minutes}m ago`;\n }\n const days = daysBeforeNow(iso);\n if (days === 0) {\n const hours = Math.floor(minutes / MINUTES_PER_HOUR);\n return `${hours}h ago`;\n }\n if (days === 1) {\n return 'Yesterday';\n }\n return format(parseISO(iso), 'MMM d');\n}\n\nexport function exactTimeOf(iso: string) {\n return format(parseISO(iso), \"EEE, MMM d 'at' HH:mm\");\n}\n\nexport function clockOf(iso: string) {\n return format(parseISO(iso), 'HH:mm');\n}\n\nexport function dayKeyOf(iso: string) {\n return iso.slice(0, 10);\n}\n\nexport function dayLabelOf(iso: string) {\n const days = daysBeforeNow(iso);\n if (days === 0) {\n return 'Today';\n }\n if (days === 1) {\n return 'Yesterday';\n }\n return format(parseISO(iso), 'EEEE, MMM d');\n}\n\nexport function shortDateOf(iso: string) {\n return format(parseISO(iso), 'MMM d');\n}\n\nexport function durationLabelOf(minutes: number) {\n const hours = Math.floor(minutes / MINUTES_PER_HOUR);\n const rest = minutes % MINUTES_PER_HOUR;\n if (hours === 0) {\n return `${rest}m`;\n }\n if (rest === 0) {\n return `${hours}h`;\n }\n return `${hours}h ${rest}m`;\n}\n\nexport function countLabel(count: number, singular: string, plural: string) {\n if (count === 1) {\n return `${count} ${singular}`;\n }\n return `${count} ${plural}`;\n}\n", "type": "registry:component", "target": "components/comment/_parts/time.ts" } ], "categories": [ "components", "comment" ], "type": "registry:component" }