@studio-piot/native-ui 0.2.5 → 0.17.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,120 @@
+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, choiceSelection } from "./choiceLayout";
+import { CHOICE_THEME_ROLES } from "./choiceThemeRoles";
+import type { ChoiceProps } from "./types";
+
+/**
+ * One option in a list: an icon, a title and an optional description, in a
+ * filled row. Tapping it acts straight away (open the next screen), or,
+ * with `selected`, selects it among other choices (e.g. candidate routes,
+ * each with a drawing in the icon slot). For a form value, use RadioField
+ * or Select.
+ */
+export function Choice({
+  title,
+  description,
+  icon,
+  onPress,
+  selected,
+  disabled = false,
+  iconSize = CHOICE_ICON_SIZE,
+  radius = "xl",
+  backgroundColor: backgroundColorProp,
+  titleColor: titleColorProp,
+  descriptionColor: descriptionColorProp,
+  iconColor: iconColorProp,
+  selectedColor: selectedColorProp,
+  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 selectedColor = useResolvedFieldColor(
+    selectedColorProp,
+    CHOICE_THEME_ROLES.selectedColor,
+  );
+  const slot = choiceIconSlot(iconSize);
+  const selection = choiceSelection(selected);
+
+  return (
+    // No explicit label: the row groups its text, so VoiceOver reads the
+    // title and description together ("Running, Outdoors, with GPS, button").
+    <Pressable
+      accessibilityRole={selection.role}
+      accessibilityState={{ ...selection.state, disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.row,
+        {
+          backgroundColor,
+          borderColor: selection.highlighted ? selectedColor : "transparent",
+          borderWidth: selection.borderWidth,
+          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,49 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  CHOICE_ICON_SIZE,
+  CHOICE_ICON_SLOT,
+  CHOICE_SELECTED_BORDER,
+  choiceIconSlot,
+  choiceSelection,
+} 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);
+  });
+});
+
+describe("choiceSelection", () => {
+  it("is a plain button with no border when selection is not used", () => {
+    assert.deepEqual(choiceSelection(undefined), {
+      role: "button",
+      state: {},
+      borderWidth: 0,
+      highlighted: false,
+    });
+  });
+
+  it("is a selected radio with the highlight border", () => {
+    assert.deepEqual(choiceSelection(true), {
+      role: "radio",
+      state: { selected: true, checked: true },
+      borderWidth: CHOICE_SELECTED_BORDER,
+      highlighted: true,
+    });
+  });
+
+  it("keeps the border width when not selected, so rows do not jump", () => {
+    assert.deepEqual(choiceSelection(false), {
+      role: "radio",
+      state: { selected: false, checked: false },
+      borderWidth: CHOICE_SELECTED_BORDER,
+      highlighted: false,
+    });
+  });
+});

package/src/components/Choice/choiceLayout.ts

@@ -0,0 +1,34 @@
+/** 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);
+}
+
+/** Border around a selectable choice; drawn transparent when not selected. */
+export const CHOICE_SELECTED_BORDER = 2;
+
+/**
+ * Role, state and border for a choice. Without `selected` it is a plain
+ * button. With it, a radio option that keeps its border width either way,
+ * so rows do not shift when the selection moves. Pure so it can be unit-tested.
+ */
+export function choiceSelection(selected: boolean | undefined): {
+  role: "button" | "radio";
+  state: { selected?: boolean; checked?: boolean };
+  borderWidth: number;
+  highlighted: boolean;
+} {
+  if (selected === undefined) {
+    return { role: "button", state: {}, borderWidth: 0, highlighted: false };
+  }
+  return {
+    role: "radio",
+    state: { selected, checked: selected },
+    borderWidth: CHOICE_SELECTED_BORDER,
+    highlighted: selected,
+  };
+}

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

@@ -0,0 +1,15 @@
+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",
+      selectedColor: "choiceSelected",
+    });
+  });
+});

package/src/components/Choice/choiceThemeRoles.ts

@@ -0,0 +1,9 @@
+export const CHOICE_THEME_ROLES = {
+  backgroundColor: "choiceBackground",
+  titleColor: "choiceTitle",
+  descriptionColor: "choiceDescription",
+  iconColor: "choiceIcon",
+  selectedColor: "choiceSelected",
+} 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,33 @@
+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;
+  /**
+   * Makes the choice a selectable option: a highlight border when true,
+   * read as a selected radio. Leave it out for a choice that just acts.
+   */
+  selected?: boolean;
+  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;
+  /** Border of a selected choice. Defaults to theme role `choiceSelected`. */
+  selectedColor?: string;
+  style?: StyleProp<ViewStyle>;
+};