@isoline-ui/react-native 0.0.0-stage → 0.1.0-alpha.3

package/src/components/top-bar.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { BackIcon } from './back-icon.tsx';
+import { HEADER_ICON_BUTTON, IconButton } from './icon-button.tsx';
+import { Text } from './text.tsx';
+import {
+  type MaterialOptions,
+  useIsolinePlatform,
+  useLabels,
+  useSurface,
+} from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+/**
+ * The bar every screen below the tabs opens with: the back arrow 8 from the
+ * edge, the screen's own buttons at the other end, and, when a screen wants
+ * one, something small in between (a position, a step). One height, one
+ * inset, so moving between screens moves nothing at the top. The status
+ * bar's room is the screen's: it knows whether it draws under it.
+ */
+export interface TopBarProps extends MaterialOptions {
+  onBack: () => void;
+  backLabel?: string;
+  center?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+}
+export function TopBar({
+  onBack,
+  center,
+  actions,
+  backLabel,
+  className,
+  material = 'auto',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive,
+}: TopBarProps) {
+  const labels = useLabels();
+  const ios = useIsolinePlatform() === 'ios';
+  const Surface = useSurface();
+  return (
+    <Surface
+      material={ios ? material : 'solid'}
+      glassStyle={glassStyle}
+      tintColor={tintColor}
+      fallbackColor={fallbackColor}
+      interactive={interactive}
+      className={className}
+      style={{
+        minHeight: 56,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 8,
+      }}
+    >
+      <IconButton
+        {...HEADER_ICON_BUTTON}
+        icon={BackIcon}
+        onPress={onBack}
+        accessibilityLabel={backLabel ?? labels.back}
+      />
+      <View className="flex-1 items-center px-2">{center}</View>
+      {actions}
+    </Surface>
+  );
+}
+
+/**
+ * A screen's name under its bar: the emphasized title, 16 from the edge, and
+ * a line about it. The same on every screen, so a title is where the eye
+ * expects it.
+ */
+export function ScreenTitle({
+  title,
+  caption,
+  className,
+}: {
+  title: string;
+  caption?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <View className={cn('gap-1 px-4', className)}>
+      <Text variant="title">{title}</Text>
+      {typeof caption === 'string' ? <Text variant="caption">{caption}</Text> : caption}
+    </View>
+  );
+}

package/src/components/undo-bar.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import {
+  Surface,
+  useIsolinePlatform,
+  useThemeColors,
+  type MaterialOptions,
+} from '../provider.tsx';
+import { Text } from './text.tsx';
+import { Pressable } from './pressable.tsx';
+import { Button } from './button.tsx';
+import { WavyProgress, type WavyProgressProps } from './wavy-progress.tsx';
+
+export interface UndoBarProps extends MaterialOptions {
+  message: string;
+  actionLabel: string;
+  dismissLabel: string;
+  onUndo: () => void;
+  onDismiss: () => void;
+  /** Time supplied by the app's undo clock. This component never executes/expiries undo entries. */
+  remainingMs: number;
+  totalMs: number;
+  progress?: WavyProgressProps['progress'];
+  paused?: boolean;
+  onPause?: () => void;
+  onResume?: () => void;
+  collapsed?: boolean;
+  onExpand?: () => void;
+  countLabel?: string;
+  showDismissButton?: boolean;
+}
+/** A feedback surface only; queue, expiry, collapse policy and screen clearance belong to the app. */
+export function UndoBar({
+  message,
+  actionLabel,
+  dismissLabel,
+  onUndo,
+  onDismiss,
+  remainingMs,
+  totalMs,
+  progress: suppliedProgress,
+  paused,
+  onPause,
+  onResume,
+  collapsed,
+  onExpand,
+  countLabel,
+  showDismissButton = true,
+  material = 'solid',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive,
+}: UndoBarProps) {
+  const colors = useThemeColors();
+  const glass = useIsolinePlatform() === 'ios' && material !== 'solid';
+  const swipe = Gesture.Pan()
+    .activeOffsetX([-12, 12])
+    .runOnJS(true)
+    .onBegin(() => onPause?.())
+    .onEnd((event) => {
+      if (Math.abs(event.translationX) > 96 || Math.abs(event.velocityX) > 800) onDismiss();
+    })
+    .onFinalize(() => onResume?.());
+  const progress = totalMs > 0 ? Math.max(0, Math.min(1, remainingMs / totalMs)) : 0;
+  return (
+    <GestureDetector gesture={swipe}>
+      <Surface
+        material={glass ? material : 'solid'}
+        glassStyle={glassStyle}
+        tintColor={tintColor}
+        fallbackColor={fallbackColor}
+        interactive={interactive}
+        style={{ padding: 12, borderRadius: 24, gap: 6 }}
+      >
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={message}
+          accessibilityActions={[{ name: 'dismiss', label: dismissLabel }]}
+          onAccessibilityAction={(event) => {
+            if (event.nativeEvent.actionName === 'dismiss') onDismiss();
+          }}
+          onPress={onExpand}
+          onPressIn={onPause}
+          onPressOut={onResume}
+          {...(Platform.OS === 'web'
+            ? {
+                onKeyDown: (
+                  event: Parameters<
+                    NonNullable<React.ComponentProps<typeof Pressable>['onKeyDown']>
+                  >[0],
+                ) => {
+                  if (event.nativeEvent.key === 'Escape') {
+                    event.preventDefault();
+                    onDismiss();
+                  }
+                },
+              }
+            : {})}
+          style={{ minHeight: 44, justifyContent: 'center' }}
+        >
+          {!collapsed ? (
+            <Text accessibilityLiveRegion="polite">{message}</Text>
+          ) : (
+            <Text>{countLabel ?? actionLabel}</Text>
+          )}
+          {countLabel ? <Text variant="caption">{countLabel}</Text> : null}
+        </Pressable>
+        <WavyProgress
+          progress={suppliedProgress ?? progress}
+          animated={!paused}
+          color={colors.primary}
+          trackColor={colors.surfaceContainerHighest}
+        />
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          <Button
+            size="s"
+            variant="ghost"
+            label={actionLabel}
+            accessibilityLabel={`${actionLabel}: ${message}`}
+            onPress={onUndo}
+            onPressIn={onPause}
+            onPressOut={onResume}
+            accessibilityActions={[{ name: 'dismiss', label: dismissLabel }]}
+            onAccessibilityAction={(event) => {
+              if (event.nativeEvent.actionName === 'dismiss') onDismiss();
+            }}
+          />
+          {showDismissButton ? (
+            <Button size="s" variant="ghost" label={dismissLabel} onPress={onDismiss} />
+          ) : null}
+        </View>
+      </Surface>
+    </GestureDetector>
+  );
+}

package/src/components/wavy-progress.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedProps,
+  useSharedValue,
+  useAnimatedReaction,
+  runOnJS,
+  type SharedValue,
+  withRepeat,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Circle, Path } from 'react-native-svg';
+
+import { spatial } from '../motion.ts';
+import { useReducedMotion } from '../reduced-motion.ts';
+import { useIsolinePlatform, useThemeColors } from '../provider.tsx';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+const STROKE = 4;
+const WAVELENGTH = 28;
+/** Room above and below the line for the wave to swing in. */
+const HEIGHT = 12;
+const GAP = 6;
+
+/**
+ * The Expressive determinate progress indicator: the part done is a wave,
+ * the part left a flat track, with a gap between them.
+ *
+ * The wave calms down towards either end — it is flat at nothing done and
+ * flat again at all done, so a finished list reads as finished, not busy.
+ * While something is underway the wave travels slowly; under "Remove
+ * animations" it stands still, and a change of progress arrives at once.
+ */
+export interface WavyProgressProps {
+  /** 0 to 1. */
+  progress: number | SharedValue<number>;
+  height?: number;
+  color?: string;
+  trackColor?: string;
+  /** A still wave, for small previews where motion would only distract. */
+  animated?: boolean;
+}
+
+export function WavyProgress({
+  progress,
+  color,
+  trackColor,
+  animated = true,
+  height = HEIGHT,
+}: WavyProgressProps) {
+  const ios = useIsolinePlatform() === 'ios';
+  const colors = useThemeColors();
+  const reduced = useReducedMotion();
+  const [width, setWidth] = React.useState(0);
+  const numeric = typeof progress === 'number';
+  const value = useSharedValue(numeric ? progress : 0);
+  const source = numeric ? value : progress;
+  const [announced, setAnnounced] = React.useState<number | undefined>(
+    numeric ? Math.round(progress * 100) : undefined,
+  );
+  useAnimatedReaction(
+    () => Math.round(Math.max(0, Math.min(1, source.value)) * 100),
+    (now, before) => {
+      if (now !== before) runOnJS(setAnnounced)(now);
+    },
+    [source],
+  );
+  const phase = useSharedValue(0);
+  const moving = animated && !reduced && !ios;
+
+  React.useEffect(() => {
+    if (typeof progress === 'number')
+      value.value = moving ? withSpring(progress, spatial.slow) : progress;
+  }, [moving, progress, value]);
+
+  React.useEffect(() => {
+    if (!moving) {
+      cancelAnimation(phase);
+      return;
+    }
+    phase.value = 0;
+    phase.value = withRepeat(withTiming(1, { duration: 1800, easing: Easing.linear }), -1);
+    return () => cancelAnimation(phase);
+  }, [moving, phase]);
+
+  const wave = useAnimatedProps(() => {
+    const p = Math.max(0, Math.min(1, source.value));
+    const end = Math.max(0, (width - STROKE - GAP) * p);
+    const amplitude =
+      (reduced || ios ? 0 : Math.max(0, Math.min(3, (height - STROKE) / 2))) *
+      Math.min(1, p * 6, (1 - p) * 6);
+    const mid = height / 2;
+    const shift = phase.value * WAVELENGTH;
+    let d = `M ${STROKE / 2} ${mid}`;
+    for (let x = 2; x <= end; x += 2) {
+      const y = mid + amplitude * Math.sin(((x + shift) / WAVELENGTH) * 2 * Math.PI);
+      d += ` L ${x + STROKE / 2} ${y.toFixed(2)}`;
+    }
+    return { d, strokeOpacity: end < 1 ? 0 : 1 };
+  });
+
+  const track = useAnimatedProps(() => {
+    const p = Math.max(0, Math.min(1, source.value));
+    const start = (width - STROKE - GAP) * p + (p > 0 ? GAP : 0) + STROKE / 2;
+    const end = width - STROKE - GAP / 2;
+    return {
+      d: `M ${Math.min(start, end)} ${height / 2} L ${end} ${height / 2}`,
+      strokeOpacity: start >= end ? 0 : 1,
+    };
+  });
+
+  return (
+    <View
+      style={{ height }}
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max: 100, now: announced }}
+    >
+      {width > 0 ? (
+        <Svg width={width} height={height}>
+          <AnimatedPath
+            animatedProps={track}
+            stroke={trackColor ?? colors.secondaryContainer}
+            strokeWidth={STROKE}
+            strokeLinecap="round"
+            fill="none"
+          />
+          <AnimatedPath
+            animatedProps={wave}
+            stroke={color ?? colors.primary}
+            strokeWidth={STROKE}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+          <Circle
+            cx={width - STROKE / 2}
+            cy={height / 2}
+            r={STROKE / 2}
+            fill={color ?? colors.primary}
+          />
+        </Svg>
+      ) : null}
+    </View>
+  );
+}

package/src/components/zoomable-image.tsx

@@ -0,0 +1,240 @@
+import * as React from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Button } from './button.tsx';
+import { Toolbar as ToolbarContainer } from './toolbar.tsx';
+import type { MaterialOptions } from '../provider.tsx';
+import { Text } from './text.tsx';
+import { clampZoom, imagePanBounds, imageDimensions } from '../media.ts';
+
+/** Material options apply to the floating zoom controls, never the image. */
+export interface ZoomableImageProps extends MaterialOptions {
+  uri: string;
+  accessibilityLabel: string;
+  onTap?: () => void;
+  onDismiss?: () => void;
+  maximumScale?: number;
+  labels: { zoomIn: string; zoomOut: string; reset: string; error?: string };
+  renderImage?: (
+    onLoad: (width: number, height: number) => void,
+    onError: () => void,
+  ) => React.ReactNode;
+}
+export function ZoomableImage({
+  uri,
+  accessibilityLabel,
+  onTap,
+  onDismiss,
+  maximumScale = 5,
+  labels,
+  renderImage,
+  material = 'auto',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive,
+}: ZoomableImageProps) {
+  const currentUri = React.useRef(uri);
+  currentUri.current = uri;
+  const mounted = React.useRef(true);
+  React.useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const width = useSharedValue(1),
+    height = useSharedValue(1),
+    aspect = useSharedValue(1);
+  const scale = useSharedValue(1),
+    x = useSharedValue(0),
+    y = useSharedValue(0);
+  const startScale = useSharedValue(1),
+    startX = useSharedValue(0),
+    startY = useSharedValue(0);
+  const pinched = useSharedValue(false),
+    focalX = useSharedValue(0),
+    focalY = useSharedValue(0);
+  const [shown, setShown] = React.useState(1),
+    [failed, setFailed] = React.useState(false);
+  const maximum = Number.isFinite(maximumScale) ? Math.max(1, maximumScale) : 5;
+  const reset = React.useCallback(() => {
+    scale.value = 1;
+    x.value = 0;
+    y.value = 0;
+    setShown(1);
+  }, [scale, x, y]);
+  React.useEffect(() => {
+    reset();
+    setFailed(false);
+  }, [uri, reset]);
+  const settle = () => {
+    'worklet';
+    const next = clampZoom(scale.value, maximum),
+      bounds = imagePanBounds(width.value, height.value, aspect.value, next);
+    scale.value = withTiming(next);
+    x.value = withTiming(Math.max(-bounds.x, Math.min(bounds.x, x.value)));
+    y.value = withTiming(Math.max(-bounds.y, Math.min(bounds.y, y.value)));
+    runOnJS(setShown)(next);
+  };
+  const pinch = Gesture.Pinch()
+    .onStart((event) => {
+      pinched.value = true;
+      startScale.value = scale.value;
+      startX.value = x.value;
+      startY.value = y.value;
+      focalX.value = event.focalX - width.value / 2;
+      focalY.value = event.focalY - height.value / 2;
+    })
+    .onUpdate((event) => {
+      if (event.numberOfPointers < 2) return;
+      const next = Math.max(0.75, Math.min(maximum * 1.25, startScale.value * event.scale));
+      const ratio = next / startScale.value;
+      x.value = event.focalX - width.value / 2 - (focalX.value - startX.value) * ratio;
+      y.value = event.focalY - height.value / 2 - (focalY.value - startY.value) * ratio;
+      scale.value = next;
+    })
+    .onEnd(settle);
+  const pan = Gesture.Pan()
+    .maxPointers(1)
+    .onBegin(() => {
+      pinched.value = false;
+    })
+    .onStart(() => {
+      startX.value = x.value;
+      startY.value = y.value;
+    })
+    .onUpdate((event) => {
+      if (pinched.value) return;
+      const limits = imagePanBounds(width.value, height.value, aspect.value, scale.value);
+      x.value = Math.max(-limits.x, Math.min(limits.x, startX.value + event.translationX));
+      y.value =
+        scale.value <= 1.01 && onDismiss
+          ? Math.max(0, event.translationY)
+          : Math.max(-limits.y, Math.min(limits.y, startY.value + event.translationY));
+    })
+    .onEnd((event) => {
+      if (
+        scale.value <= 1.01 &&
+        onDismiss &&
+        (event.translationY > 120 || event.velocityY > 900)
+      ) {
+        runOnJS(onDismiss)();
+        return;
+      }
+      settle();
+    });
+  const zoom = (next: number) => {
+    scale.value = clampZoom(next, maximum);
+    settle();
+  };
+  const double = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd((event) => {
+      const next = scale.value > 1.01 ? 1 : Math.min(2.5, maximum);
+      const ratio = next / scale.value;
+      x.value = (event.x - width.value / 2) * (1 - ratio) + x.value * ratio;
+      y.value = (event.y - height.value / 2) * (1 - ratio) + y.value * ratio;
+      scale.value = next;
+      settle();
+    });
+  const single = Gesture.Tap()
+    .requireExternalGestureToFail(double)
+    .runOnJS(true)
+    .onEnd(() => onTap?.());
+  const motion = useAnimatedStyle(() => ({
+    transform: [{ translateX: x.value }, { translateY: y.value }, { scale: scale.value }],
+  }));
+  // Keep the floating material over the contained photo rather than its empty
+  // letterbox. This position stays stable while zooming and updates on resize.
+  const controlPosition = useAnimatedStyle(() => ({
+    bottom:
+      Math.max(0, (height.value - Math.min(height.value, width.value / aspect.value)) / 2) + 8,
+  }));
+  const imageLoaded = (w: number, h: number) => {
+    if (w > 0 && h > 0) aspect.value = w / h;
+  };
+  return (
+    <View style={{ flex: 1, minHeight: 180, gap: 8 }}>
+      <GestureDetector
+        gesture={Gesture.Simultaneous(pinch, pan, Gesture.Exclusive(double, single))}
+      >
+        <View
+          testID="isoline-image-viewport"
+          onLayout={(event) => {
+            width.value = Math.max(1, event.nativeEvent.layout.width);
+            height.value = Math.max(1, event.nativeEvent.layout.height);
+          }}
+          style={{ flex: 1, minHeight: 140, overflow: 'hidden', borderRadius: 16 }}
+        >
+          <Animated.View style={[StyleSheet.absoluteFill, motion]}>
+            {renderImage ? (
+              renderImage(imageLoaded, () => setFailed(true))
+            ) : (
+              <Image
+                source={{ uri }}
+                resizeMode="contain"
+                accessibilityLabel={accessibilityLabel}
+                style={StyleSheet.absoluteFill}
+                onLoad={(event) => {
+                  const size = imageDimensions(event);
+                  if (size) imageLoaded(size.width, size.height);
+                  else {
+                    // Deferred browser load events can lose their DOM target.
+                    // Ask the standard image loader for cached dimensions instead.
+                    Image.getSize(
+                      uri,
+                      (w, h) => {
+                        if (mounted.current && currentUri.current === uri) imageLoaded(w, h);
+                      },
+                      () => {},
+                    );
+                  }
+                }}
+                onError={() => setFailed(true)}
+              />
+            )}
+          </Animated.View>
+          {failed && labels.error ? <Text>{labels.error}</Text> : null}
+        </View>
+      </GestureDetector>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[{ position: 'absolute', left: 8, right: 8 }, controlPosition]}
+      >
+        <ToolbarContainer
+          testID="isoline-image-controls"
+          material={material}
+          glassStyle={glassStyle}
+          tintColor={tintColor}
+          fallbackColor={fallbackColor}
+          interactive={interactive}
+          style={{ flexWrap: 'wrap', justifyContent: 'center', gap: 4 }}
+        >
+          <Button
+            size="s"
+            variant="ghost"
+            label={labels.zoomOut}
+            accessibilityLabel={labels.zoomOut}
+            disabled={shown <= 1}
+            onPress={() => zoom(scale.value / 1.5)}
+          />
+          <Button
+            size="s"
+            variant="ghost"
+            label={labels.zoomIn}
+            disabled={shown >= maximum}
+            onPress={() => zoom(scale.value * 1.5)}
+          />
+          <Button size="s" variant="ghost" label={labels.reset} onPress={reset} />
+        </ToolbarContainer>
+      </Animated.View>
+    </View>
+  );
+}

package/src/expressive-shapes.ts

@@ -0,0 +1,25 @@
+import { lobedRadii, radiiToPath, shapeRadii } from './shape.ts';
+
+/** Still expressive shapes as SVG paths on a 100-unit box. */
+
+/** Sampled densely: a still shape is drawn once, so smoothness is free. */
+const SAMPLES = 96;
+
+export const EXPRESSIVE_SHAPES = {
+  clover: radiiToPath(lobedRadii(4, 0.22, SAMPLES, Math.PI / 4), 50, 50),
+  cookie: radiiToPath(lobedRadii(9, 0.1, SAMPLES, 0), 50, 50),
+  flower: radiiToPath(lobedRadii(6, 0.16, SAMPLES, Math.PI / 6), 50, 50),
+  // Pointing up: the angle runs clockwise from three o'clock on screen.
+  gable: radiiToPath(
+    shapeRadii({ vertices: 5, roundness: 0.55, rotation: Math.PI / 2 }, SAMPLES),
+    50,
+    52,
+  ),
+  square: radiiToPath(
+    shapeRadii({ vertices: 4, roundness: 0.75, rotation: Math.PI / 4 }, SAMPLES),
+    50,
+    58,
+  ),
+} as const;
+
+export type ExpressiveShapeName = keyof typeof EXPRESSIVE_SHAPES;