@studio-piot/native-ui 0.2.5 → 0.17.0

package/src/components/ErrorBanner/ErrorBanner.tsx

@@ -13,10 +13,22 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { buttonRadiusValue } from "../Button/buttonRadius";
 import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
-import { screenPaddingHorizontal } from "../../layout/screenPadding";
+import { useThemeSpacing } from "../../theme/useThemeSpacing";
 import { errorBannerTitle } from "./errorBannerCopy";
+import {
+  ERROR_BANNER_ARROW_SIZE,
+  ERROR_BANNER_DISC_SIZE,
+  ERROR_BANNER_DISMISS_SIZE,
+  ERROR_BANNER_FONT_SIZE,
+  ERROR_BANNER_HEADER_GAP,
+  ERROR_BANNER_LINE_HEIGHT,
+  ERROR_BANNER_MEGAPHONE_SIZE,
+  ERROR_BANNER_ROW_INSET,
+  ERROR_BANNER_ROW_MIN_HEIGHT,
+  errorBannerBarStyle,
+} from "./errorBannerLayout";
 import { ERROR_BANNER_THEME_ROLES } from "./errorBannerThemeRoles";
-import { ArrowRight, Megaphone } from "./icons";
+import { ArrowRight, Cross, Megaphone } from "./icons";
 import type { ErrorBannerProps } from "./types";
 
 const BOTTOM_RADIUS = buttonRadiusValue("xl");
@@ -33,13 +45,15 @@ export function ErrorBanner({
   onDismiss,
   onHeightChange,
   safeAreaTop,
-  paddingHorizontal = screenPaddingHorizontal,
+  paddingHorizontal: paddingHorizontalProp,
   backgroundColor: backgroundColorProp,
   textColor: textColorProp,
   secondaryColor: secondaryColorProp,
   dividerColor: dividerColorProp,
   accentColor: accentColorProp,
 }: ErrorBannerProps) {
+  const spacing = useThemeSpacing();
+  const paddingHorizontal = paddingHorizontalProp ?? spacing.screen;
   const insets = useSafeAreaInsets();
   const topInset = safeAreaTop ?? insets.top;
   const backgroundColor = useResolvedFieldColor(
@@ -108,7 +122,7 @@ export function ErrorBanner({
 
   return (
     <>
-      {open ? <StatusBar animated barStyle="light-content" /> : null}
+      {open ? <StatusBar animated barStyle={errorBannerBarStyle(backgroundColor)} /> : null}
       <Animated.View
         accessibilityRole="alert"
         accessibilityElementsHidden={!open}
@@ -133,7 +147,7 @@ export function ErrorBanner({
             importantForAccessibility="no-hide-descendants"
             style={[styles.iconDisc, { backgroundColor: accentColor }]}
           >
-            <Megaphone color={backgroundColor} />
+            <Megaphone color={backgroundColor} size={ERROR_BANNER_MEGAPHONE_SIZE} />
           </View>
           <Text style={[styles.title, { color: textColor }]}>{title}</Text>
           <Pressable
@@ -142,7 +156,7 @@ export function ErrorBanner({
             hitSlop={12}
             onPress={onDismiss}
           >
-            <Text style={[styles.dismiss, { color: secondaryColor }]}>✕</Text>
+            <Cross color={secondaryColor} size={ERROR_BANNER_DISMISS_SIZE} />
           </Pressable>
         </View>
         <View style={styles.rows}>
@@ -151,7 +165,6 @@ export function ErrorBanner({
               key={error.field}
               accessibilityLabel={`${error.short}. Go to field.`}
               accessibilityRole="button"
-              hitSlop={{ top: 4, bottom: 4 }}
               onPress={() => onJump(error.field)}
               style={({ pressed }) => [
                 styles.row,
@@ -166,7 +179,7 @@ export function ErrorBanner({
                 accessibilityElementsHidden
                 importantForAccessibility="no-hide-descendants"
               >
-                <ArrowRight color={secondaryColor} />
+                <ArrowRight color={secondaryColor} size={ERROR_BANNER_ARROW_SIZE} />
               </View>
             </Pressable>
           ))}
@@ -184,7 +197,7 @@ const styles = StyleSheet.create({
     right: 0,
     zIndex: 100,
     paddingBottom: 10,
-    shadowColor: "#22201D",
+    shadowColor: "#000000",
     shadowOpacity: 0.25,
     shadowRadius: 12,
     shadowOffset: { width: 0, height: 8 },
@@ -193,32 +206,29 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10,
+    gap: ERROR_BANNER_HEADER_GAP,
   },
   iconDisc: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
+    width: ERROR_BANNER_DISC_SIZE,
+    height: ERROR_BANNER_DISC_SIZE,
+    borderRadius: ERROR_BANNER_DISC_SIZE / 2,
     alignItems: "center",
     justifyContent: "center",
   },
   title: {
     flex: 1,
-    fontSize: 15,
-    lineHeight: 20,
+    fontSize: ERROR_BANNER_FONT_SIZE,
+    lineHeight: ERROR_BANNER_LINE_HEIGHT,
     fontWeight: "600",
   },
-  dismiss: {
-    fontSize: 15,
-  },
   rows: {
     marginTop: 6,
   },
   row: {
     flexDirection: "row",
     alignItems: "center",
-    minHeight: 36,
-    marginLeft: 38,
+    minHeight: ERROR_BANNER_ROW_MIN_HEIGHT,
+    marginLeft: ERROR_BANNER_ROW_INSET,
     borderTopWidth: 1,
   },
   pressed: {
@@ -226,7 +236,7 @@ const styles = StyleSheet.create({
   },
   rowLabel: {
     flex: 1,
-    fontSize: 15,
-    lineHeight: 20,
+    fontSize: ERROR_BANNER_FONT_SIZE,
+    lineHeight: ERROR_BANNER_LINE_HEIGHT,
   },
 });

package/src/components/ErrorBanner/errorBannerContext.tsx

@@ -8,10 +8,15 @@ import {
   type ReactNode,
   type RefObject,
 } from "react";
-import { View, type ReactNativeElement, type ScrollView } from "react-native";
+import { View, type ReactNativeElement } from "react-native";
 import { fieldScrollY } from "./errorBannerCopy";
 import type { FieldError } from "./types";
 
+/** Anything that scrolls: a ScrollView, a KeyboardAwareScrollView, a BottomSheetScrollView. */
+export type ErrorBannerScrollTarget = {
+  scrollTo(options: { y: number; animated?: boolean }): void;
+};
+
 export type ErrorBannerAnchor = {
   view: View;
   focus?: () => void;
@@ -76,12 +81,28 @@ export function ErrorBannerProvider({
   errors,
   onDismiss,
   bannerHeightRef,
+  measureRef,
+  onBeforeJump,
+  scrollYForField,
 }: {
   children: ReactNode;
-  scrollRef: RefObject<ScrollView | null>;
+  scrollRef: RefObject<ErrorBannerScrollTarget | null>;
   errors: readonly FieldError[];
   onDismiss: () => void;
+  /** How far the banner covers the top of the scroll area. */
   bannerHeightRef: RefObject<number>;
+  /**
+   * View that field positions are measured against: the scroll content's
+   * top. Defaults to `scrollRef`, which works for a plain ScrollView.
+   */
+  measureRef?: RefObject<View | null>;
+  /** Runs before scrolling to a field, e.g. to expand a sheet. */
+  onBeforeJump?: () => void;
+  /**
+   * Scroll offset for a field at content y `fieldY`. Defaults to clearing
+   * `bannerHeightRef` from the top of the scroll area.
+   */
+  scrollYForField?: (fieldY: number) => number;
 }) {
   const anchors = useRef(new Map<string, ErrorBannerAnchor>());
 
@@ -96,21 +117,25 @@ export function ErrorBannerProvider({
   const jump = useCallback((field: string) => {
     const anchor = anchors.current.get(field);
     const scroll = scrollRef.current;
-    if (!anchor || !scroll) {
+    const relativeTo = measureRef?.current ?? scroll;
+    if (!anchor || !scroll || !relativeTo) {
       return;
     }
+    onBeforeJump?.();
     anchor.view.measureLayout(
-      scroll as unknown as ReactNativeElement,
+      relativeTo as unknown as ReactNativeElement,
       (_x, y) => {
         scroll.scrollTo({
-          y: fieldScrollY(y, bannerHeightRef.current ?? 0),
+          y: scrollYForField
+            ? scrollYForField(y)
+            : fieldScrollY(y, bannerHeightRef.current ?? 0),
           animated: true,
         });
         anchor.focus?.();
       },
       () => undefined,
     );
-  }, [bannerHeightRef, scrollRef]);
+  }, [bannerHeightRef, measureRef, onBeforeJump, scrollRef, scrollYForField]);
 
   const value = useMemo(
     () => ({ errors, register, dismiss: onDismiss, jump }),

package/src/components/ErrorBanner/errorBannerLayout.test.ts

@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  ERROR_BANNER_DISC_SIZE,
+  ERROR_BANNER_FONT_SIZE,
+  ERROR_BANNER_HEADER_GAP,
+  ERROR_BANNER_ROW_INSET,
+  ERROR_BANNER_ROW_MIN_HEIGHT,
+  errorBannerBarStyle,
+} from "./errorBannerLayout.ts";
+
+describe("errorBannerBarStyle", () => {
+  it("uses light status bar text on a dark banner", () => {
+    assert.equal(errorBannerBarStyle("#1F2937"), "light-content");
+    assert.equal(errorBannerBarStyle("#000"), "light-content");
+  });
+
+  it("uses dark status bar text on a light banner", () => {
+    assert.equal(errorBannerBarStyle("#F9FAFB"), "dark-content");
+    assert.equal(errorBannerBarStyle("#fff"), "dark-content");
+  });
+
+  it("reads rgb() and 8-digit hex colours", () => {
+    assert.equal(errorBannerBarStyle("rgb(255, 255, 255)"), "dark-content");
+    assert.equal(errorBannerBarStyle("rgba(31, 41, 55, 0.9)"), "light-content");
+    assert.equal(errorBannerBarStyle("#FFFFFFCC"), "dark-content");
+  });
+
+  it("falls back to the system default when the colour cannot be read", () => {
+    assert.equal(errorBannerBarStyle("red"), "default");
+  });
+});
+
+describe("error banner sizes", () => {
+  it("matches the 17pt body text used by the other components", () => {
+    assert.equal(ERROR_BANNER_FONT_SIZE, 17);
+  });
+
+  it("gives each row the 44pt minimum tap target", () => {
+    assert.ok(ERROR_BANNER_ROW_MIN_HEIGHT >= 44);
+  });
+
+  it("lines rows up with the title, after the disc and gap", () => {
+    assert.equal(
+      ERROR_BANNER_ROW_INSET,
+      ERROR_BANNER_DISC_SIZE + ERROR_BANNER_HEADER_GAP,
+    );
+  });
+});

package/src/components/ErrorBanner/errorBannerLayout.ts

@@ -0,0 +1,59 @@
+/** Title and rows, matching the 17pt body text of Button, Field and Select. */
+export const ERROR_BANNER_FONT_SIZE = 17;
+export const ERROR_BANNER_LINE_HEIGHT = 22;
+export const ERROR_BANNER_DISC_SIZE = 32;
+export const ERROR_BANNER_MEGAPHONE_SIZE = 18;
+export const ERROR_BANNER_ARROW_SIZE = 20;
+export const ERROR_BANNER_DISMISS_SIZE = 18;
+export const ERROR_BANNER_HEADER_GAP = 12;
+export const ERROR_BANNER_ROW_MIN_HEIGHT = 44;
+/** Rows start under the title, past the disc and gap. */
+export const ERROR_BANNER_ROW_INSET =
+  ERROR_BANNER_DISC_SIZE + ERROR_BANNER_HEADER_GAP;
+
+export type ErrorBannerBarStyle = "light-content" | "dark-content" | "default";
+
+function parseRgb(color: string): [number, number, number] | null {
+  const value = color.trim();
+  const hex = /^#([0-9a-f]{3,8})$/i.exec(value)?.[1];
+  if (hex) {
+    const full =
+      hex.length === 3 || hex.length === 4
+        ? hex
+            .slice(0, 3)
+            .split("")
+            .map((c) => c + c)
+            .join("")
+        : hex.slice(0, 6);
+    if (full.length !== 6) {
+      return null;
+    }
+    return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16)) as [
+      number,
+      number,
+      number,
+    ];
+  }
+  const rgb = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(value);
+  if (rgb) {
+    return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+  }
+  return null;
+}
+
+/**
+ * Status bar text that stays readable over the banner fill: light text on a
+ * dark banner, dark text on a light one. Pure so it can be unit-tested.
+ */
+export function errorBannerBarStyle(backgroundColor: string): ErrorBannerBarStyle {
+  const rgb = parseRgb(backgroundColor);
+  if (!rgb) {
+    return "default";
+  }
+  const [r, g, b] = rgb.map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return luminance > 0.179 ? "dark-content" : "light-content";
+}

package/src/components/ErrorBanner/icons.tsx

@@ -1,10 +1,12 @@
 import Svg, { Line, Path, Polyline } from "react-native-svg";
 
-export function Megaphone({ color }: { color: string }) {
+type IconProps = { color: string; size: number };
+
+export function Megaphone({ color, size }: IconProps) {
   return (
     <Svg
-      width={16}
-      height={16}
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
       fill="none"
       stroke={color}
@@ -19,11 +21,11 @@ export function Megaphone({ color }: { color: string }) {
   );
 }
 
-export function ArrowRight({ color }: { color: string }) {
+export function ArrowRight({ color, size }: IconProps) {
   return (
     <Svg
-      width={18}
-      height={18}
+      width={size}
+      height={size}
       viewBox="0 0 24 24"
       fill="none"
       stroke={color}
@@ -36,3 +38,20 @@ export function ArrowRight({ color }: { color: string }) {
     </Svg>
   );
 }
+
+export function Cross({ color, size }: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={2.25}
+      strokeLinecap="round"
+    >
+      <Line x1={6} y1={6} x2={18} y2={18} />
+      <Line x1={18} y1={6} x2={6} y2={18} />
+    </Svg>
+  );
+}

package/src/components/ErrorBanner/index.ts

@@ -5,6 +5,7 @@ export {
   useErrorBannerContext,
   useErrorBannerDismiss,
   useErrorBannerField,
+  type ErrorBannerScrollTarget,
 } from "./errorBannerContext";
 export {
   ERROR_BANNER_THEME_ROLES,