@utilitywarehouse/hearth-react-native 0.31.1 → 0.32.1

package/src/components/StepperInput/StepperInput.figma.tsx

@@ -0,0 +1,45 @@
+import figma from '@figma/code-connect';
+import { StepperInput } from '../';
+
+const props = {
+  value: figma.string('Value'),
+  label: figma.string('Label'),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+    false: undefined,
+  }),
+  validationStatus: figma.enum('State', {
+    Default: 'initial',
+    Invalid: 'invalid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation'),
+  }),
+};
+
+const handleChangeText = () => {
+  // Placeholder for Code Connect examples.
+};
+
+figma.connect(
+  StepperInput,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10612%3A1860&m=dev',
+  {
+    props,
+    example: props => (
+      <StepperInput
+        value={props.value}
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        onChangeText={handleChangeText}
+      />
+    ),
+  }
+);

package/src/components/StepperInput/StepperInput.props.ts

@@ -0,0 +1,39 @@
+import type { ComponentType, Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
+
+export interface StepperBaseProps {
+  ref?: Ref<TextInput>;
+  disabled?: boolean;
+  validationStatus?: 'initial' | 'valid' | 'invalid';
+  readonly?: boolean;
+  focused?: boolean;
+  placeholder?: string;
+  inBottomSheet?: boolean;
+  required?: boolean;
+  label?: string;
+  labelVariant?: 'heading' | 'body';
+  helperText?: string;
+  helperIcon?: ComponentType;
+  validText?: string;
+  invalidText?: string;
+  value?: number | string;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChangeValue?: (value: number) => void;
+  focusInputOnStepPress?: boolean;
+  decrementAccessibilityLabel?: string;
+  incrementAccessibilityLabel?: string;
+}
+
+export type StepperInputProps = StepperBaseProps &
+  Omit<
+    TextInputProps,
+    'children' | 'value' | 'defaultValue' | 'onChangeText' | 'editable' | 'keyboardType'
+  > &
+  ViewProps & {
+    onChangeText?: (text: string) => void;
+  };
+
+export default StepperInputProps;

package/src/components/StepperInput/StepperInput.stories.tsx

@@ -0,0 +1,270 @@
+import { Meta, StoryObj } from '@storybook/react-native';
+import type { ComponentProps } from 'react';
+import { useEffect, useState } from 'react';
+import { StepperInput } from '.';
+import { VariantTitle } from '../../../docs/components';
+import { Flex } from '../Flex';
+
+type StepperInputStoryProps = ComponentProps<typeof StepperInput>;
+
+const meta = {
+  title: 'Stories / StepperInput',
+  component: StepperInput,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    helperText: {
+      control: 'text',
+    },
+    labelVariant: {
+      control: 'radio',
+      options: ['body', 'heading'],
+    },
+    validationStatus: {
+      control: 'select',
+      options: ['initial', 'valid', 'invalid'],
+    },
+    validText: {
+      control: 'text',
+    },
+    invalidText: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    readonly: {
+      control: 'boolean',
+    },
+    focused: {
+      control: 'boolean',
+    },
+    min: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+    focusInputOnStepPress: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    label: 'Label',
+    helperText: 'Helper text',
+    value: '10',
+    validationStatus: 'initial',
+    disabled: false,
+    readonly: false,
+    focused: false,
+    step: 1,
+    min: 0,
+    focusInputOnStepPress: false,
+  },
+} satisfies Meta<typeof StepperInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: ({
+    value: initialValue,
+    onChangeText: handleChangeText,
+    onChangeValue: handleChangeValue,
+    ...args
+  }: StepperInputStoryProps) => {
+    const [value, setValue] = useState(initialValue ?? '10');
+
+    useEffect(() => {
+      setValue(initialValue ?? '');
+    }, [initialValue]);
+
+    return (
+      <StepperInput
+        {...args}
+        value={value}
+        onChangeText={text => {
+          setValue(text);
+          handleChangeText?.(text);
+        }}
+        onChangeValue={nextValue => {
+          setValue(`${nextValue}`);
+          handleChangeValue?.(nextValue);
+        }}
+      />
+    );
+  },
+};
+
+export const States: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const [values, setValues] = useState({
+      default: '10',
+      focused: '10',
+      invalid: '10',
+      invalidFocused: '10',
+      heading: '10',
+      headingInvalid: '10',
+      disabled: '10',
+    });
+
+    const updateValue = (key: keyof typeof values) => (text: string) => {
+      setValues(currentValues => ({ ...currentValues, [key]: text }));
+    };
+
+    return (
+      <Flex direction="column" spacing="lg" style={{ width: 420 }}>
+        <VariantTitle title="Default">
+          <StepperInput
+            label="Label"
+            helperText="Helper text"
+            value={values.default}
+            onChangeText={updateValue('default')}
+          />
+        </VariantTitle>
+        <VariantTitle title="Focused">
+          <StepperInput
+            label="Label"
+            helperText="Helper text"
+            focused
+            value={values.focused}
+            onChangeText={updateValue('focused')}
+          />
+        </VariantTitle>
+        <VariantTitle title="Invalid">
+          <StepperInput
+            label="Label"
+            helperText="Helper text"
+            validationStatus="invalid"
+            invalidText="Validation text"
+            value={values.invalid}
+            onChangeText={updateValue('invalid')}
+          />
+        </VariantTitle>
+        <VariantTitle title="Invalid Focused">
+          <StepperInput
+            label="Label"
+            helperText="Helper text"
+            focused
+            validationStatus="invalid"
+            invalidText="Validation text"
+            value={values.invalidFocused}
+            onChangeText={updateValue('invalidFocused')}
+          />
+        </VariantTitle>
+        <VariantTitle title="Heading Label">
+          <StepperInput
+            label="Label"
+            helperText="Helper text"
+            labelVariant="heading"
+            value={values.heading}
+            onChangeText={updateValue('heading')}
+          />
+        </VariantTitle>
+        <VariantTitle title="Heading Invalid">
+          <StepperInput
+            label="Label"
+            helperText="Helper text"
+            labelVariant="heading"
+            validationStatus="invalid"
+            invalidText="Validation text"
+            value={values.headingInvalid}
+            onChangeText={updateValue('headingInvalid')}
+          />
+        </VariantTitle>
+        <VariantTitle title="Disabled">
+          <StepperInput
+            label="Label"
+            helperText="Helper text"
+            disabled
+            value={values.disabled}
+            onChangeText={updateValue('disabled')}
+          />
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};
+
+export const Bounds: Story = {
+  parameters: {
+    controls: { include: ['min', 'max', 'step', 'focusInputOnStepPress'] },
+  },
+  args: {
+    min: 0,
+    max: 12,
+    step: 2,
+  },
+  render: (args: StepperInputStoryProps) => {
+    const [value, setValue] = useState('10');
+
+    return <StepperInput {...args} value={value} onChangeText={setValue} />;
+  },
+};
+
+export const FocusOnStepPress: Story = {
+  parameters: {
+    controls: { include: ['focusInputOnStepPress'] },
+  },
+  args: {
+    focusInputOnStepPress: true,
+    label: 'Guests',
+    helperText: 'Button presses will keep focus in the input',
+    min: 1,
+    max: 10,
+  },
+  render: (args: StepperInputStoryProps) => {
+    const [value, setValue] = useState('2');
+
+    return <StepperInput {...args} value={value} onChangeText={setValue} />;
+  },
+};
+
+export const LargeStep: Story = {
+  parameters: {
+    controls: { include: ['step'] },
+  },
+  args: {
+    step: 10,
+    label: 'Large Step',
+    helperText: 'Step value of 10',
+    min: 0,
+    max: 100,
+  },
+  render: (args: StepperInputStoryProps) => {
+    const [value, setValue] = useState('20');
+
+    return <StepperInput {...args} value={value} onChangeText={setValue} />;
+  },
+};
+
+export const DecimalStep: Story = {
+  parameters: {
+    controls: { include: ['min', 'max', 'step'] },
+  },
+  args: {
+    step: 0.5,
+    label: 'Weight',
+    helperText: 'Supports fractional values',
+    min: -2,
+    max: 2,
+  },
+  render: (args: StepperInputStoryProps) => {
+    const [value, setValue] = useState('0.5');
+
+    return <StepperInput {...args} value={value} onChangeText={setValue} />;
+  },
+};

package/src/components/StepperInput/StepperInput.tsx

@@ -0,0 +1,322 @@
+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 { useFormFieldAccessibility } from '../../hooks';
+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';
+  const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+    label,
+    helperText,
+    validText,
+    invalidText,
+    required,
+    validationStatus,
+    fallbackLabel: props.accessibilityLabel,
+    fallbackHint: props.accessibilityHint,
+  });
+
+  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);
+  };
+
+  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={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            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}
     />
   );
 };