@twentyfirstmedia/ui-core 0.6.0 → 0.7.0

package/src/components/types.ts

@@ -2833,3 +2833,325 @@ export interface QrCodeProps extends BaseProps {
   /** Accessible name (default "QR code"). */
   label?: string;
 }
+
+/* ── Life: wellbeing, health, goals, AI insights, consent ── */
+export interface Habit {
+  id: string;
+  label: string;
+  icon?: IconName;
+  tint?: Tint;
+  /** One entry per day, oldest first, today last: true done, false missed, null no data. */
+  days: (boolean | null)[];
+  /** Days in a row (shown as "12-day streak"). */
+  streak?: number;
+  /** A short target, e.g. "8 glasses" or "3× a week". */
+  goal?: string;
+}
+export interface HabitTrackerProps extends BaseProps {
+  habits: Habit[];
+  /** Labels of the day columns, oldest first (default: weekday initials ending today). */
+  dayLabels?: string[];
+  /** Today's box of a habit was toggled. */
+  onToggle?: (id: string, done: boolean) => void;
+  /** Accessible name of the list (default "Habits"). */
+  label?: string;
+}
+export type MoodLevel = 1 | 2 | 3 | 4 | 5;
+export interface MoodPickerProps extends BaseProps {
+  value?: MoodLevel | null;
+  defaultValue?: MoodLevel | null;
+  onChange?: (mood: MoodLevel) => void;
+  /** The question (default "How are you feeling?"). */
+  label?: ReactNode;
+  /** Words for the five levels, lowest first (default Awful, Low, Okay, Good, Great). */
+  levels?: [string, string, string, string, string];
+  /** Only the faces; the words stay as accessible names. */
+  compact?: boolean;
+}
+export interface VitalTileProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  label: string;
+  value: number;
+  unit?: string;
+  icon?: IconName;
+  /** The healthy range [low, high]; the tile says whether the value is below, in or above it. */
+  normal?: [number, number];
+  /** The whole scale of the band [min, max] (default: the normal range with room on both sides). */
+  scale?: [number, number];
+  /** Recent values, oldest first, drawn as a sparkline. */
+  trend?: number[];
+  /** Under the value: when it was measured, the source … */
+  caption?: ReactNode;
+  /** Digits after the decimal point (default 0). */
+  digits?: number;
+}
+export interface ActivityRing {
+  label: string;
+  value: number;
+  goal: number;
+  unit?: string;
+  tint?: Tint;
+}
+export interface ActivityRingsProps extends BaseProps {
+  /** Outer ring first. */
+  rings: ActivityRing[];
+  /** Diameter of the rings (default 132). */
+  size?: number;
+  /** Hide the legend beside the rings. */
+  legend?: boolean;
+  /** Accessible name (default "Activity"). */
+  label?: string;
+}
+export type SleepStage = "awake" | "rem" | "light" | "deep";
+export interface SleepSegment {
+  stage: SleepStage;
+  start: Date | string | number;
+  end: Date | string | number;
+}
+export interface SleepChartProps extends BaseProps {
+  /** The night in order, from falling asleep to getting up. */
+  segments: SleepSegment[];
+  /** Accessible name (default "Sleep stages"). */
+  label?: string;
+  /** Hide the totals per stage under the chart. */
+  summary?: boolean;
+}
+export interface MedicationItem {
+  id: string;
+  name: string;
+  dose?: string;
+  /** When, as shown ("08:00", "With breakfast"). */
+  time: string;
+  /** Set by the app, which knows the clock: default "taken" when `taken`, else "due". */
+  status?: "taken" | "due" | "missed" | "upcoming";
+  taken?: boolean;
+  note?: string;
+  icon?: IconName;
+}
+export interface MedicationListProps extends BaseProps {
+  items: MedicationItem[];
+  /** "Mark as taken" was pressed. */
+  onTake?: (id: string) => void;
+  /** Accessible name (default "Medication"). */
+  label?: string;
+}
+export interface JournalEntryProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  date: Date | string | number;
+  title?: string;
+  mood?: MoodLevel;
+  tags?: string[];
+  children?: ReactNode;
+  /** Buttons at the end (edit, share …). */
+  actions?: ReactNode;
+}
+export interface GoalCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  title: string;
+  value: number;
+  target: number;
+  /** How to show value and target (default number). */
+  format?: "number" | "money" | "percent";
+  /** Unit after numbers ("km", "books"). */
+  unit?: string;
+  currency?: string;
+  due?: Date | string | number;
+  icon?: IconName;
+  tint?: Tint;
+  milestones?: { label: string; done?: boolean }[];
+  /** A note under the progress ("€250 a month keeps you on track"). */
+  note?: ReactNode;
+}
+export interface InsightCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  title: string;
+  children?: ReactNode;
+  icon?: IconName;
+  tone?: "info" | "success" | "warning" | "highlight";
+  /** Above the title: area and time ("Money · 2 h ago"). */
+  meta?: ReactNode;
+  /** Where the insight comes from, as chips (like chat sources). */
+  sources?: Source[];
+  /** Why the assistant shows it; folded away behind "Why am I seeing this?". */
+  why?: ReactNode;
+  onAccept?: () => void;
+  acceptLabel?: string;
+  onSnooze?: () => void;
+  onDismiss?: () => void;
+}
+export interface ConsentScope {
+  id: string;
+  label: string;
+  description?: string;
+  granted: boolean;
+  /** Needed for the connection to work at all: shown, not switchable. */
+  required?: boolean;
+}
+export interface ConsentConnector {
+  id: string;
+  name: string;
+  icon?: IconName;
+  /** A logo instead of the icon. */
+  logo?: ReactNode;
+  /** What the assistant uses it for. */
+  purpose?: ReactNode;
+  scopes: ConsentScope[];
+  lastUsed?: Date | string | number;
+}
+export interface ConsentListProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  connectors: ConsentConnector[];
+  onScopeChange?: (connectorId: string, scopeId: string, granted: boolean) => void;
+  onRevoke?: (connectorId: string) => void;
+  /** Accessible name (default "Data access"). */
+  label?: string;
+}
+
+/* ── Life: money, insurance, deadlines, documents ── */
+export interface BudgetCategory {
+  id: string;
+  label: string;
+  icon?: IconName;
+  tint?: Tint;
+  spent: number;
+  limit: number;
+}
+export interface BudgetListProps extends BaseProps {
+  categories: BudgetCategory[];
+  currency?: string;
+  /** A category was picked (to show its transactions). */
+  onSelect?: (id: string) => void;
+  /** Accessible name (default "Budgets"). */
+  label?: string;
+}
+export interface Subscription {
+  id: string;
+  name: string;
+  icon?: IconName;
+  /** A logo instead of the icon. */
+  logo?: ReactNode;
+  amount: number;
+  period: "week" | "month" | "year";
+  /** Next charge. */
+  next?: Date | string | number;
+  status?: "active" | "trial" | "cancelled";
+  category?: string;
+}
+export interface SubscriptionListProps extends BaseProps {
+  items: Subscription[];
+  currency?: string;
+  /** "Manage" on a subscription (cancel, change plan …). */
+  onManage?: (id: string) => void;
+  /** Hide the monthly and yearly totals. */
+  totals?: boolean;
+  /** Accessible name (default "Subscriptions"). */
+  label?: string;
+}
+export interface NetWorthCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  assets: { label: string; value: number; icon?: IconName }[];
+  liabilities?: { label: string; value: number; icon?: IconName }[];
+  /** Net worth over time, oldest first. */
+  history?: number[];
+  /** Change over `changeLabel` (e.g. +1,240 "since October"). */
+  change?: number;
+  changeLabel?: string;
+  currency?: string;
+  title?: string;
+}
+export interface DeadlineItem {
+  id: string;
+  title: string;
+  /** What kind: "Contract", "ID card", "Tax" … */
+  kind?: string;
+  icon?: IconName;
+  date: Date | string | number;
+  amount?: number;
+  done?: boolean;
+  note?: string;
+}
+export interface DeadlineListProps extends BaseProps {
+  items: DeadlineItem[];
+  /** The day to count from (default: now). Set it for server rendering and stable output. */
+  today?: Date | string | number;
+  /** Days ahead that count as soon (default 14). */
+  soon?: number;
+  currency?: string;
+  onDone?: (id: string) => void;
+  /** Accessible name (default "Deadlines"). */
+  label?: string;
+}
+export interface PolicyCardProps extends BaseProps {
+  /** `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. */
+  surface?: Surface;
+  /** The kind of insurance: "Household contents", "Liability" … */
+  type: string;
+  insurer: string;
+  icon?: IconName;
+  tint?: Tint;
+  policyNumber?: string;
+  /** Show only the last four characters of the policy number. */
+  maskNumber?: boolean;
+  /** Sum insured: a number (money) or text ("unlimited"). */
+  coverage?: number | ReactNode;
+  premium?: { amount: number; period: "month" | "quarter" | "year" };
+  deductible?: number;
+  renews?: Date | string | number;
+  status?: "active" | "pending" | "expiring" | "lapsed";
+  currency?: string;
+  /** Buttons at the foot (documents, report a claim …). */
+  actions?: ReactNode;
+}
+export interface CoverageRow {
+  id: string;
+  risk: string;
+  status: "covered" | "partial" | "none";
+  note?: ReactNode;
+  /** Which policy covers it. */
+  policy?: string;
+}
+export interface CoverageMatrixProps extends BaseProps {
+  rows: CoverageRow[];
+  /** Accessible name and caption (default "Coverage"). */
+  label?: string;
+}
+export interface ClaimStep {
+  label: string;
+  date?: Date | string | number;
+  state: "done" | "current" | "todo" | "failed";
+  note?: ReactNode;
+}
+export interface ClaimTimelineProps extends BaseProps {
+  title: string;
+  /** Reference and insurer under the title. */
+  meta?: ReactNode;
+  amount?: number;
+  currency?: string;
+  steps: ClaimStep[];
+}
+export interface LifeDocument {
+  id: string;
+  title: string;
+  category?: string;
+  icon?: IconName;
+  holder?: string;
+  expires?: Date | string | number;
+  /** "PDF · 240 KB" */
+  meta?: string;
+}
+export interface DocumentListProps extends BaseProps {
+  documents: LifeDocument[];
+  /** The day to count expiry from (default: now). */
+  today?: Date | string | number;
+  /** Days ahead that count as expiring soon (default 60). */
+  soon?: number;
+  onOpen?: (id: string) => void;
+  /** Accessible name (default "Documents"). */
+  label?: string;
+}

package/src/index.ts

@@ -29,6 +29,8 @@ export {
   FEEDBACK_STRINGS,
   FORM_STRINGS,
   FORMS_STRINGS,
+  HOUSEHOLD_STRINGS,
+  LIFE_STRINGS,
   MAIL_STRINGS,
   MEDIA_STRINGS,
   NAVIGATION_STRINGS,

package/src/strings.ts

@@ -492,6 +492,100 @@ export interface UIStrings {
   contrastAA: string;
   contrastAALarge: string;
   contrastFails: string;
+  /* Life: HabitTracker, MoodPicker, VitalTile, ActivityRings, SleepChart, MedicationList, GoalCard, InsightCard, ConsentList */
+  habits: string;
+  /** "12-day streak" */
+  habitStreak: (days: number) => string;
+  /** "Mark {habit} done today" */
+  markHabitDone: (habit: string) => string;
+  habitDone: string;
+  habitMissed: string;
+  habitNoData: string;
+  howAreYou: string;
+  /** The five mood words, lowest first. */
+  moodLevels: [string, string, string, string, string];
+  inRange: string;
+  belowRange: string;
+  aboveRange: string;
+  /** "Normal 60–100" */
+  normalRange: (low: string, high: string) => string;
+  activity: string;
+  /** "6,240 of 8,000 steps" */
+  ofGoal: (value: string, goal: string) => string;
+  sleepStages: string;
+  /** Names of the sleep stages. */
+  sleepStageNames: Record<"awake" | "rem" | "light" | "deep", string>;
+  /** "7 h 32 min" */
+  durationHm: (hours: number, minutes: number) => string;
+  /** "Asleep 7 h 32 min" */
+  totalSleep: (duration: string) => string;
+  medication: string;
+  medTaken: string;
+  medDue: string;
+  medMissed: string;
+  medUpcoming: string;
+  /** "Mark {name} as taken" */
+  markTaken: (name: string) => string;
+  /** "By {date}" */
+  dueBy: (date: string) => string;
+  whyInsight: string;
+  insightAccept: string;
+  insightSnooze: string;
+  dataAccess: string;
+  revokeAccess: string;
+  /** "Last used {date}" */
+  lastUsed: (date: string) => string;
+  notUsedYet: string;
+  requiredScope: string;
+  /* Life: BudgetList, SubscriptionList, NetWorthCard, DeadlineList, PolicyCard, CoverageMatrix, ClaimTimeline, DocumentList */
+  budgets: string;
+  /** "€120 left" */
+  budgetLeft: (amount: string) => string;
+  /** "€40 over" */
+  budgetOver: (amount: string) => string;
+  subscriptions: string;
+  /** "€86 a month" */
+  perMonthTotal: (amount: string) => string;
+  /** "€1,032 a year" */
+  perYearTotal: (amount: string) => string;
+  /** "Manage {name}" */
+  manageItem: (name: string) => string;
+  /** "Trial" */
+  trialEnds: string;
+  cancelledLabel: string;
+  /** "Next on {date}" */
+  nextCharge: (date: string) => string;
+  /** Words for billing periods. */
+  periodWord: Record<"week" | "month" | "quarter" | "year", string>;
+  netWorth: string;
+  assetsLabel: string;
+  liabilitiesLabel: string;
+  deadlines: string;
+  /** "Overdue by 3 days" */
+  overdueBy: (days: number) => string;
+  dueToday: string;
+  /** "In 12 days" */
+  dueIn: (days: number) => string;
+  /** "Mark {title} done" */
+  markDone: (title: string) => string;
+  coverageLabel: string;
+  covered: string;
+  partlyCovered: string;
+  notCovered: string;
+  sumInsured: string;
+  deductibleLabel: string;
+  /** "Renews {date}" */
+  renewsOn: (date: string) => string;
+  policyNo: string;
+  /** Words for a policy's status. */
+  policyStatus: Record<"active" | "pending" | "expiring" | "lapsed", string>;
+  claimAmount: string;
+  documents: string;
+  expired: string;
+  /** "Expires in 40 days" */
+  expiresIn: (days: number) => string;
+  /** "Valid until {date}" */
+  expiresOn: (date: string) => string;
   // @@KEYS
 }
 
@@ -1491,6 +1585,151 @@ export const WORKSPACE_STRINGS: Pick<
   accept: "Accept",
 };
 
+/** Strings of the components in `life.tsx`. */
+export const LIFE_STRINGS: Pick<
+  UIStrings,
+  | "habits"
+  | "habitStreak"
+  | "markHabitDone"
+  | "habitDone"
+  | "habitMissed"
+  | "habitNoData"
+  | "howAreYou"
+  | "moodLevels"
+  | "inRange"
+  | "belowRange"
+  | "aboveRange"
+  | "normalRange"
+  | "activity"
+  | "ofGoal"
+  | "sleepStages"
+  | "sleepStageNames"
+  | "durationHm"
+  | "totalSleep"
+  | "medication"
+  | "medTaken"
+  | "medDue"
+  | "medMissed"
+  | "medUpcoming"
+  | "markTaken"
+  | "dueBy"
+  | "whyInsight"
+  | "insightAccept"
+  | "insightSnooze"
+  | "dataAccess"
+  | "revokeAccess"
+  | "lastUsed"
+  | "notUsedYet"
+  | "requiredScope"
+> = {
+  habits: "Habits",
+  habitStreak: (days) => `${days}-day streak`,
+  markHabitDone: (habit) => `Mark ${habit} done today`,
+  habitDone: "Done",
+  habitMissed: "Missed",
+  habitNoData: "No entry",
+  howAreYou: "How are you feeling?",
+  moodLevels: ["Awful", "Low", "Okay", "Good", "Great"],
+  inRange: "In range",
+  belowRange: "Below range",
+  aboveRange: "Above range",
+  normalRange: (low, high) => `Normal ${low}–${high}`,
+  activity: "Activity",
+  ofGoal: (value, goal) => `${value} of ${goal}`,
+  sleepStages: "Sleep stages",
+  sleepStageNames: { awake: "Awake", rem: "REM", light: "Light", deep: "Deep" },
+  durationHm: (hours, minutes) =>
+    hours ? (minutes ? `${hours} h ${minutes} min` : `${hours} h`) : `${minutes} min`,
+  totalSleep: (duration) => `Asleep ${duration}`,
+  medication: "Medication",
+  medTaken: "Taken",
+  medDue: "Due",
+  medMissed: "Missed",
+  medUpcoming: "Later",
+  markTaken: (name) => `Mark ${name} as taken`,
+  dueBy: (date) => `By ${date}`,
+  whyInsight: "Why am I seeing this?",
+  insightAccept: "Do it",
+  insightSnooze: "Later",
+  dataAccess: "Data access",
+  revokeAccess: "Revoke access",
+  lastUsed: (date) => `Last used ${date}`,
+  notUsedYet: "Not used yet",
+  requiredScope: "Required",
+};
+
+/** Strings of the components in `household.tsx`. */
+export const HOUSEHOLD_STRINGS: Pick<
+  UIStrings,
+  | "budgets"
+  | "budgetLeft"
+  | "budgetOver"
+  | "subscriptions"
+  | "perMonthTotal"
+  | "perYearTotal"
+  | "manageItem"
+  | "trialEnds"
+  | "cancelledLabel"
+  | "nextCharge"
+  | "periodWord"
+  | "netWorth"
+  | "assetsLabel"
+  | "liabilitiesLabel"
+  | "deadlines"
+  | "overdueBy"
+  | "dueToday"
+  | "dueIn"
+  | "markDone"
+  | "coverageLabel"
+  | "covered"
+  | "partlyCovered"
+  | "notCovered"
+  | "sumInsured"
+  | "deductibleLabel"
+  | "renewsOn"
+  | "policyNo"
+  | "policyStatus"
+  | "claimAmount"
+  | "documents"
+  | "expired"
+  | "expiresIn"
+  | "expiresOn"
+> = {
+  budgets: "Budgets",
+  budgetLeft: (amount) => `${amount} left`,
+  budgetOver: (amount) => `${amount} over`,
+  subscriptions: "Subscriptions",
+  perMonthTotal: (amount) => `${amount} a month`,
+  perYearTotal: (amount) => `${amount} a year`,
+  manageItem: (name) => `Manage ${name}`,
+  trialEnds: "Trial",
+  cancelledLabel: "Cancelled",
+  nextCharge: (date) => `Next on ${date}`,
+  periodWord: { week: "week", month: "month", quarter: "quarter", year: "year" },
+  netWorth: "Net worth",
+  assetsLabel: "Assets",
+  liabilitiesLabel: "Liabilities",
+  deadlines: "Deadlines",
+  overdueBy: (days) => (days === 1 ? "Overdue by 1 day" : `Overdue by ${days} days`),
+  dueToday: "Today",
+  dueIn: (days) => (days === 1 ? "Tomorrow" : `In ${days} days`),
+  markDone: (title) => `Mark ${title} done`,
+  coverageLabel: "Coverage",
+  covered: "Covered",
+  partlyCovered: "Partly",
+  notCovered: "Not covered",
+  sumInsured: "Sum insured",
+  deductibleLabel: "Deductible",
+  renewsOn: (date) => `Renews ${date}`,
+  policyNo: "Policy no.",
+  policyStatus: { active: "Active", pending: "Pending", expiring: "Expiring", lapsed: "Lapsed" },
+  claimAmount: "Claimed",
+  documents: "Documents",
+  expired: "Expired",
+  expiresIn: (days) => (days === 1 ? "Expires tomorrow" : `Expires in ${days} days`),
+  expiresOn: (date) => `Valid until ${date}`,
+};
+
 /** The English defaults: every group together. */
 export const DEFAULT_STRINGS: UIStrings = /* @__PURE__ */ Object.assign(
   {},
@@ -1509,6 +1748,8 @@ export const DEFAULT_STRINGS: UIStrings = /* @__PURE__ */ Object.assign(
   FEEDBACK_STRINGS,
   FORM_STRINGS,
   FORMS_STRINGS,
+  HOUSEHOLD_STRINGS,
+  LIFE_STRINGS,
   MAIL_STRINGS,
   MEDIA_STRINGS,
   NAVIGATION_STRINGS,