@studio-piot/native-ui 0.2.2 → 0.2.4

package/src/components/Field/fieldChrome.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import {
   StyleSheet,
   Text,
@@ -8,6 +8,10 @@ import {
   type TextInputProps,
 } from "react-native";
 import { buttonRadiusValue } from "../Button/buttonRadius";
+import {
+  useErrorBannerDismiss,
+  useErrorBannerField,
+} from "../ErrorBanner";
 import { FIELD_THEME_ROLES } from "./fieldThemeRoles";
 import {
   resolveFieldBorder,
@@ -24,6 +28,7 @@ export type FieldChromeProps = FieldSharedProps & {
 };
 
 export function FieldChrome({
+  name,
   value,
   onChangeText,
   borderColor: borderColorProp,
@@ -89,8 +94,14 @@ export function FieldChrome({
     FIELD_THEME_ROLES.descriptionColor,
   );
 
+  const inputRef = useRef<TextInput>(null);
+  const dismissBanner = useErrorBannerDismiss();
+  const { viewRef, listed } = useErrorBannerField(name, () =>
+    inputRef.current?.focus(),
+  );
   const [isFocused, setIsFocused] = useState(false);
-  const hasError = Boolean(error);
+  const hasError = Boolean(error) || Boolean(listed);
+  const inlineError = listed ? undefined : error;
   const showClear = shouldShowFieldClear(value, clearIcon != null, editable);
   const border = resolveFieldBorder({
     isFocused,
@@ -107,15 +118,29 @@ export function FieldChrome({
   };
 
   return (
-    <View style={[styles.column, !editable && styles.blocked, style]}>
+    <View
+      ref={viewRef}
+      collapsable={false}
+      style={[styles.column, !editable && styles.blocked, style]}
+    >
       {label ? (
         <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
       ) : null}
       <View style={styles.inputWrapper}>
         <TextInput
-          ref={ref}
+          ref={(node) => {
+            inputRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          }}
           value={value}
-          onChangeText={onChangeText}
+          onChangeText={(text) => {
+            onChangeText(text);
+            dismissBanner();
+          }}
           placeholder={placeholder}
           placeholderTextColor={placeholderColor}
           editable={editable}
@@ -127,6 +152,7 @@ export function FieldChrome({
           autoCapitalize={autoCapitalize}
           autoComplete={autoComplete}
           textContentType={textContentType}
+          accessibilityHint={listed?.message}
           accessibilityLabel={label}
           accessibilityState={{ disabled: !editable }}
           onFocus={(e) => {
@@ -167,8 +193,8 @@ export function FieldChrome({
           </TouchableOpacity>
         ) : null}
       </View>
-      {error ? (
-        <Text style={[styles.helper, { color: errorColor }]}>{error}</Text>
+      {inlineError ? (
+        <Text style={[styles.helper, { color: errorColor }]}>{inlineError}</Text>
       ) : description ? (
         <Text style={[styles.helper, { color: descriptionColor }]}>
           {description}

package/src/components/Field/types.ts

@@ -8,6 +8,8 @@ import type {
 import type { ButtonRadius } from "../Button/buttonRadius";
 
 export type FieldSharedProps = {
+  /** Registers the field with `Form` / `ErrorBannerProvider` for banner rows. */
+  name?: string;
   value: string;
   onChangeText: (text: string) => void;
   /** Defaults to theme role `fieldBorder`. */

package/src/components/Form/Form.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useRef, useState, type ReactNode } from "react";
 import {
   StyleSheet,
   Text,
@@ -8,7 +8,15 @@ import {
 import {
   KeyboardAwareScrollView,
   KeyboardStickyView,
+  type KeyboardAwareScrollViewRef,
 } from "react-native-keyboard-controller";
+import {
+  ErrorBanner,
+  ErrorBannerProvider,
+  useErrorBanner,
+  useErrorBannerContext,
+  type FieldError,
+} from "../ErrorBanner";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { screenPaddingHorizontal } from "../../layout/screenPadding";
 import { Button } from "../Button/Button";
@@ -20,6 +28,29 @@ import { withAlpha } from "./withAlpha";
 /** How far the header wash continues below the buttons. */
 const FADE_TAIL = 32;
 
+function FormErrorBanner({
+  open,
+  errors,
+  onDismiss,
+  onHeightChange,
+}: {
+  open: boolean;
+  errors: readonly FieldError[];
+  onDismiss: () => void;
+  onHeightChange: (height: number) => void;
+}) {
+  const ctx = useErrorBannerContext();
+  return (
+    <ErrorBanner
+      errors={errors}
+      onDismiss={onDismiss}
+      onHeightChange={onHeightChange}
+      onJump={(field) => ctx?.jump(field)}
+      open={open}
+    />
+  );
+}
+
 /** Space kept between the focused field and the top of the footer. */
 const FIELD_GAP = 12;
 
@@ -34,6 +65,7 @@ export function Form({
   children,
   onClose,
   onSubmit,
+  errors = [],
   submitLabel = "Save",
   submitting = false,
   submitDisabled = false,
@@ -61,6 +93,9 @@ export function Form({
     buttonLabelColorProp,
     "buttonLabel",
   );
+  const scrollRef = useRef<KeyboardAwareScrollViewRef>(null);
+  const bannerHeightRef = useRef(0);
+  const banner = useErrorBanner(errors);
   const [footerHeight, setFooterHeight] = useState(0);
   const [cancelWidth, setCancelWidth] = useState(0);
   const [barHeight, setBarHeight] = useState(0);
@@ -76,8 +111,15 @@ export function Form({
   );
 
   return (
+    <ErrorBannerProvider
+      bannerHeightRef={bannerHeightRef}
+      errors={errors}
+      onDismiss={banner.dismiss}
+      scrollRef={scrollRef}
+    >
     <View style={[styles.screen, { backgroundColor: background }]}>
       <KeyboardAwareScrollView
+        ref={scrollRef}
         automaticallyAdjustKeyboardInsets={false}
         bottomOffset={footerHeight + FIELD_GAP + FIELD_BELOW_CARET}
         contentContainerStyle={[
@@ -154,14 +196,26 @@ export function Form({
               label={submitLabel}
               labelColor={buttonLabel}
               loading={submitting}
-              onPress={onSubmit}
+              onPress={() => {
+                banner.present();
+                onSubmit();
+              }}
               radius={submitRadius}
             />
           </View>
           <View style={{ height: insets.bottom }} />
         </View>
       </KeyboardStickyView>
+      <FormErrorBanner
+        errors={errors}
+        onDismiss={banner.dismiss}
+        onHeightChange={(height) => {
+          bannerHeightRef.current = height;
+        }}
+        open={banner.open}
+      />
     </View>
+    </ErrorBannerProvider>
   );
 }
 

package/src/components/Form/types.ts

@@ -1,11 +1,18 @@
 import type { ReactNode } from "react";
 import type { ButtonRadius } from "../Button/buttonRadius";
+import type { FieldError } from "../ErrorBanner/types";
 
 export type FormProps = {
   title: string;
   children: ReactNode;
   onClose: () => void;
   onSubmit: () => void;
+  /**
+   * Field errors for the screen banner. Empty hides it.
+   * Set these when submit fails. Editing a field dismisses the banner;
+   * the next submit shows it again.
+   */
+  errors?: readonly FieldError[];
   submitLabel?: string;
   submitting?: boolean;
   submitDisabled?: boolean;

package/src/components/RadioField/RadioField.tsx

@@ -5,6 +5,7 @@ import {
   View,
 } from "react-native";
 import { buttonRadiusValue } from "../Button/buttonRadius";
+import { useErrorBannerDismiss } from "../ErrorBanner";
 import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
 import { RadioMark } from "./RadioMark";
 import { RADIO_THEME_ROLES } from "./radioThemeRoles";
@@ -55,6 +56,7 @@ export function RadioField<T extends string = string>({
     titleColorProp,
     RADIO_THEME_ROLES.titleColor,
   );
+  const dismissBanner = useErrorBannerDismiss();
   const borderRadius = buttonRadiusValue(radius);
 
   if (options.length === 0) {
@@ -97,7 +99,10 @@ export function RadioField<T extends string = string>({
                 }}
                 activeOpacity={0.75}
                 disabled={option.disabled}
-                onPress={() => onChange(option.value)}
+                onPress={() => {
+                  onChange(option.value);
+                  dismissBanner();
+                }}
                 style={[styles.row, option.disabled && styles.blocked]}
               >
                 <View style={styles.textCol}>

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,230 @@
+import { useEffect, useRef } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { buttonRadiusValue } from "../Button/buttonRadius";
+import { useErrorBannerDismiss } from "../ErrorBanner";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import {
+  resolveSegmentIndex,
+  SEGMENT_INSET,
+  segmentIndicatorFrame,
+} from "./segmentIndicatorFrame";
+import { SEGMENTED_THEME_ROLES } from "./segmentThemeRoles";
+import type { SegmentedControlProps } from "./types";
+
+const SLIDE_MS = 220;
+
+export function SegmentedControl<T extends string = string>({
+  value,
+  onChange,
+  options,
+  label,
+  radius = "lg",
+  disabled = false,
+  backgroundColor: backgroundColorProp,
+  selectedBackgroundColor: selectedBackgroundColorProp,
+  labelColor: labelColorProp,
+  selectedLabelColor: selectedLabelColorProp,
+  titleColor: titleColorProp,
+  style,
+}: SegmentedControlProps<T>) {
+  const backgroundColor = useResolvedFieldColor(
+    backgroundColorProp,
+    SEGMENTED_THEME_ROLES.backgroundColor,
+  );
+  const selectedBackgroundColor = useResolvedFieldColor(
+    selectedBackgroundColorProp,
+    SEGMENTED_THEME_ROLES.selectedBackgroundColor,
+  );
+  const labelColor = useResolvedFieldColor(
+    labelColorProp,
+    SEGMENTED_THEME_ROLES.labelColor,
+  );
+  const selectedLabelColor = useResolvedFieldColor(
+    selectedLabelColorProp,
+    SEGMENTED_THEME_ROLES.selectedLabelColor,
+  );
+  const titleColor = useResolvedFieldColor(
+    titleColorProp,
+    SEGMENTED_THEME_ROLES.titleColor,
+  );
+
+  const index = resolveSegmentIndex(value, options);
+  const trackWidth = useRef(0);
+  const laidOut = useRef(false);
+  const indexSV = useSharedValue(0);
+  const widthSV = useSharedValue(0);
+  const opacitySV = useSharedValue(0);
+
+  const dismissBanner = useErrorBannerDismiss();
+  const borderRadius = buttonRadiusValue(radius);
+  const pillRadius = Math.max(0, borderRadius - SEGMENT_INSET);
+
+  const applyTrackWidth = (nextWidth: number, count: number) => {
+    trackWidth.current = nextWidth;
+    const frame = segmentIndicatorFrame(0, count, nextWidth, SEGMENT_INSET);
+    widthSV.value = frame?.width ?? 0;
+  };
+
+  useEffect(() => {
+    if (trackWidth.current > 0) {
+      applyTrackWidth(trackWidth.current, options.length);
+    }
+  }, [options.length, widthSV]);
+
+  useEffect(() => {
+    if (!laidOut.current) {
+      return;
+    }
+    if (index < 0) {
+      opacitySV.value = withTiming(0, { duration: 160 });
+      return;
+    }
+    opacitySV.value = withTiming(1, { duration: 160 });
+    indexSV.value = withTiming(index, {
+      duration: SLIDE_MS,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [index, indexSV, opacitySV]);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: widthSV.value,
+    opacity: opacitySV.value,
+    transform: [{ translateX: SEGMENT_INSET + indexSV.value * widthSV.value }],
+  }));
+
+  if (options.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.group, disabled && styles.blocked, style]}>
+      {label ? (
+        <Text style={[styles.title, { color: titleColor }]}>{label}</Text>
+      ) : null}
+      <View
+        accessibilityLabel={label}
+        accessibilityRole="radiogroup"
+        style={[styles.track, { backgroundColor, borderRadius }]}
+      >
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.indicator,
+            indicatorStyle,
+            {
+              backgroundColor: selectedBackgroundColor,
+              borderRadius: pillRadius,
+            },
+          ]}
+        />
+        <View
+          onLayout={(event) => {
+            const nextWidth = event.nativeEvent.layout.width;
+            if (nextWidth <= 0) {
+              return;
+            }
+            applyTrackWidth(nextWidth, options.length);
+            if (!laidOut.current) {
+              indexSV.value = index < 0 ? 0 : index;
+              opacitySV.value = index < 0 ? 0 : 1;
+              laidOut.current = true;
+            }
+          }}
+          style={styles.row}
+        >
+          {options.map((option) => {
+            const selected = value === option.value;
+            const blocked = disabled || !!option.disabled;
+            return (
+              <Pressable
+                key={option.value}
+                accessibilityLabel={option.label}
+                accessibilityRole="radio"
+                accessibilityState={{
+                  selected,
+                  checked: selected,
+                  disabled: blocked,
+                }}
+                disabled={blocked}
+                onPress={() => {
+                  onChange(option.value);
+                  dismissBanner();
+                }}
+                style={({ pressed }) => [
+                  styles.segment,
+                  pressed && !blocked && styles.pressed,
+                  option.disabled && styles.segmentBlocked,
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.label,
+                    {
+                      color: selected ? selectedLabelColor : labelColor,
+                      fontWeight: selected ? "600" : "500",
+                    },
+                  ]}
+                >
+                  {option.label}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: {
+    width: "100%",
+    gap: 8,
+  },
+  blocked: {
+    opacity: 0.4,
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: "600",
+    paddingHorizontal: 4,
+  },
+  track: {
+    width: "100%",
+    padding: SEGMENT_INSET,
+    overflow: "hidden",
+  },
+  indicator: {
+    position: "absolute",
+    top: SEGMENT_INSET,
+    bottom: SEGMENT_INSET,
+    left: 0,
+  },
+  row: {
+    flexDirection: "row",
+  },
+  segment: {
+    flex: 1,
+    minHeight: 36,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  pressed: {
+    opacity: 0.65,
+  },
+  segmentBlocked: {
+    opacity: 0.4,
+  },
+  label: {
+    fontSize: 15,
+    textAlign: "center",
+  },
+});

package/src/components/SegmentedControl/index.ts

@@ -0,0 +1,6 @@
+export { SegmentedControl } from "./SegmentedControl";
+export {
+  SEGMENTED_THEME_ROLES,
+  type SegmentedThemeColorProp,
+} from "./segmentThemeRoles";
+export type { SegmentedOption, SegmentedControlProps } from "./types";

package/src/components/SegmentedControl/segmentIndicatorFrame.test.ts

@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  resolveSegmentIndex,
+  segmentIndicatorFrame,
+  SEGMENT_INSET,
+} from "./segmentIndicatorFrame.ts";
+
+describe("resolveSegmentIndex", () => {
+  const options = [{ value: "on" }, { value: "off" }, { value: "auto" }];
+
+  it("returns the matching option index", () => {
+    assert.equal(resolveSegmentIndex("off", options), 1);
+  });
+
+  it("returns -1 when nothing is selected", () => {
+    assert.equal(resolveSegmentIndex(null, options), -1);
+    assert.equal(resolveSegmentIndex("missing", options), -1);
+  });
+});
+
+describe("segmentIndicatorFrame", () => {
+  it("keeps the same inset before the first segment and after the last", () => {
+    const rowWidth = 300;
+    const first = segmentIndicatorFrame(0, 3, rowWidth, SEGMENT_INSET);
+    const last = segmentIndicatorFrame(2, 3, rowWidth, SEGMENT_INSET);
+    assert.deepEqual(first, { x: SEGMENT_INSET, width: 100 });
+    assert.deepEqual(last, { x: 203, width: 100 });
+    assert.ok(last);
+    const trackInnerWidth = rowWidth + SEGMENT_INSET * 2;
+    assert.equal(trackInnerWidth - (last.x + last.width), SEGMENT_INSET);
+  });
+
+  it("returns null when there is no segment to highlight", () => {
+    assert.equal(segmentIndicatorFrame(-1, 3, 300), null);
+    assert.equal(segmentIndicatorFrame(0, 0, 300), null);
+    assert.equal(segmentIndicatorFrame(0, 2, 0), null);
+  });
+});

package/src/components/SegmentedControl/segmentIndicatorFrame.ts

@@ -0,0 +1,31 @@
+/** Gap between the track edge and the sliding selection fill. */
+export const SEGMENT_INSET = 3;
+
+export function resolveSegmentIndex<T extends string>(
+  value: T | null,
+  options: readonly { value: T }[],
+): number {
+  if (value == null) {
+    return -1;
+  }
+  return options.findIndex((option) => option.value === value);
+}
+
+/**
+ * Equal-width selection fill for a segment row.
+ * `segmentRowWidth` is the row already inset from the track edge.
+ * `inset` is that same gap, applied on the leading side (and, by symmetry, the trailing side).
+ * `index` 0 is the leading segment. Returns null when there is nothing to draw.
+ */
+export function segmentIndicatorFrame(
+  index: number,
+  count: number,
+  segmentRowWidth: number,
+  inset: number = SEGMENT_INSET,
+): { x: number; width: number } | null {
+  if (index < 0 || count < 1 || segmentRowWidth <= 0) {
+    return null;
+  }
+  const width = segmentRowWidth / count;
+  return { x: inset + index * width, width };
+}

package/src/components/SegmentedControl/segmentThemeRoles.test.ts

@@ -0,0 +1,19 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { SEGMENTED_THEME_ROLES } from "./segmentThemeRoles.ts";
+
+describe("SEGMENTED_THEME_ROLES", () => {
+  it("maps colour props to dedicated segment roles", () => {
+    assert.equal(SEGMENTED_THEME_ROLES.backgroundColor, "segmentBackground");
+    assert.equal(
+      SEGMENTED_THEME_ROLES.selectedBackgroundColor,
+      "segmentSelectedBackground",
+    );
+    assert.equal(SEGMENTED_THEME_ROLES.labelColor, "segmentLabel");
+    assert.equal(
+      SEGMENTED_THEME_ROLES.selectedLabelColor,
+      "segmentSelectedLabel",
+    );
+    assert.equal(SEGMENTED_THEME_ROLES.titleColor, "segmentTitle");
+  });
+});

package/src/components/SegmentedControl/segmentThemeRoles.ts

@@ -0,0 +1,9 @@
+export const SEGMENTED_THEME_ROLES = {
+  backgroundColor: "segmentBackground",
+  selectedBackgroundColor: "segmentSelectedBackground",
+  labelColor: "segmentLabel",
+  selectedLabelColor: "segmentSelectedLabel",
+  titleColor: "segmentTitle",
+} as const;
+
+export type SegmentedThemeColorProp = keyof typeof SEGMENTED_THEME_ROLES;

package/src/components/SegmentedControl/types.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonRadius } from "../Button/buttonRadius";
+
+export type SegmentedOption<T extends string = string> = {
+  value: T;
+  label: string;
+  disabled?: boolean;
+};
+
+export type SegmentedControlProps<T extends string = string> = {
+  value: T | null;
+  onChange: (value: T) => void;
+  options: SegmentedOption<T>[];
+  label?: string;
+  radius?: ButtonRadius;
+  disabled?: boolean;
+  backgroundColor?: string;
+  borderColor?: string;
+  selectedBackgroundColor?: string;
+  labelColor?: string;
+  selectedLabelColor?: string;
+  titleColor?: string;
+  style?: StyleProp<ViewStyle>;
+};

package/src/components/Select/Select.tsx

@@ -23,6 +23,10 @@ import {
 } from "@gorhom/bottom-sheet";
 import { FullWindowOverlay } from "react-native-screens";
 import { buttonRadiusValue } from "../Button/buttonRadius";
+import {
+  useErrorBannerDismiss,
+  useErrorBannerField,
+} from "../ErrorBanner";
 import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
 import { useThemeColor } from "../../theme/useThemeColor";
 import { DEFAULT_SELECT_DETENTS } from "./resolveSelectDetentIndex";
@@ -42,6 +46,7 @@ function SheetContainer({ children }: { children?: ReactNode }) {
 }
 
 export function Select({
+  name,
   value,
   onChange,
   options,
@@ -105,7 +110,12 @@ export function Select({
   const closeDiscColor = useThemeColor("text");
   const closeIconColor = useThemeColor("background");
 
-  const hasError = Boolean(error);
+  const dismissBanner = useErrorBannerDismiss();
+  const { viewRef, listed } = useErrorBannerField(name, () => {
+    modalRef.current?.present();
+  });
+  const hasError = Boolean(error) || Boolean(listed);
+  const inlineError = listed ? undefined : error;
   const selected = options.find((option) => option.value === value);
   const display = selected?.label ?? placeholder;
   const isPlaceholder = selected == null;
@@ -192,16 +202,21 @@ export function Select({
   const onSelect = (option: SelectOption) => {
     if (option.disabled) return;
     onChange(option.value);
+    dismissBanner();
     dismiss();
   };
 
   return (
-    <View style={[styles.column, !editable && styles.blocked, style]}>
+    <View
+      ref={viewRef}
+      collapsable={false}
+      style={[styles.column, !editable && styles.blocked, style]}
+    >
       {label ? (
         <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
       ) : null}
       <Pressable
-        accessibilityHint="Opens a list of options"
+        accessibilityHint={listed?.message ?? "Opens a list of options"}
         accessibilityLabel={label ? `${label}. ${display}` : display}
         accessibilityRole="button"
         accessibilityState={{ disabled: !editable }}
@@ -233,8 +248,8 @@ export function Select({
           ›
         </Text>
       </Pressable>
-      {error ? (
-        <Text style={[styles.helper, { color: errorColor }]}>{error}</Text>
+      {inlineError ? (
+        <Text style={[styles.helper, { color: errorColor }]}>{inlineError}</Text>
       ) : description ? (
         <Text style={[styles.helper, { color: descriptionColor }]}>
           {description}