@softr/sdk 0.0.63-alpha.0 → 0.0.64-alpha.0

package/dist/comments/comments.d.ts

@@ -1,168 +0,0 @@
-import { CommentsAction } from "../action.js";
-
-//#region src/comments/comments.d.ts
-/** A person picked in the composer, and where their `@name` sits in the text. */
-type CommentMention = {
-  name: string;
-  email: string;
-  start: number;
-  end: number;
-};
-type CommentAttachmentInput = {
-  url: string;
-  filename: string;
-  type?: string | null;
-};
-type CommentView = {
-  id: string;
-  /** The body as safe HTML. Render it with `dangerouslySetInnerHTML`, never as text. */
-  bodyHtml: string;
-  attachments: Array<{
-    url: string;
-    filename: string;
-    type: string | null;
-  }>;
-  author: {
-    name: string;
-    avatar: string | null;
-    isDeactivated: boolean;
-  };
-  /** ISO 8601. */
-  createdAt: string;
-  canDelete: boolean;
-  canEdit: boolean;
-  edited: boolean;
-  /** The body as the visitor typed it, to fill an edit box. `null` unless `canEdit`. */
-  source: {
-    text: string;
-    mentions: Array<CommentMention>;
-  } | null;
-  reactions: Array<{
-    emoji: string;
-    label: string;
-    count: number;
-    isSelected: boolean;
-  }>;
-};
-type CommentThread = {
-  canPost: boolean;
-  allowMentions: boolean;
-  allowAttachments: boolean;
-  notificationsEnabled: boolean;
-  quickReactions: ReadonlyArray<{
-    emoji: string;
-    label: string;
-  }>;
-  total: number;
-  /** Pass it back as `offset` for the next page. `null` on the last page. */
-  nextOffset: number | null;
-  items: Array<CommentView>;
-};
-/**
- * The thread on one record, or `null` when this visitor cannot see comments on it. Render nothing
- * for `null`.
- *
- * @example
- * const thread = await comments.list(orderComments, { recordId: order.id })
- */
-declare function listComments(action: CommentsAction, options: {
-  recordId: string;
-  offset?: number | null;
-  limit?: number;
-}): Promise<CommentThread | null>;
-/**
- * Posts a comment. `body` is the text the visitor typed. `mentions` are the people they picked,
- * each with the range of its `@name` in `body`. A range that no longer reads as `@name` is posted as
- * plain text. `attachments` are the files `useFileUpload` finished uploading.
- *
- * @example
- * await comments.create(orderComments, { recordId, body: "Hey @Ann", mentions, attachments })
- */
-declare function createComment(action: CommentsAction, options: {
-  recordId: string;
-  body: string;
-  mentions: ReadonlyArray<CommentMention>;
-  attachments?: ReadonlyArray<CommentAttachmentInput>;
-}): Promise<void>;
-/**
- * Saves an edit. Offer it only where the comment's `canEdit` is true, and fill the edit box from its
- * `source`. `attachments` is the full list after the edit: the files kept plus any new ones.
- *
- * @example
- * await comments.update(orderComments, { recordId, commentId, body, mentions, attachments })
- */
-declare function updateComment(action: CommentsAction, options: {
-  recordId: string;
-  commentId: string;
-  body: string;
-  mentions: ReadonlyArray<CommentMention>;
-  attachments: ReadonlyArray<CommentAttachmentInput>;
-}): Promise<void>;
-/**
- * Deletes a comment. Offer it only where the comment's `canDelete` is true.
- *
- * @example
- * await comments.delete(orderComments, { recordId, commentId })
- */
-declare function deleteComment(action: CommentsAction, options: {
-  recordId: string;
-  commentId: string;
-}): Promise<void>;
-/**
- * Adds the visitor's reaction when `selected` is true, and removes it when false. Pass the
- * reaction's current `isSelected` negated.
- *
- * @example
- * await comments.react(orderComments, { recordId, commentId, emoji: "👍", selected: true })
- */
-declare function reactToComment(action: CommentsAction, options: {
-  recordId: string;
-  commentId: string;
-  emoji: string;
-  selected: boolean;
-}): Promise<void>;
-/**
- * Whether the visitor gets an email when someone comments on this record.
- *
- * @example
- * const subscribed = await comments.subscription(orderComments, { recordId })
- */
-declare function readSubscription(action: CommentsAction, options: {
-  recordId: string;
-}): Promise<boolean>;
-/**
- * Turns the visitor's emails about this record's comments on or off.
- *
- * @example
- * await comments.setSubscription(orderComments, { recordId, subscribed: false })
- */
-declare function setSubscription(action: CommentsAction, options: {
-  recordId: string;
-  subscribed: boolean;
-}): Promise<void>;
-/**
- * The people the visitor may mention whose name or email matches `query`. Only call it when the
- * thread's `allowMentions` is true.
- *
- * @example
- * const people = await comments.searchMentions(orderComments, { query: "an" })
- */
-declare function searchMentions(action: CommentsAction, options: {
-  query: string;
-}): Promise<Array<{
-  name: string;
-  email: string;
-  avatar: string | null;
-}>>;
-declare const comments: {
-  list: typeof listComments;
-  create: typeof createComment;
-  update: typeof updateComment;
-  delete: typeof deleteComment;
-  react: typeof reactToComment;
-  subscription: typeof readSubscription;
-  setSubscription: typeof setSubscription;
-  searchMentions: typeof searchMentions;
-};
-//#endregion
-export { CommentAttachmentInput, CommentMention, CommentThread, CommentView, comments };

package/dist/comments/comments.js

@@ -1,413 +0,0 @@
-import { assert } from "../assertions.js";
-import { fetch } from "../fetch.js";
-import { sessionConfig } from "../auth/config.js";
-import { readSessionToken } from "../auth/session.js";
-import { platformApiUrl } from "../auth/platform.js";
-import { describeFailure } from "../datasource/record.js";
-import { z } from "zod";
-import { Marked } from "marked";
-import { FilterXSS } from "xss";
-
-//#region src/comments/comments.ts
-/**
-* The emoji a comment can be reacted with. The app has no other set: an emoji outside it has no
-* label to store, and native blocks would show it without a name.
-*/
-const QUICK_REACTIONS = [
-	{
-		emoji: "👍",
-		label: "Thumbs Up"
-	},
-	{
-		emoji: "🙌",
-		label: "Raised Hands"
-	},
-	{
-		emoji: "✅",
-		label: "Check Mark"
-	},
-	{
-		emoji: "🔥",
-		label: "Fire"
-	},
-	{
-		emoji: "👀",
-		label: "Eyes"
-	}
-];
-const threadSchema = z.object({
-	items: z.array(z.object({
-		id: z.string(),
-		comment: z.string(),
-		attachments: z.array(z.object({
-			url: z.string(),
-			filename: z.string(),
-			type: z.string().nullish()
-		})),
-		author: z.object({
-			name: z.string(),
-			avatar: z.string().nullable(),
-			deactivated: z.boolean()
-		}),
-		createdAt: z.number(),
-		canDelete: z.boolean(),
-		canEdit: z.boolean(),
-		edited: z.boolean(),
-		reactions: z.array(z.object({
-			emoji: z.string(),
-			label: z.string(),
-			count: z.number(),
-			selected: z.boolean()
-		}))
-	})),
-	total: z.number(),
-	offset: z.number(),
-	canPost: z.boolean(),
-	allowMentions: z.boolean(),
-	allowAttachments: z.boolean(),
-	notificationsEnabled: z.boolean()
-});
-const subscriptionSchema = z.object({ subscribed: z.boolean() });
-const mentionCandidatesSchema = z.array(z.object({
-	name: z.string(),
-	email: z.string(),
-	avatar: z.string().nullable()
-}));
-async function request(action, path, init) {
-	const token = readSessionToken();
-	const headers = {};
-	if (token !== null) headers.Authorization = `Bearer ${token}`;
-	if (init.body !== void 0) headers["Content-Type"] = "application/json";
-	return fetch(`${await platformApiUrl()}/v1/vibe/applications/${sessionConfig().applicationId}/actions/${encodeURIComponent(action.id)}/comments${path}`, {
-		method: init.method,
-		headers,
-		body: init.body === void 0 ? void 0 : JSON.stringify(init.body)
-	});
-}
-async function failure(action, what, res) {
-	return /* @__PURE__ */ new Error(`comments ${what} failed for "${action.id}": ${await describeFailure(res)}`);
-}
-function recordPath(recordId) {
-	assert(recordId, "a record id must not be empty");
-	return `/records/${encodeURIComponent(recordId)}`;
-}
-/**
-* The thread on one record, or `null` when this visitor cannot see comments on it. Render nothing
-* for `null`.
-*
-* @example
-* const thread = await comments.list(orderComments, { recordId: order.id })
-*/
-async function listComments(action, options) {
-	const query = new URLSearchParams();
-	if (options.offset !== void 0 && options.offset !== null) query.set("offset", String(options.offset));
-	if (options.limit !== void 0) query.set("limit", String(options.limit));
-	const search = query.size > 0 ? `?${query}` : "";
-	const res = await request(action, `${recordPath(options.recordId)}${search}`, { method: "GET" });
-	if (res.status === 403) return null;
-	if (!res.ok) throw await failure(action, "list", res);
-	const payload = threadSchema.parse(await res.json());
-	const next = payload.offset + payload.items.length;
-	return {
-		canPost: payload.canPost,
-		allowMentions: payload.allowMentions,
-		allowAttachments: payload.allowAttachments,
-		notificationsEnabled: payload.notificationsEnabled,
-		quickReactions: QUICK_REACTIONS,
-		total: payload.total,
-		nextOffset: next < payload.total ? next : null,
-		items: payload.items.map((item) => ({
-			id: item.id,
-			bodyHtml: renderCommentBody(item.comment),
-			attachments: item.attachments.map(({ url, filename, type }) => ({
-				url,
-				filename,
-				type: type ?? null
-			})),
-			author: {
-				name: item.author.name,
-				avatar: item.author.avatar,
-				isDeactivated: item.author.deactivated
-			},
-			createdAt: new Date(item.createdAt).toISOString(),
-			canDelete: item.canDelete,
-			canEdit: item.canEdit,
-			edited: item.edited,
-			source: item.canEdit ? decodeCommentBody(item.comment) : null,
-			reactions: item.reactions.map(({ selected,...reaction }) => ({
-				...reaction,
-				isSelected: selected
-			}))
-		}))
-	};
-}
-/**
-* Posts a comment. `body` is the text the visitor typed. `mentions` are the people they picked,
-* each with the range of its `@name` in `body`. A range that no longer reads as `@name` is posted as
-* plain text. `attachments` are the files `useFileUpload` finished uploading.
-*
-* @example
-* await comments.create(orderComments, { recordId, body: "Hey @Ann", mentions, attachments })
-*/
-async function createComment(action, options) {
-	const attachments = options.attachments ?? [];
-	assert(options.body.trim() || attachments.length > 0, "a comment needs text or an attachment");
-	const res = await request(action, recordPath(options.recordId), {
-		method: "POST",
-		body: {
-			comment: encodeCommentBody(options.body, options.mentions),
-			attachments: toWireAttachments(attachments)
-		}
-	});
-	if (!res.ok) throw await failure(action, "create", res);
-}
-/**
-* Saves an edit. Offer it only where the comment's `canEdit` is true, and fill the edit box from its
-* `source`. `attachments` is the full list after the edit: the files kept plus any new ones.
-*
-* @example
-* await comments.update(orderComments, { recordId, commentId, body, mentions, attachments })
-*/
-async function updateComment(action, options) {
-	assert(options.body.trim() || options.attachments.length > 0, "a comment needs text or an attachment");
-	const res = await request(action, `${recordPath(options.recordId)}/${encodeURIComponent(options.commentId)}`, {
-		method: "PATCH",
-		body: {
-			comment: encodeCommentBody(options.body, options.mentions),
-			attachments: toWireAttachments(options.attachments)
-		}
-	});
-	if (!res.ok) throw await failure(action, "update", res);
-}
-/** Only the url, name and type travel. `useFileUpload` adds an `id` the platform has no use for. */
-function toWireAttachments(attachments) {
-	return attachments.map(({ url, filename, type }) => ({
-		url,
-		filename,
-		type: type ?? null
-	}));
-}
-/**
-* Deletes a comment. Offer it only where the comment's `canDelete` is true.
-*
-* @example
-* await comments.delete(orderComments, { recordId, commentId })
-*/
-async function deleteComment(action, options) {
-	const res = await request(action, `${recordPath(options.recordId)}/${encodeURIComponent(options.commentId)}`, { method: "DELETE" });
-	if (!res.ok) throw await failure(action, "delete", res);
-}
-/**
-* Adds the visitor's reaction when `selected` is true, and removes it when false. Pass the
-* reaction's current `isSelected` negated.
-*
-* @example
-* await comments.react(orderComments, { recordId, commentId, emoji: "👍", selected: true })
-*/
-async function reactToComment(action, options) {
-	const reaction = QUICK_REACTIONS.find(({ emoji }) => emoji === options.emoji);
-	assert(reaction, `"${options.emoji}" is not one of the quick reactions`);
-	const path = `${recordPath(options.recordId)}/${encodeURIComponent(options.commentId)}/react`;
-	const res = options.selected ? await request(action, path, {
-		method: "PUT",
-		body: reaction
-	}) : await request(action, `${path}?${new URLSearchParams({ emoji: reaction.emoji })}`, { method: "DELETE" });
-	if (!res.ok) throw await failure(action, "react", res);
-}
-/**
-* Whether the visitor gets an email when someone comments on this record.
-*
-* @example
-* const subscribed = await comments.subscription(orderComments, { recordId })
-*/
-async function readSubscription(action, options) {
-	const res = await request(action, `${recordPath(options.recordId)}/subscription`, { method: "GET" });
-	if (!res.ok) throw await failure(action, "subscription", res);
-	return subscriptionSchema.parse(await res.json()).subscribed;
-}
-/**
-* Turns the visitor's emails about this record's comments on or off.
-*
-* @example
-* await comments.setSubscription(orderComments, { recordId, subscribed: false })
-*/
-async function setSubscription(action, options) {
-	const res = await request(action, `${recordPath(options.recordId)}/subscription`, {
-		method: "PUT",
-		body: { subscribed: options.subscribed }
-	});
-	if (!res.ok) throw await failure(action, "set subscription", res);
-}
-/**
-* The people the visitor may mention whose name or email matches `query`. Only call it when the
-* thread's `allowMentions` is true.
-*
-* @example
-* const people = await comments.searchMentions(orderComments, { query: "an" })
-*/
-async function searchMentions(action, options) {
-	const res = await request(action, `/mentions?${new URLSearchParams({ query: options.query })}`, { method: "GET" });
-	if (!res.ok) throw await failure(action, "mention search", res);
-	return mentionCandidatesSchema.parse(await res.json());
-}
-const comments = {
-	list: listComments,
-	create: createComment,
-	update: updateComment,
-	delete: deleteComment,
-	react: reactToComment,
-	subscription: readSubscription,
-	setSubscription,
-	searchMentions
-};
-/**
-* Splices each mention into the body as JSON. A range that does not read as its own `@name` is
-* left as text, so a composer that fell out of step never puts an email on the wrong words.
-*/
-function encodeCommentBody(body, mentions) {
-	const ordered = mentions.filter(({ name, start, end }) => body.slice(start, end) === `@${name}`).toSorted((a, b) => a.start - b.start);
-	let encoded = "";
-	let cursor = 0;
-	for (const { name, email, start, end } of ordered) {
-		if (start < cursor) continue;
-		encoded += body.slice(cursor, start) + JSON.stringify({
-			name,
-			email
-		});
-		cursor = end;
-	}
-	return encoded + body.slice(cursor);
-}
-const MENTION = /^\{\s*(?:"name"\s*:\s*"(?:[^"\\]|\\.)*"\s*,\s*"email"\s*:\s*"(?:[^"\\]|\\.)*"|"email"\s*:\s*"(?:[^"\\]|\\.)*"\s*,\s*"name"\s*:\s*"(?:[^"\\]|\\.)*")\s*\}/;
-const mentionSchema = z.object({
-	name: z.string(),
-	email: z.string()
-});
-/** The mention's fields, or `undefined` when the match is not valid JSON, e.g. a stray `\q`. */
-function parseMention(raw) {
-	try {
-		return mentionSchema.parse(JSON.parse(raw));
-	} catch {
-		return;
-	}
-}
-/**
-* The reverse of `encodeCommentBody`: each mention becomes its `@name` again, with its range. The
-* rest of the body stays as stored, so markdown from a native author shows as its source.
-*/
-function decodeCommentBody(comment) {
-	let text = "";
-	const mentions = [];
-	let rest = comment;
-	while (rest.length > 0) {
-		const brace = rest.indexOf("{");
-		if (brace === -1) return {
-			text: text + rest,
-			mentions
-		};
-		text += rest.slice(0, brace);
-		rest = rest.slice(brace);
-		const match = MENTION.exec(rest);
-		const mention = match === null ? void 0 : parseMention(match[0]);
-		if (match === null || mention === void 0) {
-			text += "{";
-			rest = rest.slice(1);
-			continue;
-		}
-		const name = mention.name || mention.email;
-		const label = `@${name}`;
-		mentions.push({
-			name,
-			email: mention.email,
-			start: text.length,
-			end: text.length + label.length
-		});
-		text += label;
-		rest = rest.slice(match[0].length);
-	}
-	return {
-		text,
-		mentions
-	};
-}
-const markdown = new Marked({
-	gfm: true,
-	breaks: true,
-	async: false,
-	extensions: [{
-		name: "mention",
-		level: "inline",
-		start: (src) => src.indexOf("{"),
-		tokenizer(src) {
-			const match = MENTION.exec(src);
-			if (match === null) return void 0;
-			const mention = parseMention(match[0]);
-			if (mention === void 0) return void 0;
-			return {
-				type: "mention",
-				raw: match[0],
-				...mention
-			};
-		},
-		renderer(token) {
-			const label = String(token.name || token.email);
-			return `<span data-type="mention" data-name="${escapeHtml(label)}">@${escapeHtml(label)}</span>`;
-		}
-	}]
-});
-const sanitizer = new FilterXSS({
-	whiteList: Object.fromEntries([
-		"p",
-		"br",
-		"strong",
-		"em",
-		"u",
-		"s",
-		"a",
-		"ul",
-		"ol",
-		"li",
-		"code",
-		"pre",
-		"blockquote",
-		"h1",
-		"h2",
-		"h3",
-		"span",
-		"del"
-	].map((tag) => [tag, tag === "a" ? ["href", "title"] : []])),
-	stripIgnoreTag: true,
-	stripIgnoreTagBody: ["script", "style"],
-	onTagAttr(tag, name, value) {
-		if (tag !== "a") return void 0;
-		if (name === "target" || name === "rel") return "";
-		if (name !== "href") return void 0;
-		const href = linkify(value);
-		if (!SAFE_HREF.test(href)) return "";
-		return `href="${escapeAttribute(href)}" target="_blank" rel="noopener noreferrer"`;
-	},
-	onIgnoreTagAttr(_tag, name, value) {
-		if (!name.startsWith("data-")) return void 0;
-		return `${name}="${escapeAttribute(value)}"`;
-	}
-});
-const SAFE_HREF = /^(?:https?:\/\/|mailto:|tel:|#|\/)/i;
-/** A bare domain like `example.com` becomes an https link, as native blocks do. */
-function linkify(href) {
-	const trimmed = href.trim();
-	if (/^(?:[a-z][a-z0-9+.-]*:|#|\/)/i.test(trimmed)) return trimmed;
-	return trimmed.includes(".") ? `https://${trimmed}` : "";
-}
-function escapeHtml(text) {
-	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function escapeAttribute(value) {
-	return value.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function renderCommentBody(comment) {
-	const trimmed = comment.replace(/^(?:\s*<br\s*\/?>\s*)+/i, "").replace(/(?:\s*<br\s*\/?>\s*)+$/i, "");
-	return sanitizer.process(markdown.parse(trimmed, { async: false }));
-}
-
-//#endregion
-export { comments };

package/dist/comments/use-comment-composer.d.ts

@@ -1,46 +0,0 @@
-import { CommentMention } from "./comments.js";
-import { ChangeEvent, RefObject, SyntheticEvent } from "react";
-
-//#region src/comments/use-comment-composer.d.ts
-
-/**
- * The state of a comment box: the text, the people mentioned in it, and the `@` fragment being
- * typed. Spread `textareaProps` onto a `<textarea>`. Show a mention menu while `query` is not
- * `null`, and call `pick` with the person chosen from it.
- *
- * Post `text` and `mentions` as they are, then call `reset` once the post succeeds.
- *
- * To edit a comment, pass its source as initial, in a composer mounted only while editing.
- * `initial` is read once, on mount.
- *
- * @example
- * const composer = useCommentComposer()
- * <textarea {...composer.textareaProps} />
- * {composer.query !== null && <MentionMenu query={composer.query} onPick={composer.pick} />}
- */
-declare function useCommentComposer(options?: {
-  /** Fills the box to edit a comment: pass its `source`. */
-  initial?: {
-    text: string;
-    mentions: ReadonlyArray<CommentMention>;
-  };
-}): {
-  text: string;
-  mentions: Array<CommentMention>;
-  /** What follows the `@` before the caret, or `null` when the caret is not in a mention. */
-  query: string | null;
-  textareaProps: {
-    ref: RefObject<HTMLTextAreaElement | null>;
-    value: string;
-    onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
-    onSelect: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
-  };
-  /** Replaces the `@` fragment with the person's `@name`, and puts the caret after it. */
-  pick: (person: {
-    name: string;
-    email: string;
-  }) => void;
-  reset: () => void;
-};
-//#endregion
-export { useCommentComposer };