@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/user-picker.js

@@ -0,0 +1,162 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Plus, UserRound, UsersRound } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { compareText, highlightParts, matchText } from "../lib/text.js";
+import { itemSlots } from "../lib/variants.js";
+import { Avatar, AvatarGroup } from "./avatar.js";
+import { RecordPicker } from "./record-picker.js";
+const userPickerLabels = {
+    unassigned: "Unassigned",
+    assignToMe: "Assign to me",
+    you: "you",
+    teams: "Teams",
+    people: "People",
+    members: "{count, plural, one {# member} other {# members}}",
+    assignees: "{label}: {names}",
+    assigneesLabel: "Assignees",
+    andMore: "{names} and {count} more",
+    deactivated: "Deactivated",
+    add: "Assign",
+    search: "Search people…",
+};
+const TEAM_PREFIX = "team:";
+// RecordPicker caches results per `source.key` for the session, so every array needs its own key:
+// with a shared "users" key, two pickers on one page showed each other's people.
+const arrayKeys = new WeakMap();
+let arrayKeySeq = 0;
+function keyForArray(prefix, input) {
+    let key = arrayKeys.get(input);
+    if (!key)
+        arrayKeys.set(input, (key = `${prefix}#${++arrayKeySeq}`));
+    return key;
+}
+function toSource(key, input, getId, getText, sortBy) {
+    if (!Array.isArray(input))
+        return input;
+    return {
+        key: keyForArray(key, input),
+        getId,
+        getLabel: sortBy,
+        async search(q, { locale }) {
+            const cmp = compareText(locale);
+            const items = (q.trim() ? input.filter((x) => matchText(getText(x), q, locale)) : input).slice().sort((a, b) => cmp(sortBy(a), sortBy(b)));
+            return { items };
+        },
+        async getByIds(ids) {
+            const set = new Set(ids);
+            return input.filter((x) => set.has(getId(x)));
+        },
+    };
+}
+function Bold({ text, query, locale }) {
+    if (!query.trim())
+        return _jsx(_Fragment, { children: text });
+    return (_jsx(_Fragment, { children: highlightParts(text, query, locale).map((p, i) => p.match ? (_jsx("mark", { className: "bg-transparent font-semibold text-fg", children: p.text }, i)) : (_jsx(React.Fragment, { children: p.text }, i))) }));
+}
+/**
+ * Assign or mention people and teams: task assignee, approvers, deal owner, reviewers, shift staff,
+ * share-with. A Record picker specialised for people — avatars with presence, role line,
+ * "Assign to me", deactivated users, teams, and an avatar-stack trigger for table cells.
+ *
+ * ```tsx
+ * <Field label="Owner"><UserPicker source={people} currentUserId={me.id} value={ownerId} onValueChange={setOwnerId} /></Field>
+ * <UserPicker multiple trigger="avatars" source={people} value={assignees} onValueChange={setAssignees} aria-label="Assignees" />
+ * ```
+ */
+export const UserPicker = React.forwardRef(function UserPicker(props, ref) {
+    const { source, teams, getTeamMembers, currentUserId, trigger = "field", maxAvatars = 3, roleLabel, labels, selectedRecords, ...rest } = props;
+    const t = useLabels("userPicker", userPickerLabels, labels);
+    const { locale } = useLocale();
+    const people = React.useMemo(() => toSource("users", source, (u) => u.id, (u) => [u.name, u.email ?? "", u.meta ?? ""].join(" "), (u) => u.name), [source]);
+    const teamSource = React.useMemo(() => (teams ? toSource("teams", teams, (x) => x.id, (x) => x.name, (x) => x.name) : undefined), [teams]);
+    // One combined source: people, then teams (prefixed ids) in their own group.
+    const combined = React.useMemo(() => ({
+        key: `${people.key}${teamSource ? `+${teamSource.key}` : ""}`,
+        getId: (r) => (r.kind === "team" ? `${TEAM_PREFIX}${r.id}` : r.id),
+        getLabel: (r) => r.name,
+        getDescription: (r) => (r.kind === "team" ? undefined : (r.meta ?? r.email)),
+        getAvatar: (r) => ({ name: r.name, src: r.avatarUrl, shape: r.kind === "team" ? "square" : "circle" }),
+        async search(q, ctx) {
+            const [p, tm] = await Promise.all([people.search(q, ctx), teamSource && !ctx.cursor ? teamSource.search(q, { ...ctx, cursor: undefined }) : Promise.resolve({ items: [] })]);
+            const teamRows = tm.items.map((x) => ({ id: x.id, name: x.name, kind: "team", memberCount: x.memberCount }));
+            return { items: [...p.items, ...teamRows], nextCursor: p.nextCursor };
+        },
+        getByIds: people.getByIds
+            ? async (ids, signal) => {
+                const userIds = ids.filter((id) => !id.startsWith(TEAM_PREFIX));
+                const teamIds = ids.filter((id) => id.startsWith(TEAM_PREFIX)).map((id) => id.slice(TEAM_PREFIX.length));
+                const [u, tm] = await Promise.all([
+                    userIds.length ? people.getByIds(userIds, signal) : Promise.resolve([]),
+                    teamIds.length && teamSource?.getByIds ? teamSource.getByIds(teamIds, signal) : Promise.resolve([]),
+                ]);
+                return [...u, ...tm.map((x) => ({ id: x.id, name: x.name, kind: "team", memberCount: x.memberCount }))];
+            }
+            : undefined,
+    }), [people, teamSource]);
+    const me = React.useCallback((u) => (currentUserId && u.id === currentUserId ? `${u.name} (${t("you")})` : u.name), [currentUserId, t]);
+    const actions = React.useMemo(() => {
+        if (!currentUserId)
+            return [];
+        return [
+            {
+                id: "me",
+                label: t("assignToMe"),
+                icon: _jsx(UserRound, { "aria-hidden": true }),
+                onSelect: async ({ select }) => {
+                    const ctrl = new AbortController();
+                    const found = (await combined.getByIds?.([currentUserId], ctrl.signal))?.[0];
+                    if (found)
+                        select(found);
+                },
+            },
+        ];
+    }, [combined, currentUserId, t]);
+    const renderItem = (r, s) => {
+        if (r.kind === "team") {
+            return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "inline-flex size-6 shrink-0 items-center justify-center rounded-[28%] bg-selected text-fg-muted [&_svg]:size-3.5", children: _jsx(UsersRound, {}) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: _jsx(Bold, { text: r.name, query: s.query, locale: locale }) }), _jsx("span", { className: itemSlots.shortcut, children: t("members", { count: r.memberCount ?? 0 }) })] }));
+        }
+        const isMe = currentUserId === r.id;
+        return (_jsxs(_Fragment, { children: [_jsx(Avatar, { name: r.name, src: r.avatarUrl, status: r.status, size: "sm", "aria-hidden": true }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "block truncate", children: [_jsx(Bold, { text: r.name, query: s.query, locale: locale }), isMe ? _jsxs(_Fragment, { children: [" ", _jsxs("span", { className: "text-fg-subtle", children: ["(", t("you"), ")"] })] }) : null] }), r.disabled ? (_jsx("span", { className: itemSlots.description, children: t("deactivated") })) : r.meta || r.email ? (_jsx("span", { className: cn(itemSlots.description, "truncate"), children: _jsx(Bold, { text: r.meta ?? r.email ?? "", query: s.query, locale: locale }) })) : null] })] }));
+    };
+    const resolveSelection = React.useCallback(async (r) => {
+        if (r.kind !== "team" || !getTeamMembers)
+            return r;
+        const members = await getTeamMembers({ id: r.id, name: r.name, memberCount: r.memberCount ?? 0 }, new AbortController().signal);
+        return members.filter((m) => !m.disabled);
+    }, [getTeamMembers]);
+    const shared = {
+        ...rest,
+        source: combined,
+        renderItem,
+        actions,
+        selectedRecords: selectedRecords,
+        getDisabled: (r) => Boolean(r.disabled),
+        getGroup: (r) => (teamSource ? (r.kind === "team" ? t("teams") : t("people")) : undefined),
+        resolveSelection,
+        recent: false,
+        searchPlaceholder: t("search"),
+        placeholder: rest.placeholder ?? (props.multiple ? t("add") : t("unassigned")),
+        mode: trigger === "inline" ? "inline" : "popover",
+    };
+    const renderTrigger = trigger === "avatars"
+        ? ({ selected, disabled }) => {
+            const names = selected.map((u) => me(u));
+            const shown = names.slice(0, 2).join(", ");
+            const list = names.length > 2 ? t("andMore", { names: shown, count: names.length - 2 }) : shown || t("unassigned");
+            return (_jsx(AvatarsTrigger, { "aria-label": rest["aria-label"] ? `${rest["aria-label"]}: ${list}` : t("assignees", { label: roleLabel ?? t("assigneesLabel"), names: list }), disabled: disabled, selected: selected, max: maxAvatars, size: props.size }));
+        }
+        : undefined;
+    if (props.multiple) {
+        return _jsx(RecordPicker, { ref: ref, ...shared, source: combined, multiple: true, renderTrigger: renderTrigger });
+    }
+    return _jsx(RecordPicker, { ref: ref, ...shared, source: combined, multiple: false, renderTrigger: renderTrigger });
+});
+/** Avatar stack + "+" — the compact trigger for table cells and record headers. */
+const AvatarsTrigger = React.forwardRef(function AvatarsTrigger({ selected, max, size = "md", className, "aria-label": label, ...props }, ref) {
+    const avatarSize = size === "sm" ? "xs" : size === "lg" ? "md" : "sm";
+    return (_jsxs("button", { ref: ref, type: "button", "data-slot": "user-picker-avatars", className: cn("group/avatars inline-flex items-center gap-1 rounded-full p-0.5 pe-1 outline-none transition-colors hover:bg-hover focus-ring disabled:pointer-events-none disabled:opacity-50", className), ...props, children: [label ? _jsx("span", { className: "sr-only", children: label }) : null, selected.length ? (_jsx(AvatarGroup, { max: max, size: avatarSize, "aria-hidden": true, children: selected.map((u) => (_jsx(Avatar, { name: u.name, src: u.avatarUrl }, u.id))) })) : null, _jsx("span", { "aria-hidden": true, className: cn("inline-flex items-center justify-center rounded-full border border-dashed border-field-border-hover text-fg-subtle transition-colors group-hover/avatars:border-fg-subtle group-hover/avatars:text-fg", avatarSize === "xs" ? "size-5 [&_svg]:size-3" : avatarSize === "sm" ? "size-6 [&_svg]:size-3.5" : "size-8 [&_svg]:size-4"), children: _jsx(Plus, {}) })] }));
+});

package/dist/components/version-history.d.ts

@@ -0,0 +1,191 @@
+import * as React from "react";
+import { type ValueFormat } from "../lib/value-format.js";
+export declare const versionHistoryLabels: {
+    versions: string;
+    current: string;
+    autosave: string;
+    published: string;
+    manual: string;
+    system: string;
+    before: string;
+    after: string;
+    comparing: string;
+    split: string;
+    unified: string;
+    viewMode: string;
+    onlyChanges: string;
+    identical: string;
+    identicalHint: string;
+    loading: string;
+    loadError: string;
+    retry: string;
+    added: string;
+    removed: string;
+    changed: string;
+    unchanged: string;
+    addedLine: string;
+    removedLine: string;
+    stats: string;
+    prevChange: string;
+    nextChange: string;
+    changeOf: string;
+    unchangedLines: string;
+    expandAll: string;
+    diffRegion: string;
+    field: string;
+    restore: string;
+    restoreTitle: string;
+    restoreBody: string;
+    restoreConfirm: string;
+    restored: string;
+    restoreError: string;
+    yes: string;
+    no: string;
+    empty: string;
+    selectHint: string;
+};
+export type VersionHistoryLabels = Partial<typeof versionHistoryLabels>;
+export type DiffGranularity = "line" | "word" | "char";
+type SegKind = "same" | "add" | "del";
+interface Seg {
+    text: string;
+    kind: SegKind;
+}
+export interface DiffLine {
+    type: SegKind;
+    text: string;
+    oldNo?: number;
+    newNo?: number;
+    /** Word / char highlights inside a changed line. */
+    segments?: Seg[];
+}
+/** Line diff with optional word / char highlights inside changed lines (jsdiff). */
+export declare function diffText(before: string, after: string, granularity?: DiffGranularity): DiffLine[];
+export interface DiffViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    before: string;
+    after: string;
+    /** Highlight changes inside lines by word (default), char, or not at all (`"line"`). */
+    granularity?: DiffGranularity;
+    /** `unified` (default) or `split` (before at the start side, after at the end). */
+    mode?: "split" | "unified";
+    /** Unchanged lines kept around each change; longer runs collapse behind "Show N unchanged lines". Default 3. `Infinity` shows all. */
+    context?: number;
+    /** Column / region names ("v12 · Nov 8", "Current"). */
+    beforeLabel?: string;
+    afterLabel?: string;
+    /** Line number gutters. Default `true`. */
+    lineNumbers?: boolean;
+    /** Previous / next change buttons and the +/− summary. Default `true`. */
+    toolbar?: boolean;
+    /** Extra toolbar content (mode switch, restore). */
+    actions?: React.ReactNode;
+    /** Wrap long lines (prose) instead of scrolling (code). Default `true`. */
+    wrap?: boolean;
+    labels?: VersionHistoryLabels;
+}
+/**
+ * Text diff of two versions — line diff with word-level highlights (jsdiff), unified or
+ * side by side, with collapsed unchanged runs and change navigation (buttons and `n` / `p`).
+ * Colour is never the only signal: `+` / `−` gutters, `<ins>` / `<del>` and screen-reader text.
+ *
+ * ```tsx
+ * <DiffView before={v11.body} after={v12.body} mode="split" beforeLabel="v11" afterLabel="v12" />
+ * ```
+ */
+export declare const DiffView: React.ForwardRefExoticComponent<DiffViewProps & React.RefAttributes<HTMLDivElement>>;
+export interface FieldDiffField {
+    key: string;
+    label: string;
+    /** Number / date / money formatting of the value. */
+    format?: ValueFormat;
+    /** `"text-long"` renders a word diff (descriptions, notes). */
+    type?: "text" | "text-long" | "boolean" | "list" | "json";
+    /** Custom value renderer. */
+    render?: (value: unknown) => React.ReactNode;
+}
+export type FieldChange = "added" | "removed" | "changed" | "same";
+export interface RecordDiffEntry {
+    key: string;
+    change: FieldChange;
+    before?: unknown;
+    after?: unknown;
+}
+/** Field-by-field comparison of two records. Pass `fields` to pick and order keys; default: every key of both. */
+export declare function diffRecords(a: Record<string, unknown> | null | undefined, b: Record<string, unknown> | null | undefined, fields?: Array<{
+    key: string;
+}> | string[]): RecordDiffEntry[];
+export interface FieldDiffProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    before: Record<string, unknown> | null | undefined;
+    after: Record<string, unknown> | null | undefined;
+    /** Fields to compare, in order. Default: every key, humanized labels. */
+    fields?: FieldDiffField[];
+    /** Hide unchanged fields. Default `true`. */
+    onlyChanges?: boolean;
+    beforeLabel?: string;
+    afterLabel?: string;
+    labels?: VersionHistoryLabels;
+}
+/**
+ * Record changes field by field — price, status, owner, permissions. Before is struck through,
+ * after is marked; long text fields get a word diff.
+ *
+ * ```tsx
+ * <FieldDiff before={v1} after={v2} fields={[
+ *   { key: "amount", label: "Amount", format: "currency" },
+ *   { key: "stage", label: "Stage" },
+ * ]} />
+ * ```
+ */
+export declare const FieldDiff: React.ForwardRefExoticComponent<FieldDiffProps & React.RefAttributes<HTMLDivElement>>;
+export interface Version {
+    id: string;
+    /** ISO instant. */
+    createdAt: string;
+    author?: {
+        name: string;
+        avatar?: string;
+    };
+    /** "v12 · Pricing update". Default: the date. */
+    label?: string;
+    /** Default `"manual"`. */
+    kind?: "manual" | "autosave" | "published" | "system";
+    current?: boolean;
+    /** Short note ("Changed hero copy and pricing"). */
+    summary?: string;
+}
+export type VersionContent = string | Record<string, unknown>;
+export interface VersionHistoryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    versions: Version[];
+    /** Pair to compare (any order; older is "before"). Default: the newest non-current version vs current. */
+    compare?: [string, string];
+    defaultCompare?: [string, string];
+    onCompareChange?: (pair: [string, string]) => void;
+    /** Content of a version: text (DiffView) or a record (FieldDiff). Cached per id. */
+    loadVersion: (id: string) => VersionContent | Promise<VersionContent>;
+    /** Record versions: which fields to compare. */
+    fields?: FieldDiffField[];
+    /** Shows "Restore this version" (with confirmation) for the older selected version. */
+    onRestore?: (id: string) => void | Promise<void>;
+    /** `page` (list beside the diff) or `panel` (stacked, for a Sheet). Default `"page"`. */
+    layout?: "panel" | "page";
+    /** Text diff layout. Uncontrolled; default `"unified"` (`"split"` on `page` layout). */
+    defaultMode?: "split" | "unified";
+    granularity?: DiffGranularity;
+    /** Collapsed context lines (DiffView). Default 3. */
+    context?: number;
+    labels?: VersionHistoryLabels;
+}
+/**
+ * Revisions of a record: pick two (listbox with two-selection), see what changed — text with
+ * word highlights or record fields — and restore an older one after confirmation.
+ *
+ * ```tsx
+ * <VersionHistory
+ *   versions={revisions}
+ *   loadVersion={(id) => api.revision(id).then((r) => r.body)}
+ *   onRestore={(id) => api.restore(postId, id)}
+ * />
+ * ```
+ */
+export declare const VersionHistory: React.ForwardRefExoticComponent<VersionHistoryProps & React.RefAttributes<HTMLDivElement>>;
+export {};