@utilitywarehouse/hearth-react-native 0.31.1 → 0.32.0

package/src/components/StepperInput/StepperInput.tsx

@@ -0,0 +1,349 @@
+import { AddSmallIcon, MinusSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import type { TextInput, TextInputFocusEvent } from 'react-native';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { FormField } from '../FormField';
+import { InputComponent, InputField } from '../Input/Input';
+import StepperButton from './StepperButton';
+import StepperInputProps from './StepperInput.props';
+
+const normalizeValue = (value?: string | number) => {
+  if (value === undefined || value === null || value === '') {
+    return '';
+  }
+
+  return `${value}`;
+};
+
+const getDecimalPlaces = (value?: number | string) => {
+  if (value === undefined || value === null || value === '') {
+    return 0;
+  }
+
+  const normalizedValue = `${value}`;
+  const decimalPart = normalizedValue.split('.')[1];
+
+  return decimalPart ? decimalPart.length : 0;
+};
+
+const formatNumber = (value: number, precision: number) => {
+  if (precision <= 0) {
+    return `${Math.trunc(value)}`;
+  }
+
+  return value
+    .toFixed(precision)
+    .replace(/\.0+$/, '')
+    .replace(/(\.\d*?)0+$/, '$1');
+};
+
+const sanitizeValue = (value: string, allowNegative: boolean, allowDecimal: boolean) => {
+  const strippedValue = value.replace(
+    allowDecimal ? /[^\d,.-]/g : allowNegative ? /[^\d-]/g : /\D/g,
+    ''
+  );
+  const normalizedValue = allowDecimal ? strippedValue.replace(/,/g, '.') : strippedValue;
+
+  if (!allowNegative) {
+    const unsignedValue = normalizedValue.replace(/-/g, '');
+
+    if (!allowDecimal) {
+      return unsignedValue;
+    }
+
+    const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
+    const decimalPart = decimalParts.join('');
+
+    return decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
+  }
+
+  const hasLeadingMinus = normalizedValue.startsWith('-');
+  const unsignedValue = normalizedValue.replace(/-/g, '');
+
+  if (!allowDecimal) {
+    return `${hasLeadingMinus ? '-' : ''}${unsignedValue}`;
+  }
+
+  const [integerPart = '', ...decimalParts] = unsignedValue.split('.');
+  const decimalPart = decimalParts.join('');
+  const composedValue = decimalParts.length > 0 ? `${integerPart}.${decimalPart}` : integerPart;
+
+  return `${hasLeadingMinus ? '-' : ''}${composedValue}`;
+};
+
+const parseValue = (value: string) => {
+  if (!value || value === '-' || value === '.' || value === '-.') {
+    return null;
+  }
+
+  const parsedValue = Number(value);
+  return Number.isNaN(parsedValue) ? null : parsedValue;
+};
+
+const clampValue = (value: number, min?: number, max?: number) => {
+  let nextValue = value;
+
+  if (typeof min === 'number') {
+    nextValue = Math.max(min, nextValue);
+  }
+
+  if (typeof max === 'number') {
+    nextValue = Math.min(max, nextValue);
+  }
+
+  return nextValue;
+};
+
+const StepperInput = ({
+  value,
+  defaultValue,
+  onChangeText,
+  onChangeValue,
+  min,
+  max,
+  step = 1,
+  focusInputOnStepPress = false,
+  validationStatus = 'initial',
+  disabled = false,
+  readonly = false,
+  focused = false,
+  inBottomSheet = false,
+  required = true,
+  label,
+  labelVariant = 'body',
+  helperText,
+  helperIcon,
+  validText,
+  invalidText,
+  style,
+  decrementAccessibilityLabel = 'Decrease value',
+  incrementAccessibilityLabel = 'Increase value',
+  onFocus,
+  onBlur,
+  ref,
+  ...props
+}: StepperInputProps) => {
+  const inputRef = useRef<TextInput>(null);
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(() => normalizeValue(defaultValue));
+  const [isInputFocused, setIsInputFocused] = useState(false);
+
+  const displayValue = isControlled ? normalizeValue(value) : internalValue;
+  const parsedValue = parseValue(displayValue);
+  const resolvedFocused = focused || isInputFocused;
+  const allowNegative = typeof min !== 'number' || min < 0 || (typeof max === 'number' && max < 0);
+  const decimalPrecision = Math.max(
+    getDecimalPlaces(value),
+    getDecimalPlaces(defaultValue),
+    getDecimalPlaces(min),
+    getDecimalPlaces(max),
+    getDecimalPlaces(step)
+  );
+  const allowDecimal = decimalPrecision > 0;
+  const keyboardType = allowNegative || allowDecimal ? 'numeric' : 'number-pad';
+  const inputMode = allowDecimal ? 'decimal' : 'numeric';
+
+  useImperativeHandle(ref, () => inputRef.current as TextInput, []);
+
+  useEffect(() => {
+    if (!isControlled && defaultValue !== undefined) {
+      setInternalValue(normalizeValue(defaultValue));
+    }
+  }, [defaultValue, isControlled]);
+
+  const updateValue = (nextValue: string) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+
+    onChangeText?.(nextValue);
+
+    const nextParsedValue = parseValue(nextValue);
+    if (nextParsedValue !== null) {
+      onChangeValue?.(clampValue(nextParsedValue, min, max));
+    }
+  };
+
+  const handleChangeText = (nextText: string) => {
+    const sanitizedValue = sanitizeValue(nextText, allowNegative, allowDecimal);
+
+    if (
+      sanitizedValue === '' ||
+      sanitizedValue === '-' ||
+      sanitizedValue === '.' ||
+      sanitizedValue === '-.' ||
+      (allowDecimal && sanitizedValue.endsWith('.'))
+    ) {
+      updateValue(sanitizedValue);
+      return;
+    }
+
+    const nextParsedValue = parseValue(sanitizedValue);
+
+    if (nextParsedValue === null) {
+      updateValue(sanitizedValue);
+      return;
+    }
+
+    const clampedText = formatNumber(clampValue(nextParsedValue, min, max), decimalPrecision);
+    updateValue(clampedText);
+  };
+
+  const handleStepPress = (direction: 1 | -1) => {
+    const baseValue = parsedValue ?? (typeof min === 'number' ? min : 0);
+    const nextValue = clampValue(baseValue + direction * step, min, max);
+    const normalizedValue = formatNumber(nextValue, decimalPrecision);
+
+    updateValue(normalizedValue);
+    if (focusInputOnStepPress) {
+      inputRef.current?.focus();
+    }
+  };
+
+  const decrementDisabled =
+    disabled || readonly || (typeof min === 'number' && parsedValue !== null && parsedValue <= min);
+  const incrementDisabled =
+    disabled || readonly || (typeof max === 'number' && parsedValue !== null && parsedValue >= max);
+
+  const handleFocus = (event: TextInputFocusEvent) => {
+    setIsInputFocused(true);
+    onFocus?.(event);
+  };
+
+  const handleBlur = (event: TextInputFocusEvent) => {
+    setIsInputFocused(false);
+    onBlur?.(event);
+  };
+
+  const getAccessibilityLabel = () => {
+    let accessibilityLabel = '';
+
+    if (label) {
+      accessibilityLabel = accessibilityLabel + label;
+    }
+
+    if (required) {
+      accessibilityLabel = accessibilityLabel + ', required';
+    }
+
+    return accessibilityLabel || props.accessibilityLabel;
+  };
+
+  const getAccessibilityHint = () => {
+    let accessibilityHint = '';
+
+    if (helperText) {
+      accessibilityHint = accessibilityHint + helperText;
+    }
+
+    if (validationStatus !== 'initial') {
+      if (accessibilityHint.length > 0) {
+        accessibilityHint = accessibilityHint + ', ';
+      }
+
+      if (validationStatus === 'invalid' && invalidText) {
+        accessibilityHint = accessibilityHint + invalidText;
+      }
+
+      if (validationStatus === 'valid' && validText) {
+        accessibilityHint = accessibilityHint + validText;
+      }
+    }
+
+    return accessibilityHint || props.accessibilityHint;
+  };
+
+  return (
+    <FormField
+      label={label}
+      labelVariant={labelVariant}
+      helperText={helperText}
+      helperIcon={helperIcon}
+      validText={validText}
+      invalidText={invalidText}
+      required={required}
+      validationStatus={validationStatus}
+      disabled={disabled}
+      readonly={readonly}
+      accessibilityHandledByChildren
+      style={[styles.root, style]}
+    >
+      <View style={styles.controls}>
+        <StepperButton
+          icon={MinusSmallIcon}
+          disabled={decrementDisabled}
+          accessibilityLabel={decrementAccessibilityLabel}
+          onPress={() => handleStepPress(-1)}
+        />
+        <InputComponent
+          validationStatus={validationStatus}
+          isInvalid={validationStatus === 'invalid'}
+          isReadOnly={readonly}
+          isDisabled={disabled}
+          isFocused={resolvedFocused}
+          isRequired={required}
+          style={styles.inputRoot}
+        >
+          <InputField
+            // @ts-expect-error - ref forwarding issue mirrors the base Input component
+            ref={inputRef}
+            inputMode={inputMode}
+            keyboardType={keyboardType}
+            inBottomSheet={inBottomSheet}
+            editable={!disabled && !readonly}
+            textAlign="center"
+            value={displayValue}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChangeText={handleChangeText}
+            accessibilityLabel={getAccessibilityLabel()}
+            accessibilityHint={getAccessibilityHint()}
+            accessibilityState={{
+              ...(props.accessibilityState ?? {}),
+              disabled: disabled || readonly,
+            }}
+            aria-disabled={disabled || readonly}
+            aria-readonly={readonly}
+            aria-required={required}
+            aria-invalid={validationStatus === 'invalid'}
+            {...props}
+            style={styles.inputField}
+          />
+        </InputComponent>
+        <StepperButton
+          icon={AddSmallIcon}
+          disabled={incrementDisabled}
+          accessibilityLabel={incrementAccessibilityLabel}
+          onPress={() => handleStepPress(1)}
+        />
+      </View>
+    </FormField>
+  );
+};
+
+StepperInput.displayName = 'StepperInput';
+
+const styles = StyleSheet.create(theme => ({
+  root: {
+    width: '100%',
+    maxWidth: theme.components.input.maxWidth,
+  },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.components.input.stepper.gap,
+  },
+  inputRoot: {
+    width: 80,
+    minWidth: 80,
+    paddingHorizontal: 0,
+    justifyContent: 'center',
+  },
+  inputField: {
+    textAlign: 'center',
+    paddingHorizontal: 0,
+  },
+}));
+
+export default StepperInput;

package/src/components/StepperInput/index.ts

@@ -0,0 +1,2 @@
+export { default as StepperInput } from './StepperInput';
+export type { StepperInputProps } from './StepperInput.props';

package/src/components/Textarea/Textarea.docs.mdx

@@ -72,6 +72,7 @@ all of the React Native [`View` props](https://reactnative.dev/docs/view).
 | validText        | `string`                           | `-`         | Text to display when validation status is 'valid'. **(Only to be used if the input has no children)**                                                                   |
 | invalidText      | `string`                           | `-`         | Text to display when validation status is 'invalid'.                                                                                                                    |
 | required         | `boolean`                          | `true`      | Whether the input is required. **(Only to be used if the input has no children)**                                                                                       |
+| defaultHeight    | `number`                           | `96`        | The initial height of the textarea in pixels when `resizable` is `true`.                                                                                                |
 | resizable        | `boolean`                          | `false`     | Adds a bottom-right drag handle so the textarea can be resized vertically.                                                                                              |
 | value            | `string`                           | `-`         | The value of the input. **(Only to be used if the input has no children)**                                                                                              |
 | onChange         | `function`                         | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
@@ -157,6 +158,7 @@ const MyComponent = () => {
       helperText="Drag the corner handle to resize"
       placeholder="Enter your text here..."
       resizable
+      defaultHeight={140}
     />
   );
 };

package/src/components/Textarea/Textarea.props.ts

@@ -1,6 +1,17 @@
 import type { TextInputProps, ViewProps } from 'react-native';
 
 export interface TextareaBaseProps {
+  /**
+   * Sets the initial height of a resizable textarea in pixels.
+   * Has no effect unless `resizable` is enabled.
+   *
+   * @type number
+   * @example
+   * ```tsx
+   * <Textarea resizable defaultHeight={140} />
+   * ```
+   */
+  defaultHeight?: number;
   /**
    * If true, the textarea can be resized vertically using a drag handle.
    *

package/src/components/Textarea/Textarea.stories.tsx

@@ -66,6 +66,10 @@ const meta = {
       description: 'Enables a drag handle to resize the Textarea vertically',
       defaultValue: false,
     },
+    defaultHeight: {
+      control: { type: 'number', min: 64, step: 8 },
+      description: 'Sets the initial height of the Textarea in pixels',
+    },
   },
   args: {
     placeholder: 'Textarea placeholder',
@@ -90,3 +94,13 @@ export const Resizable: Story = {
     resizable: true,
   },
 };
+
+export const DefaultHeight: Story = {
+  args: {
+    label: 'Notes',
+    helperText: 'Starts taller by default',
+    placeholder: 'Add more detail here...',
+    resizable: true,
+    defaultHeight: 140,
+  },
+};

package/src/components/Textarea/Textarea.tsx

@@ -33,6 +33,7 @@ const Textarea = ({
   validationStatus = 'initial',
   children,
   resizable = false,
+  defaultHeight,
   disabled,
   focused,
   readonly,
@@ -56,8 +57,9 @@ const Textarea = ({
   const textareaDisabled = disabled ?? formFieldContext?.disabled;
   const textareaReadonly = readonly ?? formFieldContext?.readonly;
   const textareaValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
-  const textareaHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
-  const resizeStartHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
+  const textareaDefaultHeight = defaultHeight ?? DEFAULT_TEXTAREA_HEIGHT;
+  const textareaHeight = useSharedValue(textareaDefaultHeight);
+  const resizeStartHeight = useSharedValue(textareaDefaultHeight);
   const theme = useTheme();
 
   useEffect(() => {
@@ -66,6 +68,13 @@ const Textarea = ({
     }
   }, [formFieldContext]);
 
+  useEffect(() => {
+    if (!hasMeasuredHeight.current) {
+      textareaHeight.value = textareaDefaultHeight;
+      resizeStartHeight.value = textareaDefaultHeight;
+    }
+  }, [resizeStartHeight, textareaDefaultHeight, textareaHeight]);
+
   const getAccessibilityLabel = () => {
     let accessibilityLabel = '';
     if (textareaLabel) {

package/src/components/index.ts

@@ -48,11 +48,14 @@ export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rating';
+export * from './Roundel';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
+export * from './StepperInput';
 export * from './Switch';
 export * from './Table';
 export * from './Tabs';