@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

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

@@ -0,0 +1,140 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import React, { useState } from 'react';
+import { VerificationInput } from '.';
+import { VariantTitle } from '../../../docs/components';
+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' },
+  },
+  args: {
+    label: 'Verification Code',
+    validationStatus: 'initial',
+  },
+} 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" space="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>
+    );
+  },
+};

package/src/components/VerificationInput/VerificationInput.tsx

@@ -0,0 +1,89 @@
+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 { VerificationInputSlot } from './VerificationInputSlot';
+
+const VerificationInput = ({
+  value = '',
+  onChangeText,
+  label,
+  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({
+      value,
+      onChangeText,
+    });
+
+  const slots = Array.from({ length }, (_, index) => index);
+
+  return (
+    <FormField
+      label={label}
+      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 (
+            <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>
+  );
+};
+
+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%',
+  },
+}));
+
+VerificationInput.displayName = 'VerificationInput';
+
+export default VerificationInput;

package/src/components/VerificationInput/VerificationInputSlot.tsx

@@ -0,0 +1,94 @@
+import { forwardRef } from 'react';
+import { TextInput, TextInputProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import InputField from '../Input/InputField';
+
+interface VerificationInputSlotProps extends TextInputProps {
+  isActive: boolean;
+  validationStatus: 'initial' | 'valid' | 'invalid';
+  disabled?: boolean;
+  readonly?: boolean;
+}
+
+export const VerificationInputSlot = forwardRef<TextInput, VerificationInputSlotProps>(
+  ({ isActive, validationStatus, disabled, readonly, style, ...props }, ref) => {
+    styles.useVariants({
+      disabled,
+      readonly,
+      validationStatus,
+      active: isActive,
+    });
+
+    return (
+      <InputField
+        ref={ref}
+        {...props}
+        editable={!disabled && !readonly}
+        selectTextOnFocus
+        keyboardType="number-pad"
+        style={[styles.slot, style]}
+      />
+    );
+  }
+);
+
+VerificationInputSlot.displayName = 'VerificationInputSlot';
+
+const styles = StyleSheet.create(theme => ({
+  slot: {
+    flex: 0,
+    width: theme.components.input.height,
+    height: theme.components.input.height,
+    borderWidth: theme.components.input.borderWidth,
+    borderColor: theme.color.border.strong,
+    borderRadius: theme.components.input.borderRadius,
+    backgroundColor: theme.color.surface.neutral.strong,
+    textAlign: 'center',
+    padding: 0,
+    variants: {
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+          color: theme.color.text.secondary,
+        },
+      },
+      readonly: {
+        true: {
+          borderColor: theme.color.border.subtle,
+          backgroundColor: theme.color.surface.neutral.subtle,
+        },
+      },
+      validationStatus: {
+        initial: {},
+        valid: {
+          borderColor: theme.color.feedback.positive.border,
+        },
+        invalid: {
+          borderColor: theme.color.feedback.danger.border,
+        },
+      },
+      active: {
+        true: {
+          borderColor: theme.color.border.strong,
+          borderWidth: theme.components.input.borderWidthFocused,
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        validationStatus: 'invalid',
+        active: true,
+        styles: {
+          borderColor: theme.color.feedback.danger.border,
+        },
+      },
+      {
+        validationStatus: 'valid',
+        active: true,
+        styles: {
+          borderColor: theme.color.border.strong,
+        },
+      },
+    ],
+  },
+}));

package/src/components/VerificationInput/index.ts

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

package/src/components/VerificationInput/useVerificationInput.ts

@@ -0,0 +1,72 @@
+import { useRef, useState } from 'react';
+import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
+
+interface UseVerificationInputProps {
+  value: string;
+  onChangeText?: (text: string) => void;
+}
+
+export const useVerificationInput = ({ value, onChangeText }: UseVerificationInputProps) => {
+  const length = 6;
+  const inputRefs = useRef<(TextInput | null)[]>([]);
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+  const handleFocus = (index: number) => {
+    setFocusedIndex(index);
+  };
+
+  const handleBlur = () => {
+    setFocusedIndex(null);
+  };
+
+  const handleChangeText = (text: string, index: number) => {
+    // Break down the text into an array of characters
+    const chars = Array(length).fill('');
+    for (let i = 0; i < value.length && i < length; i++) {
+      chars[i] = value[i];
+    }
+
+    if (text.length > 1) {
+      // Handle paste
+      const pastedChars = text.slice(0, length - index).split('');
+      for (let i = 0; i < pastedChars.length; i++) {
+        chars[index + i] = pastedChars[i];
+      }
+      const nextIndex = Math.min(index + pastedChars.length, length - 1);
+      inputRefs.current[nextIndex]?.focus();
+    } else {
+      // Handle single char input
+      chars[index] = text;
+      if (text.length === 1 && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    }
+
+    onChangeText?.(chars.join(''));
+  };
+
+  const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => {
+    if (e.nativeEvent.key === 'Backspace') {
+      if (!value[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];
+        }
+        chars[index - 1] = '';
+        onChangeText?.(chars.join(''));
+      }
+    }
+  };
+
+  return {
+    inputRefs,
+    focusedIndex,
+    handleFocus,
+    handleBlur,
+    handleChangeText,
+    handleKeyPress,
+  };
+};

package/src/components/index.ts

@@ -54,6 +54,7 @@ export * from './Textarea';
 export * from './ThemedImage';
 export * from './Toast';
 export * from './ToggleButtonCard';
+export * from './VerificationInput';
 
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 

package/src/utils/index.ts

@@ -1,9 +1,10 @@
 export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
 export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
+export { getInitials } from './getInitials';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
-export { getInitials } from './getInitials';
 export { default as isEqual } from './isEqual';
+export { default as isThemedImageProps } from './isThemedImageProps';
 export * from './styleUtils';
 export * from './themeValueHelpers';

package/src/utils/isThemedImageProps.ts

@@ -0,0 +1,8 @@
+import { ImageProps } from 'react-native';
+import { ThemedImageProps } from 'src/components';
+
+const isThemedImageProps = (props: ThemedImageProps | ImageProps): props is ThemedImageProps => {
+  return 'light' in props && 'dark' in props;
+};
+
+export default isThemedImageProps;

package/src/components/Checkbox/CheckboxIndicator.figma.tsx

@@ -1,19 +0,0 @@
-import { Checkbox } from './';
-import figma from '@figma/code-connect';
-
-const value = 'some-value';
-const setValue = (isChecked: boolean) => console.log(isChecked);
-
-figma.connect(
-  Checkbox,
-  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4454-3759&m=dev',
-  {
-    props: {
-      checked: figma.boolean('checked'),
-      disabled: figma.boolean('disabled'),
-    },
-    example: ({ disabled, checked }) => (
-      <Checkbox value={value} onChange={setValue} disabled={disabled} checked={checked} />
-    ),
-  }
-);

package/src/components/Radio/RadioIndicator.figma.tsx

@@ -1,21 +0,0 @@
-import { Radio, RadioGroup } from './';
-import figma from '@figma/code-connect';
-
-const value = 'some-value';
-const setValue = (value: string) => console.log(value);
-
-figma.connect(
-  Radio,
-  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4461-7535&m=dev',
-  {
-    props: {
-      checked: figma.boolean('checked', { true: 'some-value', false: undefined }),
-      disabled: figma.boolean('disabled'),
-    },
-    example: ({ disabled, checked }) => (
-      <RadioGroup value={checked} onChange={setValue}>
-        <Radio value={value} disabled={disabled} />
-      </RadioGroup>
-    ),
-  }
-);