@repzo/widget-react-native 1.0.0

package/src/ui/components/icons.tsx

@@ -0,0 +1,315 @@
+/**
+ * Geometric icons drawn with plain Views.
+ *
+ * The library ships zero native dependencies, so `react-native-svg` is off the
+ * table; every glyph here is a rotated border or triangle, which renders
+ * identically on both platforms and scales with the `size` prop.
+ */
+
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+
+import { palette } from '../styles/theme';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  style?: ViewStyle;
+}
+
+/** Two crossed bars. */
+export function CloseIcon({ size = 18, color = palette.textMuted, style }: IconProps) {
+  const bar: ViewStyle = {
+    position: 'absolute',
+    width: size,
+    height: Math.max(2, size * 0.11),
+    borderRadius: 2,
+    backgroundColor: color,
+  };
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View style={[bar, { transform: [{ rotate: '45deg' }] }]} />
+      <View style={[bar, { transform: [{ rotate: '-45deg' }] }]} />
+    </View>
+  );
+}
+
+type ChevronDirection = 'left' | 'right' | 'up' | 'down';
+
+const CHEVRON_ROTATION: Record<ChevronDirection, string> = {
+  left: '45deg',
+  right: '-135deg',
+  up: '135deg',
+  down: '-45deg',
+};
+
+/** A square with two adjacent borders, rotated into an arrow head. */
+export function ChevronIcon({
+  size = 16,
+  color = palette.textMuted,
+  direction = 'left',
+  style,
+}: IconProps & { direction?: ChevronDirection }) {
+  const box = size * 0.62;
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          width: box,
+          height: box,
+          borderLeftWidth: Math.max(2, size * 0.13),
+          borderBottomWidth: Math.max(2, size * 0.13),
+          borderColor: color,
+          transform: [{ rotate: CHEVRON_ROTATION[direction] }],
+        }}
+      />
+    </View>
+  );
+}
+
+/** Arrow with a shaft — used for the "start a conversation" affordance. */
+export function ArrowRightIcon({ size = 16, color = palette.textMuted, style }: IconProps) {
+  const thickness = Math.max(2, size * 0.12);
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.8,
+          height: thickness,
+          borderRadius: thickness,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.12,
+          width: size * 0.42,
+          height: size * 0.42,
+          borderTopWidth: thickness,
+          borderRightWidth: thickness,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+/** Right-pointing triangle for the send button. */
+/** Upward arrow — the send affordance inside the composer's round button. */
+export function ArrowUpIcon({ size = 16, color = palette.white, style }: IconProps) {
+  const thickness = Math.max(2, size * 0.12);
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          position: 'absolute',
+          width: thickness,
+          height: size * 0.78,
+          borderRadius: thickness,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.14,
+          width: size * 0.42,
+          height: size * 0.42,
+          borderTopWidth: thickness,
+          borderRightWidth: thickness,
+          borderColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+/** Rounded speech bubble with a tail. */
+export function ChatIcon({ size = 24, color = palette.white, style }: IconProps) {
+  return (
+    <View style={[{ width: size, height: size }, style]}>
+      <View
+        style={{
+          width: size,
+          height: size * 0.78,
+          borderRadius: size * 0.26,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.18,
+          bottom: 0,
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.14,
+          borderRightWidth: size * 0.14,
+          borderTopWidth: size * 0.26,
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderTopColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+/** Outlined speech bubble — the Messages tab + empty state. */
+export function ChatOutlineIcon({ size = 22, color = palette.textSubtle, style }: IconProps) {
+  const thickness = Math.max(1.5, size * 0.09);
+  return (
+    <View style={[{ width: size, height: size }, style]}>
+      <View
+        style={{
+          width: size,
+          height: size * 0.76,
+          borderRadius: size * 0.24,
+          borderWidth: thickness,
+          borderColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.2,
+          bottom: size * 0.02,
+          width: size * 0.22,
+          height: size * 0.22,
+          borderLeftWidth: thickness,
+          borderBottomWidth: thickness,
+          borderColor: color,
+          backgroundColor: palette.white,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+/** House outline — the Home tab. */
+export function HomeIcon({ size = 22, color = palette.textSubtle, style }: IconProps) {
+  const thickness = Math.max(1.5, size * 0.09);
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.04,
+          width: size * 0.56,
+          height: size * 0.56,
+          borderTopWidth: thickness,
+          borderLeftWidth: thickness,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.08,
+          width: size * 0.7,
+          height: size * 0.44,
+          borderWidth: thickness,
+          borderTopWidth: 0,
+          borderColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+/** Person glyph for conversations with no assigned agent. */
+export function PersonIcon({ size = 18, color = palette.white, style }: IconProps) {
+  const thickness = Math.max(1.5, size * 0.11);
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.06,
+          width: size * 0.42,
+          height: size * 0.42,
+          borderRadius: size * 0.21,
+          borderWidth: thickness,
+          borderColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.06,
+          width: size * 0.74,
+          height: size * 0.3,
+          borderTopLeftRadius: size * 0.37,
+          borderTopRightRadius: size * 0.37,
+          borderWidth: thickness,
+          borderBottomWidth: 0,
+          borderColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+/** Circle-with-bang used on the offline notice. */
+export function AlertIcon({ size = 16, color = palette.warningIcon, style }: IconProps) {
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: Math.max(1.5, size * 0.12),
+          borderColor: color,
+        },
+        styles.center,
+        style,
+      ]}>
+      <View
+        style={{
+          width: Math.max(1.5, size * 0.12),
+          height: size * 0.34,
+          backgroundColor: color,
+          marginBottom: 1,
+        }}
+      />
+      <View
+        style={{
+          width: Math.max(1.5, size * 0.12),
+          height: Math.max(1.5, size * 0.12),
+          backgroundColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+export function PaperclipIcon({ size = 18, color = palette.textMuted, style }: IconProps) {
+  const thickness = Math.max(1.5, size * 0.1);
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          width: size * 0.42,
+          height: size * 0.82,
+          borderRadius: size * 0.21,
+          borderWidth: thickness,
+          borderColor: color,
+          transform: [{ rotate: '35deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/ui/hooks/use-keyboard-overlap.ts

@@ -0,0 +1,134 @@
+/**
+ * How far the keyboard covers the widget panel, in dp.
+ *
+ * The panel is a `<Modal>` that reaches the bottom of the screen, so the
+ * keyboard's own height is the whole story: what it reports is what has to be
+ * given back, less whatever the layout has already conceded down there.
+ *
+ * Measuring the panel does not work, and neither does RN's
+ * `<KeyboardAvoidingView>`, which is built on the same measurement. Both read a
+ * view's position out of the shadow tree, which places it relative to the
+ * surface root, while the keyboard frame arrives in screen coordinates. An iOS
+ * page sheet starts some 60dp down the screen, so the two disagree by exactly
+ * that much and the composer ends up under the keyboard with only its top
+ * border showing.
+ *
+ * What counts as already conceded differs by platform. iOS never resizes its
+ * window for the keyboard, so it is the safe-area padding the panel already
+ * keeps below itself. Android modals ask for `adjustResize`, so the window
+ * usually gives up the height itself and nothing more is owed; when it does not
+ * — an edge-to-edge window stays put — the whole keyboard still is. Either way
+ * the difference shows up in the panel's own height, so that is where the
+ * shrink is read from. RN already nets the navigation bar out of the height it
+ * reports on Android, so the safe-area inset must not come off twice there.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Keyboard, LayoutAnimation, Platform } from 'react-native';
+import type { KeyboardEvent, KeyboardEventName, LayoutChangeEvent } from 'react-native';
+
+// iOS announces the keyboard before it moves, so the layout can travel with
+// it; Android only reports the keyboard once it has settled.
+const SHOW_EVENT: KeyboardEventName =
+  Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+const HIDE_EVENT: KeyboardEventName =
+  Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+/** Android is the only platform whose window gives up height to the keyboard. */
+const WINDOW_RESIZES = Platform.OS === 'android';
+
+export interface KeyboardOverlap {
+  /** Bottom padding, in dp, that keeps the panel clear of the keyboard. */
+  overlap: number;
+  /** Goes on the padded view; its height is how the Android resize is spotted. */
+  onLayout: (event: LayoutChangeEvent) => void;
+}
+
+export function useKeyboardOverlap(enabled: boolean, bottomInset: number): KeyboardOverlap {
+  const [overlap, setOverlap] = useState(0);
+  // Mirrors `overlap` for the handlers, which must not re-subscribe on it.
+  const applied = useRef(0);
+  const keyboardHeight = useRef(0);
+  // The panel's height with no keyboard, and its height now. Taking the tallest
+  // seen keeps an Android resize that lands before the keyboard event from
+  // being mistaken for the resting height.
+  const restingHeight = useRef(0);
+  const currentHeight = useRef(0);
+
+  const apply = useCallback((next: number, event?: KeyboardEvent) => {
+    if (Math.abs(next - applied.current) < 1) return;
+    applied.current = next;
+
+    // Riding the keyboard's own duration and curve keeps the composer glued to
+    // it, and leaves the work in the native layout pass instead of re-laying
+    // out the message list from JS on every frame. Android reports a duration
+    // of 0 and animates nothing, which is what the guard falls through to.
+    const duration = event?.duration ?? 0;
+    const easing = event?.easing;
+    if (duration > 10 && easing) {
+      LayoutAnimation.configureNext({
+        duration,
+        update: {
+          duration,
+          type: LayoutAnimation.Types[easing] ?? LayoutAnimation.Types.keyboard,
+        },
+      });
+    }
+
+    setOverlap(next);
+  }, []);
+
+  const recompute = useCallback(
+    (event?: KeyboardEvent) => {
+      const alreadyClear = WINDOW_RESIZES
+        ? Math.max(restingHeight.current - currentHeight.current, 0)
+        : bottomInset;
+      const height = keyboardHeight.current;
+      apply(Math.min(Math.max(height - alreadyClear, 0), height), event);
+    },
+    [apply, bottomInset]
+  );
+
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      // Only Android has a shrink to read, and only there can it land after the
+      // keyboard event and leave the first answer stale.
+      if (!WINDOW_RESIZES) return;
+      const { height } = event.nativeEvent.layout;
+      currentHeight.current = height;
+      restingHeight.current = Math.max(restingHeight.current, height);
+      if (keyboardHeight.current > 0) recompute();
+    },
+    [recompute]
+  );
+
+  useEffect(() => {
+    if (!enabled) {
+      keyboardHeight.current = 0;
+      restingHeight.current = 0;
+      apply(0);
+      return undefined;
+    }
+
+    const handleShow = (event: KeyboardEvent) => {
+      keyboardHeight.current = event.endCoordinates?.height ?? 0;
+      recompute(event);
+    };
+
+    const handleHide = (event: KeyboardEvent) => {
+      keyboardHeight.current = 0;
+      recompute(event);
+    };
+
+    const subscriptions = [
+      Keyboard.addListener(SHOW_EVENT, handleShow),
+      Keyboard.addListener(HIDE_EVENT, handleHide),
+    ];
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [apply, enabled, recompute]);
+
+  return { overlap, onLayout };
+}

package/src/ui/hooks/use-reduce-motion.ts

@@ -0,0 +1,39 @@
+/**
+ * Shared reduce-motion check. The query is async, so the answer is cached for
+ * the process: the setting rarely changes mid-session, and re-asking on every
+ * mount would let the first frame animate before the answer arrives.
+ *
+ * Returns `null` until resolved, which callers should read as "hold still" —
+ * starting an animation and snapping it away a frame later is the flicker this
+ * is meant to avoid.
+ */
+
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+let cached: boolean | null = null;
+
+export function useReduceMotion(): boolean | null {
+  const [value, setValue] = useState<boolean | null>(cached);
+
+  useEffect(() => {
+    if (cached !== null) return undefined;
+    let alive = true;
+
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((enabled) => {
+        cached = enabled;
+        if (alive) setValue(enabled);
+      })
+      .catch(() => {
+        cached = false;
+        if (alive) setValue(false);
+      });
+
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  return value;
+}

package/src/ui/hooks/use-widget-insets.ts

@@ -0,0 +1,44 @@
+/**
+ * Safe-area insets without a hard dependency.
+ *
+ * RN's own `SafeAreaView` is deprecated (and iOS-only), so we use the host
+ * app's `react-native-safe-area-context` when it is installed and fall back to
+ * platform constants otherwise. Resolution happens once at module load, so the
+ * hook call order is stable across renders.
+ */
+
+import { Platform, StatusBar } from 'react-native';
+
+export interface WidgetInsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+const FALLBACK_INSETS: WidgetInsets = {
+  top: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+};
+
+let insetsHook: (() => WidgetInsets) | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const mod = require('react-native-safe-area-context');
+  if (typeof mod?.useSafeAreaInsets === 'function') insetsHook = mod.useSafeAreaInsets;
+} catch {
+  insetsHook = null;
+}
+
+export function useWidgetInsets(): WidgetInsets {
+  if (!insetsHook) return FALLBACK_INSETS;
+  try {
+    return insetsHook();
+  } catch {
+    // The host mounted no <SafeAreaProvider>; the hook itself still ran, so
+    // React's hook order is unchanged.
+    return FALLBACK_INSETS;
+  }
+}