@terreno/ui 0.4.2 → 0.6.0

package/src/HeightActionSheet.tsx

@@ -6,8 +6,9 @@ import {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";
 import {Button} from "./Button";
 import type {HeightActionSheetProps} from "./Common";
+import {Heading} from "./Heading";
 
-const PICKER_HEIGHT = 104;
+const PICKER_HEIGHT = 180;
 
 interface HeightActionSheetState {
   feet: string;
@@ -27,16 +28,24 @@ export class HeightActionSheet extends React.Component<
   }
 
   render() {
+    const minInches = this.props.min ?? 0;
+    const maxInches = this.props.max ?? 95;
+    const minFeet = Math.floor(minInches / 12);
+    const maxFeet = Math.floor(maxInches / 12);
+
     return (
       <ActionSheet bounceOnOpen gestureEnabled ref={this.props.actionSheetRef}>
         <Box marginBottom={8} paddingX={4} width="100%">
-          <Box alignItems="end" display="flex" width="100%">
+          <Box alignItems="center" direction="row" justifyContent="between" width="100%">
+            <Box flex="grow">
+              {this.props.title ? <Heading size="md">{this.props.title}</Heading> : null}
+            </Box>
             <Box width="33%">
               <Button
                 onClick={() => {
                   this.props.actionSheetRef?.current?.setModalVisible(false);
                 }}
-                text="Close"
+                text="Done"
               />
             </Box>
           </Box>
@@ -44,6 +53,8 @@ export class HeightActionSheet extends React.Component<
             <Box width="50%">
               <Picker
                 itemStyle={{
+                  color: "#1a1a1a",
+                  fontSize: 20,
                   height: PICKER_HEIGHT,
                 }}
                 onValueChange={(feet) => {
@@ -56,15 +67,18 @@ export class HeightActionSheet extends React.Component<
                   height: PICKER_HEIGHT,
                 }}
               >
-                {range(4, 8).map((n) => {
-                  // console.log("FIRST", String(n));
-                  return <Picker.Item key={String(n)} label={`${String(n)}ft`} value={String(n)} />;
+                {range(minFeet, maxFeet + 1).map((n) => {
+                  return (
+                    <Picker.Item key={String(n)} label={`${String(n)} ft`} value={String(n)} />
+                  );
                 })}
               </Picker>
             </Box>
             <Box width="50%">
               <Picker
                 itemStyle={{
+                  color: "#1a1a1a",
+                  fontSize: 20,
                   height: PICKER_HEIGHT,
                 }}
                 onValueChange={(inches) => {
@@ -78,8 +92,9 @@ export class HeightActionSheet extends React.Component<
                 }}
               >
                 {range(0, 12).map((n) => {
-                  // console.log("N", n);
-                  return <Picker.Item key={String(n)} label={`${String(n)}in`} value={String(n)} />;
+                  return (
+                    <Picker.Item key={String(n)} label={`${String(n)} in`} value={String(n)} />
+                  );
                 })}
               </Picker>
             </Box>

package/src/HeightField.test.tsx

@@ -0,0 +1,178 @@
+import {afterEach, beforeEach, describe, expect, it, mock} from "bun:test";
+import {HeightField} from "./HeightField";
+import {renderWithTheme} from "./test-utils";
+
+describe("HeightField", () => {
+  let mockOnChange: ReturnType<typeof mock>;
+
+  beforeEach(() => {
+    mockOnChange = mock(() => {});
+  });
+
+  afterEach(() => {
+    // Reset mocks after each test
+  });
+
+  describe("basic rendering", () => {
+    it("should render with default props", () => {
+      const {root} = renderWithTheme(<HeightField onChange={mockOnChange} value="" />);
+      expect(root).toBeTruthy();
+    });
+
+    it("should render with title", () => {
+      const {getAllByText} = renderWithTheme(
+        <HeightField onChange={mockOnChange} title="Height" value="" />
+      );
+      // Title appears in both the field title and the HeightActionSheet
+      const heightElements = getAllByText("Height");
+      expect(heightElements.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it("should render helper text", () => {
+      const {getByText} = renderWithTheme(
+        <HeightField helperText="Enter your height" onChange={mockOnChange} value="" />
+      );
+      expect(getByText("Enter your height")).toBeTruthy();
+    });
+
+    it("should render error text", () => {
+      const {getByText} = renderWithTheme(
+        <HeightField errorText="Height is required" onChange={mockOnChange} value="" />
+      );
+      expect(getByText("Height is required")).toBeTruthy();
+    });
+
+    it("should render placeholder text when no value", () => {
+      const {getByText} = renderWithTheme(<HeightField onChange={mockOnChange} value="" />);
+      expect(getByText("Select height")).toBeTruthy();
+    });
+  });
+
+  describe("value display (mobile mode)", () => {
+    it("should display formatted height for 70 inches (5ft 10in)", () => {
+      const {getByText} = renderWithTheme(<HeightField onChange={mockOnChange} value="70" />);
+      expect(getByText("5ft 10in")).toBeTruthy();
+    });
+
+    it("should display formatted height for 72 inches (6ft 0in)", () => {
+      const {getByText} = renderWithTheme(<HeightField onChange={mockOnChange} value="72" />);
+      expect(getByText("6ft 0in")).toBeTruthy();
+    });
+
+    it("should display formatted height for 60 inches (5ft 0in)", () => {
+      const {getByText} = renderWithTheme(<HeightField onChange={mockOnChange} value="60" />);
+      expect(getByText("5ft 0in")).toBeTruthy();
+    });
+
+    it("should handle empty value", () => {
+      const {getByText} = renderWithTheme(<HeightField onChange={mockOnChange} value="" />);
+      expect(getByText("Select height")).toBeTruthy();
+    });
+
+    it("should handle undefined value", () => {
+      const {getByText} = renderWithTheme(
+        <HeightField onChange={mockOnChange} value={undefined} />
+      );
+      expect(getByText("Select height")).toBeTruthy();
+    });
+
+    it("should display formatted height for 0 inches (0ft 0in)", () => {
+      const {getByText} = renderWithTheme(<HeightField onChange={mockOnChange} value="0" />);
+      expect(getByText("0ft 0in")).toBeTruthy();
+    });
+
+    it("should display formatted height for 95 inches (7ft 11in)", () => {
+      const {getByText} = renderWithTheme(<HeightField onChange={mockOnChange} value="95" />);
+      expect(getByText("7ft 11in")).toBeTruthy();
+    });
+  });
+
+  describe("accessibility", () => {
+    it("should have correct accessibility properties on pressable", () => {
+      const {getByLabelText} = renderWithTheme(<HeightField onChange={mockOnChange} value="" />);
+      const pressable = getByLabelText("Height selector");
+      expect(pressable).toBeTruthy();
+      expect(pressable.props.accessibilityHint).toBe("Tap to select height");
+    });
+  });
+
+  describe("disabled state", () => {
+    it("should render in disabled state", () => {
+      const {root} = renderWithTheme(<HeightField disabled onChange={mockOnChange} value="70" />);
+      expect(root).toBeTruthy();
+    });
+
+    it("should display value when disabled", () => {
+      const {getByText} = renderWithTheme(
+        <HeightField disabled onChange={mockOnChange} value="70" />
+      );
+      expect(getByText("5ft 10in")).toBeTruthy();
+    });
+
+    it("should have disabled prop on pressable when disabled", () => {
+      const {getByLabelText} = renderWithTheme(
+        <HeightField disabled onChange={mockOnChange} value="70" />
+      );
+      const pressable = getByLabelText("Height selector");
+      expect(pressable.props.disabled).toBe(true);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle non-numeric value gracefully", () => {
+      const {root} = renderWithTheme(<HeightField onChange={mockOnChange} value="abc" />);
+      expect(root).toBeTruthy();
+    });
+
+    it("should render without crashing for invalid value", () => {
+      const {getByLabelText} = renderWithTheme(<HeightField onChange={mockOnChange} value="abc" />);
+      const pressable = getByLabelText("Height selector");
+      expect(pressable).toBeTruthy();
+    });
+  });
+
+  describe("snapshots", () => {
+    it("should match snapshot with default props", () => {
+      const component = renderWithTheme(<HeightField onChange={mockOnChange} value="" />);
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot with value", () => {
+      const component = renderWithTheme(<HeightField onChange={mockOnChange} value="70" />);
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot with all props", () => {
+      const component = renderWithTheme(
+        <HeightField
+          disabled={false}
+          errorText="Error text"
+          helperText="Helper text"
+          onChange={mockOnChange}
+          title="Height"
+          value="70"
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot when disabled", () => {
+      const component = renderWithTheme(
+        <HeightField disabled onChange={mockOnChange} title="Height" value="70" />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot with error state", () => {
+      const component = renderWithTheme(
+        <HeightField
+          errorText="Height is required"
+          onChange={mockOnChange}
+          title="Height"
+          value=""
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/src/HeightField.tsx

@@ -0,0 +1,360 @@
+import {type FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {Platform, Pressable, type StyleProp, TextInput, View} from "react-native";
+
+import {Box} from "./Box";
+import type {HeightFieldProps, TextStyleWithOutline} from "./Common";
+import {FieldError, FieldHelperText, FieldTitle} from "./fieldElements";
+import {HeightActionSheet} from "./HeightActionSheet";
+import {isMobileDevice} from "./MediaQuery";
+import {SelectField} from "./SelectField";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+import {isNative} from "./Utilities";
+
+// Height bounds in inches. Default range covers typical human heights (0–7ft 11in).
+const DEFAULT_MIN_INCHES = 0;
+const DEFAULT_MAX_INCHES = 95; // 7ft 11in
+
+const inchesToFeetAndInches = (totalInches: string | undefined): {feet: string; inches: string} => {
+  if (!totalInches) {
+    return {feet: "", inches: ""};
+  }
+  const total = parseInt(totalInches, 10);
+  if (Number.isNaN(total)) {
+    return {feet: "", inches: ""};
+  }
+  const feet = Math.floor(total / 12);
+  const inches = total % 12;
+  return {feet: String(feet), inches: String(inches)};
+};
+
+const feetAndInchesToInches = (feet: string, inches: string): string => {
+  const feetNum = parseInt(feet, 10) || 0;
+  const inchesNum = parseInt(inches, 10) || 0;
+  return String(feetNum * 12 + inchesNum);
+};
+
+const formatHeightDisplay = (totalInches: string | undefined): string => {
+  if (!totalInches) {
+    return "";
+  }
+  const {feet, inches} = inchesToFeetAndInches(totalInches);
+  if (!feet && !inches) {
+    return "";
+  }
+  return `${feet}ft ${inches}in`;
+};
+
+interface HeightSegmentProps {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur: () => void;
+  onFocus: () => void;
+  placeholder: string;
+  label: string;
+  disabled?: boolean;
+  maxValue: number;
+  inputRef?: (ref: TextInput | null) => void;
+  error?: boolean;
+  focused?: boolean;
+}
+
+const HeightSegment: FC<HeightSegmentProps> = ({
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  placeholder,
+  label,
+  disabled,
+  maxValue,
+  inputRef,
+  error,
+  focused,
+}) => {
+  const {theme} = useTheme();
+
+  const handleChange = useCallback(
+    (text: string) => {
+      const numericValue = text.replace(/[^0-9]/g, "");
+      if (numericValue === "") {
+        onChange("");
+        return;
+      }
+      const num = parseInt(numericValue, 10);
+      if (num <= maxValue) {
+        onChange(numericValue);
+      }
+    },
+    [onChange, maxValue]
+  );
+
+  let borderColor = focused ? theme.border.focus : theme.border.dark;
+  if (disabled) {
+    borderColor = theme.border.activeNeutral;
+  } else if (error) {
+    borderColor = theme.border.error;
+  }
+
+  return (
+    <View style={{alignItems: "center", flexDirection: "row", gap: 4}}>
+      <View
+        style={{
+          alignItems: "center",
+          backgroundColor: disabled ? theme.surface.neutralLight : theme.surface.base,
+          borderColor,
+          borderRadius: 4,
+          borderWidth: focused ? 3 : 1,
+          flexDirection: "row",
+          height: 40,
+          justifyContent: "center",
+          paddingHorizontal: focused ? 6 : 8,
+          width: 50,
+        }}
+      >
+        <TextInput
+          accessibilityHint={`Enter ${label}`}
+          aria-label={`${label} input`}
+          editable={!disabled}
+          inputMode="numeric"
+          onBlur={onBlur}
+          onChangeText={handleChange}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          placeholderTextColor={theme.text.secondaryLight}
+          ref={inputRef}
+          selectTextOnFocus
+          style={
+            {
+              color: error ? theme.text.error : theme.text.primary,
+              fontFamily: "text",
+              fontSize: 16,
+              textAlign: "center",
+              width: "100%",
+              ...(Platform.OS === "web" ? {outline: "none"} : {}),
+            } as StyleProp<TextStyleWithOutline>
+          }
+          value={value}
+        />
+      </View>
+      <Text>{label}</Text>
+    </View>
+  );
+};
+
+export const HeightField: FC<HeightFieldProps> = ({
+  title,
+  disabled,
+  helperText,
+  errorText,
+  value,
+  onChange,
+  testID,
+  min,
+  max,
+}) => {
+  const {theme} = useTheme();
+  const actionSheetRef: React.RefObject<any> = useRef(null);
+  const isMobileOrNative = isMobileDevice() || isNative();
+
+  const minInches = min ?? DEFAULT_MIN_INCHES;
+  const maxInches = max ?? DEFAULT_MAX_INCHES;
+  const minFeet = Math.floor(minInches / 12);
+  const maxFeet = Math.floor(maxInches / 12);
+  const isAndroid = Platform.OS === "android";
+
+  const {feet: initialFeet, inches: initialInches} = inchesToFeetAndInches(value);
+  const [feet, setFeet] = useState(initialFeet);
+  const [inches, setInches] = useState(initialInches);
+  const [focusedSegment, setFocusedSegment] = useState<"feet" | "inches" | null>(null);
+
+  // Sync local state when value prop changes
+  useEffect(() => {
+    const {feet: newFeet, inches: newInches} = inchesToFeetAndInches(value);
+    setFeet(newFeet);
+    setInches(newInches);
+  }, [value]);
+
+  const handleFeetChange = useCallback(
+    (newFeet: string) => {
+      setFeet(newFeet);
+      if (newFeet || inches) {
+        const totalInches = feetAndInchesToInches(newFeet, inches);
+        onChange(totalInches);
+      } else {
+        onChange("");
+      }
+    },
+    [inches, onChange]
+  );
+
+  const handleInchesChange = useCallback(
+    (newInches: string) => {
+      setInches(newInches);
+      if (feet || newInches) {
+        const totalInches = feetAndInchesToInches(feet, newInches);
+        onChange(totalInches);
+      } else {
+        onChange("");
+      }
+    },
+    [feet, onChange]
+  );
+
+  const handleBlur = useCallback(() => {
+    setFocusedSegment(null);
+    if (feet || inches) {
+      const totalInches = feetAndInchesToInches(feet, inches);
+      onChange(totalInches);
+    }
+  }, [feet, inches, onChange]);
+
+  const handleActionSheetChange = useCallback(
+    (newValue: string) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+
+  const openActionSheet = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    actionSheetRef.current?.setModalVisible(true);
+  }, [disabled]);
+
+  // Generate select options for Android picker
+  const feetOptions = useMemo(
+    () =>
+      Array.from({length: maxFeet - minFeet + 1}, (_, i) => ({
+        label: `${minFeet + i} ft`,
+        value: String(minFeet + i),
+      })),
+    [minFeet, maxFeet]
+  );
+  const inchesOptions = useMemo(
+    () =>
+      Array.from({length: 12}, (_, i) => ({
+        label: `${i} in`,
+        value: String(i),
+      })),
+    []
+  );
+
+  let borderColor = theme.border.dark;
+  if (disabled) {
+    borderColor = theme.border.activeNeutral;
+  } else if (errorText) {
+    borderColor = theme.border.error;
+  }
+
+  if (isAndroid) {
+    return (
+      <View style={{flexDirection: "column", width: "100%"}} testID={testID}>
+        {Boolean(title) && <FieldTitle text={title!} />}
+        {Boolean(errorText) && <FieldError text={errorText!} />}
+        <Box direction="row" gap={2}>
+          <Box flex="grow">
+            <SelectField
+              disabled={disabled}
+              onChange={handleFeetChange}
+              options={feetOptions}
+              placeholder="ft"
+              value={feet}
+            />
+          </Box>
+          <Box flex="grow">
+            <SelectField
+              disabled={disabled}
+              onChange={handleInchesChange}
+              options={inchesOptions}
+              placeholder="in"
+              value={inches}
+            />
+          </Box>
+        </Box>
+        {Boolean(helperText) && <FieldHelperText text={helperText!} />}
+      </View>
+    );
+  }
+
+  if (isMobileOrNative) {
+    const formattedHeight = formatHeightDisplay(value);
+    const hasValidHeight = Boolean(formattedHeight);
+
+    return (
+      <View style={{flexDirection: "column", width: "100%"}} testID={testID}>
+        {Boolean(title) && <FieldTitle text={title!} />}
+        {Boolean(errorText) && <FieldError text={errorText!} />}
+        <Pressable
+          accessibilityHint="Tap to select height"
+          accessibilityLabel="Height selector"
+          accessibilityRole="button"
+          disabled={disabled}
+          onPress={openActionSheet}
+        >
+          <View
+            style={{
+              alignItems: "center",
+              backgroundColor: disabled ? theme.surface.neutralLight : theme.surface.base,
+              borderColor,
+              borderRadius: 4,
+              borderWidth: 1,
+              flexDirection: "row",
+              minHeight: 40,
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+            }}
+          >
+            <Text color={hasValidHeight ? "primary" : "secondaryLight"}>
+              {hasValidHeight ? formattedHeight : "Select height"}
+            </Text>
+          </View>
+        </Pressable>
+        {Boolean(helperText) && <FieldHelperText text={helperText!} />}
+        <HeightActionSheet
+          actionSheetRef={actionSheetRef}
+          max={maxInches}
+          min={minInches}
+          onChange={handleActionSheetChange}
+          title={title}
+          value={value || "60"}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={{flexDirection: "column", width: "100%"}} testID={testID}>
+      {Boolean(title) && <FieldTitle text={title!} />}
+      {Boolean(errorText) && <FieldError text={errorText!} />}
+      <Box direction="row" gap={4}>
+        <HeightSegment
+          disabled={disabled}
+          error={Boolean(errorText)}
+          focused={focusedSegment === "feet"}
+          label="ft"
+          maxValue={maxFeet}
+          onBlur={handleBlur}
+          onChange={handleFeetChange}
+          onFocus={() => setFocusedSegment("feet")}
+          placeholder="0"
+          value={feet}
+        />
+        <HeightSegment
+          disabled={disabled}
+          error={Boolean(errorText)}
+          focused={focusedSegment === "inches"}
+          label="in"
+          maxValue={11}
+          onBlur={handleBlur}
+          onChange={handleInchesChange}
+          onFocus={() => setFocusedSegment("inches")}
+          placeholder="0"
+          value={inches}
+        />
+      </Box>
+      {Boolean(helperText) && <FieldHelperText text={helperText!} />}
+    </View>
+  );
+};