@heyramzi/ui 2.1.0 → 2.2.0

package/src/record/fields.ts

@@ -1,28 +1,33 @@
 // Turns a module's field declarations and a record's values into rows to draw.
 import { formatDay, formatMoney } from "./format.js";
 import type {
-	FieldDef,
-	FieldOption,
-	FieldSectionDef,
-	FieldValue,
-	InfoRow,
+  FieldDef,
+  FieldOption,
+  FieldSectionDef,
+  FieldValue,
+  InfoRow,
 } from "./types.js";
 
+/** A choice or a multi: the types that carry a list of options. */
+function hasOptions(field: FieldDef): field is Extract<FieldDef, { type: "choice" | "multi" }> {
+  return field.type === "choice" || field.type === "multi";
+}
+
 export type FieldValues = Record<string, FieldValue | undefined>;
 
 function isEmpty(value: FieldValue | undefined): boolean {
-	return value == null || value === "" || (Array.isArray(value) && value.length === 0);
+  return value == null || value === "" || (Array.isArray(value) && value.length === 0);
 }
 
 /** A field shows unless its `showWhen` names a field that doesn't hold the wanted value. */
 export function isFieldVisible(field: FieldDef, values: FieldValues): boolean {
-	const rule = field.showWhen;
-	if (!rule) return true;
-	const current = values[rule.key];
-	if (rule.equals === undefined) return !isEmpty(current);
-	const wanted = Array.isArray(rule.equals) ? rule.equals : [rule.equals];
-	const held = Array.isArray(current) ? current : current == null ? [] : [String(current)];
-	return held.some((v) => wanted.includes(v));
+  const rule = field.showWhen;
+  if (!rule) return true;
+  const current = values[rule.key];
+  if (rule.equals === undefined) return !isEmpty(current);
+  const wanted = Array.isArray(rule.equals) ? rule.equals : [rule.equals];
+  const held = Array.isArray(current) ? current : current == null ? [] : [String(current)];
+  return held.some((v) => wanted.includes(v));
 }
 
 /**
@@ -30,8 +35,10 @@ export function isFieldVisible(field: FieldDef, values: FieldValues): boolean {
  * record already holds, so an old value still reads and is never chosen again.
  */
 export function pickableOptions(field: FieldDef, value: FieldValue | undefined): FieldOption[] {
-	const held = Array.isArray(value) ? value : value == null ? [] : [String(value)];
-	return (field.options ?? []).filter((o) => !o.archived || held.includes(o.key));
+  const held = Array.isArray(value) ? value : value == null ? [] : [String(value)];
+  return (hasOptions(field) ? field.options : []).filter(
+    (o) => !o.archived || held.includes(o.key),
+  );
 }
 
 export type FieldGroup = { key: string; label: string | null; fields: FieldDef[] };
@@ -41,102 +48,147 @@ export type FieldGroup = { key: string; label: string | null; fields: FieldDef[]
  * field is not drawn. Fields with no or an unknown section go last under no heading.
  */
 export function groupFields(
-	fields: readonly FieldDef[],
-	sections: readonly FieldSectionDef[],
-	values: FieldValues,
+  fields: readonly FieldDef[],
+  sections: readonly FieldSectionDef[],
+  values: FieldValues,
 ): FieldGroup[] {
-	const visible = fields.filter((f) => isFieldVisible(f, values));
-	const known = new Set(sections.map((s) => s.key));
-	const groups: FieldGroup[] = sections
-		.map((s) => ({ key: s.key, label: s.label as string | null, fields: visible.filter((f) => f.section === s.key) }))
-		.filter((g) => g.fields.length > 0);
-	const loose = visible.filter((f) => !f.section || !known.has(f.section));
-	if (loose.length > 0) groups.push({ key: "", label: null, fields: loose });
-	return groups;
+  const visible = fields.filter((f) => isFieldVisible(f, values));
+  const known = new Set(sections.map((s) => s.key));
+  const groups: FieldGroup[] = sections
+    .map((s) => ({
+      key: s.key,
+      label: s.label as string | null,
+      fields: visible.filter((f) => f.section === s.key),
+    }))
+    .filter((g) => g.fields.length > 0);
+  const loose = visible.filter((f) => !f.section || !known.has(f.section));
+  if (loose.length > 0) groups.push({ key: "", label: null, fields: loose });
+  return groups;
 }
 
 /** What the editor hands back, as the type the field declares. Empty text is null. */
 export function parseSaved(field: FieldDef, raw: string | string[]): FieldValue {
-	if (Array.isArray(raw)) return raw;
-	const text = raw.trim();
-	if (text === "") return null;
-	if (field.type === "money") {
-		const n = Number(text.replace(",", "."));
-		return Number.isFinite(n) ? n : null;
-	}
-	return text;
+  if (Array.isArray(raw)) return raw;
+  const text = raw.trim();
+  if (text === "") return null;
+  if (field.type === "money") {
+    const n = Number(text.replace(",", "."));
+    return Number.isFinite(n) ? n : null;
+  }
+  return text;
 }
 
 export type RowContext = {
-	locale?: string;
-	/** The record's currency, for a money field with none of its own. */
-	currency?: string;
-	onSave?: (key: string, value: FieldValue) => void | Promise<void>;
+  locale?: string;
+  /** The record's currency, for a money field with none of its own. */
+  currency?: string;
+  /** The labels of an `"existing-values"` tags field, by field key: every value used across the records. */
+  tagOptions?: Readonly<Record<string, readonly string[]>>;
+  onSave?: (key: string, value: FieldValue) => void | Promise<void>;
 };
 
 const INPUT: Record<FieldDef["type"], NonNullable<InfoRow["input"]>> = {
-	text: "text",
-	longtext: "longtext",
-	choice: "select",
-	multi: "multi",
-	money: "number",
-	date: "date",
-	url: "url",
-	email: "email",
-	timezone: "text",
+  text: "text",
+  longtext: "longtext",
+  choice: "select",
+  multi: "multi",
+  money: "number",
+  date: "date",
+  url: "url",
+  email: "email",
+  timezone: "text",
+  tags: "tags",
 };
 
 /** One field and its value as an `InfoRow`. */
-export function fieldRow(field: FieldDef, value: FieldValue | undefined, ctx: RowContext = {}): InfoRow {
-	const row: InfoRow = {
-		id: field.key,
-		label: field.label,
-		input: INPUT[field.type],
-		placeholder: field.placeholder,
-		required: field.required,
-	};
-	const optionOf = (key: string) => field.options?.find((o) => o.key === key);
+export function fieldRow(
+  field: FieldDef,
+  value: FieldValue | undefined,
+  ctx: RowContext = {},
+): InfoRow {
+  const row: InfoRow = {
+    id: field.key,
+    label: field.label,
+    input: INPUT[field.type],
+    placeholder: field.placeholder,
+    required: field.required,
+  };
+  const optionOf = (key: string) =>
+    hasOptions(field) ? field.options.find((o) => o.key === key) : undefined;
+
+  if (!isEmpty(value)) {
+    switch (field.type) {
+      case "choice": {
+        const option = optionOf(String(value));
+        row.value = option?.label ?? String(value);
+        row.tone = option?.tone;
+        break;
+      }
+      case "multi": {
+        const keys = Array.isArray(value) ? value : [String(value)];
+        row.chips = keys.map((k) => ({ label: optionOf(k)?.label ?? k, tone: optionOf(k)?.tone }));
+        break;
+      }
+      case "tags": {
+        const labels = Array.isArray(value) ? value : [String(value)];
+        row.chips = labels.map((label) => ({ label }));
+        break;
+      }
+      case "money":
+        row.value = formatMoney(Number(value), field.currency ?? ctx.currency, ctx.locale);
+        break;
+      case "date":
+        row.value = formatDay(String(value), ctx.locale);
+        break;
+      case "url":
+        row.value = String(value)
+          .replace(/^https?:\/\/(www\.)?/, "")
+          .replace(/\/$/, "");
+        row.href = String(value);
+        break;
+      case "email":
+        row.value = String(value);
+        row.href = `mailto:${value}`;
+        break;
+      case "text":
+      case "longtext":
+      case "timezone":
+        row.value = String(value);
+        break;
+      default:
+        return field satisfies never;
+    }
+  }
 
-	if (!isEmpty(value)) {
-		switch (field.type) {
-			case "choice": {
-				const option = optionOf(String(value));
-				row.value = option?.label ?? String(value);
-				row.tone = option?.tone;
-				break;
-			}
-			case "multi": {
-				const keys = Array.isArray(value) ? value : [String(value)];
-				row.chips = keys.map((k) => ({ label: optionOf(k)?.label ?? k, tone: optionOf(k)?.tone }));
-				break;
-			}
-			case "money":
-				row.value = formatMoney(Number(value), field.currency ?? ctx.currency, ctx.locale);
-				break;
-			case "date":
-				row.value = formatDay(String(value), ctx.locale);
-				break;
-			case "url":
-				row.value = String(value).replace(/^https?:\/\/(www\.)?/, "").replace(/\/$/, "");
-				row.href = String(value);
-				break;
-			case "email":
-				row.value = String(value);
-				row.href = `mailto:${value}`;
-				break;
-			default:
-				row.value = String(value);
-		}
-	}
+  if (field.type === "choice" || field.type === "multi") {
+    row.options = pickableOptions(field, value).map((o) => ({
+      value: o.key,
+      label: o.label,
+      tone: o.tone,
+    }));
+    row.editValue = Array.isArray(value)
+      ? value
+      : value == null
+        ? field.type === "multi"
+          ? []
+          : ""
+        : String(value);
+  } else if (!isEmpty(value)) {
+    row.editValue = String(value);
+  }
 
-	if (field.type === "choice" || field.type === "multi") {
-		row.options = pickableOptions(field, value).map((o) => ({ value: o.key, label: o.label, tone: o.tone }));
-		row.editValue = Array.isArray(value) ? value : value == null ? (field.type === "multi" ? [] : "") : String(value);
-	} else if (!isEmpty(value)) {
-		row.editValue = String(value);
-	}
+  if (field.type === "tags") {
+    row.tags = {
+      // "existing-values" is the host's to fill: only it can see the other records.
+      options:
+        ctx.tagOptions?.[field.key] ?? (field.options === "existing-values" ? [] : field.options),
+      allowCreate: field.allowCreate,
+      max: field.max,
+    };
+    row.editValue = Array.isArray(value) ? value : [];
+  }
 
-	const onSave = ctx.onSave;
-	if (onSave) row.onSave = (raw) => onSave(field.key, parseSaved(field, raw));
-	return row;
+  const onSave = ctx.onSave;
+  if (onSave) row.onSave = (raw) => onSave(field.key, parseSaved(field, raw));
+  return row;
 }

package/src/record/format.ts

@@ -4,84 +4,91 @@
 const DAY_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 
 function parse(iso: string): { date: Date; timeZone?: string } {
-	return DAY_ONLY.test(iso)
-		? { date: new Date(`${iso}T00:00:00Z`), timeZone: "UTC" }
-		: { date: new Date(iso) };
+  return DAY_ONLY.test(iso)
+    ? { date: new Date(`${iso}T00:00:00Z`), timeZone: "UTC" }
+    : { date: new Date(iso) };
 }
 
 /** "Mon 26 Oct". */
 export function formatDay(iso: string, locale = "en-GB"): string {
-	const { date, timeZone } = parse(iso);
-	return new Intl.DateTimeFormat(locale, {
-		weekday: "short",
-		day: "numeric",
-		month: "short",
-		timeZone,
-	}).format(date);
+  const { date, timeZone } = parse(iso);
+  return new Intl.DateTimeFormat(locale, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    timeZone,
+  }).format(date);
 }
 
 /** "Sat 24 to Sun 25 Oct" in one month, two full days across months, one day when the ends match. */
-export function formatRange(start: string, end: string | null | undefined, locale = "en-GB"): string {
-	if (!end || end.slice(0, 10) === start.slice(0, 10)) return formatDay(start, locale);
-	const a = parse(start);
-	const b = parse(end);
-	const sameMonth =
-		a.date.getUTCFullYear() === b.date.getUTCFullYear() && a.date.getUTCMonth() === b.date.getUTCMonth();
-	if (!sameMonth) return `${formatDay(start, locale)} to ${formatDay(end, locale)}`;
-	const part = (d: Date) =>
-		new Intl.DateTimeFormat(locale, { weekday: "short", day: "numeric", timeZone: "UTC" }).format(d);
-	const month = new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" }).format(b.date);
-	return `${part(a.date)} to ${part(b.date)} ${month}`;
+export function formatRange(
+  start: string,
+  end: string | null | undefined,
+  locale = "en-GB",
+): string {
+  if (!end || end.slice(0, 10) === start.slice(0, 10)) return formatDay(start, locale);
+  const a = parse(start);
+  const b = parse(end);
+  const sameMonth =
+    a.date.getUTCFullYear() === b.date.getUTCFullYear() &&
+    a.date.getUTCMonth() === b.date.getUTCMonth();
+  if (!sameMonth) return `${formatDay(start, locale)} to ${formatDay(end, locale)}`;
+  const part = (d: Date) =>
+    new Intl.DateTimeFormat(locale, { weekday: "short", day: "numeric", timeZone: "UTC" }).format(
+      d,
+    );
+  const month = new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" }).format(b.date);
+  return `${part(a.date)} to ${part(b.date)} ${month}`;
 }
 
 /** "Oct 21" without a weekday, for a timeline day header. */
 export function formatDayHeader(day: string, locale = "en-GB"): string {
-	return new Intl.DateTimeFormat(locale, {
-		weekday: "short",
-		day: "numeric",
-		month: "short",
-		year: "numeric",
-		timeZone: "UTC",
-	}).format(new Date(`${day}T00:00:00Z`));
+  return new Intl.DateTimeFormat(locale, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    timeZone: "UTC",
+  }).format(new Date(`${day}T00:00:00Z`));
 }
 
 /** "14:30" in the viewer's zone, or the given one. */
 export function formatTime(iso: string, locale = "en-GB", timeZone?: string): string {
-	return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", timeZone }).format(
-		new Date(iso),
-	);
+  return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", timeZone }).format(
+    new Date(iso),
+  );
 }
 
 /** "3 days ago", "in 2 weeks", "now". */
 export function formatAge(iso: string, now: Date | number = Date.now(), locale = "en-GB"): string {
-	const seconds = Math.round((new Date(iso).getTime() - new Date(now).getTime()) / 1000);
-	const abs = Math.abs(seconds);
-	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "long" });
-	const units: [number, Intl.RelativeTimeFormatUnit][] = [
-		[31_536_000, "year"],
-		[2_592_000, "month"],
-		[604_800, "week"],
-		[86_400, "day"],
-		[3_600, "hour"],
-		[60, "minute"],
-	];
-	for (const [size, unit] of units) {
-		if (abs >= size) return rtf.format(Math.round(seconds / size), unit);
-	}
-	return rtf.format(0, "second");
+  const seconds = Math.round((new Date(iso).getTime() - new Date(now).getTime()) / 1000);
+  const abs = Math.abs(seconds);
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "long" });
+  const units: [number, Intl.RelativeTimeFormatUnit][] = [
+    [31_536_000, "year"],
+    [2_592_000, "month"],
+    [604_800, "week"],
+    [86_400, "day"],
+    [3_600, "hour"],
+    [60, "minute"],
+  ];
+  for (const [size, unit] of units) {
+    if (abs >= size) return rtf.format(Math.round(seconds / size), unit);
+  }
+  return rtf.format(0, "second");
 }
 
 /** "€12,000". `compact` gives "€12K". */
 export function formatMoney(
-	amount: number,
-	currency = "EUR",
-	locale = "en-GB",
-	compact = false,
+  amount: number,
+  currency = "EUR",
+  locale = "en-GB",
+  compact = false,
 ): string {
-	return new Intl.NumberFormat(locale, {
-		style: "currency",
-		currency,
-		maximumFractionDigits: compact || Number.isInteger(amount) ? 0 : 2,
-		notation: compact ? "compact" : "standard",
-	}).format(amount);
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    maximumFractionDigits: compact || Number.isInteger(amount) ? 0 : 2,
+    notation: compact ? "compact" : "standard",
+  }).format(amount);
 }

package/src/record/index.ts

@@ -12,43 +12,57 @@ export { default as InfoList } from "./info-list.svelte";
 export { DEFAULT_RECORD_FILTERS, DEFAULT_RECORD_KINDS } from "./kinds.js";
 export { DEFAULT_RECORD_LABELS, resolveLabels } from "./types.js";
 export {
-	activeProjects,
-	dayRelation,
-	eventsForFilter,
-	filterCounts,
-	foldGroups,
-	groupEventsByDay,
-	groupSteps,
-	latestWhereWeAre,
-	localDay,
-	mergeClientEvents,
-	nextAcrossProjects,
-	nudgeStep,
-	reorderIds,
-	rollupProjects,
-	stepMarkers,
-	stepProgress,
+  activeProjects,
+  dayRelation,
+  eventsForFilter,
+  filterCounts,
+  foldGroups,
+  groupEventsByDay,
+  groupSteps,
+  latestWhereWeAre,
+  localDay,
+  mergeClientEvents,
+  nextAcrossProjects,
+  nudgeStep,
+  reorderIds,
+  rollupProjects,
+  stepMarkers,
+  stepProgress,
 } from "./logic.js";
-export { fieldRow, groupFields, isFieldVisible, parseSaved, pickableOptions } from "./fields.js";
+export {
+  fieldRow,
+  groupFields,
+  isFieldVisible,
+  parseSaved,
+  pickableOptions,
+} from "./fields.js";
 export { formatAge, formatDay, formatMoney, formatRange } from "./format.js";
-export type { ClientRollup, DayGroup, LatestStatus, MoneyTotals, ProjectEvents } from "./logic.js";
+export type {
+  ClientRollup,
+  DayGroup,
+  LatestStatus,
+  MoneyTotals,
+  ProjectEvents,
+} from "./logic.js";
 export type { FieldValues } from "./fields.js";
 export type {
-	FieldDef,
-	FieldOption,
-	FieldSectionDef,
-	FieldType,
-	FieldValue,
-	InfoRow,
-	RecordEvent,
-	RecordFilterDef,
-	RecordKindDef,
-	RecordLabels,
-	RecordNext,
-	RecordSummary,
-	StageCategory,
-	StageDef,
-	StepDef,
-	StepGroupDef,
-	StepMarker,
+  FieldDef,
+  FieldOption,
+  FieldSectionDef,
+  TagsConfig,
+  FieldType,
+  FieldTypes,
+  FieldValue,
+  InfoRow,
+  RecordEvent,
+  RecordFilterDef,
+  RecordKindDef,
+  RecordLabels,
+  RecordNext,
+  RecordSummary,
+  StageCategory,
+  StageDef,
+  StepDef,
+  StepGroupDef,
+  StepMarker,
 } from "./types.js";