@utilitywarehouse/hearth-react-native 0.31.0 → 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/Table/TableHeaderCell.tsx

@@ -11,9 +11,10 @@ const renderContent = (
   weight: 'regular' | 'semibold' = 'semibold',
   color: 'purple' | 'white' = 'white'
 ) => {
+  styles.useVariants({ color });
   if (typeof children === 'string' || typeof children === 'number') {
     return (
-      <BodyText size="md" weight={weight} style={styles.text} inverted={color === 'purple'}>
+      <BodyText size="md" weight={weight} style={styles.text}>
         {children}
       </BodyText>
     );
@@ -129,6 +130,14 @@ const styles = StyleSheet.create(theme => ({
           color: theme.color.text.primary,
         },
       },
+      color: {
+        purple: {
+          color: theme.components.table.headerCell.foregoundColorInverted,
+        },
+        white: {
+          color: theme.components.table.headerCell.foregoundColor,
+        },
+      },
     },
   },
 }));

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';

package/src/tokens/color.ts

@@ -94,6 +94,7 @@ export const grey = {
   '700': '#4c4c4c',
   '800': '#3f3f3f',
   '900': '#3a3837',
+  '925': '#2f2d2d',
   '950': '#232323',
   '975': '#191919',
   '1000': '#101010',
@@ -480,25 +481,25 @@ export const light = {
 
 export const dark = {
   background: {
-    brand: '#7a42c8',
+    brand: '#442484',
     loading: '#30302c',
     primary: '#191917',
-    secondary: '#232323',
+    secondary: '#2f2d2d',
   },
   border: {
-    strong: '#ebebeb',
-    subtle: '#4c473d',
+    strong: '#888888',
+    subtle: '#5b5b5b',
   },
   feedback: {
     danger: {
-      border: '#ff7964',
+      border: '#f4412a',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#ff7964',
       },
       surface: {
-        default: '#ff634a',
-        subtle: '#ffa89d',
+        default: '#de2612',
+        subtle: '#6b1f1a',
       },
     },
     functional: {
@@ -513,36 +514,36 @@ export const dark = {
       },
     },
     info: {
-      border: '#6bb0ff',
+      border: '#2786f1',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#6bb0ff',
       },
       surface: {
-        default: '#6bb0ff',
-        subtle: '#bcddff',
+        default: '#1c6cd4',
+        subtle: '#0b3375',
       },
     },
     positive: {
-      border: '#58ca93',
+      border: '#19a660',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#58ca93',
       },
       surface: {
-        default: '#36bf7d',
-        subtle: '#a2e2c3',
+        default: '#0f834a',
+        subtle: '#074b2a',
       },
     },
     warning: {
-      border: '#ff9639',
+      border: '#f56e00',
       foreground: {
-        default: '#101010',
+        default: '#ffffff',
         subtle: '#ff9639',
       },
       surface: {
-        default: '#ff8010',
-        subtle: '#ffcca8',
+        default: '#cf5d00',
+        subtle: '#893900',
       },
     },
   },
@@ -585,9 +586,9 @@ export const dark = {
       },
       surface: {
         strong: {
-          active: '#c6b5e2',
-          default: '#996cda',
-          hover: '#af90de',
+          active: '#ddd5eb',
+          default: '#af90de',
+          hover: '#c6b5e2',
         },
       },
     },
@@ -670,52 +671,52 @@ export const dark = {
     },
   },
   shadow: {
-    brand: '#7a42c8',
-    broadband: '#506c21',
-    cashback: '#8b2bc9',
-    default: '#f7f7f7',
-    energy: '#326e7a',
-    insurance: '#9b4c0e',
-    mobile: '#a7266d',
-    pig: '#8f358f',
+    brand: '#442484',
+    broadband: '#4f6b20',
+    cashback: '#7429b5',
+    default: '#3f3f3f',
+    energy: '#2c6370',
+    insurance: '#7f4518',
+    mobile: '#8a3260',
+    pig: '#7a1f7e',
   },
   surface: {
     brand: {
-      default: '#996cda',
+      default: '#af90de',
       strong: '#26164f',
       subtle: '#442484',
     },
     broadband: {
       default: '#506c21',
-      subtle: '#35421c',
+      subtle: '#4f6b20',
     },
     cashback: {
       default: '#8b2bc9',
-      subtle: '#522270',
+      subtle: '#7429b5',
     },
     energy: {
       default: '#326e7a',
-      subtle: '#254348',
+      subtle: '#2c6370',
     },
     highlight: {
       default: '#ffb921',
-      subtle: '#756230',
+      subtle: '#82692b',
     },
     insurance: {
       default: '#9b4c0e',
-      subtle: '#5a3213',
+      subtle: '#7f4518',
     },
     mobile: {
       default: '#a7266d',
-      subtle: '#601f42',
+      subtle: '#8a3260',
     },
     neutral: {
-      strong: '#232323',
+      strong: '#2f2d2d',
       subtle: '#191917',
     },
     pig: {
       default: '#8f358f',
-      subtle: '#5d2167',
+      subtle: '#7a1f7e',
     },
   },
   text: {

package/src/tokens/components/dark/alert.ts

@@ -10,15 +10,15 @@ export default {
   gap: 8,
   iconButton: {
     unstyled: {
-      foregroundColor: '#101010',
-      foregroundColorActive: '#3f3f3f',
-      foregroundColorHover: '#3a3837',
+      foregroundColor: '#ebebeb',
+      foregroundColorActive: '#b2afae',
+      foregroundColorHover: '#d3d3d3',
     },
   },
   link: {
-    color: '#101010',
-    colorActive: '#3f3f3f',
-    colorHover: '#3a3837',
+    color: '#ebebeb',
+    colorActive: '#b2afae',
+    colorHover: '#d3d3d3',
   },
   padding: 14,
 } as const;