tiktok-comments 0.1.0

package/README.md

@@ -0,0 +1,91 @@
+# tiktok-comments
+
+TikTok-style comment section UI packaged as a React library with isolated Tailwind CSS (`tcm:` prefix) for safe use in host apps.
+
+## Install
+
+```bash
+npm install tiktok-comments
+```
+
+## Usage (React SPA)
+
+```tsx
+import { useState, useCallback } from "react";
+import { CommentSection } from "tiktok-comments";
+import type { Attachment, Comment } from "tiktok-comments";
+import "tiktok-comments/styles.css";
+
+export function VideoComments() {
+  const [comments, setComments] = useState<Comment[]>([]);
+
+  const handleSubmit = useCallback((text: string, attachment?: Attachment, replyTo?: string) => {
+    // persist to your API, then update state
+  }, []);
+
+  return (
+    <CommentSection
+      comments={comments}
+      currentUser={{ name: "You", avatar: "/avatar.png" }}
+      onSubmit={handleSubmit}
+      onLike={(id) => { /* ... */ }}
+      onLikeReply={(commentId, replyId) => { /* ... */ }}
+      theme="dark"
+    />
+  );
+}
+```
+
+## Usage (Next.js App Router)
+
+Import the CSS once in your root layout:
+
+```tsx
+import "tiktok-comments/styles.css";
+```
+
+Use the component in a client page or client component:
+
+```tsx
+"use client";
+
+import { CommentSection } from "tiktok-comments";
+
+export default function CommentsPage() {
+  return <CommentSection comments={[]} onSubmit={() => {}} onLike={() => {}} onLikeReply={() => {}} />;
+}
+```
+
+## API
+
+`CommentSection` is a controlled component. You own comment state and wire it to your backend.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `comments` | `Comment[]` | Comment list to render |
+| `currentUser` | `{ name, avatar }` | Shown in the input bar |
+| `onSubmit` | `(text, attachment?, replyTo?) => void` | New comment submitted |
+| `onLike` | `(commentId) => void` | Top-level comment liked |
+| `onLikeReply` | `(commentId, replyId) => void` | Reply liked |
+| `onReply` | `(commentId, username) => void` | Optional reply intent callback |
+| `theme` | `"dark" \| "light"` | Default `"dark"` |
+| `className` | `string` | Extra classes on root |
+
+Exported types: `Comment`, `Reply`, `Attachment`, `CommentUser`, `EarnedBadge`, `SubscriptionTier`.
+
+## CSS isolation
+
+All Tailwind utilities use the `tcm:` prefix (e.g. `tcm:flex`, `tcm:hover:tcm:bg-muted`). Theme tokens are scoped under `.tcm-root`, so host app CSS variables are not overwritten.
+
+## Development
+
+```bash
+npm install
+npm run dev        # demo playground
+npm run check      # typecheck + lint
+npm run build      # library + CSS to dist/
+```
+
+## License
+
+MIT

package/dist/components/badge-drawer.d.ts

@@ -0,0 +1,7 @@
+import { EarnedBadge } from './comment-data';
+interface BadgeDrawerProps {
+    badge: EarnedBadge;
+    onClose: () => void;
+}
+export declare function BadgeDrawer({ badge, onClose }: BadgeDrawerProps): import("react").JSX.Element;
+export {};

package/dist/components/badge-icon.d.ts

@@ -0,0 +1,6 @@
+import { LucideProps } from 'lucide-react';
+interface BadgeIconProps extends LucideProps {
+    name: string;
+}
+export declare function BadgeIcon({ name, ...props }: BadgeIconProps): import("react").JSX.Element | null;
+export {};

package/dist/components/comment-data.d.ts

@@ -0,0 +1,43 @@
+export type SubscriptionTier = "pro" | "max";
+export interface CommentUser {
+    name: string;
+    avatar: string;
+}
+export interface EarnedBadge {
+    id: string;
+    lucideIcon: string;
+    color: string;
+    name: string;
+    description: string;
+    rarity: "common" | "rare" | "epic" | "legendary";
+}
+export declare const BADGE_CATALOG: EarnedBadge[];
+export interface Reply {
+    id: string;
+    name: string;
+    avatar: string;
+    text: string;
+    likes: number;
+    liked: boolean;
+    timestamp: string;
+    replyingTo?: string;
+    image?: string;
+    sticker?: string;
+    subscription?: SubscriptionTier;
+}
+export interface Comment {
+    id: string;
+    name: string;
+    avatar: string;
+    text: string;
+    likes: number;
+    liked: boolean;
+    timestamp: string;
+    pinned?: boolean;
+    replies: Reply[];
+    image?: string;
+    sticker?: string;
+    subscription?: SubscriptionTier;
+    badges?: string[];
+}
+export declare function formatLikes(count: number): string;

package/dist/components/comment-input-bar.d.ts

@@ -0,0 +1,13 @@
+import { CommentUser } from './comment-data';
+export interface Attachment {
+    type: "image" | "sticker";
+    url: string;
+}
+interface CommentInputBarProps {
+    replyingTo: string | null;
+    onCancelReply: () => void;
+    onSubmit: (text: string, attachment?: Attachment) => void;
+    currentUser?: CommentUser;
+}
+export declare function CommentInputBar({ replyingTo, onCancelReply, onSubmit, currentUser }: CommentInputBarProps): import("react").JSX.Element;
+export {};

package/dist/components/comment-item.d.ts

@@ -0,0 +1,9 @@
+import { Comment } from './comment-data';
+interface CommentItemProps {
+    comment: Comment;
+    onLike: (id: string) => void;
+    onLikeReply: (commentId: string, replyId: string) => void;
+    onReply: (name: string) => void;
+}
+export declare function CommentItem({ comment, onLike, onLikeReply, onReply }: CommentItemProps): import("react").JSX.Element;
+export {};

package/dist/components/comment-section.d.ts

@@ -0,0 +1,13 @@
+import { Comment, CommentUser } from './comment-data';
+import { Attachment } from './comment-input-bar';
+export interface CommentSectionProps {
+    comments: Comment[];
+    currentUser?: CommentUser;
+    onSubmit: (text: string, attachment?: Attachment, replyTo?: string) => void;
+    onLike: (commentId: string) => void;
+    onLikeReply: (commentId: string, replyId: string) => void;
+    onReply?: (commentId: string, username: string) => void;
+    className?: string;
+    theme?: "dark" | "light";
+}
+export declare function CommentSection({ comments, currentUser, onSubmit, onLike, onLikeReply, onReply, className, theme, }: CommentSectionProps): import("react").JSX.Element;

package/dist/components/lightbox.d.ts

@@ -0,0 +1,7 @@
+interface LightboxProps {
+    src: string;
+    alt?: string;
+    onClose: () => void;
+}
+export declare function Lightbox({ src, alt, onClose }: LightboxProps): import("react").JSX.Element;
+export {};

package/dist/components/mention-selector.d.ts

@@ -0,0 +1,6 @@
+interface MentionSelectorProps {
+    onSelect: (username: string) => void;
+    onClose: () => void;
+}
+export declare function MentionSelector({ onSelect, onClose }: MentionSelectorProps): import("react").JSX.Element;
+export {};

package/dist/components/profile-drawer.d.ts

@@ -0,0 +1,10 @@
+import { SubscriptionTier } from './comment-data';
+interface ProfileDrawerProps {
+    name: string;
+    avatar: string;
+    subscription?: SubscriptionTier;
+    badges?: string[];
+    onClose: () => void;
+}
+export declare function ProfileDrawer({ name, avatar, subscription, badges, onClose }: ProfileDrawerProps): import("react").JSX.Element;
+export {};

package/dist/components/reply-item.d.ts

@@ -0,0 +1,8 @@
+import { Reply } from './comment-data';
+interface ReplyListProps {
+    replies: Reply[];
+    onLikeReply: (replyId: string) => void;
+    onReply: (username: string) => void;
+}
+export declare function ReplyList({ replies, onLikeReply, onReply }: ReplyListProps): import("react").JSX.Element | null;
+export {};

package/dist/components/sticker-drawer.d.ts

@@ -0,0 +1,6 @@
+interface StickerDrawerProps {
+    src: string;
+    onClose: () => void;
+}
+export declare function StickerDrawer({ src, onClose }: StickerDrawerProps): import("react").JSX.Element;
+export {};

package/dist/components/sticker-selector.d.ts

@@ -0,0 +1,6 @@
+interface StickerSelectorProps {
+    onSelect: (stickerUrl: string) => void;
+    onClose: () => void;
+}
+export declare function StickerSelector({ onSelect, onClose }: StickerSelectorProps): import("react").JSX.Element;
+export {};