@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.1

package/src/components/Toast/Toast.context.tsx

@@ -1,7 +1,12 @@
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import type { ToastContextValue, ToastInstance, ToastOptions } from './Toast.props';
+import type {
+  ToastContextValue,
+  ToastInstance,
+  ToastOptions,
+  ToastProviderProps,
+} from './Toast.props';
 import ToastItem, { type ToastItemHandle } from './ToastItem';
 
 const ToastContext = createContext<ToastContextValue | undefined>(undefined);
@@ -12,7 +17,10 @@ export const useToastContext = () => {
   return ctx;
 };
 
-export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const ToastProvider: React.FC<ToastProviderProps> = ({
+  children,
+  safeAreaPadding = true,
+}) => {
   const [toasts, setToasts] = useState<ToastInstance[]>([]);
   const timers = useRef<Record<string, number>>({});
   const toastRefs = useRef<Record<string, ToastItemHandle | null>>({});
@@ -62,6 +70,10 @@ export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     [removeToast]
   );
 
+  styles.useVariants({
+    safeAreaPadding,
+  });
+
   useEffect(() => {
     return () => {
       // cleanup timers on unmount
@@ -99,7 +111,7 @@ export const useToast = () => {
 
 export default ToastContext;
 
-const styles = StyleSheet.create(theme => ({
+const styles = StyleSheet.create((theme, rt) => ({
   container: {
     position: 'absolute',
     left: 0,
@@ -108,6 +120,15 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'stretch',
     paddingBottom: theme.space['200'],
     pointerEvents: 'box-none',
+    variants: {
+      safeAreaPadding: {
+        true: {
+          paddingBottom: theme.space['200'] + rt.insets.bottom,
+          paddingTop: rt.insets.top,
+        },
+        false: {},
+      },
+    },
   },
   stack: {
     width: '100%',

package/src/components/Toast/Toast.props.ts

@@ -25,6 +25,11 @@ export interface ToastInstance extends ToastOptions {
   duration: number;
 }
 
+export interface ToastProviderProps {
+  children: ReactNode;
+  safeAreaPadding?: boolean;
+}
+
 export interface ToastContextValue {
   addToast: (opts: ToastOptions) => string;
   removeToast: (id: string) => void;

package/src/components/Toast/Toast.stories.tsx

@@ -73,6 +73,35 @@ export const BasicToast: Story = {
   ),
 };
 
+const LongToastDemo = () => {
+  const { addToast } = useToast();
+
+  return (
+    <View style={{ gap: 12, padding: 16 }}>
+      <Button
+        onPress={() =>
+          addToast({
+            text: "Couldn't update top-up. Please check your connection and try again.",
+            icon: WarningSmallIcon,
+            actionText: 'Retry',
+            onPress: () => console.log('Retry clicked'),
+          })
+        }
+      >
+        Show Long Toast
+      </Button>
+    </View>
+  );
+};
+
+export const LongToastMessage = {
+  render: () => (
+    <ViewWrap>
+      <LongToastDemo />
+    </ViewWrap>
+  ),
+};
+
 const WithIconDemo = () => {
   const { addToast } = useToast();
 

package/src/components/Toast/ToastItem.tsx

@@ -113,7 +113,9 @@ const ToastItem = forwardRef<ToastItemHandle, Props>(({ toast, onClose }, ref) =
             <Icon as={IconComp} style={styles.icon} />
           </View>
         ) : null}
-        <BodyText inverted>{toast.text}</BodyText>
+        <BodyText inverted style={styles.text}>
+          {toast.text}
+        </BodyText>
       </View>
       {toast.actionText ? (
         <Link onPress={handlePress} showIcon={false} inverted>
@@ -179,7 +181,8 @@ const styles = StyleSheet.create(theme => ({
     width: 24,
     height: 24,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignSelf: 'flex-start',
+    alignItems: 'flex-start',
     flexShrink: 0,
   },
   icon: {
@@ -192,8 +195,10 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'center',
     minWidth: 0,
   },
+  text: { flexShrink: 1 },
   actions: {
     flexShrink: 0,
+    alignSelf: 'flex-start',
   },
 }));
 

package/src/components/UnstyledIconButton/UnstyledIconButton.stories.tsx

@@ -1,10 +1,10 @@
-import UnstyledIconButton from './UnstyledIconButton';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { VariantTitle } from '../../../docs/components';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { Flex } from '../Flex';
-import { Platform } from 'react-native';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Platform } from 'react-native';
+import { VariantTitle } from '../../../docs/components';
+import { Flex } from '../Flex';
+import UnstyledIconButton from './UnstyledIconButton';
 
 const meta = {
   title: 'Stories / UnstyledIconButton',
@@ -77,7 +77,7 @@ export const States: Story = {
     const iconComponent =
       typeof iconProp === 'string' ? Icons[iconProp as keyof typeof Icons] : iconProp;
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default" invert={inverted}>
           <UnstyledIconButton size={size} inverted={inverted} icon={iconComponent} />
         </VariantTitle>

package/src/components/VerificationInput/VerificationInput.docs.mdx

@@ -17,9 +17,8 @@ The verification input component is used to capture OTP (One Time Password) or o
 - [Playground](#playground)
 - [Usage](#usage)
 - [Props](#props)
-- [Variants](#variants)
-  - [States](#states)
-  - [Secure Text Entry](#secure-text-entry)
+- [Ref Methods](#ref-methods)
+- [States](#states)
 
 ## Playground
 
@@ -45,10 +44,6 @@ const MyComponent = () => {
 
 ## Props
 
-### `VerificationInput`
-
-The component accepts the following props:
-
 | Prop               | Type                                | Default     | Description                                                  |
 | :----------------- | :---------------------------------- | :---------- | :----------------------------------------------------------- |
 | `value`            | `string`                            | -           | The value of the input.                                      |
@@ -63,7 +58,35 @@ The component accepts the following props:
 | `disabled`         | `boolean`                           | `false`     | Whether the input is disabled.                               |
 | `readonly`         | `boolean`                           | `false`     | Whether the input is read-only.                              |
 | `secureTextEntry`  | `boolean`                           | `false`     | Whether to obscure the text entry (e.g. for passwords/OTPs). |
+| `autoFocus`        | `boolean`                           | `false`     | Whether the input should auto-focus when mounted.            |
+
+## Ref Methods
+
+<Canvas of={Stories.RefMethods} />
+
+```tsx
+import { useRef } from 'react';
+import {
+  VerificationInput,
+  type VerificationInputHandle,
+} from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const inputRef = useRef<VerificationInputHandle>(null);
+
+  return (
+    <VerificationInput ref={inputRef} label="Enter Code" onChangeText={code => console.log(code)} />
+  );
+};
+```
+
+Available methods:
+
+- `focus()`
+- `blur()`
+- `clear()`
+- `focusIndex(index: number)`
 
-## Variants
+## States
 
 <Canvas of={Stories.Variants} />

package/src/components/VerificationInput/VerificationInput.props.ts

@@ -1,6 +1,13 @@
 import type { ComponentType } from 'react';
 import { ViewProps } from 'react-native';
 
+export interface VerificationInputHandle {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  focusIndex: (index: number) => void;
+}
+
 export interface VerificationInputProps extends ViewProps {
   /**
    * The value of the input.
@@ -50,6 +57,10 @@ export interface VerificationInputProps extends ViewProps {
    * Whether to obscure the text entry (e.g. for passwords/OTPs).
    */
   secureTextEntry?: boolean;
+  /**
+   * Whether the input should auto-focus when mounted.
+   */
+  autoFocus?: boolean;
 }
 
 export default VerificationInputProps;

package/src/components/VerificationInput/VerificationInput.stories.tsx

@@ -1,8 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import React, { useState } from 'react';
-import { VerificationInput } from '.';
+import { useRef, useState } from 'react';
+import { VerificationInput, type VerificationInputHandle } from '.';
 import { VariantTitle } from '../../../docs/components';
+import { BodyText } from '../BodyText';
+import { Button } from '../Button';
 import { Flex } from '../Flex';
 
 const meta = {
@@ -24,10 +26,13 @@ const meta = {
     disabled: { control: 'boolean' },
     readonly: { control: 'boolean' },
     secureTextEntry: { control: 'boolean' },
+    autoFocus: { control: 'boolean' },
   },
   args: {
     label: 'Verification Code',
     validationStatus: 'initial',
+    autoFocus: true,
+    secureTextEntry: false,
   },
 } satisfies Meta<typeof VerificationInput>;
 
@@ -69,7 +74,7 @@ export const Variants: Story = {
     };
 
     return (
-      <Flex direction="column" space="lg" style={{ width: 400 }}>
+      <Flex direction="column" spacing="lg" style={{ width: 400 }}>
         <VariantTitle title="Default">
           <VerificationInput
             label="Verification Code"
@@ -138,3 +143,74 @@ export const Variants: Story = {
     );
   },
 };
+
+export const RefMethods: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const inputRef = useRef<VerificationInputHandle>(null);
+    const [value, setValue] = useState('123456');
+    const [status, setStatus] = useState('Ref not tested yet');
+
+    const handleFocus = () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+        setStatus('OK: focused first slot');
+      } else {
+        setStatus('Error: ref is null');
+      }
+    };
+
+    const handleBlur = () => {
+      if (inputRef.current) {
+        inputRef.current.blur();
+        setStatus('OK: blurred inputs');
+      } else {
+        setStatus('Error: ref is null');
+      }
+    };
+
+    const handleClear = () => {
+      if (inputRef.current) {
+        inputRef.current.clear();
+        setStatus('OK: cleared value');
+      } else {
+        setStatus('Error: ref is null');
+      }
+    };
+
+    const handleFocusIndex = () => {
+      if (inputRef.current) {
+        inputRef.current.focusIndex(3);
+        setStatus('OK: focused slot 4');
+      } else {
+        setStatus('Error: ref is null');
+      }
+    };
+
+    return (
+      <Flex direction="column" space="lg" style={{ width: 400 }}>
+        <VariantTitle title="Ref Methods">
+          <VerificationInput
+            ref={inputRef}
+            label="Verification Code"
+            value={value}
+            onChangeText={setValue}
+          />
+        </VariantTitle>
+        <VariantTitle title="Actions">
+          <Flex direction="column" space="sm">
+            <Flex direction="row" space="sm">
+              <Button onPress={handleFocus}>Focus</Button>
+              <Button onPress={handleFocusIndex}>Focus Slot 4</Button>
+              <Button onPress={handleBlur}>Blur</Button>
+              <Button onPress={handleClear}>Clear</Button>
+            </Flex>
+            <BodyText>{status}</BodyText>
+          </Flex>
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,77 +1,109 @@
+import { forwardRef, useImperativeHandle } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import { useVerificationInput } from './useVerificationInput';
-import VerificationInputProps from './VerificationInput.props';
+import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
 import { VerificationInputSlot } from './VerificationInputSlot';
 
-const VerificationInput = ({
-  value = '',
-  onChangeText,
-  label,
-  labelVariant = 'body',
-  helperText,
-  helperIcon,
-  validationStatus = 'initial',
-  validText,
-  invalidText,
-  disabled = false,
-  readonly = false,
-  secureTextEntry = false,
-  style,
-  ...props
-}: VerificationInputProps) => {
-  const length = 6;
-  const { inputRefs, focusedIndex, handleFocus, handleBlur, handleChangeText, handleKeyPress } =
-    useVerificationInput({
+const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputProps>(
+  (
+    {
+      value = '',
+      onChangeText,
+      label,
+      labelVariant = 'body',
+      helperText,
+      helperIcon,
+      validationStatus = 'initial',
+      validText,
+      invalidText,
+      disabled = false,
+      readonly = false,
+      secureTextEntry = false,
+      autoFocus = false,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const length = 6;
+    const {
+      inputRefs,
+      displayValue,
+      focusedIndex,
+      handleFocus,
+      handleBlur,
+      handleChangeText,
+      handleKeyPress,
+    } = useVerificationInput({
       value,
       onChangeText,
     });
 
-  const slots = Array.from({ length }, (_, index) => index);
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => inputRefs.current[0]?.focus(),
+        blur: () => {
+          inputRefs.current.forEach(input => input?.blur());
+        },
+        clear: () => onChangeText?.(''),
+        focusIndex: (index: number) => {
+          if (index >= 0 && index < length) {
+            inputRefs.current[index]?.focus();
+          }
+        },
+      }),
+      [length, onChangeText]
+    );
+
+    const slots = Array.from({ length }, (_, index) => index);
 
-  return (
-    <FormField
-      label={label}
-      labelVariant={labelVariant}
-      helperText={helperText}
-      helperIcon={helperIcon}
-      validationStatus={validationStatus}
-      validText={validText}
-      invalidText={invalidText}
-      disabled={disabled}
-      readonly={readonly}
-      style={[styles.root, style]}
-      {...props}
-    >
-      <View style={styles.slotsContainer}>
-        {slots.map(index => {
-          const char = value[index] || '';
-          const isActive = focusedIndex === index;
+    return (
+      <FormField
+        label={label}
+        labelVariant={labelVariant}
+        helperText={helperText}
+        helperIcon={helperIcon}
+        validationStatus={validationStatus}
+        validText={validText}
+        invalidText={invalidText}
+        disabled={disabled}
+        readonly={readonly}
+        style={[styles.root, style]}
+        {...props}
+      >
+        <View style={styles.slotsContainer}>
+          {slots.map(index => {
+            const char = displayValue[index] || '';
+            const isActive = focusedIndex === index;
 
-          return (
-            <VerificationInputSlot
-              key={index}
-              ref={ref => {
-                inputRefs.current[index] = ref;
-              }}
-              value={char}
-              isActive={isActive}
-              validationStatus={validationStatus}
-              disabled={disabled}
-              readonly={readonly}
-              secureTextEntry={secureTextEntry}
-              onChangeText={text => handleChangeText(text, index)}
-              onKeyPress={e => handleKeyPress(e, index)}
-              onFocus={() => handleFocus(index)}
-              onBlur={handleBlur}
-            />
-          );
-        })}
-      </View>
-    </FormField>
-  );
-};
+            return (
+              <VerificationInputSlot
+                key={index}
+                ref={inputRef => {
+                  inputRefs.current[index] = inputRef;
+                }}
+                autoFocus={index === 0 && autoFocus}
+                value={char}
+                isActive={isActive}
+                validationStatus={validationStatus}
+                disabled={disabled}
+                readonly={readonly}
+                secureTextEntry={secureTextEntry}
+                onChangeText={text => handleChangeText(text, index)}
+                onKeyPress={e => handleKeyPress(e, index)}
+                onFocus={() => handleFocus(index)}
+                onBlur={handleBlur}
+              />
+            );
+          })}
+        </View>
+      </FormField>
+    );
+  }
+);
 
 const styles = StyleSheet.create(theme => ({
   root: {

package/src/components/VerificationInput/index.ts

@@ -1,5 +1,7 @@
 import VerificationInput from './VerificationInput';
 export { default as VerificationInput } from './VerificationInput';
-export type { default as VerificationInputProps } from './VerificationInput.props';
+export type {
+  VerificationInputHandle,
+  default as VerificationInputProps,
+} from './VerificationInput.props';
 export default VerificationInput;
-

package/src/components/VerificationInput/useVerificationInput.ts

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
 
 interface UseVerificationInputProps {
@@ -9,8 +9,17 @@ interface UseVerificationInputProps {
 export const useVerificationInput = ({ value, onChangeText }: UseVerificationInputProps) => {
   const length = 6;
   const inputRefs = useRef<(TextInput | null)[]>([]);
+  const latestValueRef = useRef(value);
+  const [displayValue, setDisplayValue] = useState(value);
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
 
+  useEffect(() => {
+    if (value !== latestValueRef.current) {
+      latestValueRef.current = value;
+      setDisplayValue(value);
+    }
+  }, [value]);
+
   const handleFocus = (index: number) => {
     setFocusedIndex(index);
   };
@@ -19,11 +28,17 @@ export const useVerificationInput = ({ value, onChangeText }: UseVerificationInp
     setFocusedIndex(null);
   };
 
+  const updateValue = (nextValue: string) => {
+    latestValueRef.current = nextValue;
+    setDisplayValue(nextValue);
+    onChangeText?.(nextValue);
+  };
+
   const handleChangeText = (text: string, index: number) => {
-    // Break down the text into an array of characters
+    const currentValue = latestValueRef.current;
     const chars = Array(length).fill('');
-    for (let i = 0; i < value.length && i < length; i++) {
-      chars[i] = value[i];
+    for (let i = 0; i < currentValue.length && i < length; i++) {
+      chars[i] = currentValue[i];
     }
 
     if (text.length > 1) {
@@ -41,28 +56,29 @@ export const useVerificationInput = ({ value, onChangeText }: UseVerificationInp
         inputRefs.current[index + 1]?.focus();
       }
     }
-
-    onChangeText?.(chars.join(''));
+    updateValue(chars.join(''));
   };
 
   const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => {
     if (e.nativeEvent.key === 'Backspace') {
-      if (!value[index] && index > 0) {
+      const currentValue = latestValueRef.current;
+      if (!currentValue[index] && index > 0) {
         e.preventDefault();
         inputRefs.current[index - 1]?.focus();
 
         const chars = Array(length).fill('');
-        for (let i = 0; i < value.length && i < length; i++) {
-          chars[i] = value[i];
+        for (let i = 0; i < currentValue.length && i < length; i++) {
+          chars[i] = currentValue[i];
         }
         chars[index - 1] = '';
-        onChangeText?.(chars.join(''));
+        updateValue(chars.join(''));
       }
     }
   };
 
   return {
     inputRefs,
+    displayValue,
     focusedIndex,
     handleFocus,
     handleBlur,

package/src/core/themes.ts

@@ -205,7 +205,7 @@ const shared = {
           },
         },
       },
-      space: {
+      spacing: {
         none: {
           gap: {
             base: layout.mobile.spacing.none,

package/src/types/values.ts

@@ -81,4 +81,4 @@ export type BordeWidthValue =
 
 export type OpacityValue = AnimatableNumericValue | undefined;
 
-export type SpacingValues = keyof (typeof themes)['light']['globalStyle']['variants']['space'];
+export type SpacingValues = keyof (typeof themes)['light']['globalStyle']['variants']['spacing'];