@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

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

@@ -1,249 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useRef, useState } from 'react';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
-import { VerificationInput, type VerificationInputHandle } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { BodyText } from '../BodyText';
-import { Button } from '../Button';
-import { Flex } from '../Flex';
-
-const meta = {
-  title: 'Stories / VerificationInput',
-  component: VerificationInput,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    value: { control: 'text' },
-    label: { control: 'text' },
-    helperText: { control: 'text' },
-    validationStatus: {
-      control: 'select',
-      options: ['initial', 'valid', 'invalid'],
-    },
-    validText: { control: 'text' },
-    invalidText: { control: 'text' },
-    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>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: args => {
-    const [value, setValue] = useState(args.value || '');
-    return (
-      <VerificationInput
-        {...args}
-        value={value}
-        onChangeText={text => {
-          setValue(text);
-          args.onChangeText?.(text);
-        }}
-      />
-    );
-  },
-};
-
-export const Variants: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => {
-    const [values, setValues] = useState({
-      default: '',
-      filled: '123456',
-      invalid: '123',
-      valid: '123456',
-      disabled: '',
-      secure: '123',
-    });
-
-    const updateValue = (key: keyof typeof values) => (text: string) => {
-      setValues(prev => ({ ...prev, [key]: text }));
-    };
-
-    return (
-      <Flex direction="column" spacing="lg" style={{ width: 400 }}>
-        <VariantTitle title="Default">
-          <VerificationInput
-            label="Verification Code"
-            helperText="Enter the code sent to your phone"
-            value={values.default}
-            onChangeText={updateValue('default')}
-          />
-        </VariantTitle>
-
-        <VariantTitle title="Filled">
-          <VerificationInput
-            label="Filled Input"
-            value={values.filled}
-            onChangeText={updateValue('filled')}
-          />
-        </VariantTitle>
-
-        <VariantTitle title="Invalid">
-          <VerificationInput
-            label="Invalid Input"
-            validationStatus="invalid"
-            invalidText="The code you entered is incorrect"
-            value={values.invalid}
-            onChangeText={updateValue('invalid')}
-          />
-        </VariantTitle>
-
-        <VariantTitle title="Valid">
-          <VerificationInput
-            label="Valid Input"
-            validationStatus="valid"
-            validText="Code verified!"
-            value={values.valid}
-            onChangeText={updateValue('valid')}
-          />
-        </VariantTitle>
-
-        <VariantTitle title="Disabled">
-          <VerificationInput
-            label="Disabled Input"
-            disabled
-            value={values.disabled}
-            onChangeText={updateValue('disabled')}
-          />
-        </VariantTitle>
-
-        <VariantTitle title="Secure Text Entry">
-          <VerificationInput
-            label="Secure Input"
-            secureTextEntry
-            value={values.secure}
-            onChangeText={updateValue('secure')}
-          />
-        </VariantTitle>
-
-        <VariantTitle title="With Helper Icon">
-          <VerificationInput
-            label="Helper Icon"
-            helperText="Some information"
-            helperIcon={InfoMediumIcon}
-            value={values.default}
-            onChangeText={updateValue('default')}
-          />
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};
-
-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>
-    );
-  },
-};
-
-export const FocusProgressionAfterEmptySlotSelection: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => {
-    const [value, setValue] = useState('12');
-
-    return (
-      <Flex direction="column" spacing="sm" style={{ width: 400 }}>
-        <VerificationInput label="Verification Code" value={value} onChangeText={setValue} />
-      </Flex>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText('Verification Code') as HTMLInputElement;
-
-    input.focus();
-
-    input.setSelectionRange(4, 4);
-    input.dispatchEvent(new Event('select', { bubbles: true }));
-
-    await userEvent.keyboard('3');
-
-    await waitFor(() => {
-      expect(input.value).toBe('123');
-      expect(input.selectionStart).toBe(3);
-      expect(input.selectionEnd).toBe(3);
-    });
-  },
-};

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,290 +0,0 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { TextInput, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { useFormFieldAccessibility } from '../../hooks';
-import { FormField } from '../FormField';
-import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
-import { getNextIndexFromValueChange } from './VerificationInput.utils';
-import { VerificationInputSlot } from './VerificationInputSlot';
-
-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,
-      testID,
-      ...props
-    },
-    ref
-  ) => {
-    const length = 6;
-    const inputRef = useRef<TextInput>(null);
-    const latestValueRef = useRef(value);
-    const [displayValue, setDisplayValue] = useState(value);
-    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
-    const [selection, setSelection] = useState({ start: 0, end: 0 });
-    const latestSelectionRef = useRef(selection);
-    const ignoreNextSelectionRef = useRef(false);
-    const pendingFocusIndexRef = useRef<number | null>(null);
-
-    useEffect(() => {
-      if (value !== latestValueRef.current) {
-        const trimmedValue = value.slice(0, length);
-        latestValueRef.current = trimmedValue;
-        setDisplayValue(trimmedValue);
-        const nextPos = Math.min(trimmedValue.length, length);
-        const nextSelection = { start: nextPos, end: nextPos };
-        ignoreNextSelectionRef.current = true;
-        latestSelectionRef.current = nextSelection;
-        setSelection(nextSelection);
-      }
-    }, [length, value]);
-
-    const updateValue = useCallback(
-      (nextValue: string) => {
-        const trimmedValue = nextValue.slice(0, length);
-        latestValueRef.current = trimmedValue;
-        setDisplayValue(trimmedValue);
-        onChangeText?.(trimmedValue);
-      },
-      [length, onChangeText]
-    );
-
-    const setSelectionIndex = (index: number) => {
-      const clampedIndex = Math.max(0, Math.min(index, length));
-      const hasChar = !!latestValueRef.current[clampedIndex];
-      const endIndex = hasChar ? Math.min(clampedIndex + 1, length) : clampedIndex;
-      const nextSelection = { start: clampedIndex, end: endIndex };
-      ignoreNextSelectionRef.current = true;
-      latestSelectionRef.current = nextSelection;
-      setSelection(nextSelection);
-      setFocusedIndex(Math.min(clampedIndex, length - 1));
-    };
-
-    const setCaretIndex = (index: number) => {
-      const clampedIndex = Math.max(0, Math.min(index, length));
-      const nextSelection = { start: clampedIndex, end: clampedIndex };
-      ignoreNextSelectionRef.current = true;
-      latestSelectionRef.current = nextSelection;
-      setSelection(nextSelection);
-      setFocusedIndex(Math.min(clampedIndex, length - 1));
-    };
-
-    const handleChangeText = (text: string) => {
-      const prevValue = latestValueRef.current;
-      const nextValue = text.slice(0, length);
-      const prevLength = prevValue.length;
-      const nextLength = nextValue.length;
-      const diff = nextLength - prevLength;
-      const isBulkInsert = text.length > 1 && diff > 1;
-      const shouldBlur = nextLength >= length;
-      const nextIndex = getNextIndexFromValueChange({ prevValue, nextValue, length });
-      updateValue(nextValue);
-      if (isBulkInsert) {
-        setCaretIndex(Math.min(nextLength, length));
-        if (shouldBlur) {
-          inputRef.current?.blur();
-        }
-        return;
-      }
-      if (nextIndex >= length) {
-        setCaretIndex(nextIndex);
-        if (shouldBlur) {
-          inputRef.current?.blur();
-        }
-        return;
-      }
-
-      if (nextLength >= length) {
-        setSelectionIndex(nextIndex);
-        inputRef.current?.blur();
-        return;
-      }
-
-      const hasNextChar = !!nextValue[nextIndex];
-      if (hasNextChar) {
-        setSelectionIndex(nextIndex);
-      } else {
-        setCaretIndex(nextIndex);
-      }
-    };
-
-    const handleFocus = () => {
-      if (pendingFocusIndexRef.current !== null) {
-        setSelectionIndex(pendingFocusIndexRef.current);
-        pendingFocusIndexRef.current = null;
-        return;
-      }
-      setFocusedIndex(Math.min(selection.start, length - 1));
-    };
-
-    const handleBlur = () => {
-      setFocusedIndex(null);
-    };
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        focus: () => {
-          inputRef.current?.focus();
-          const nextIndex = Math.min(latestValueRef.current.length, length - 1);
-          if (latestValueRef.current.length >= length) {
-            setSelectionIndex(nextIndex);
-          } else {
-            setCaretIndex(nextIndex);
-          }
-        },
-        blur: () => inputRef.current?.blur(),
-        clear: () => {
-          updateValue('');
-          setSelectionIndex(0);
-          inputRef.current?.blur();
-          setFocusedIndex(null);
-        },
-        focusIndex: (index: number) => {
-          if (index >= 0 && index < length) {
-            inputRef.current?.focus();
-            setSelectionIndex(index);
-          }
-        },
-      }),
-      [length, updateValue]
-    );
-
-    const slots = Array.from({ length }, (_, index) => index);
-    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
-      label,
-      helperText,
-      validText,
-      invalidText,
-      validationStatus,
-      fallbackLabel: props.accessibilityLabel,
-      fallbackHint: props.accessibilityHint,
-      includeRequiredInLabel: false,
-    });
-
-    return (
-      <FormField
-        label={label}
-        labelVariant={labelVariant}
-        helperText={helperText}
-        helperIcon={helperIcon}
-        validationStatus={validationStatus}
-        validText={validText}
-        invalidText={invalidText}
-        disabled={disabled}
-        readonly={readonly}
-        accessibilityHandledByChildren
-        style={[styles.root, style]}
-        {...props}
-      >
-        <View style={styles.slotsContainer}>
-          <TextInput
-            ref={inputRef}
-            value={displayValue}
-            autoFocus={autoFocus}
-            editable={!disabled && !readonly}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityHint={accessibilityHint}
-            accessibilityState={{ disabled: disabled || readonly }}
-            importantForAccessibility="yes"
-            onChangeText={handleChangeText}
-            onSelectionChange={event => {
-              const nextSelection = event.nativeEvent.selection;
-              if (
-                ignoreNextSelectionRef.current &&
-                (nextSelection.start !== latestSelectionRef.current.start ||
-                  nextSelection.end !== latestSelectionRef.current.end)
-              ) {
-                return;
-              }
-              if (pendingFocusIndexRef.current !== null) {
-                return;
-              }
-              ignoreNextSelectionRef.current = false;
-              latestSelectionRef.current = nextSelection;
-              setSelection(nextSelection);
-              setFocusedIndex(Math.min(nextSelection.start, length - 1));
-            }}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            selection={selection}
-            keyboardType="number-pad"
-            textContentType="oneTimeCode"
-            autoComplete="sms-otp"
-            secureTextEntry={secureTextEntry}
-            maxLength={length}
-            caretHidden
-            style={styles.hiddenInput}
-            testID={testID}
-          />
-          {slots.map(index => {
-            const char = displayValue[index] || '';
-            const isActive = focusedIndex === index;
-            const displayChar = secureTextEntry && char ? '*' : char;
-
-            return (
-              <VerificationInputSlot
-                key={index}
-                value={displayChar}
-                isActive={isActive}
-                showCaret={isActive && !displayChar}
-                validationStatus={validationStatus}
-                disabled={disabled}
-                readonly={readonly}
-                secureTextEntry={secureTextEntry}
-                onPress={() => {
-                  pendingFocusIndexRef.current = index;
-                  inputRef.current?.focus();
-                  setSelectionIndex(index);
-                }}
-                testID={testID ? `${testID}-${index}` : undefined}
-              />
-            );
-          })}
-        </View>
-      </FormField>
-    );
-  }
-);
-
-const styles = StyleSheet.create(theme => ({
-  root: {
-    gap: theme.components.input.verification.gap,
-    width: '100%',
-    maxWidth: theme.components.input.maxWidth,
-  },
-  slotsContainer: {
-    flexDirection: 'row',
-    gap: theme.components.input.verification.gap,
-    width: '100%',
-    position: 'relative',
-  },
-  hiddenInput: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    pointerEvents: 'none',
-    left: 0,
-    top: 0,
-    color: 'transparent',
-    fontSize: 1,
-    opacity: 0.01,
-  },
-}));
-
-VerificationInput.displayName = 'VerificationInput';
-
-export default VerificationInput;

package/src/components/VerificationInput/VerificationInput.utils.test.ts

@@ -1,48 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { findDiffIndex, getNextIndexFromValueChange } from './VerificationInput.utils';
-
-describe('findDiffIndex', () => {
-  it('returns first differing index', () => {
-    expect(findDiffIndex('12', '19')).toBe(1);
-  });
-
-  it('returns previous length when next appends', () => {
-    expect(findDiffIndex('12', '123')).toBe(2);
-  });
-
-  it('returns next length when next shortens with same prefix', () => {
-    expect(findDiffIndex('123', '12')).toBe(2);
-  });
-});
-
-describe('getNextIndexFromValueChange', () => {
-  it('moves to the slot after the one that changed when inserting in an empty later slot', () => {
-    expect(
-      getNextIndexFromValueChange({
-        prevValue: '12',
-        nextValue: '123',
-        length: 6,
-      })
-    ).toBe(3);
-  });
-
-  it('caps at length when value becomes full', () => {
-    expect(
-      getNextIndexFromValueChange({
-        prevValue: '12345',
-        nextValue: '123456',
-        length: 6,
-      })
-    ).toBe(6);
-  });
-
-  it('stays at edited index for deletions', () => {
-    expect(
-      getNextIndexFromValueChange({
-        prevValue: '123',
-        nextValue: '12',
-        length: 6,
-      })
-    ).toBe(2);
-  });
-});

package/src/components/VerificationInput/VerificationInput.utils.ts

@@ -1,32 +0,0 @@
-interface GetNextIndexFromValueChangeOptions {
-  prevValue: string;
-  nextValue: string;
-  length: number;
-}
-
-export const findDiffIndex = (prevValue: string, nextValue: string): number => {
-  const minLength = Math.min(prevValue.length, nextValue.length);
-
-  for (let i = 0; i < minLength; i += 1) {
-    if (prevValue[i] !== nextValue[i]) {
-      return i;
-    }
-  }
-
-  return minLength;
-};
-
-export const getNextIndexFromValueChange = ({
-  prevValue,
-  nextValue,
-  length,
-}: GetNextIndexFromValueChangeOptions): number => {
-  const diff = nextValue.length - prevValue.length;
-  const editedIndex = findDiffIndex(prevValue, nextValue);
-
-  if (diff >= 0) {
-    return Math.min(editedIndex + 1, length);
-  }
-
-  return Math.max(editedIndex, 0);
-};