@appinternalleads/ui 0.2.0 → 0.4.0

package/src/components/onboarding/contact-import/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "contact-import",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -41,7 +43,40 @@
     "oauthNote": "You’ll sign in to {source} in a new window. Nothing is imported until you confirm.",
     "emptyTitle": "No import sources",
     "emptyBody": "Ask an admin to turn on at least one source.",
-    "emptyCta": "Refresh"
+    "emptyCta": "Refresh",
+    "sourceFieldLabel": "Source",
+    "sourcesChipOne": "{n} source",
+    "sourcesChipOther": "{n} sources",
+    "importedLabel": "Imported",
+    "importLabel": "Import {noun}",
+    "fromSourceHint": "From {source}",
+    "keepOpenHint": "Keep this window open",
+    "readyHint": "Ready to review",
+    "nothingImportedHint": "Nothing was imported",
+    "addCsvHint": "Add a CSV file to continue",
+    "fileLabel": "{noun} file",
+    "csvHint": "CSV · up to {max} MB",
+    "dropEmptyText": "Drop a file here or click to upload",
+    "dropDragOverText": "Release to upload",
+    "dropUploadingText": "Uploading…",
+    "dropUploadedText": "Uploaded",
+    "wrongFileTypeText": "This file type isn’t supported",
+    "fileTooLargeText": "File is larger than {max} MB",
+    "chooseAnotherLabel": "Choose another file",
+    "replaceFileLabel": "Replace",
+    "removeFileLabel": "Remove file",
+    "cancelUploadLabel": "Cancel upload",
+    "demoInvalidFileName": "contacts.xlsx",
+    "importingProgressLabel": "Importing {noun}",
+    "foundText": "{n} {noun} found",
+    "skippedText": "{n} skipped — {reason}",
+    "skippedRowsLabel": "Skipped rows",
+    "rowLabel": "Row {n}",
+    "moreRowsText": "and {n} more",
+    "viewLabel": "View",
+    "hideLabel": "Hide",
+    "viewSkippedLabel": "View skipped rows",
+    "hideSkippedLabel": "Hide skipped rows"
   },
   "cases": {
     "case1": {},

package/src/components/onboarding/conversion-funnel/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "conversion-funnel",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -214,4 +216,4 @@
       "scenario": "Loads, then cascades. Nothing converted, so the last stage has no bar and a 100% drop-off."
     }
   }
-}
+}

package/src/components/onboarding/criteria-spider/CriteriaSpiderView.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { Box, Pressable, Radar, Select, Text } from '../../../core';
 import { blockRadii, useDs, type DensityName } from '../../../tokens';
-import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { fill, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
 import type { OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { OnboardingCard } from '../shared/OnboardingCard';
@@ -109,7 +109,7 @@ function Valid({
   const grow = clock.done ? 1 : progress(t, 0, M15.fillMs);
   const vOf = (i: number) => (clock.done ? shown[1 + i]! : vals[i]!);
   const { best, worst } = bestWorst(vals);
-  const band = spiderBand(item, max);
+  const band = spiderBand(item, max, config);
   const scoreShown = clock.done ? shown[0]! : item.score * grow;
   const lateIn = clock.done ? 1 : progress(t, 1200, M15.toneMs);
   const mobile = viewport === 'mobile';
@@ -196,7 +196,7 @@ function Valid({
               {cmp ? (
                 <Box style={{ minWidth: 150 }}>
                   <Select
-                    aria-label="Compare with"
+                    aria-label={config.compareWithLabel}
                     value={cmp.id}
                     options={others.map(o => ({ value: o.id, label: o.name }))}
                     onChange={id => { setCompare(id); onCompare?.(id); }}
@@ -211,12 +211,12 @@ function Valid({
                 press="scale"
                 minHeight={28}
                 style={{ paddingHorizontal: 10, borderRadius: blockRadii.inset, borderWidth: 1, borderColor: colors.hairlineStrong, backgroundColor: cmp ? colors.surfaceSunken : colors.surface1 }}>
-                <Text style={{ fontSize: 12, fontWeight: '600', color: colors.textPrimary }}>{cmp ? 'Comparing' : 'Compare'}</Text>
+                <Text style={{ fontSize: 12, fontWeight: '600', color: colors.textPrimary }}>{cmp ? config.comparingLabel : config.compareLabel}</Text>
               </Pressable>
             </Box>
           ) : null}
           <View role="status" aria-live="polite" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', left: -10000 }}>
-            <Text>{cmp ? `Comparing with ${cmp.name}` : ''}</Text>
+            <Text>{cmp ? fill(config.comparingWithText, { name: cmp.name }) : ''}</Text>
           </View>
           <View style={{ position: 'relative', width: '100%', maxWidth: mobile ? 300 : 380, alignSelf: 'center' }}>
             <Radar
@@ -225,7 +225,7 @@ function Valid({
               rings={rings}
               spokes={spokes}
               ringColor={colors.hairline}
-              label={radarSummary(item, config.criteria.map(k => k.label), max, cmp)}
+              label={radarSummary(item, config.criteria.map(k => k.label), max, cmp, config)}
               shapes={[
                 ...(showOverlay ? [{ points: overlayPts, stroke: colors.textSecondary, strokeWidth: 1.5, dash: '4 3', opacity: overlayOp }] : []),
                 { points: primary, stroke: colors.textPrimary, strokeWidth: 1.5, fill: colors.textPrimary, fillOpacity: 0.1 * grow },
@@ -256,15 +256,17 @@ function Valid({
           </View>
         </View>
 
-        <View role={'list' as never} aria-label="Criteria" style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 16 } as object}>
+        <View role={'list' as never} aria-label={config.criteriaListLabel} style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 16 } as object}>
           {config.criteria.map((k, i) => {
             const v = vals[i]!;
             const start = 600 + i * 60;
-            const fill = clock.done ? 1 : progress(t, start, M15.fillMs);
+            const grown = clock.done ? 1 : progress(t, start, M15.fillMs);
             const toneP = clock.done ? 1 : toneIn(start + M15.fillMs, t);
             const tone = i === best ? colors.status.executed : i === worst ? colors.status.needsUser : undefined;
             const cv = cmp ? cmp.values[i]! : 0;
-            const text = `${(clock.done ? vOf(i) : v * fill).toFixed(digits)}${cmp ? ` vs ${cv.toFixed(digits)}` : ''}`;
+            const own = (clock.done ? vOf(i) : v * grown).toFixed(digits);
+            const text = cmp ? fill(config.versusText, { value: own, other: cv.toFixed(digits) }) : own;
+            const mark = i === best ? config.strongestLabel : i === worst ? config.weakestLabel : '';
             return (
               <View key={k.id ?? i} role={'listitem' as never} style={{ width: mobile ? '100%' : '48%', flexGrow: 1 }}>
                 <DataTip
@@ -275,11 +277,11 @@ function Valid({
                     <Text numberOfLines={1} style={{ width: 108, fontSize: 12, color: colors.textPrimary }}>{k.label}</Text>
                     <View style={{ flex: 1, gap: 3 }}>
                       <VizBar
-                        scale={(clock.done ? vOf(i) : v * fill) / max}
+                        scale={(clock.done ? vOf(i) : v * grown) / max}
                         height={cmp ? 4 : 6}
                         color={colors.textPrimary}
                         track={colors.band}
-                        a11y={{ role: 'meter', label: k.label, now: v, max, text: `${v.toFixed(digits)} of ${max}${i === best ? ', strongest' : i === worst ? ', weakest' : ''}` }}
+                        a11y={{ role: 'meter', label: k.label, now: v, max, text: `${fill(config.meterText, { value: v.toFixed(digits), max })}${mark ? `, ${mark}` : ''}` }}
                       />
                       {cmp ? <VizBar scale={(overlay[i] ?? 0) / max} height={3} color={colors.textSecondary} track={colors.band} /> : null}
                     </View>
@@ -287,7 +289,7 @@ function Valid({
                       <Text numeric style={{ fontSize: 12, fontWeight: '600', color: colors.textPrimary, opacity: tone ? 1 - toneP : 1 }}>{text}</Text>
                       {tone ? <Text numeric aria-hidden style={{ position: 'absolute', right: 0, top: 0, fontSize: 12, fontWeight: '600', color: tone, opacity: toneP }}>{text}</Text> : null}
                     </View>
-                    {i === best ? <Hidden>(strongest)</Hidden> : i === worst ? <Hidden>(weakest)</Hidden> : null}
+                    {mark ? <Hidden>{`(${mark})`}</Hidden> : null}
                   </Box>
                 </DataTip>
               </View>
@@ -297,13 +299,13 @@ function Valid({
 
         <View style={{ opacity: lateIn, gap: 12 }}>
           <SplitWells
-            positiveTitle={item.strongest.title ?? `Strongest: ${config.criteria[best]?.label ?? ''}`}
+            positiveTitle={item.strongest.title ?? fill(config.strongestTitle, { criterion: config.criteria[best]?.label ?? '' })}
             positive={item.strongest.points}
-            negativeTitle={item.weakest.title ?? `Weakest: ${config.criteria[worst >= 0 ? worst : best]?.label ?? ''}`}
+            negativeTitle={item.weakest.title ?? fill(config.weakestTitle, { criterion: config.criteria[worst >= 0 ? worst : best]?.label ?? '' })}
             negative={item.weakest.points}
             stacked={mobile}
           />
-          {item.summary ? <ClampText key={item.id} body={item.summary} limit={SUMMARY_LIMIT} lines={4} nativeID={`${uid}-sum`} /> : null}
+          {item.summary ? <ClampText key={item.id} body={item.summary} limit={SUMMARY_LIMIT} lines={4} nativeID={`${uid}-sum`} moreLabel={config.showMoreLabel} lessLabel={config.showLessLabel} /> : null}
           {item.chips.length ? (
             <Box row gap="s2" style={{ flexWrap: 'wrap' }}>
               {item.chips.map(c => <PlainChip key={c}>{c}</PlainChip>)}

package/src/components/onboarding/criteria-spider/contract.ts

@@ -34,7 +34,43 @@ export const SPIDER_SCENES = ['default', 'next', 'compare', 'compareNext', 'load
 export type SpiderScene = (typeof SPIDER_SCENES)[number];
 export const SPIDER_IN_FLIGHT: readonly string[] = [];
 
-export type SpiderSettings = HeaderConfig & LoadCopy & {
+/**
+ * **Every word the spider shows** — rename or translate freely. Templates are filled with `fill()`.
+ */
+export type SpiderCopy = {
+  /** The Compare toggle, off and on. */
+  compareLabel: string;
+  comparingLabel: string;
+  /** The compared item's select, read out. */
+  compareWithLabel: string;
+  /** Said when Compare turns on: "Comparing with {name}". */
+  comparingWithText: string;
+  /** The criteria list, read out. */
+  criteriaListLabel: string;
+  /** A criterion's value while comparing: "{value} vs {other}". */
+  versusText: string;
+  /** A criterion meter's value text: "{value} of {max}". */
+  meterText: string;
+  /** The best and worst criterion, as the meter and a screen reader say them. */
+  strongestLabel: string;
+  weakestLabel: string;
+  /** The wells' titles when an item gives none: "Strongest: {criterion}", "Weakest: {criterion}". */
+  strongestTitle: string;
+  weakestTitle: string;
+  /** The radar, read out: "{name} out of {max}: {values}." — and while comparing, "Compared with {name}: {values}." */
+  radarSummaryText: string;
+  radarCompareText: string;
+  /** The default bands (≥ 90%, ≥ 80%, ≥ 60% of max, and below). An item's `band` overrides them. */
+  excellentLabel: string;
+  veryGoodLabel: string;
+  goodLabel: string;
+  needsWorkLabel: string;
+  /** The long-summary toggle, closed and open (default "Show more" / "Show less"). */
+  showMoreLabel?: string;
+  showLessLabel?: string;
+};
+
+export type SpiderSettings = HeaderConfig & LoadCopy & SpiderCopy & {
   /** The scale every value and score is on (10, 100). */
   max: number;
   /** The axes, clockwise from 12 o'clock. Three or more. */

package/src/components/onboarding/criteria-spider/engine.ts

@@ -1,5 +1,9 @@
+import { fill } from '../shared/contract';
 import { bandOf, type Band } from '../shared/insight';
-import type { SpiderItem, SpiderPoints, SpiderScene, SpiderSettings } from './contract';
+import { SPIDER_PRESETS, type SpiderCopy, type SpiderItem, type SpiderPoints, type SpiderScene, type SpiderSettings } from './contract';
+
+/** The words when a caller gives none — the presets' own (`presets.json` base). */
+const COPY: SpiderCopy = SPIDER_PRESETS.base;
 
 /** **The Criteria Spider engine** — pure: items on one scale, best and worst, bands and scenes. */
 
@@ -34,14 +38,14 @@ export function spiderRows(c: SpiderSettings): SpiderRow[] {
 /** Decimals for the scale: one on a 10-point scale ("9.8"), none on 100 ("87"). */
 export const spiderDigits = (max: number) => (max <= 10 ? 1 : 0);
 
-/** The default bands, as a share of max: ≥ 90% Excellent (mint), ≥ 80% Very good, ≥ 60% Good, else Needs work (apricot). */
-export function spiderBand(row: SpiderRow, max: number): Band {
+/** The default bands, as a share of max: ≥ 90% Excellent (mint), ≥ 80% Very good, ≥ 60% Good, else Needs work (apricot) — named by the copy. */
+export function spiderBand(row: SpiderRow, max: number, copy: SpiderCopy = COPY): Band {
   if (row.band) return row.band;
   return bandOf(row.score, [
-    { min: 0.9 * max, label: 'Excellent', tone: 'mint' },
-    { min: 0.8 * max, label: 'Very good', tone: 'plain' },
-    { min: 0.6 * max, label: 'Good', tone: 'plain' },
-    { min: -Infinity, label: 'Needs work', tone: 'apricot' },
+    { min: 0.9 * max, label: copy.excellentLabel, tone: 'mint' },
+    { min: 0.8 * max, label: copy.veryGoodLabel, tone: 'plain' },
+    { min: 0.6 * max, label: copy.goodLabel, tone: 'plain' },
+    { min: -Infinity, label: copy.needsWorkLabel, tone: 'apricot' },
   ]);
 }
 
@@ -92,8 +96,9 @@ export function spiderTip(label: string, v: number, max: number, cmp?: { name: s
 }
 
 /** The radar's summary for a screen reader. */
-export function radarSummary(row: SpiderRow, criteria: string[], max: number, cmp?: SpiderRow | null): string {
+export function radarSummary(row: SpiderRow, criteria: string[], max: number, cmp?: SpiderRow | null, copy: SpiderCopy = COPY): string {
   const d = spiderDigits(max);
   const list = (r: SpiderRow) => criteria.map((k, i) => `${k} ${r.values[i]!.toFixed(d)}`).join(', ');
-  return `${row.name} out of ${max}: ${list(row)}.${cmp ? ` Compared with ${cmp.name}: ${list(cmp)}.` : ''}`;
+  const own = fill(copy.radarSummaryText, { name: row.name, max, values: list(row) });
+  return cmp ? `${own} ${fill(copy.radarCompareText, { name: cmp.name, max, values: list(cmp) })}` : own;
 }

package/src/components/onboarding/criteria-spider/index.ts

@@ -1,6 +1,6 @@
 export {
   SPIDER_IN_FLIGHT, SPIDER_PRESETS, SPIDER_SCENES, validateSpider,
-  type SpiderCriterion, type SpiderItem, type SpiderPoints, type SpiderScene, type SpiderSettings,
+  type SpiderCopy, type SpiderCriterion, type SpiderItem, type SpiderPoints, type SpiderScene, type SpiderSettings,
 } from './contract';
 export {
   bestWorst, initialSpider, radarSummary, spiderBand, spiderDigits, spiderRevealEnd, spiderRows, spiderScene, spiderSeed, spiderTip,

package/src/components/onboarding/criteria-spider/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "criteria-spider",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -96,6 +98,25 @@
         ]
       }
     ],
+    "compareLabel": "Compare",
+    "comparingLabel": "Comparing",
+    "compareWithLabel": "Compare with",
+    "comparingWithText": "Comparing with {name}",
+    "criteriaListLabel": "Criteria",
+    "versusText": "{value} vs {other}",
+    "meterText": "{value} of {max}",
+    "strongestLabel": "strongest",
+    "weakestLabel": "weakest",
+    "strongestTitle": "Strongest: {criterion}",
+    "weakestTitle": "Weakest: {criterion}",
+    "radarSummaryText": "{name} out of {max}: {values}.",
+    "radarCompareText": "Compared with {name}: {values}.",
+    "excellentLabel": "Excellent",
+    "veryGoodLabel": "Very good",
+    "goodLabel": "Good",
+    "needsWorkLabel": "Needs work",
+    "showMoreLabel": "Show more",
+    "showLessLabel": "Show less",
     "emptyTitle": "No scores yet",
     "emptyBody": "Scores appear once enough reviews are in.",
     "emptyCta": "Invite reviewers",

package/src/components/onboarding/dashboard-config/contract.ts

@@ -27,6 +27,15 @@ export type DashboardConfigSettings = HeaderConfig & LoadCopy & {
   savedHint: string;
   saveErrorTitle: string;
   saveErrorBody: string;
+  /** The chip while picking: `{n}` selected. */
+  selectedCountLabel: string;
+  /** The grid hint: `{max}` when `min` ≤ 1, else `{min}` to `{max}`; and at the limit. */
+  upToHint: string;
+  rangeHint: string;
+  atMaxHint: string;
+  /** The footer hint below `{min}`, and otherwise `{n}` of `{max}`. */
+  belowMinHint: string;
+  countHint: string;
   /** Optional ghost secondary ("Skip"). */
   secondaryLabel?: string;
 };

package/src/components/onboarding/dashboard-config/engine.ts

@@ -1,5 +1,5 @@
 import type { StateChipTone } from '../../../ds';
-import type { SavePhase } from '../shared/contract';
+import { fill, type SavePhase } from '../shared/contract';
 import type { DashboardConfigSettings, DashboardScene } from './contract';
 
 /**
@@ -65,14 +65,15 @@ export function dashboardView(c: DashboardConfigSettings, s: DashboardState): Da
   const n = s.selected.length;
   const atMax = n >= c.max;
   const below = n < c.min;
-  const range = c.min <= 1 ? `Pick up to ${c.max} widgets` : `Pick ${c.min} to ${c.max} widgets`;
+  const nums = { n, min: c.min, max: c.max };
+  const range = fill(c.min <= 1 ? c.upToHint : c.rangeHint, nums);
   return {
     scene: s.save !== 'idle' ? s.save : below ? 'below' : atMax ? 'atMax' : 'default',
     chip: s.save === 'saving' ? { tone: 'neutral', label: c.savingLabel }
       : s.save === 'saved' ? { tone: 'success', label: c.savedLabel }
-      : { tone: 'neutral', label: `${n} selected` },
-    gridHint: atMax ? `Up to ${c.max} widgets. Deselect one to swap it.` : range,
-    footerHint: s.save === 'saved' ? c.savedHint : below ? `Pick at least ${c.min} to continue` : `${n} of ${c.max} widgets`,
+      : { tone: 'neutral', label: fill(c.selectedCountLabel, nums) },
+    gridHint: atMax ? fill(c.atMaxHint, nums) : range,
+    footerHint: s.save === 'saved' ? c.savedHint : below ? fill(c.belowMinHint, nums) : fill(c.countHint, nums),
     primaryLabel: s.save === 'saving' ? c.savingLabel : s.save === 'saved' ? c.savedLabel : s.save === 'failed' ? c.retryLabel : c.primaryLabel,
     canSave: !below && !isLocked(s),
     atMax,

package/src/components/onboarding/dashboard-config/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "dashboard-config",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -67,6 +69,12 @@
     "savedHint": "Saved · your dashboard is ready",
     "saveErrorTitle": "Couldn’t save your dashboard",
     "saveErrorBody": "Your picks are still here. Retry when you’re ready.",
+    "selectedCountLabel": "{n} selected",
+    "upToHint": "Pick up to {max} widgets",
+    "rangeHint": "Pick {min} to {max} widgets",
+    "atMaxHint": "Up to {max} widgets. Deselect one to swap it.",
+    "belowMinHint": "Pick at least {min} to continue",
+    "countHint": "{n} of {max} widgets",
     "emptyTitle": "No widgets available",
     "emptyBody": "Connect a data source to unlock widgets.",
     "emptyCta": "Refresh"