@businessdash/sdk 0.9.60

package/src/forms-core/elements.ts

@@ -0,0 +1,86 @@
+/**
+ * Small, framework-free helpers the bindings share when rendering elements.
+ *
+ * Anything here would otherwise be copy-pasted into React, Svelte, Vue, Angular,
+ * Solid, Qwik and vanilla — and then drift. The dashboard renderer keeps its own
+ * copy of the threshold only because it can't import from the SDK; the values
+ * are deliberately identical.
+ */
+
+/**
+ * Past this many options a dropdown grows a search affordance on its own.
+ * Scrolling a long list to find one entry is the worse default, and an author
+ * shouldn't have to notice their list got long. Mirrors `SEARCHABLE_THRESHOLD`
+ * in the dashboard builder's `constants.tsx`.
+ */
+export const SEARCHABLE_THRESHOLD = 10;
+
+/** Should this dropdown offer search? Either the author asked for it (the
+ *  ComboBox card sets `display: "combobox"`) or the list is long enough. */
+export function shouldSearchOptions(
+	optionCount: number,
+	display?: string,
+): boolean {
+	return display === "combobox" || optionCount > SEARCHABLE_THRESHOLD;
+}
+
+/**
+ * Where BIAB serves icon art.
+ *
+ * The `icon_select` element stores an icon NAME, and rendering it back needs the
+ * icon set. The SDK deliberately doesn't bundle one: it's ~1,600 icons, and
+ * three of the bindings can't import a React package anyway. Names resolve to
+ * `<img src="…/api/icons/<name>.svg">`, so the platform stays the single source
+ * of truth for what a name means.
+ *
+ * Override with `NEXT_PUBLIC_BIAB_ORIGIN` when pointing a consumer app at a
+ * non-production BIAB.
+ */
+export const BIAB_ICON_BASE: string = (() => {
+	// Read through `globalThis` rather than the bare `process` identifier: the
+	// SDK is consumed by browser bundlers that have no `@types/node`, where
+	// naming `process` directly fails to compile (and can throw at runtime).
+	const env = (
+		globalThis as {
+			process?: { env?: Record<string, string | undefined> };
+		}
+	).process?.env;
+	return env?.["NEXT_PUBLIC_BIAB_ORIGIN"] || "https://www.biab.app";
+})();
+
+/** SVG URL for one icon name. */
+export function iconUrl(name: string): string {
+	return `${BIAB_ICON_BASE}/api/icons/${encodeURIComponent(name)}.svg`;
+}
+
+/** The lazily-fetched icon-name index (only needed when an author hasn't
+ *  curated `iconConfig.allowedIcons`). */
+export const ICON_INDEX_URL = `${BIAB_ICON_BASE}/api/icons`;
+
+/** Narrow an icon list by a search query, capped so the grid never mounts
+ *  thousands of nodes at once. */
+export function filterIconNames(
+	names: readonly string[],
+	query: string,
+	limit = 120,
+): string[] {
+	const q = query.trim().toLowerCase();
+	return (q ? names.filter((n) => n.includes(q)) : names).slice(
+		0,
+		limit,
+	) as string[];
+}
+
+/** Fetch the icon-name index. Resolves to `[]` on any failure — a missing index
+ *  leaves the picker's grid empty, which is recoverable; throwing here would
+ *  take the whole form down. */
+export async function fetchIconNames(): Promise<string[]> {
+	try {
+		const res = await fetch(ICON_INDEX_URL);
+		if (!res.ok) return [];
+		const data = (await res.json()) as { icons?: string[] };
+		return data.icons ?? [];
+	} catch {
+		return [];
+	}
+}

package/src/forms-core/email-domains.ts

@@ -0,0 +1,68 @@
+/**
+ * Free / consumer webmail detection for the email field's "business only" rule.
+ * Mirror of the app's `src/lib/onboarding-email-domain.ts` (the consumer-domain
+ * set + helpers) so the SDK's client validation agrees with the server.
+ */
+
+const CONSUMER_EMAIL_DOMAINS = new Set([
+	"gmail.com",
+	"googlemail.com",
+	"yahoo.com",
+	"yahoo.co.uk",
+	"yahoo.fr",
+	"yahoo.de",
+	"hotmail.com",
+	"hotmail.co.uk",
+	"outlook.com",
+	"live.com",
+	"msn.com",
+	"icloud.com",
+	"me.com",
+	"mac.com",
+	"aol.com",
+	"proton.me",
+	"protonmail.com",
+	"pm.me",
+	"yandex.com",
+	"yandex.ru",
+	"mail.com",
+	"gmx.com",
+	"gmx.de",
+	"gmx.net",
+	"hey.com",
+	"fastmail.com",
+	"fastmail.fm",
+	"duck.com",
+	"tutanota.com",
+	"tutamail.com",
+	"qq.com",
+	"163.com",
+	"sbcglobal.net",
+	"att.net",
+	"verizon.net",
+	"comcast.net",
+	"btinternet.com",
+	"sky.com",
+	"orange.fr",
+	"wanadoo.fr",
+	"free.fr",
+	"laposte.net",
+]);
+
+/** The lowercase host portion of an email, or null when malformed. */
+export function getEmailDomain(email: string): string | null {
+	const at = email.lastIndexOf("@");
+	if (at < 0 || at === email.length - 1) return null;
+	return email
+		.slice(at + 1)
+		.trim()
+		.toLowerCase();
+}
+
+/** True for free/personal webmail hosts (so "business only" can reject them). */
+export function isConsumerEmailDomain(host: string): boolean {
+	const h = host.trim().toLowerCase();
+	if (CONSUMER_EMAIL_DOMAINS.has(h)) return true;
+	if (h.endsWith(".gmail.com") || h.endsWith(".googlemail.com")) return true;
+	return false;
+}

package/src/forms-core/file-rules.ts

@@ -0,0 +1,123 @@
+/**
+ * File-upload rules — the single source of truth for what a `file_upload` field
+ * accepts, shared by the builder picker, the live renderers, and all submission
+ * validators (so the client never disagrees with the server).
+ *
+ * Three concerns:
+ *  - **iOS formats:** iPhones hand back HEIC photos + HEVC/`.mov` video. When a
+ *    field allows images/video we transparently accept those too, so a visitor
+ *    isn't blocked by their camera's default codec.
+ *  - **Per-file rules:** allowed type + max size (MB), per the field config.
+ *  - **Form-wide cap:** at most {@link FORM_WIDE_MAX_FILES} files across ALL
+ *    file fields in one submission (anti-abuse; a field's own `maxFiles` still
+ *    caps that field).
+ *
+ * Pure + isomorphic (no DOM, no DB). The SDK mirrors it.
+ */
+
+/** HEIC/HEIF still-image formats (iPhone default photo codec). */
+export const IOS_IMAGE_TYPES = ["image/heic", "image/heif"] as const;
+/** iPhone video container (`.mov`, typically HEVC). */
+export const IOS_VIDEO_TYPES = ["video/quicktime"] as const;
+
+/** Max total files across every `file_upload` field in one submission. */
+export const FORM_WIDE_MAX_FILES = 5;
+
+export interface FileRule {
+	/** Allowed MIME types / wildcards (e.g. `image/*`) / extensions (`.pdf`). */
+	allowedTypes?: string[] | undefined;
+	/** Per-field file count cap. */
+	maxFiles?: number | undefined;
+	/** Per-file size cap in MB. */
+	maxSize?: number | undefined;
+}
+
+/** A minimal file descriptor — works for a real `File` or a stored value. */
+export interface FileLike {
+	name: string;
+	type?: string | undefined;
+	size?: number | undefined;
+}
+
+function ext(name: string): string {
+	const dot = name.lastIndexOf(".");
+	return dot >= 0 ? name.slice(dot).toLowerCase() : "";
+}
+
+/** Does `image/*` / `video/*` appear in the allow-list (so iOS codecs apply)? */
+function allowsImages(allowed: string[]): boolean {
+	return allowed.some(
+		(a) => a === "image/*" || (a.startsWith("image/") && !a.includes("heic")),
+	);
+}
+function allowsVideo(allowed: string[]): boolean {
+	return allowed.some((a) => a === "video/*" || a.startsWith("video/"));
+}
+
+/**
+ * Expand a field's `allowedTypes` to also accept iOS HEIC/HEVC when the field
+ * already allows images/video, then format the `<input accept>` attribute.
+ * Returns undefined (= accept anything) when no allow-list is set.
+ */
+export function buildAcceptAttr(allowed?: string[]): string | undefined {
+	if (!allowed || allowed.length === 0) return undefined;
+	return expandAllowedTypes(allowed).join(",");
+}
+
+/** The allow-list plus the iOS formats implied by it (deduped, order-stable). */
+export function expandAllowedTypes(allowed: string[]): string[] {
+	const out = [...allowed];
+	const add = (t: string) => {
+		if (!out.includes(t)) out.push(t);
+	};
+	if (allowsImages(allowed)) {
+		for (const t of IOS_IMAGE_TYPES) add(t);
+		add(".heic");
+		add(".heif");
+	}
+	if (allowsVideo(allowed)) {
+		for (const t of IOS_VIDEO_TYPES) add(t);
+		add(".mov");
+	}
+	return out;
+}
+
+/** Is `file` an accepted type for `allowed`? Empty/absent allow-list = anything.
+ *  Handles exact MIME, `type/*` wildcards, and `.ext` entries; iOS HEIC/HEVC are
+ *  honored whenever images/video are allowed. */
+export function isFileTypeAllowed(file: FileLike, allowed?: string[]): boolean {
+	if (!allowed || allowed.length === 0) return true;
+	const list = expandAllowedTypes(allowed);
+	const type = (file.type ?? "").toLowerCase();
+	const fileExt = ext(file.name);
+	for (const raw of list) {
+		const a = raw.toLowerCase().trim();
+		if (!a) continue;
+		if (a.startsWith(".")) {
+			if (fileExt === a) return true;
+			continue;
+		}
+		if (a.endsWith("/*")) {
+			if (type.startsWith(`${a.slice(0, -1)}`)) return true;
+			continue;
+		}
+		if (type && type === a) return true;
+	}
+	return false;
+}
+
+/** Per-file validation (type + size). Returns an error string or null. */
+export function validateFile(file: FileLike, rule: FileRule): string | null {
+	if (!isFileTypeAllowed(file, rule.allowedTypes)) {
+		return `File type not allowed: ${file.type || file.name}`;
+	}
+	if (
+		typeof rule.maxSize === "number" &&
+		rule.maxSize > 0 &&
+		typeof file.size === "number" &&
+		file.size > rule.maxSize * 1024 * 1024
+	) {
+		return `"${file.name}" exceeds the ${rule.maxSize} MB limit.`;
+	}
+	return null;
+}