@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/Spinner/Spinner.js

@@ -0,0 +1,199 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { ActivityIndicator, Animated, Easing, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { squircleHostRadius } from "../../utils/squircle.js";
+import { SquircleFill, useSquircle } from "../SquircleFill/SquircleFill.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  sm: 20,
+  md: 32,
+  lg: 48
+};
+const DOT_COUNT = 3;
+const DOT_STAGGER_MS = 150;
+const DOT_CYCLE_MS = 600;
+const Dot = ({
+  size,
+  color,
+  delay,
+  duration
+}) => {
+  const scale = useRef(createAnimatedValue(1)).current;
+  useEffect(() => {
+    const animation = Animated.loop(Animated.sequence([Animated.delay(delay), Animated.timing(scale, {
+      toValue: 1.4,
+      duration: duration / 2,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }), Animated.timing(scale, {
+      toValue: 1,
+      duration: duration / 2,
+      easing: Easing.in(Easing.quad),
+      useNativeDriver: true
+    })]));
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [scale, delay, duration]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      ...smoothCorners,
+      backgroundColor: color,
+      transform: [{
+        scale
+      }]
+    }
+  });
+};
+const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    size = 'md',
+    color,
+    message,
+    overlay = false,
+    backdropColor,
+    variant = 'circular',
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const fade = useRef(createAnimatedValue(0)).current;
+  useEffect(() => {
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }).start();
+  }, [fade, theme]);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const dimension = sizeMap[size];
+  const resolvedColor = color ?? theme.colors.primary;
+  const resolvedBackdrop = backdropColor ?? theme.colors.background.overlay;
+  const indicator = useMemo(() => {
+    if (variant === 'dots') {
+      const dotSize = Math.max(6, Math.round(dimension / 4));
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.dotsRow, {
+          gap: Math.round(dotSize / 2)
+        }],
+        children: Array.from({
+          length: DOT_COUNT
+        }).map((_, i) => /*#__PURE__*/_jsx(Dot, {
+          size: dotSize,
+          color: resolvedColor,
+          delay: i * DOT_STAGGER_MS,
+          duration: DOT_CYCLE_MS
+        }, i))
+      });
+    }
+    return /*#__PURE__*/_jsx(ActivityIndicator, {
+      color: resolvedColor,
+      size: size === 'sm' ? 'small' : 'large',
+      style: {
+        width: dimension,
+        height: dimension
+      }
+    });
+  }, [variant, size, dimension, resolvedColor, styles.dotsRow]);
+  const a11yLabel = accessibilityLabel ?? message ?? 'Loading';
+
+  // Android smooth corners for the overlay card. The host keeps its opaque
+  // background, because its elevation shadow is cast from the view's own
+  // outline; its native corner is pushed deeper so it hides under the
+  // squircle (see squircleHostRadius).
+  const squircle = useSquircle(overlay, theme.radius.lg);
+  const hostRadius = squircle.active && squircle.size ? {
+    borderRadius: squircleHostRadius(squircle.size.width, squircle.size.height, theme.radius.lg)
+  } : null;
+  const inner = /*#__PURE__*/_jsxs(Animated.View, {
+    ref: ref,
+    accessible: true,
+    accessibilityRole: "progressbar",
+    accessibilityLiveRegion: "polite",
+    accessibilityLabel: a11yLabel,
+    accessibilityState: {
+      busy: true
+    },
+    testID: testID,
+    onLayout: squircle.onLayout,
+    style: [overlay ? styles.overlayContent : styles.inlineContent, hostRadius, {
+      opacity: fade
+    }],
+    children: [squircle.active && squircle.size ? /*#__PURE__*/_jsx(SquircleFill, {
+      width: squircle.size.width,
+      height: squircle.size.height,
+      radius: theme.radius.lg,
+      fill: theme.colors.background.elevated
+    }) : null, indicator, message ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.message, {
+        color: theme.colors.text.primary,
+        fontSize: theme.typography.fontSize.base,
+        fontWeight: theme.typography.fontWeight.medium,
+        marginTop: theme.spacing.md
+      }],
+      numberOfLines: 2,
+      children: message
+    }) : null]
+  });
+  if (overlay) {
+    return /*#__PURE__*/_jsx(View, {
+      pointerEvents: "auto",
+      style: [styles.overlay, {
+        backgroundColor: resolvedBackdrop
+      }, style],
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.inline, style],
+    children: inner
+  });
+});
+Spinner.displayName = 'Spinner';
+const buildStyles = theme => StyleSheet.create({
+  inline: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  inlineContent: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  overlay: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000
+  },
+  overlayContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radius.lg,
+    ...smoothCorners,
+    paddingHorizontal: theme.spacing.xl,
+    paddingVertical: theme.spacing.xl,
+    minWidth: 140,
+    ...theme.shadows.lg
+  },
+  dotsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  message: {
+    textAlign: 'center'
+  }
+});
+export { Spinner };
+export default Spinner;
+//# sourceMappingURL=Spinner.js.map

package/lib/module/components/Spinner/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, Spinner } from "./Spinner.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/SquircleFill/SquircleFill.js

@@ -0,0 +1,110 @@
+"use strict";
+
+/**
+ * SquircleFill: the Android half of smooth corners.
+ *
+ * iOS rounds a view with Apple's continuous curve through
+ * `borderCurve: 'continuous'` (`utils/corners`). Android has no such style,
+ * so a host that wants the same look on Android draws its fill and border
+ * as an SVG path laid over its own bounds, and paints itself transparent
+ * behind it. Internal: `FieldBase`, `Button` and `Card` use it; apps get the
+ * corners through those. No barrel on purpose: a directory without an
+ * index.ts is an internal primitive, not a component of the public table.
+ *
+ * The overlay is absolutely positioned and inert to touches. It needs the
+ * host's measured size, which `useSquircle` collects from the host's
+ * `onLayout`; until the first layout the host keeps its native corner, so
+ * the first frame shows a circular corner rather than no fill at all.
+ *
+ * Not a general clipping tool: children of the host are not clipped to the
+ * shape, which is why hosts that must clip (a card with an image header, a
+ * gradient button) keep their native corner.
+ */
+
+import { useCallback, useState } from 'react';
+import { Animated, Platform, StyleSheet, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { squircleApplies, squirclePath } from "../../utils/squircle.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+export function SquircleFill({
+  width,
+  height,
+  radius,
+  fill,
+  stroke,
+  strokeWidth = 0,
+  outset = 0,
+  testID
+}) {
+  const hasStroke = strokeWidth > 0 && stroke !== undefined && stroke !== 'transparent';
+  const inset = hasStroke ? strokeWidth / 2 : 0;
+  const d = squirclePath({
+    width,
+    height,
+    radius,
+    inset
+  });
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    style: [styles.overlay, outset ? {
+      top: -outset,
+      left: -outset,
+      right: -outset,
+      bottom: -outset
+    } : null],
+    testID: testID,
+    children: /*#__PURE__*/_jsx(Svg, {
+      width: width,
+      height: height,
+      viewBox: `0 0 ${width} ${height}`,
+      children: /*#__PURE__*/_jsx(AnimatedPath, {
+        d: d
+        // react-native-svg types colours as strings; an Animated node is
+        // resolved to one by `createAnimatedComponent` before it reaches Path.
+        ,
+        fill: fill,
+        stroke: hasStroke ? stroke : undefined,
+        strokeWidth: hasStroke ? strokeWidth : undefined
+      })
+    })
+  });
+}
+SquircleFill.displayName = 'SquircleFill';
+/**
+ * Tracks a host's size for `SquircleFill`. On iOS (and when `enabled` is
+ * false) it only forwards the layout event and never re-renders the host.
+ */
+export function useSquircle(enabled, radius, onLayoutProp) {
+  const [size, setSize] = useState(null);
+  const track = enabled && Platform.OS === 'android';
+  const onLayout = useCallback(event => {
+    if (track) {
+      const {
+        width,
+        height
+      } = event.nativeEvent.layout;
+      setSize(prev => prev && prev.width === width && prev.height === height ? prev : {
+        width,
+        height
+      });
+    }
+    onLayoutProp?.(event);
+  }, [track, onLayoutProp]);
+  const active = track && size !== null && squircleApplies(size.width, size.height, radius);
+  return {
+    onLayout,
+    size,
+    active
+  };
+}
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
+//# sourceMappingURL=SquircleFill.js.map

package/lib/module/components/StatusBadge/StatusBadge.js

@@ -0,0 +1,229 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { tintOf } from "../../utils/color.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { Skeleton } from "../Skeleton/index.js";
+
+/**
+ * The same semantic vocabulary Chip and Badge use, and the web library's
+ * `AppStatusBadge` (its `danger` is `error` here, the mobile theme's name).
+ * A semantic name survives a palette change; a colour name does not.
+ */
+
+/**
+ * `soft` is the default: the tone at a light tint behind text in the tone,
+ * with a border in the tone so the pill has an edge on any surface. `outline`
+ * drops the fill. `solid` fills with the tone and draws the text on it.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  sm: {
+    height: 22,
+    paddingH: 8,
+    fontSize: 11,
+    dot: 5,
+    gap: 5
+  },
+  md: {
+    height: 24,
+    paddingH: 10,
+    fontSize: 12,
+    dot: 6,
+    gap: 6
+  }
+};
+
+/** Opacity of the tone behind a soft badge's text; the same as Button's soft fill. */
+const SOFT_FILL_OPACITY = 0.14;
+/**
+ * Opacity of the tone in a soft badge's border. Full strength next to a 14%
+ * tint reads as a heavy ring; a lighter shade of the status colour is the
+ * usual edge on a tinted pill.
+ */
+const SOFT_BORDER_OPACITY = 0.4;
+const BORDER_WIDTH = 1;
+/** The tone's base colour and the ink that sits on its solid fill. */
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return {
+        base: theme.colors.success,
+        on: theme.colors.onSuccess
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        on: theme.colors.onWarning
+      };
+    case 'error':
+      return {
+        base: theme.colors.error,
+        on: theme.colors.onError
+      };
+    case 'info':
+      return {
+        base: theme.colors.info,
+        on: theme.colors.onInfo
+      };
+    case 'primary':
+      return {
+        base: theme.colors.primary,
+        on: theme.colors.onPrimary
+      };
+    case 'neutral':
+    default:
+      // Neutral has no tone to tint: it takes the theme's surface greys and
+      // the secondary text tier, which reads on its own tint where the
+      // tertiary tier does not.
+      return {
+        base: theme.colors.text.secondary,
+        on: theme.colors.text.inverse
+      };
+  }
+};
+const isHex = value => typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value);
+const paletteFor = (theme, tone, variant, color) => {
+  const custom = isHex(color);
+  const {
+    base,
+    on
+  } = custom ?
+  // A custom colour has no themed on-colour of its own. The inverse text
+  // colour is right for the bright status colours apps actually send.
+  {
+    base: color,
+    on: theme.colors.text.inverse
+  } : toneFor(theme, tone);
+  const neutral = !custom && tone === 'neutral';
+  const tint = neutral ? theme.colors.background.tertiary : tintOf(base, SOFT_FILL_OPACITY, theme.colors.background.secondary);
+  const edge = neutral ? theme.colors.border.primary : tintOf(base, SOFT_BORDER_OPACITY, base);
+  switch (variant) {
+    case 'solid':
+      return {
+        fill: base,
+        border: base,
+        text: on,
+        dot: on
+      };
+    case 'outline':
+      return {
+        fill: 'transparent',
+        border: neutral ? edge : base,
+        text: base,
+        dot: base
+      };
+    case 'soft':
+    default:
+      return {
+        fill: tint,
+        border: edge,
+        text: base,
+        dot: base
+      };
+  }
+};
+const StatusBadge = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    tone = 'neutral',
+    variant = 'soft',
+    size = 'md',
+    dot = false,
+    color,
+    loading = false,
+    accessibilityLabel,
+    style,
+    textStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const sz = sizeMap[size];
+  const palette = useMemo(() => paletteFor(theme, tone, variant, color), [theme, tone, variant, color]);
+  if (loading) {
+    return /*#__PURE__*/_jsx(StatusBadgeSkeleton, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: accessibilityLabel ?? label,
+    testID: testID,
+    style: [styles.base, {
+      height: sz.height,
+      paddingHorizontal: sz.paddingH,
+      borderRadius: sz.height / 2,
+      ...smoothCorners,
+      backgroundColor: palette.fill,
+      borderColor: palette.border,
+      borderWidth: BORDER_WIDTH
+    }, style],
+    children: [dot ? /*#__PURE__*/_jsx(View, {
+      testID: "status-badge-dot",
+      style: {
+        width: sz.dot,
+        height: sz.dot,
+        borderRadius: sz.dot / 2,
+        marginRight: sz.gap,
+        backgroundColor: palette.dot
+      }
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, {
+        color: palette.text,
+        fontSize: sz.fontSize,
+        ...fontFor(theme, 'semibold')
+      }, textStyle],
+      numberOfLines: 1,
+      allowFontScaling: false,
+      children: label
+    })]
+  });
+});
+StatusBadge.displayName = 'StatusBadge';
+
+/**
+ * Placeholder shape for `<StatusBadge>`: a pill of the configured size, as
+ * wide as the label would make it, with room for the dot when one is asked
+ * for, so a list of statuses keeps its column width while it loads.
+ */
+const StatusBadgeSkeleton = ({
+  label,
+  size = 'md',
+  dot,
+  style
+}) => {
+  const sz = sizeMap[size];
+  const labelWidth = Math.max(32, Math.min(120, (label ?? '').length * 6.5));
+  const width = labelWidth + sz.paddingH * 2 + (dot ? sz.dot + sz.gap : 0);
+  return /*#__PURE__*/_jsx(Skeleton, {
+    width: width,
+    height: sz.height,
+    radius: sz.height / 2,
+    style: [styles.skeleton, style]
+  });
+};
+StatusBadgeSkeleton.displayName = 'StatusBadgeSkeleton';
+StatusBadge.Skeleton = StatusBadgeSkeleton;
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  label: {
+    textAlign: 'center',
+    includeFontPadding: false,
+    textAlignVertical: 'center'
+  },
+  skeleton: {
+    alignSelf: 'flex-start'
+  }
+});
+export { StatusBadge };
+export default StatusBadge;
+//# sourceMappingURL=StatusBadge.js.map

package/lib/module/components/StatusBadge/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, StatusBadge } from "./StatusBadge.js";
+//# sourceMappingURL=index.js.map