@wtfalch/threads 0.1.0

package/dist/react/Roadmap.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThreadList } from './ThreadList.js';
+import { STATUS_LABEL, STATUS_ORDER } from './format.js';
+/** Every feedback thread, grouped by where it stands. Empty groups are skipped. */
+export function Roadmap({ groups, basePath, statuses = STATUS_ORDER }) {
+    const shown = statuses.filter((s) => groups[s].length > 0);
+    if (shown.length === 0) {
+        return _jsx("p", { className: "threads-note", children: "Nothing on the roadmap yet." });
+    }
+    return (_jsx("div", { className: "threads-stack", children: shown.map((s) => (_jsxs("section", { className: "threads-stack-tight", "aria-labelledby": `roadmap-${s}`, children: [_jsx("h2", { id: `roadmap-${s}`, className: "threads-section-title", children: STATUS_LABEL[s] }), _jsx(ThreadList, { items: groups[s], basePath: basePath, votes: true, label: STATUS_LABEL[s] })] }, s))) }));
+}

package/dist/react/ThreadList.d.ts

@@ -0,0 +1,21 @@
+import type { Category } from '../schema.js';
+import type { ThreadRow } from '../threads.js';
+export interface ThreadListProps {
+    items: ThreadRow[];
+    /** Where the forum lives, `/forum`. Links are built from it. */
+    basePath: string;
+    /** When the list mixes categories, name each thread's. */
+    categories?: Pick<Category, 'id' | 'name'>[];
+    /** For a feedback list: show votes in the trail. */
+    votes?: boolean;
+    emptyText?: string;
+    /** Something to do when the list is empty: a "start one" button. */
+    emptyAction?: React.ReactNode;
+    label?: string;
+}
+/**
+ * Threads as rows: the title truncates, the pills never do, the hint says
+ * who and how much, the trail lines up down the list. `Rows` owns the
+ * dividers and the empty case.
+ */
+export declare function ThreadList({ items, basePath, categories, votes, emptyText, emptyAction, label, }: ThreadListProps): import("react").JSX.Element;

package/dist/react/ThreadList.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Empty, Pill, Row, Rows } from '@wtfalch/design';
+import { STATUS_LABEL, STATUS_TONE, ago, plural, threadHref } from './format.js';
+/**
+ * Threads as rows: the title truncates, the pills never do, the hint says
+ * who and how much, the trail lines up down the list. `Rows` owns the
+ * dividers and the empty case.
+ */
+export function ThreadList({ items, basePath, categories, votes = false, emptyText = 'No threads yet.', emptyAction, label = 'Threads', }) {
+    const byId = new Map((categories ?? []).map((c) => [String(c.id), c.name]));
+    return (_jsx(Rows, { label: label, empty: _jsx(Empty, { action: emptyAction, children: emptyText }), children: items.map((t) => (_jsx(Row, { name: _jsx("a", { className: "threads-link", href: threadHref(basePath, t), children: t.title ?? 'Untitled' }), pills: _jsxs(_Fragment, { children: [t.pinned && _jsx(Pill, { inRow: true, children: "Pinned" }), t.locked && _jsx(Pill, { inRow: true, children: "Locked" }), t.status && (_jsx(Pill, { inRow: true, tone: STATUS_TONE[t.status], children: STATUS_LABEL[t.status] })), t.duplicateOf !== null && _jsx(Pill, { inRow: true, children: "Duplicate" })] }), hint: _jsxs(_Fragment, { children: [t.authorName ?? 'Someone', " \u00B7 ", plural(t.commentCount, 'comment'), " \u00B7", ' ', ago(t.lastActivityAt), byId.size > 0 && t.subjectKind === 'category' && byId.get(t.subjectId)
+                        ? ` · ${byId.get(t.subjectId)}`
+                        : null] }), trail: votes ? (_jsxs(Pill, { quiet: true, children: ['▲', " ", t.voteCount] })) : undefined }, t.id))) }));
+}

package/dist/react/ThreadView.d.ts

@@ -0,0 +1,26 @@
+import type { Who } from '../gates.js';
+import type { ThreadStatus } from '../schema.js';
+import type { ThreadRow } from '../threads.js';
+import { type Outcome } from './format.js';
+export type ModerateAction = 'pin' | 'unpin' | 'lock' | 'unlock' | 'hide' | 'unhide';
+export interface ThreadViewProps {
+    thread: ThreadRow;
+    who: Who | null;
+    /** Where the forum lives, for the link back and the duplicate's redirect. */
+    basePath: string;
+    /** Whether this person already voted; only read when the thread has a status. */
+    voted?: boolean;
+    canWrite: boolean;
+    canModerate?: boolean;
+    onVote?: (on: boolean) => Promise<Outcome>;
+    onModerate?: (action: ModerateAction) => Promise<Outcome>;
+    onStatus?: (status: ThreadStatus) => Promise<Outcome>;
+    /** The comment section, rendered under the post. */
+    children?: React.ReactNode;
+}
+/**
+ * One thread: the post, its state, what a reader may do to it, and the
+ * discussion underneath. A feedback thread shows its status and a vote; a
+ * moderator sees a bar of the things a moderator does.
+ */
+export declare function ThreadView({ thread, who, basePath, voted, canWrite, canModerate, onVote, onModerate, onStatus, children, }: ThreadViewProps): import("react").JSX.Element;

package/dist/react/ThreadView.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Callout, Markdown, Pill, Select } from '@wtfalch/design';
+import { useState, useTransition } from 'react';
+import { STATUS_LABEL, STATUS_ORDER, STATUS_TONE, ago, plural, threadHref, } from './format.js';
+/**
+ * One thread: the post, its state, what a reader may do to it, and the
+ * discussion underneath. A feedback thread shows its status and a vote; a
+ * moderator sees a bar of the things a moderator does.
+ */
+export function ThreadView({ thread, who, basePath, voted = false, canWrite, canModerate = false, onVote, onModerate, onStatus, children, }) {
+    const [error, setError] = useState(null);
+    const [pending, start] = useTransition();
+    const run = (f) => start(async () => {
+        const r = await f();
+        setError(r?.error ?? null);
+    });
+    const feedback = thread.status !== null;
+    return (_jsxs("article", { className: "threads-stack", children: [_jsxs("header", { className: "threads-head", children: [_jsx("h1", { className: "threads-title", children: thread.title ?? 'Untitled' }), _jsxs("div", { className: "threads-meta", children: [thread.pinned && _jsx(Pill, { inRow: true, children: "Pinned" }), thread.locked && _jsx(Pill, { inRow: true, children: "Locked" }), thread.hidden && (_jsx(Pill, { inRow: true, tone: "warn", children: "Hidden" })), thread.status && (_jsx(Pill, { tone: STATUS_TONE[thread.status], children: STATUS_LABEL[thread.status] })), _jsxs("span", { children: [thread.authorName ?? 'Someone', " \u00B7 ", ago(thread.createdAt), " \u00B7", ' ', plural(thread.commentCount, 'comment')] })] }), thread.duplicateOf !== null && (_jsxs(Callout, { tone: "info", children: ["This was marked a duplicate.", ' ', _jsx("a", { href: threadHref(basePath, { id: thread.duplicateOf, slug: null }), children: "See the original." })] }))] }), thread.body && (_jsx("div", { className: "threads-body", children: _jsx(Markdown, { text: thread.body }) })), (feedback || canModerate) && (_jsxs("div", { className: "threads-bar", children: [feedback && (_jsxs("span", { className: "threads-vote", children: [_jsxs(Button, { size: "sm", kind: voted ? 'primary' : 'default', disabled: !canWrite || pending || !onVote || thread.duplicateOf !== null, busy: pending, onPress: () => onVote && run(() => onVote(!voted)), "aria-pressed": voted, children: ['▲', " ", thread.voteCount] }), !who && _jsx("span", { className: "threads-note", children: "Sign in to vote." })] })), _jsx("span", { className: "threads-bar-grow" }), canModerate && onModerate && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", kind: "ghost", disabled: pending, onPress: () => run(() => onModerate(thread.pinned ? 'unpin' : 'pin')), children: thread.pinned ? 'Unpin' : 'Pin' }), _jsx(Button, { size: "sm", kind: "ghost", disabled: pending, onPress: () => run(() => onModerate(thread.locked ? 'unlock' : 'lock')), children: thread.locked ? 'Unlock' : 'Lock' }), _jsx(Button, { size: "sm", kind: thread.hidden ? 'ghost' : 'danger', disabled: pending, onPress: () => run(() => onModerate(thread.hidden ? 'unhide' : 'hide')), children: thread.hidden ? 'Unhide' : 'Hide' })] })), canModerate && feedback && onStatus && (_jsx(Select, { size: "sm", "aria-label": "Status", value: thread.status ?? 'open', disabled: pending, onChange: (e) => run(() => onStatus(e.target.value)), children: STATUS_ORDER.map((s) => (_jsx("option", { value: s, children: STATUS_LABEL[s] }, s))) }))] })), error && _jsx(Callout, { tone: "bad", children: error }), children] }));
+}

package/dist/react/format.d.ts

@@ -0,0 +1,16 @@
+import type { ThreadStatus } from '../schema.js';
+/** What a Server Action answers: a sentence when it refused, nothing when it did not. */
+export type Outcome = {
+    error?: string;
+} | void;
+/** "3h ago", from a Date or the string a serialised Date became. */
+export declare function ago(when: Date | string, now?: Date): string;
+export declare const STATUS_LABEL: Record<ThreadStatus, string>;
+/** The tones `Pill`, `Callout` and `Toast` share; the plan's mapping. */
+export declare const STATUS_TONE: Record<ThreadStatus, 'info' | 'good' | 'warn' | 'bad'>;
+export declare const STATUS_ORDER: ThreadStatus[];
+export declare function threadHref(basePath: string, thread: {
+    id: number;
+    slug: string | null;
+}): string;
+export declare function plural(n: number, one: string, many?: string): string;

package/dist/react/format.js

@@ -0,0 +1,42 @@
+/** "3h ago", from a Date or the string a serialised Date became. */
+export function ago(when, now = new Date()) {
+    const then = typeof when === 'string' ? new Date(when) : when;
+    const s = Math.max(0, Math.round((now.getTime() - then.getTime()) / 1000));
+    if (s < 45)
+        return 'just now';
+    const m = Math.round(s / 60);
+    if (m < 60)
+        return `${m}m ago`;
+    const h = Math.round(m / 60);
+    if (h < 24)
+        return `${h}h ago`;
+    const d = Math.round(h / 24);
+    if (d < 30)
+        return `${d}d ago`;
+    const mo = Math.round(d / 30);
+    if (mo < 12)
+        return `${mo}mo ago`;
+    return `${Math.round(d / 365)}y ago`;
+}
+export const STATUS_LABEL = {
+    open: 'Open',
+    planned: 'Planned',
+    in_progress: 'In progress',
+    done: 'Done',
+    declined: 'Declined',
+};
+/** The tones `Pill`, `Callout` and `Toast` share; the plan's mapping. */
+export const STATUS_TONE = {
+    open: 'info',
+    planned: 'info',
+    in_progress: 'warn',
+    done: 'good',
+    declined: 'bad',
+};
+export const STATUS_ORDER = ['planned', 'in_progress', 'open', 'done', 'declined'];
+export function threadHref(basePath, thread) {
+    return `${basePath}/t/${thread.id}${thread.slug ? `-${thread.slug}` : ''}`;
+}
+export function plural(n, one, many = `${one}s`) {
+    return `${n} ${n === 1 ? one : many}`;
+}

package/dist/react/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The reference rendering, on `@wtfalch/design`. Every component here is a
+ * client component: the design package is React Aria underneath, so a Server
+ * Component in the app renders these and passes rows and Server Actions in.
+ * Mount them, or write your own over the same actions; the core does not know
+ * which.
+ *
+ * Import `@wtfalch/threads/threads.css` once, after the product stylesheet.
+ */
+export { CommentSection } from './CommentSection.js';
+export type { CommentSectionProps } from './CommentSection.js';
+export { CommentForm } from './CommentForm.js';
+export type { CommentFormProps } from './CommentForm.js';
+export { ThreadList } from './ThreadList.js';
+export type { ThreadListProps } from './ThreadList.js';
+export { ThreadView } from './ThreadView.js';
+export type { ModerateAction, ThreadViewProps } from './ThreadView.js';
+export { NewThreadForm } from './NewThreadForm.js';
+export type { NewThreadFormProps } from './NewThreadForm.js';
+export { Roadmap } from './Roadmap.js';
+export type { RoadmapProps } from './Roadmap.js';
+export { CategoryList } from './CategoryList.js';
+export type { CategoryListProps } from './CategoryList.js';
+export type { Outcome } from './format.js';
+export { STATUS_LABEL, STATUS_ORDER, STATUS_TONE, ago, threadHref } from './format.js';

package/dist/react/index.js

@@ -0,0 +1,17 @@
+/**
+ * The reference rendering, on `@wtfalch/design`. Every component here is a
+ * client component: the design package is React Aria underneath, so a Server
+ * Component in the app renders these and passes rows and Server Actions in.
+ * Mount them, or write your own over the same actions; the core does not know
+ * which.
+ *
+ * Import `@wtfalch/threads/threads.css` once, after the product stylesheet.
+ */
+export { CommentSection } from './CommentSection.js';
+export { CommentForm } from './CommentForm.js';
+export { ThreadList } from './ThreadList.js';
+export { ThreadView } from './ThreadView.js';
+export { NewThreadForm } from './NewThreadForm.js';
+export { Roadmap } from './Roadmap.js';
+export { CategoryList } from './CategoryList.js';
+export { STATUS_LABEL, STATUS_ORDER, STATUS_TONE, ago, threadHref } from './format.js';