@lockin90/ui-native 0.0.0-stage → 1.0.0

package/src/components/RichText.tsx

@@ -0,0 +1,71 @@
+import { Fragment } from 'react';
+import { Text, type TextStyle, type TextProps, type StyleProp } from 'react-native';
+
+export interface RichTextProps extends Omit<TextProps, 'children'> {
+  /** The translated string. May contain `<b>…</b>` and `<a href="…">…</a>` segments. */
+  text: string;
+  /** Style applied to the bolded segments — defaults to `{ fontWeight: '700' }`. */
+  boldStyle?: StyleProp<TextStyle>;
+  /** Style applied to link segments — defaults to accent + underline. */
+  linkStyle?: StyleProp<TextStyle>;
+  /** Fired with the href when a link segment is pressed. Without it, links
+   *  render styled but inert (the host decides in-app vs external routing). */
+  onLinkPress?: (href: string) => void;
+}
+
+const DEFAULT_BOLD: TextStyle = { fontWeight: '700' };
+const DEFAULT_LINK: TextStyle = { color: '#22D3EE', textDecorationLine: 'underline' };
+
+type Segment = { kind: 'plain' | 'bold' | 'link'; text: string; href?: string };
+
+/** Tokenize `<b>…</b>` and `<a href="…">…</a>` segments; everything else is plain. */
+function parseSegments(text: string): Segment[] {
+  const re = /<b>([^<]*)<\/b>|<a href="([^"]*)">([^<]*)<\/a>/g;
+  const segs: Segment[] = [];
+  let last = 0;
+  for (let m = re.exec(text); m; m = re.exec(text)) {
+    if (m.index > last) segs.push({ kind: 'plain', text: text.slice(last, m.index) });
+    if (m[1] != null) segs.push({ kind: 'bold', text: m[1] });
+    else segs.push({ kind: 'link', text: m[3] ?? '', href: m[2] ?? '' });
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) segs.push({ kind: 'plain', text: text.slice(last) });
+  return segs;
+}
+
+/**
+ * RichText — renders a translation/back-end string with embedded `<b>…</b>`
+ * and `<a href="…">…</a>` tags into a nested Text composition: `boldStyle`
+ * on bold segments, `linkStyle` + `onLinkPress(href)` on link segments.
+ *
+ * Why: the shared `@lockin90/i18n` catalogs use `<b>…</b>` markers so the web
+ * (next-intl `t.rich`) can stylise inline parts, and back-end-authored copy
+ * (e.g. notification bodies) may carry links that deep-link in-app or open
+ * externally — the HOST decides via `onLinkPress`. i18next on mobile renders
+ * values verbatim, so this component is the mobile-side equivalent of
+ * `t.rich` + anchor handling. No other markup is supported (deliberate).
+ */
+export function RichText({ text, boldStyle, linkStyle, onLinkPress, style, ...rest }: RichTextProps) {
+  const segs = parseSegments(text);
+  return (
+    <Text {...rest} style={style}>
+      {segs.map((s, i) => (
+        <Fragment key={i}>
+          {s.kind === 'plain' ? (
+            s.text
+          ) : s.kind === 'bold' ? (
+            <Text style={[DEFAULT_BOLD, boldStyle]}>{s.text}</Text>
+          ) : (
+            <Text
+              style={[DEFAULT_LINK, linkStyle]}
+              accessibilityRole="link"
+              onPress={onLinkPress && s.href ? () => onLinkPress(s.href as string) : undefined}
+            >
+              {s.text}
+            </Text>
+          )}
+        </Fragment>
+      ))}
+    </Text>
+  );
+}

package/src/components/RichTextEditor.tsx

@@ -0,0 +1,207 @@
+import { useState } from 'react';
+import { View, Text, StyleSheet, type NativeSyntheticEvent, type TextInputSelectionChangeEventData, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Path, Circle, Polyline } from 'react-native-svg';
+import { colors, radii } from '@lockin90/tokens';
+import { NoteField } from './NoteField';
+import { Toolbar, type ToolbarItem } from './Toolbar';
+
+/* ============================================================================
+   RichTextEditor (native)
+
+   React Native has no `contentEditable`, so there is no equivalent of the web
+   contentEditable surface + `document.execCommand`. To keep VISUAL + functional
+   parity with the web `RichTextEditor`, native ships the SAME toolbar (same
+   glyphs/order) over a multiline field, with each button applying **markdown**
+   to the plain-text value (e.g. **bold**, *italic*, `## heading`, `- list`).
+
+     • `value` / `onChange` carry **markdown plain text** on native (HTML on web).
+     • The toolbar inserts/wraps markdown around the current selection.
+   ========================================================================== */
+
+export type RichTextAction =
+  | 'bold'
+  | 'italic'
+  | 'link'
+  | 'bulletList'
+  | 'orderedList'
+  | 'h2'
+  | 'h3'
+  | 'quote'
+  | 'code'
+  | 'clear';
+
+export interface RichTextEditorProps {
+  /** current value — markdown plain text on native (HTML on web) */
+  value: string;
+  /** called with the next value (markdown plain text on native) */
+  onChange: (value: string) => void;
+  /** placeholder shown while the editor is empty */
+  placeholder?: string;
+  /** which toolbar actions to show, in order */
+  toolbar?: RichTextAction[];
+  /** minimum height of the editing surface, in text rows (default 6) */
+  minRows?: number;
+  /** invalid state — red border */
+  invalid?: boolean;
+  /** disable editing (surface read-only, toolbar hidden) */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_TOOLBAR: RichTextAction[] = [
+  'bold', 'italic', 'link', 'bulletList', 'orderedList', 'h2', 'h3', 'quote', 'code', 'clear',
+];
+
+const LABELS: Record<RichTextAction, string> = {
+  bold: 'Bold',
+  italic: 'Italic',
+  link: 'Insert link',
+  bulletList: 'Bulleted list',
+  orderedList: 'Numbered list',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  quote: 'Block quote',
+  code: 'Code block',
+  clear: 'Clear formatting',
+};
+
+const stroke = { fill: 'none', stroke: colors.textDim, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' } as const;
+
+/* glyphs mirror the web RichTextEditor toolbar exactly */
+function glyph(action: RichTextAction) {
+  switch (action) {
+    case 'bold':
+      return <Text style={[styles.txtGlyph, { fontWeight: '700' }]}>B</Text>;
+    case 'italic':
+      return <Text style={[styles.txtGlyph, { fontStyle: 'italic' }]}>I</Text>;
+    case 'h2':
+      return <Text style={[styles.txtGlyph, { fontWeight: '700', fontSize: 12 }]}>H2</Text>;
+    case 'h3':
+      return <Text style={[styles.txtGlyph, { fontWeight: '700', fontSize: 12 }]}>H3</Text>;
+    case 'link':
+      return (
+        <Svg viewBox="0 0 24 24" width={18} height={18} {...stroke}>
+          <Path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1" />
+          <Path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1" />
+        </Svg>
+      );
+    case 'bulletList':
+      return (
+        <Svg viewBox="0 0 24 24" width={18} height={18} {...stroke}>
+          <Path d="M8 6h12M8 12h12M8 18h12" />
+          <Circle cx="4" cy="6" r="1.4" fill={colors.textDim} stroke="none" />
+          <Circle cx="4" cy="12" r="1.4" fill={colors.textDim} stroke="none" />
+          <Circle cx="4" cy="18" r="1.4" fill={colors.textDim} stroke="none" />
+        </Svg>
+      );
+    case 'orderedList':
+      return (
+        <Svg viewBox="0 0 24 24" width={18} height={18} {...stroke}>
+          <Path d="M10 6h10M10 12h10M10 18h10" />
+          <Path d="M4 5.5h1V9M3.6 9h1.8" />
+          <Path d="M3.6 13.4c.2-.6 1.6-.7 1.6.3 0 .7-1.6 1.3-1.6 2.3h1.8" />
+        </Svg>
+      );
+    case 'quote':
+      return (
+        <Svg viewBox="0 0 24 24" width={18} height={18} {...stroke}>
+          <Path d="M9 7H6a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2" />
+          <Path d="M19 7h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2" />
+        </Svg>
+      );
+    case 'code':
+      return (
+        <Svg viewBox="0 0 24 24" width={18} height={18} {...stroke}>
+          <Polyline points="8 7 3 12 8 17" />
+          <Polyline points="16 7 21 12 16 17" />
+        </Svg>
+      );
+    case 'clear':
+      return (
+        <Svg viewBox="0 0 24 24" width={18} height={18} {...stroke}>
+          <Path d="M5 7h14" />
+          <Path d="M14 7l-1 12M10 7l-1 12" />
+          <Path d="M7 7l1-2h8l1 2" />
+        </Svg>
+      );
+  }
+}
+
+/** Apply a markdown transform for `action` to `value` over selection [start,end]. */
+function applyMarkdown(action: RichTextAction, value: string, start: number, end: number): string {
+  const before = value.slice(0, start);
+  const sel = value.slice(start, end);
+  const after = value.slice(end);
+  const wrap = (m: string) => `${before}${m}${sel || ''}${m}${after}`;
+  // prefix the line that contains `start`
+  const linePrefix = (pre: string) => {
+    const ls = value.lastIndexOf('\n', start - 1) + 1;
+    return value.slice(0, ls) + pre + value.slice(ls);
+  };
+  switch (action) {
+    case 'bold': return wrap('**');
+    case 'italic': return wrap('*');
+    case 'code': return wrap('`');
+    case 'link': return `${before}[${sel || 'text'}](https://)${after}`;
+    case 'bulletList': return linePrefix('- ');
+    case 'orderedList': return linePrefix('1. ');
+    case 'h2': return linePrefix('## ');
+    case 'h3': return linePrefix('### ');
+    case 'quote': return linePrefix('> ');
+    case 'clear': return before + sel.replace(/[*`>#_~-]/g, '') + after;
+    default: return value;
+  }
+}
+
+/**
+ * Native RichTextEditor — the web toolbar over a multiline field, applying
+ * markdown to the plain-text `value`. Same export name + props as the web twin.
+ */
+export function RichTextEditor({
+  value,
+  onChange,
+  placeholder = 'Write something…',
+  toolbar = DEFAULT_TOOLBAR,
+  minRows = 6,
+  invalid = false,
+  disabled = false,
+  style,
+}: RichTextEditorProps) {
+  const [sel, setSel] = useState({ start: 0, end: 0 });
+  const onSelectionChange = (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) =>
+    setSel(e.nativeEvent.selection);
+
+  const items: ToolbarItem[] = toolbar.map((action) => ({
+    icon: glyph(action),
+    label: LABELS[action],
+    onPress: () => onChange(applyMarkdown(action, value, sel.start, sel.end)),
+  }));
+
+  return (
+    <View style={style}>
+      {!disabled && toolbar.length > 0 ? <Toolbar items={items} style={styles.toolbar} /> : null}
+      <NoteField
+        value={value}
+        onChangeText={onChange}
+        onSelectionChange={onSelectionChange}
+        editable={!disabled}
+        placeholder={placeholder}
+        numberOfLines={minRows}
+        style={[
+          styles.surface,
+          { minHeight: minRows * 22 + 24 },
+          invalid && styles.invalid,
+          disabled && styles.disabled,
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  toolbar: { marginBottom: 10 },
+  txtGlyph: { fontSize: 14, color: colors.textDim },
+  surface: { borderRadius: radii.sm },
+  invalid: { borderColor: colors.zoneLow },
+  disabled: { opacity: 0.6 },
+});

package/src/components/Ring.tsx

@@ -0,0 +1,269 @@
+import { useId, type ReactNode } from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Circle, Defs, FeGaussianBlur, Filter, G, LinearGradient, Stop } from 'react-native-svg';
+import { colors, fonts, radii } from '@lockin90/tokens';
+
+/** Zone verdict color for a 0–100 value (same thresholds as the chart catalog). */
+function zoneColor(v: number): string {
+  return v >= 62 ? colors.zoneHigh : v >= 38 ? colors.zoneMid : colors.zoneLow;
+}
+
+export interface RingProps {
+  /** Arc fill, 0–100 (clamped). */
+  value?: number;
+  /** Second ring's fill, 0–100 — `dual` (inner ring) and `triple` (middle ring). */
+  value2?: number;
+  /** Third ring's fill, 0–100 — `triple` (innermost ring). */
+  value3?: number;
+  /** Outer diameter in px (the SVG viewBox is square at this size). */
+  size?: number;
+  /** Stroke width of both the track and the arc, in px.
+   *  Defaults to `7` (or `4` for `variant="thin-halo"` — DN-06). */
+  thickness?: number;
+  /** Arc color — any color. Ignored when a `gradient` array is given or `zone`
+   *  is on. */
+  color?: string;
+  /** Second ring's color — defaults to `colors.violet` (`dual`, DN-04) or
+   *  `colors.cyan` (`triple`, DN-05). */
+  color2?: string;
+  /** Third ring's color — defaults to `colors.violet` (`triple`, DN-05). */
+  color3?: string;
+  /** Track (unfilled) color. */
+  trackColor?: string;
+  /** Optional arc gradient. A `[from, to]` tuple paints a two-stop gradient; an
+   *  N-length array (≥2, e.g. `gradients.flux.stops`) paints N evenly-spaced
+   *  stops — the full flux spectrum arc; a single string is treated like a
+   *  solid `color`. Applies to the main (outer) arc only. */
+  gradient?: string | string[];
+  /** Soft color glow behind the arc (on by default). */
+  glow?: boolean;
+  /** Color the arc + default center number by the value's zone verdict
+   *  (≥62 → `zoneHigh`, ≥38 → `zoneMid`, else `zoneLow`) — DN-03. */
+  zone?: boolean;
+  /** Catalog variant (donut-charts DN-01…DN-09):
+   *  - `score` (default) — single ring + center stat (DN-01)
+   *  - `dual` — concentric outer + inner ring, shared center stat (DN-04)
+   *  - `triple` — activity-style 3 concentric rings, no default center (DN-05)
+   *  - `thin-halo` — quiet 4px ring (DN-06)
+   *  - `dashed-track` — dotted `2 5` track under a solid arc (DN-07)
+   *  - `pulse` — a dot marks the arc end (static on native — no tween precedent)
+   *  - `delta` — score ring + delta chip under the center (DN-09; the chip
+   *    renders whenever `delta` is set, on any variant) */
+  variant?: 'score' | 'dual' | 'triple' | 'thin-halo' | 'dashed-track' | 'pulse' | 'delta';
+  /** Delta chip text under the center stat (e.g. '+6 VS YESTERDAY') — DN-09. */
+  delta?: string;
+  /** Delta chip tint (hex — used with alpha suffixes for the chip hairline). */
+  deltaColor?: string;
+  /** Centered content. When omitted the rounded `value` is shown as the number
+   *  (`triple` shows nothing by default — three values are ambiguous). */
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Ring — a generic, prop-driven circular-progress primitive: an SVG track +
+ * colored progress arc (rotated −90° so it starts at 12 o'clock, round
+ * linecap, soft color glow) with absolutely-centered readout content. Solid by
+ * default; pass a `[from, to]` `gradient` for a two-stop arc, or an N-stop
+ * array (e.g. `gradients.flux.stops`) for the full spectrum. Covers the
+ * catalog score-ring family (DN-01…DN-09) via `variant` + `zone`/`delta`.
+ */
+export function Ring({
+  value = 72,
+  value2,
+  value3,
+  size = 108,
+  thickness,
+  color = colors.mint,
+  color2,
+  color3,
+  trackColor = colors.border,
+  gradient,
+  glow = true,
+  zone = false,
+  variant = 'score',
+  delta,
+  deltaColor = colors.mint,
+  children,
+  style,
+}: RingProps) {
+  const uid = useId();
+  const gradId = `lk-ring-grad-${uid.replace(/[^a-zA-Z0-9]/g, '')}`;
+
+  const sw = thickness ?? (variant === 'thin-halo' ? 4 : 7);
+  const v = Math.max(0, Math.min(100, value));
+  // reserve the glow's overhang (a wider stroke than the arc) so neither the arc
+  // nor its halo clips against the square SVG viewBox
+  const glowPad = glow ? 8 : 0;
+  const r = (size - sw) / 2 - glowPad;
+
+  const useGradient = Array.isArray(gradient) && !zone;
+  // resolved solid arc color: zone verdict > explicit single-string gradient > color
+  const solid = zone ? zoneColor(v) : typeof gradient === 'string' ? gradient : color;
+  const stroke = useGradient ? `url(#${gradId})` : solid;
+  // pulse tint (gradient → mint, like the catalog)
+  const pulseColor = useGradient ? colors.mint : solid;
+
+  const half = size / 2;
+  const dashedTrack = variant === 'dashed-track';
+
+  // concentric ring set outer → inner; inner radii step by thickness + 4
+  // (catalog r52/r38 · r52/r39/r26 spacing).
+  const step = sw + 4;
+  const rings: { r: number; v: number; stroke: string }[] = [{ r, v, stroke }];
+  if (variant === 'dual' || variant === 'triple') {
+    rings.push({
+      r: r - step,
+      v: Math.max(0, Math.min(100, value2 ?? 0)),
+      stroke: color2 ?? (variant === 'triple' ? colors.cyan : colors.violet),
+    });
+  }
+  if (variant === 'triple') {
+    rings.push({
+      r: r - 2 * step,
+      v: Math.max(0, Math.min(100, value3 ?? 0)),
+      stroke: color3 ?? colors.violet,
+    });
+  }
+
+  // pulse dot at the main arc's end (arcs rotate −90°, so angle 0 = 12 o'clock)
+  const pulseAngle = ((v / 100) * 360 - 90) * (Math.PI / 180);
+  const px = half + r * Math.cos(pulseAngle);
+  const py = half + r * Math.sin(pulseAngle);
+
+  return (
+    <View style={[styles.root, { width: size, height: size }, style]}>
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Defs>
+          {useGradient ? (
+            <LinearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
+              {gradient.map((stopColor, i) => (
+                <Stop
+                  key={i}
+                  offset={i / Math.max(1, gradient.length - 1)}
+                  stopColor={stopColor}
+                />
+              ))}
+            </LinearGradient>
+          ) : null}
+          {glow ? (
+            /* real Gaussian blur for the halo (Fabric-native in react-native-svg 15) —
+               the native twin of the web arc's `filter: drop-shadow(0 0 8px glow)`.
+               Region padded generously so the blur isn't clipped at the arc's bbox. */
+            <Filter id={`${gradId}-blur`} x="-40%" y="-40%" width="180%" height="180%">
+              <FeGaussianBlur stdDeviation={6} />
+            </Filter>
+          ) : null}
+        </Defs>
+        {rings.map((ring, i) => {
+          const c = 2 * Math.PI * ring.r;
+          const dashOffset = c * (1 - ring.v / 100);
+          return (
+            <G key={i}>
+              {/* track */}
+              <Circle
+                cx={half}
+                cy={half}
+                r={ring.r}
+                fill="none"
+                stroke={trackColor}
+                strokeWidth={sw}
+                strokeDasharray={dashedTrack ? [2, 5] : undefined}
+                strokeLinecap={dashedTrack ? 'butt' : undefined}
+              />
+              {/* glow — a Gaussian-blurred duplicate of the progress arc behind it:
+                  the same soft halo the web arc gets from `drop-shadow(0 0 8px …)`.
+                  (Discrete concentric "feather" copies read as banded outlines on
+                  device — a real blur is the only thing that looks like a blur.) */}
+              {glow ? (
+                <Circle
+                  cx={half}
+                  cy={half}
+                  r={ring.r}
+                  fill="none"
+                  stroke={ring.stroke}
+                  strokeWidth={sw + 2}
+                  strokeOpacity={0.55}
+                  strokeLinecap="round"
+                  strokeDasharray={c}
+                  strokeDashoffset={dashOffset}
+                  rotation={-90}
+                  originX={half}
+                  originY={half}
+                  filter={`url(#${gradId}-blur)`}
+                />
+              ) : null}
+              {/* progress arc — rotated −90° to start at 12 o'clock */}
+              <Circle
+                cx={half}
+                cy={half}
+                r={ring.r}
+                fill="none"
+                stroke={ring.stroke}
+                strokeWidth={sw}
+                strokeLinecap="round"
+                strokeDasharray={c}
+                strokeDashoffset={dashOffset}
+                rotation={-90}
+                originX={half}
+                originY={half}
+              />
+            </G>
+          );
+        })}
+        {/* pulse marker — static dot + faint halo ring (no SMIL/JS animation on
+            native; the web wave animation is a documented substrate diff) */}
+        {variant === 'pulse' ? (
+          <>
+            <Circle cx={px} cy={py} r={7} fill="none" stroke={pulseColor} strokeWidth={1.4} strokeOpacity={0.4} />
+            <Circle cx={px} cy={py} r={3.6} fill={pulseColor} />
+          </>
+        ) : null}
+      </Svg>
+      <View style={styles.center} pointerEvents="none">
+        {children ??
+          (variant === 'triple' ? null : (
+            <Text style={[styles.num, zone ? { color: solid } : null]}>{Math.round(v)}</Text>
+          ))}
+        {delta ? (
+          <View style={[styles.deltaChip, { borderColor: `${deltaColor}59` }]}>
+            <Text style={[styles.deltaText, { color: deltaColor }]}>{delta}</Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { position: 'relative', alignItems: 'center', justifyContent: 'center' },
+  center: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  num: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    letterSpacing: -0.9,
+    lineHeight: 32,
+    fontSize: 32,
+    color: colors.text,
+    textAlign: 'center',
+  },
+  // DN-09 delta chip — dark pill + tinted hairline (catalog tag())
+  deltaChip: {
+    marginTop: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 2.5,
+    borderWidth: 1,
+    borderRadius: radii.pill,
+    backgroundColor: `${colors.bg0}C7`,
+  },
+  deltaText: {
+    fontFamily: fonts.mono,
+    fontSize: 9,
+    lineHeight: 11,
+    letterSpacing: 0.45,
+  },
+});