{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "comment-06", "title": "Comment with attachments", "description": "Files staged as chips while they upload, refused with a reason when too large, and shown as tiles once posted", "dependencies": [ "date-fns", "motion" ], "registryDependencies": [ "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/sample-scenes.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-06.tsx", "content": "'use client';\n\nimport { AnimatePresence, motion, type MotionProps } from 'motion/react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport {\n FileSpreadsheetIcon,\n FileTextIcon,\n ImageIcon,\n LoaderCircleIcon,\n PaperclipIcon,\n XIcon,\n type Icon,\n} from '@/registry/ndeko/lib/icons';\nimport { Button } from '@/registry/ndeko/ui/button';\nimport { Textarea } from '@/registry/ndeko/ui/textarea';\n\nimport { draftCommentOf, type CommentItem } from './_parts/comment-model';\nimport { CommentBlock, CommentText } from './_parts/comment-parts';\nimport { ENTER, EXIT, heightPresenceOf, Swap } from './_parts/motion-parts';\n\ntype FileKind = 'image' | 'sheet' | 'document';\n\ntype AttachedFile = {\n id: string;\n name: string;\n size: number;\n kind: FileKind;\n previewSrc?: string;\n};\n\ntype StagedFile = AttachedFile & {\n isReady: boolean;\n};\n\ntype AttachedComment = CommentItem & {\n files: AttachedFile[];\n};\n\nconst MAX_FILE_BYTES = 10 * 1024 * 1024;\n\nconst UPLOAD_MS = 900;\n\nconst ACCEPTED_TYPES = 'image/*,.pdf,.csv,.txt';\n\nconst KIND_ICON: Record = {\n image: ImageIcon,\n sheet: FileSpreadsheetIcon,\n document: FileTextIcon,\n};\n\nconst FIRST_COMMENTS: AttachedComment[] = [\n {\n id: 'a1',\n authorId: 'mei',\n at: '2026-11-05T09:52:00',\n body: 'Here is the sample finance sent, and how it looks once opened in the ledger.',\n files: [\n {\n id: 'f1',\n name: 'ledger-preview.svg',\n size: 412_000,\n kind: 'image',\n previewSrc: '/images/scenes/scene-03.svg',\n },\n {\n id: 'f2',\n name: 'invoices-october.csv',\n size: 18_400,\n kind: 'sheet',\n },\n ],\n },\n];\n\nconst CHIP_MOTION: MotionProps = {\n initial: { opacity: 0, scale: 0.95 },\n animate: { opacity: 1, scale: 1 },\n exit: { opacity: 0, scale: 0.95, transition: EXIT },\n transition: ENTER,\n};\n\nconst CHIP_FADE: MotionProps = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0, transition: EXIT },\n transition: ENTER,\n};\n\nfunction chipMotionOf(shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return CHIP_FADE;\n }\n return CHIP_MOTION;\n}\n\nfunction layoutOf(shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return false;\n }\n return 'position';\n}\n\nfunction sizeLabelOf(bytes: number) {\n if (bytes < 1024) {\n return `${bytes} B`;\n }\n const kilobytes = bytes / 1024;\n if (kilobytes < 1024) {\n return `${Math.round(kilobytes)} KB`;\n }\n const megabytes = kilobytes / 1024;\n return `${megabytes.toFixed(1)} MB`;\n}\n\nfunction kindOf(file: File): FileKind {\n if (file.type.startsWith('image/')) {\n return 'image';\n }\n const isSheet = file.name.toLowerCase().endsWith('.csv');\n if (isSheet) {\n return 'sheet';\n }\n return 'document';\n}\n\nfunction isAccepted(file: File) {\n const name = file.name.toLowerCase();\n const isImage = file.type.startsWith('image/');\n const isPdf = name.endsWith('.pdf');\n const isCsv = name.endsWith('.csv');\n const isText = name.endsWith('.txt');\n return [isImage, isPdf, isCsv, isText].some(Boolean);\n}\n\nfunction refusalOf(file: File) {\n if (!isAccepted(file)) {\n return `“${file.name}” can’t be attached. Pick an image, a PDF, a CSV or a text file`;\n }\n if (file.size > MAX_FILE_BYTES) {\n return `“${file.name}” is over 10 MB. Attach a smaller file`;\n }\n return null;\n}\n\nlet stagedCount = 0;\n\nfunction stagedFileOf(file: File): StagedFile {\n stagedCount += 1;\n return {\n id: `staged-${stagedCount}`,\n name: file.name,\n size: file.size,\n kind: kindOf(file),\n isReady: false,\n };\n}\n\nfunction withReady(files: StagedFile[], fileId: string) {\n return files.map((file) => {\n if (file.id !== fileId) {\n return file;\n }\n return { ...file, isReady: true };\n });\n}\n\nfunction stateKeyOf(isReady: boolean) {\n if (isReady) {\n return 'ready';\n }\n return 'uploading';\n}\n\nfunction FileTile({ file }: { file: AttachedFile }) {\n const Glyph = KIND_ICON[file.kind];\n return (\n
  • \n {file.previewSrc && (\n // eslint-disable-next-line @next/next/no-img-element -- registry items land in any React app, where next/image may not exist\n \n )}\n \n \n \n \n {file.name}\n \n \n {sizeLabelOf(file.size)}\n \n \n \n
    • \n );\n}\n\nfunction PostedComment({ comment }: { comment: AttachedComment }) {\n const shouldReduceMotion = usePrefersReducedMotion();\n const hasFiles = comment.files.length > 0;\n return (\n \n \n \n {hasFiles && (\n
      \n {comment.files.map((file) => (\n \n ))}\n
    \n )}\n     \n \n );\n}\n\nfunction StagedChip({\n file,\n onRemove,\n}: {\n file: StagedFile;\n onRemove: () => void;\n}) {\n const shouldReduceMotion = usePrefersReducedMotion();\n const Glyph = KIND_ICON[file.kind];\n\n return (\n \n \n {!file.isReady && (\n \n )}\n {file.isReady && }\n \n {file.name}\n \n {sizeLabelOf(file.size)}\n \n \n \n \n \n );\n}\n\nexport default function Comment06() {\n const shouldReduceMotion = usePrefersReducedMotion();\n const [comments, setComments] = useState(FIRST_COMMENTS);\n const [body, setBody] = useState('');\n const [staged, setStaged] = useState([]);\n const [refusal, setRefusal] = useState(null);\n const inputRef = useRef(null);\n const timers = useRef(new Set>());\n const trimmed = body.trim();\n const hasStaged = staged.length > 0;\n const isUploading = staged.some((file) => !file.isReady);\n const hasContent = trimmed.length > 0 || hasStaged;\n const canSend = hasContent && !isUploading;\n\n useEffect(() => {\n const pending = timers.current;\n return () => {\n pending.forEach((timer) => clearTimeout(timer));\n };\n }, []);\n\n function finishUpload(fileId: string) {\n const timer = setTimeout(() => {\n timers.current.delete(timer);\n setStaged((current) => withReady(current, fileId));\n }, UPLOAD_MS);\n timers.current.add(timer);\n }\n\n function stage(event: React.ChangeEvent) {\n const picked = Array.from(event.target.files ?? []);\n event.target.value = '';\n const refusals = picked.map(refusalOf);\n const firstRefusal = refusals.find((message) => message !== null);\n setRefusal(firstRefusal ?? null);\n const accepted = picked.filter((file) => refusalOf(file) === null);\n const added = accepted.map(stagedFileOf);\n setStaged((current) => [...current, ...added]);\n added.forEach((file) => finishUpload(file.id));\n }\n\n function unstage(fileId: string) {\n setStaged((current) => current.filter((file) => file.id !== fileId));\n }\n\n function send(event: React.FormEvent) {\n event.preventDefault();\n if (!canSend) {\n return;\n }\n const files: AttachedFile[] = staged.map((file) => ({\n id: file.id,\n name: file.name,\n size: file.size,\n kind: file.kind,\n }));\n const comment: AttachedComment = { ...draftCommentOf(trimmed), files };\n setComments((current) => [...current, comment]);\n setBody('');\n setStaged([]);\n setRefusal(null);\n }\n\n return (\n
    \n
      \n \n {comments.map((comment) => (\n \n ))}\n \n
    \n \n setBody(event.target.value)}\n rows={2}\n aria-label='Comment'\n placeholder='Add a comment or attach a file'\n className='min-h-14 border-0 bg-transparent shadow-none ring-0 focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent'\n />\n
      \n \n {staged.map((file) => (\n unstage(file.id)}\n />\n ))}\n \n
    \n
    \n
    \n \n \n {refusal && (\n \n {refusal}\n \n )}\n \n
    \n );\n}\n", "type": "registry:component", "target": "components/comment/comment-06.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" }