@studio-piot/native-ui 0.2.5 → 0.16.0

package/src/components/Button/Button.tsx

@@ -1,23 +1,46 @@
+import type { ReactNode } from "react";
 import {
   ActivityIndicator,
+  Pressable,
   StyleSheet,
   Text,
-  TouchableOpacity,
+  View,
   type StyleProp,
   type TextStyle,
   type ViewStyle,
 } from "react-native";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import {
+  buttonColors,
+  buttonOpacity,
+  type ButtonVariant,
+} from "./buttonAppearance";
 import { buttonRadiusValue, type ButtonRadius } from "./buttonRadius";
+import { BUTTON_THEME_ROLES } from "./buttonThemeRoles";
+
+export const BUTTON_ICON_SIZE = 20;
+
+/** Renders the icon in the button's content colour, e.g. an expo-symbols `SymbolView`. */
+export type ButtonIcon = (props: { color: string; size: number }) => ReactNode;
+
+export type ButtonIconPosition = "start" | "end" | "only";
 
 export type ButtonProps = {
+  /** Shown text, and the accessibility label (also when `iconPosition="only"`). */
   label: string;
   onPress: () => void;
-  backgroundColor: string;
-  labelColor: string;
+  /** Filled: fill. Outline: border, label and icon. Defaults to theme role `buttonBackground`. */
+  backgroundColor?: string;
+  /** Filled: label, icon and spinner. Defaults to theme role `buttonLabel`. */
+  labelColor?: string;
   disabled?: boolean;
   loading?: boolean;
-  variant?: "filled" | "outline";
+  variant?: ButtonVariant;
   radius?: ButtonRadius;
+  icon?: ButtonIcon;
+  /** Default `"start"`. `"only"` hides the label text; `label` stays the accessibility name. */
+  iconPosition?: ButtonIconPosition;
+  iconSize?: number;
   style?: StyleProp<ViewStyle>;
   labelStyle?: StyleProp<TextStyle>;
 };
@@ -25,58 +48,69 @@ export type ButtonProps = {
 export function Button({
   label,
   onPress,
-  backgroundColor,
-  labelColor,
+  backgroundColor: backgroundColorProp,
+  labelColor: labelColorProp,
   disabled = false,
   loading = false,
   variant = "filled",
   radius = "xl",
+  icon,
+  iconPosition = "start",
+  iconSize = BUTTON_ICON_SIZE,
   style,
   labelStyle,
 }: ButtonProps) {
-  const blocked = disabled || loading;
-  const isOutline = variant === "outline";
-  const borderRadius = buttonRadiusValue(radius);
+  const backgroundColor = useResolvedFieldColor(
+    backgroundColorProp,
+    BUTTON_THEME_ROLES.backgroundColor,
+  );
+  const labelColor = useResolvedFieldColor(
+    labelColorProp,
+    BUTTON_THEME_ROLES.labelColor,
+  );
+  const colors = buttonColors(variant, backgroundColor, labelColor);
+  const iconNode = icon?.({ color: colors.content, size: iconSize });
+  const showLabel = !(icon && iconPosition === "only");
 
   return (
-    <TouchableOpacity
+    <Pressable
       accessibilityLabel={label}
       accessibilityRole="button"
-      accessibilityState={{ disabled: blocked, busy: loading }}
-      activeOpacity={0.75}
-      disabled={blocked}
+      accessibilityState={{ disabled: disabled || loading, busy: loading }}
+      disabled={disabled || loading}
       onPress={onPress}
-      style={[
+      style={({ pressed }) => [
         styles.shell,
-        { borderRadius },
-        isOutline
-          ? {
-              backgroundColor: "transparent",
-              borderWidth: 1,
-              borderColor: backgroundColor,
-            }
-          : { backgroundColor },
-        blocked && styles.blocked,
+        {
+          borderRadius: buttonRadiusValue(radius),
+          backgroundColor: colors.fill,
+          opacity: buttonOpacity({ disabled, loading, pressed }),
+        },
+        colors.border != null && {
+          borderWidth: 1,
+          borderColor: colors.border,
+        },
         style,
       ]}
     >
+      {/* Kept in layout while loading so the button keeps its size. */}
+      <View style={[styles.content, loading && styles.hidden]}>
+        {iconPosition !== "end" ? iconNode : null}
+        {showLabel ? (
+          <Text style={[styles.label, { color: colors.content }, labelStyle]}>
+            {label}
+          </Text>
+        ) : null}
+        {iconPosition === "end" ? iconNode : null}
+      </View>
       {loading ? (
         <ActivityIndicator
-          color={isOutline ? backgroundColor : labelColor}
+          color={colors.content}
           size="small"
+          style={StyleSheet.absoluteFill}
         />
-      ) : (
-        <Text
-          style={[
-            styles.label,
-            { color: isOutline ? backgroundColor : labelColor },
-            labelStyle,
-          ]}
-        >
-          {label}
-        </Text>
-      )}
-    </TouchableOpacity>
+      ) : null}
+    </Pressable>
   );
 }
 
@@ -84,14 +118,24 @@ const styles = StyleSheet.create({
   shell: {
     width: "100%",
     minHeight: 52,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  content: {
+    flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
+    gap: 8,
   },
-  blocked: {
-    opacity: 0.4,
+  hidden: {
+    opacity: 0,
   },
   label: {
+    flexShrink: 1,
     fontSize: 17,
     fontWeight: "600",
+    textAlign: "center",
   },
 });

package/src/components/Button/buttonAppearance.test.ts

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { buttonColors, buttonOpacity } from "./buttonAppearance.ts";
+
+describe("buttonColors", () => {
+  it("fills with the background and draws content in the label colour", () => {
+    assert.deepEqual(buttonColors("filled", "#2563EB", "#FFFFFF"), {
+      fill: "#2563EB",
+      border: undefined,
+      content: "#FFFFFF",
+    });
+  });
+
+  it("outlines with the background colour and draws content in it too", () => {
+    assert.deepEqual(buttonColors("outline", "#2563EB", "#FFFFFF"), {
+      fill: "transparent",
+      border: "#2563EB",
+      content: "#2563EB",
+    });
+  });
+});
+
+describe("buttonOpacity", () => {
+  it("is fully opaque at rest", () => {
+    assert.equal(buttonOpacity({ disabled: false, loading: false, pressed: false }), 1);
+  });
+
+  it("dims while pressed", () => {
+    assert.equal(buttonOpacity({ disabled: false, loading: false, pressed: true }), 0.75);
+  });
+
+  it("fades when disabled", () => {
+    assert.equal(buttonOpacity({ disabled: true, loading: false, pressed: false }), 0.4);
+  });
+
+  it("stays fully opaque while loading so it does not look disabled", () => {
+    assert.equal(buttonOpacity({ disabled: false, loading: true, pressed: false }), 1);
+    assert.equal(buttonOpacity({ disabled: false, loading: true, pressed: true }), 1);
+  });
+
+  it("fades when disabled and loading", () => {
+    assert.equal(buttonOpacity({ disabled: true, loading: true, pressed: false }), 0.4);
+  });
+});

package/src/components/Button/buttonAppearance.ts

@@ -0,0 +1,38 @@
+export type ButtonVariant = "filled" | "outline";
+
+/**
+ * Fill, border and content (label, icon, spinner) colours for a variant.
+ * Outline draws everything in `background`; `label` is unused there.
+ */
+export function buttonColors(
+  variant: ButtonVariant,
+  background: string,
+  label: string,
+): { fill: string; border: string | undefined; content: string } {
+  if (variant === "outline") {
+    return { fill: "transparent", border: background, content: background };
+  }
+  return { fill: background, border: undefined, content: label };
+}
+
+/**
+ * Disabled fades the button. Loading only blocks presses: a spinner on a
+ * faded button reads as broken, not busy.
+ */
+export function buttonOpacity({
+  disabled,
+  loading,
+  pressed,
+}: {
+  disabled: boolean;
+  loading: boolean;
+  pressed: boolean;
+}): number {
+  if (disabled) {
+    return 0.4;
+  }
+  if (pressed && !loading) {
+    return 0.75;
+  }
+  return 1;
+}

package/src/components/Button/buttonThemeRoles.test.ts

@@ -0,0 +1,10 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { BUTTON_THEME_ROLES } from "./buttonThemeRoles.ts";
+
+describe("BUTTON_THEME_ROLES", () => {
+  it("maps colour props to the roles Form already uses", () => {
+    assert.equal(BUTTON_THEME_ROLES.backgroundColor, "buttonBackground");
+    assert.equal(BUTTON_THEME_ROLES.labelColor, "buttonLabel");
+  });
+});

package/src/components/Button/buttonThemeRoles.ts

@@ -0,0 +1,6 @@
+export const BUTTON_THEME_ROLES = {
+  backgroundColor: "buttonBackground",
+  labelColor: "buttonLabel",
+} as const;
+
+export type ButtonThemeColorProp = keyof typeof BUTTON_THEME_ROLES;

package/src/components/Button/index.ts

@@ -1,2 +1,13 @@
-export { Button, type ButtonProps } from "./Button";
+export {
+  Button,
+  BUTTON_ICON_SIZE,
+  type ButtonIcon,
+  type ButtonIconPosition,
+  type ButtonProps,
+} from "./Button";
+export type { ButtonVariant } from "./buttonAppearance";
 export { buttonRadiusValue, type ButtonRadius } from "./buttonRadius";
+export {
+  BUTTON_THEME_ROLES,
+  type ButtonThemeColorProp,
+} from "./buttonThemeRoles";

package/src/components/Choice/Choice.tsx

@@ -0,0 +1,109 @@
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { buttonOpacity } from "../Button/buttonAppearance";
+import { buttonRadiusValue } from "../Button/buttonRadius";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import { CHOICE_ICON_SIZE, choiceIconSlot } from "./choiceLayout";
+import { CHOICE_THEME_ROLES } from "./choiceThemeRoles";
+import type { ChoiceProps } from "./types";
+
+/**
+ * One option in a list of next steps: an icon, a title and an optional
+ * description, in a filled row. Tapping it acts straight away, usually to
+ * open the next screen. For picking a value, use RadioField or Select.
+ */
+export function Choice({
+  title,
+  description,
+  icon,
+  onPress,
+  disabled = false,
+  iconSize = CHOICE_ICON_SIZE,
+  radius = "xl",
+  backgroundColor: backgroundColorProp,
+  titleColor: titleColorProp,
+  descriptionColor: descriptionColorProp,
+  iconColor: iconColorProp,
+  style,
+}: ChoiceProps) {
+  const backgroundColor = useResolvedFieldColor(
+    backgroundColorProp,
+    CHOICE_THEME_ROLES.backgroundColor,
+  );
+  const titleColor = useResolvedFieldColor(
+    titleColorProp,
+    CHOICE_THEME_ROLES.titleColor,
+  );
+  const descriptionColor = useResolvedFieldColor(
+    descriptionColorProp,
+    CHOICE_THEME_ROLES.descriptionColor,
+  );
+  const iconColor = useResolvedFieldColor(
+    iconColorProp,
+    CHOICE_THEME_ROLES.iconColor,
+  );
+  const slot = choiceIconSlot(iconSize);
+
+  return (
+    // No explicit label: the row groups its text, so VoiceOver reads the
+    // title and description together ("Running, Outdoors, with GPS, button").
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.row,
+        {
+          backgroundColor,
+          borderRadius: buttonRadiusValue(radius),
+          opacity: buttonOpacity({ disabled, loading: false, pressed }),
+        },
+        style,
+      ]}
+    >
+      {icon ? (
+        <View
+          importantForAccessibility="no-hide-descendants"
+          accessibilityElementsHidden
+          style={[styles.icon, { width: slot, height: slot }]}
+        >
+          {icon({ color: iconColor, size: iconSize })}
+        </View>
+      ) : null}
+      <View style={styles.copy}>
+        <Text style={[styles.title, { color: titleColor }]}>{title}</Text>
+        {description ? (
+          <Text style={[styles.description, { color: descriptionColor }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12,
+    minHeight: 72,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  copy: {
+    flex: 1,
+    gap: 2,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: "600",
+  },
+  description: {
+    fontSize: 13,
+  },
+});

package/src/components/Choice/choiceLayout.test.ts

@@ -0,0 +1,14 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { CHOICE_ICON_SIZE, CHOICE_ICON_SLOT, choiceIconSlot } from "./choiceLayout.ts";
+
+describe("choiceIconSlot", () => {
+  it("keeps a steady slot so titles line up across rows", () => {
+    assert.equal(choiceIconSlot(CHOICE_ICON_SIZE), CHOICE_ICON_SLOT);
+    assert.equal(choiceIconSlot(20), CHOICE_ICON_SLOT);
+  });
+
+  it("grows for an icon larger than the slot instead of overflowing", () => {
+    assert.equal(choiceIconSlot(40), 40);
+  });
+});

package/src/components/Choice/choiceLayout.ts

@@ -0,0 +1,9 @@
+/** Default icon box, sized for an SF Symbol next to a two-line label. */
+export const CHOICE_ICON_SIZE = 28;
+/** Icon column width, so titles line up across a list of choices. */
+export const CHOICE_ICON_SLOT = 32;
+
+/** The icon column: the steady slot, or the icon itself when it is larger. Pure so it can be unit-tested. */
+export function choiceIconSlot(iconSize: number): number {
+  return Math.max(CHOICE_ICON_SLOT, iconSize);
+}

package/src/components/Choice/choiceThemeRoles.test.ts

@@ -0,0 +1,14 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { CHOICE_THEME_ROLES } from "./choiceThemeRoles.ts";
+
+describe("CHOICE_THEME_ROLES", () => {
+  it("maps colour props to choice-prefixed roles, not the app's own names", () => {
+    assert.deepEqual(CHOICE_THEME_ROLES, {
+      backgroundColor: "choiceBackground",
+      titleColor: "choiceTitle",
+      descriptionColor: "choiceDescription",
+      iconColor: "choiceIcon",
+    });
+  });
+});

package/src/components/Choice/choiceThemeRoles.ts

@@ -0,0 +1,8 @@
+export const CHOICE_THEME_ROLES = {
+  backgroundColor: "choiceBackground",
+  titleColor: "choiceTitle",
+  descriptionColor: "choiceDescription",
+  iconColor: "choiceIcon",
+} as const;
+
+export type ChoiceThemeColorProp = keyof typeof CHOICE_THEME_ROLES;

package/src/components/Choice/index.ts

@@ -0,0 +1,4 @@
+export { Choice } from "./Choice";
+export { CHOICE_ICON_SIZE } from "./choiceLayout";
+export { CHOICE_THEME_ROLES, type ChoiceThemeColorProp } from "./choiceThemeRoles";
+export type { ChoiceProps } from "./types";

package/src/components/Choice/types.ts

@@ -0,0 +1,26 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonIcon } from "../Button";
+import type { ButtonRadius } from "../Button/buttonRadius";
+
+export type ChoiceProps = {
+  title: string;
+  /** Second line under the title. */
+  description?: string;
+  /** `({ color, size }) => ReactNode`, e.g. an expo-symbols `SymbolView`. */
+  icon?: ButtonIcon;
+  onPress: () => void;
+  disabled?: boolean;
+  /** Icon box. Default 28. */
+  iconSize?: number;
+  /** Default `"xl"` (12), the same scale as `Button`. */
+  radius?: ButtonRadius;
+  /** Row fill. Defaults to theme role `choiceBackground`. */
+  backgroundColor?: string;
+  /** Defaults to theme role `choiceTitle`. */
+  titleColor?: string;
+  /** Defaults to theme role `choiceDescription`. */
+  descriptionColor?: string;
+  /** Defaults to theme role `choiceIcon`. */
+  iconColor?: string;
+  style?: StyleProp<ViewStyle>;
+};

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,
   },
 });