@hero-design/rn 8.57.0 → 8.57.1

package/src/components/Calendar/__tests__/index.spec.tsx

@@ -114,9 +114,9 @@ describe('Calendar', () => {
     platform
     ${'ios'}
     ${'android'}
-  `('renders correct picker on $platform', ({ platform }) => {
+  `('renders correct picker on $platform', ({ platform: mockedPlatform }) => {
     jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: platform,
+      OS: mockedPlatform,
       select: () => null,
     }));
 
@@ -133,7 +133,7 @@ describe('Calendar', () => {
     fireEvent.press(getByTestId('calendar-month-picker'));
 
     // Pickers are mocked at packages/rn/testUtils/setup.tsx
-    if (platform === 'ios') {
+    if (mockedPlatform === 'ios') {
       expect(queryByText('IOS picker')).toBeDefined();
     } else {
       expect(queryByText('Android picker')).toBeDefined();
@@ -146,9 +146,9 @@ describe('Calendar', () => {
     ${'android'}
   `(
     'onToggleMonthPicker is called when toggling month year picker on $platform',
-    ({ platform }) => {
+    ({ platform: mockedPlatform }) => {
       jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-        OS: platform,
+        OS: mockedPlatform,
         select: () => null,
       }));
 

package/src/components/Carousel/CardCarousel.tsx

@@ -67,6 +67,10 @@ export interface CardCarouselProps {
   onLayout?: (event: LayoutChangeEvent) => void;
 }
 
+export const getCardCarouselValidIndex = (index: number, length: number) => {
+  return Math.min(Math.max(index, 0), length - 1);
+};
+
 export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
   (
     {
@@ -92,13 +96,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
     const snapToIndex = useCallback(
       (index: number) => {
-        let validIndex = 0;
-
-        if (index >= items.length) {
-          validIndex = items.length - 1;
-        } else if (index >= 0) {
-          validIndex = index;
-        }
+        const validIndex = getCardCarouselValidIndex(index, items.length);
 
         carouselRef.current?.scrollToIndex({
           index: validIndex,
@@ -106,7 +104,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
           viewPosition,
         });
       },
-      [carouselRef, itemWidth]
+      [items.length, viewPosition]
     );
 
     /*
@@ -122,7 +120,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
         animated: true,
         viewPosition,
       });
-    }, [carouselRef, currentIndex, itemWidth, items.length]);
+    }, [currentIndex, items.length, viewPosition]);
 
     React.useImperativeHandle(
       ref,

package/src/components/Carousel/__tests__/index.spec.tsx

@@ -7,6 +7,7 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Button from '../../Button/Button';
 import HeroDesignProvider from '../../HeroDesignProvider';
 import Image from '../../Image';
+import { getCardCarouselValidIndex } from '../CardCarousel';
 
 const carouselData = [
   {
@@ -180,3 +181,16 @@ describe('Carousel', () => {
     expect(queryByTestId('page-control-indicator1')).toBeFalsy();
   });
 });
+
+// write test for getCardCarouselValidIndex
+describe('getCardCarouselValidIndex', () => {
+  it('should return 0 when index is less than 0', () => {
+    expect(getCardCarouselValidIndex(-1, 3)).toBe(0);
+  });
+  it('should return 2 when index is equal to 2', () => {
+    expect(getCardCarouselValidIndex(2, 3)).toBe(2);
+  });
+  it('should return 2 when index is greater than 2', () => {
+    expect(getCardCarouselValidIndex(3, 3)).toBe(2);
+  });
+});

package/src/components/DatePicker/__tests__/DatePickerCalendar.spec.tsx

@@ -63,38 +63,41 @@ describe('DatePickerCalendar', () => {
     platform
     ${'ios'}
     ${'android'}
-  `('renders month year picker when pressing on title', ({ platform }) => {
-    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: platform,
-      select: () => null,
-    }));
+  `(
+    'renders month year picker when pressing on title',
+    ({ platform: mockedPlatform }) => {
+      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+        OS: mockedPlatform,
+        select: () => null,
+      }));
 
-    const { queryByText, getByText, getByTestId } = renderWithTheme(
-      <DatePickerCalendar
-        value={new Date('December 21, 1995')}
-        label="Start date"
-        confirmLabel="Confirm"
-        helpText="This is help text"
-        onChange={jest.fn()}
-      />
-    );
+      const { queryByText, getByText, getByTestId } = renderWithTheme(
+        <DatePickerCalendar
+          value={new Date('December 21, 1995')}
+          label="Start date"
+          confirmLabel="Confirm"
+          helpText="This is help text"
+          onChange={jest.fn()}
+        />
+      );
 
-    fireEvent.press(getByText('Start date'));
-    fireEvent.press(getByText('December 1995'));
+      fireEvent.press(getByText('Start date'));
+      fireEvent.press(getByText('December 1995'));
 
-    if (platform === 'ios') {
-      expect(queryByText('IOS picker')).toBeDefined();
-    } else {
-      expect(queryByText('Android picker')).toBeDefined();
-    }
+      if (mockedPlatform === 'ios') {
+        expect(queryByText('IOS picker')).toBeDefined();
+      } else {
+        expect(queryByText('Android picker')).toBeDefined();
+      }
 
-    // Selecting month
-    fireEvent(
-      getByTestId('calendar'),
-      'onMonthChange',
-      new Date('January 17, 1993')
-    );
+      // Selecting month
+      fireEvent(
+        getByTestId('calendar'),
+        'onMonthChange',
+        new Date('January 17, 1993')
+      );
 
-    expect(queryByText('January 1993')).toBeDefined();
-  });
+      expect(queryByText('January 1993')).toBeDefined();
+    }
+  );
 });

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -4,7 +4,15 @@ import { TextInput as RNTextInput } from 'react-native';
 import { theme } from '../../..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Icon from '../../Icon';
-import TextInput, { getState, TextInputHandles } from '../index';
+import TextInput, {
+  getState,
+  renderErrorOrHelpText,
+  renderInput,
+  renderMaxLengthMessage,
+  renderPrefix,
+  renderSuffix,
+  TextInputHandles,
+} from '../index';
 
 describe('getState', () => {
   it.each`
@@ -496,3 +504,142 @@ describe('TextInput', () => {
     });
   });
 });
+
+describe('renderErrorOrHelpText', () => {
+  it('renders correctly with error', () => {
+    const { queryAllByText } = renderWithTheme(
+      <>
+        {renderErrorOrHelpText({
+          error: 'This is error',
+          helpText: 'This is help text',
+        })}
+      </>
+    );
+
+    expect(queryAllByText('This is error')).toHaveLength(1);
+    expect(queryAllByText('This is help text')).toHaveLength(0);
+  });
+
+  it('renders correctly with help text', () => {
+    const { queryAllByText } = renderWithTheme(
+      <>
+        {renderErrorOrHelpText({
+          error: '',
+          helpText: 'This is help text',
+        })}
+      </>
+    );
+
+    expect(queryAllByText('This is help text')).toHaveLength(1);
+  });
+});
+
+describe('renderInput', () => {
+  it('renders correctly with renderInputValue', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderInput({
+          variant: 'textarea',
+          nativeInputProps: {},
+          renderInputValue: (props) => {
+            return (
+              <RNTextInput
+                {...props}
+                value="customised text"
+                testID="custom-text-input"
+              />
+            );
+          },
+        })}
+      </>
+    );
+
+    expect(wrapper.queryAllByTestId('custom-text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('customised text')).toHaveLength(1);
+  });
+
+  it('renders correctly without renderInputValue', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderInput({
+          variant: 'textarea',
+          nativeInputProps: {
+            testID: 'text-input',
+            value: 'text input value',
+          },
+        })}
+      </>
+    );
+
+    expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('text input value')).toHaveLength(1);
+  });
+});
+describe('renderSuffix', () => {
+  it('renders loading icon with loading', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderSuffix({
+          loading: true,
+          suffix: 'dollar-sign',
+          state: 'default',
+        })}
+      </>
+    );
+
+    expect(wrapper.getByTestId('input-suffix')).toHaveProp('name', 'loading');
+  });
+
+  it('renders suffix icon', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderSuffix({
+          loading: false,
+          suffix: 'dollar-sign',
+          state: 'default',
+        })}
+      </>
+    );
+
+    // verify element has prop name = icon
+    expect(wrapper.getByTestId('input-suffix')).toHaveProp(
+      'name',
+      'dollar-sign'
+    );
+  });
+});
+
+describe('renderPrefix', () => {
+  it('renders prefix icon', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderPrefix({
+          prefix: 'dollar-sign',
+          state: 'default',
+        })}
+      </>
+    );
+
+    expect(wrapper.getByTestId('input-prefix')).toHaveProp(
+      'name',
+      'dollar-sign'
+    );
+  });
+});
+
+describe('renderMaxLengthMessage', () => {
+  it('renders correctly with maxLength', () => {
+    const { queryAllByText } = renderWithTheme(
+      <>
+        {renderMaxLengthMessage({
+          maxLength: 10,
+          state: 'default',
+          currentLength: 5,
+          hideCharacterCount: false,
+        })}
+      </>
+    );
+
+    expect(queryAllByText('5/10')).toHaveLength(1);
+  });
+});

package/src/components/TextInput/index.tsx

@@ -46,6 +46,8 @@ export type TextInputHandles = Pick<
   'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
 >;
 
+export type TextInputVariant = 'text' | 'textarea';
+
 export interface TextInputProps extends NativeTextInputProps {
   /**
    * Field label.
@@ -123,7 +125,7 @@ export interface TextInputProps extends NativeTextInputProps {
   /**
    * Component variant.
    */
-  variant?: 'text' | 'textarea';
+  variant?: TextInputVariant;
 }
 
 export const getState = ({
@@ -161,6 +163,120 @@ const EMPTY_PLACEHOLDER_VALUE = ' ';
 
 export const LABEL_ANIMATION_DURATION = 150;
 
+export const renderErrorOrHelpText = ({
+  error,
+  helpText,
+}: {
+  error?: string;
+  helpText?: string;
+}) => {
+  return error ? (
+    <StyledErrorContainer>
+      <Icon
+        testID="input-error-icon"
+        icon="circle-info"
+        size="xsmall"
+        intent="danger"
+      />
+
+      <StyledError testID="input-error-message">{error}</StyledError>
+    </StyledErrorContainer>
+  ) : (
+    !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
+  );
+};
+
+export const renderInput = ({
+  variant,
+  nativeInputProps,
+  renderInputValue,
+  ref,
+}: {
+  variant: TextInputVariant;
+  nativeInputProps: NativeTextInputProps;
+  multiline?: boolean;
+  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  ref?: React.Ref<RNTextInput>;
+}) => {
+  return renderInputValue ? (
+    renderInputValue(nativeInputProps)
+  ) : (
+    <StyledTextInput
+      {...nativeInputProps}
+      themeVariant={variant}
+      multiline={variant === 'textarea' || nativeInputProps.multiline}
+      ref={ref}
+    />
+  );
+};
+
+export const renderSuffix = ({
+  state,
+  loading,
+  suffix,
+}: {
+  state: State;
+  loading: boolean;
+  suffix?: IconName | React.ReactElement;
+}) => {
+  const actualSuffix = loading ? 'loading' : suffix;
+  return typeof actualSuffix === 'string' ? (
+    <Icon
+      intent={state === 'disabled' ? 'disabled-text' : 'text'}
+      testID="input-suffix"
+      icon={actualSuffix}
+      spin={actualSuffix === 'loading'}
+      size="medium"
+    />
+  ) : (
+    suffix
+  );
+};
+
+export const renderPrefix = ({
+  state,
+  prefix,
+}: {
+  state: State;
+  prefix?: IconName | React.ReactElement;
+}) => {
+  return typeof prefix === 'string' ? (
+    <Icon
+      intent={state === 'disabled' ? 'disabled-text' : 'text'}
+      testID="input-prefix"
+      icon={prefix}
+      size="xsmall"
+    />
+  ) : (
+    prefix
+  );
+};
+
+export const renderMaxLengthMessage = ({
+  maxLength,
+  state,
+  currentLength,
+  hideCharacterCount,
+}: {
+  state: State;
+  currentLength: number;
+  maxLength?: number;
+  hideCharacterCount: boolean;
+}) => {
+  const shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
+  return (
+    shouldShowMaxLength && (
+      <StyledMaxLengthMessage themeState={state}>
+        {currentLength}/{maxLength}
+      </StyledMaxLengthMessage>
+    )
+  );
+};
+
+export const getDisplayText = (value?: string, defaultValue?: string) => {
+  return (value !== undefined ? value : defaultValue) ?? '';
+};
+
 const TextInput = forwardRef<TextInputHandles, TextInputProps>(
   (
     {
@@ -188,9 +304,8 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
     }: TextInputProps,
     ref?: React.Ref<TextInputHandles>
   ) => {
-    const displayText = (value !== undefined ? value : defaultValue) ?? '';
+    const displayText = getDisplayText(value, defaultValue);
     const isEmptyValue = displayText.length === 0;
-    const actualSuffix = loading ? 'loading' : suffix;
 
     const [inputSize, setInputSize] = React.useState<{
       height: number;
@@ -210,8 +325,6 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       isEmptyValue,
     });
 
-    const shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
-
     const theme = useTheme();
 
     const focusAnimation = useRef(new Animated.Value(0)).current;
@@ -346,16 +459,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           />
 
           <View onLayout={onPrefixLayout}>
-            {typeof prefix === 'string' ? (
-              <Icon
-                intent={state === 'disabled' ? 'disabled-text' : 'text'}
-                testID="input-prefix"
-                icon={prefix}
-                size="xsmall"
-              />
-            ) : (
-              prefix
-            )}
+            {renderPrefix({ state, prefix })}
           </View>
           <StyledLabelContainerInsideTextInput
             themeVariant={variant}
@@ -424,52 +528,26 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           </StyledLabelContainerInsideTextInput>
 
           <StyledTextInputAndLabelContainer>
-            {renderInputValue ? (
-              renderInputValue(nativeInputProps)
-            ) : (
-              <StyledTextInput
-                {...nativeInputProps}
-                themeVariant={variant}
-                multiline={variant === 'textarea' || nativeProps.multiline}
-                ref={(reference) => {
-                  innerTextInput.current = reference;
-                }}
-              />
-            )}
+            {renderInput({
+              variant,
+              nativeInputProps,
+              renderInputValue,
+              ref: (rnTextInputRef) => {
+                innerTextInput.current = rnTextInputRef;
+              },
+            })}
           </StyledTextInputAndLabelContainer>
-          {typeof actualSuffix === 'string' ? (
-            <Icon
-              intent={state === 'disabled' ? 'disabled-text' : 'text'}
-              testID="input-suffix"
-              icon={actualSuffix}
-              spin={actualSuffix === 'loading'}
-              size="medium"
-            />
-          ) : (
-            suffix
-          )}
+          {renderSuffix({ state, loading, suffix })}
         </StyledTextInputContainer>
         <StyledErrorAndHelpTextContainer>
           <StyledErrorAndMaxLengthContainer>
-            {error ? (
-              <StyledErrorContainer>
-                <Icon
-                  testID="input-error-icon"
-                  icon="circle-info"
-                  size="xsmall"
-                  intent="danger"
-                />
-
-                <StyledError testID="input-error-message">{error}</StyledError>
-              </StyledErrorContainer>
-            ) : (
-              !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
-            )}
-            {shouldShowMaxLength && (
-              <StyledMaxLengthMessage themeState={state}>
-                {displayText.length}/{maxLength}
-              </StyledMaxLengthMessage>
-            )}
+            {renderErrorOrHelpText({ error, helpText })}
+            {renderMaxLengthMessage({
+              state,
+              currentLength: displayText.length,
+              maxLength,
+              hideCharacterCount,
+            })}
           </StyledErrorAndMaxLengthContainer>
         </StyledErrorAndHelpTextContainer>
       </StyledContainer>

package/src/components/Toast/ToastContext.ts

@@ -7,8 +7,18 @@ export type ToastControllerContextType = {
   clearAll: () => void;
 };
 
+export const fallbackToastControlContext: ToastControllerContextType = {
+  show: (_: Omit<ToastProps, 'position'>) => '',
+  hide: (_: string) => {
+    // Fallback empty function
+  },
+  clearAll: () => {
+    // Fallback empty function
+  },
+};
+
 export const ToastContext = createContext<ToastControllerContextType>(
-  {} as ToastControllerContextType
+  fallbackToastControlContext
 );
 
 export type ToastConfigContextType = Pick<
@@ -22,4 +32,12 @@ export const ToastConfigContext = createContext<ToastConfigContextType>(
 
 export const useToastConfig = () => useContext(ToastConfigContext);
 
-export const useToast = () => useContext(ToastContext);
+export const useToast = () => {
+  const context = useContext<ToastControllerContextType>(ToastContext);
+  if (!context) {
+    // eslint-disable-next-line no-console
+    console.warn('Toast was used without ToastProvider');
+    return fallbackToastControlContext;
+  }
+  return context;
+};

package/src/components/Toast/ToastProvider.tsx

@@ -3,7 +3,11 @@ import { View } from 'react-native';
 
 import type { ReactNode } from 'react';
 import ToastContainer from './ToastContainer';
-import { ToastConfigContext, ToastContext } from './ToastContext';
+import {
+  ToastConfigContext,
+  ToastContext,
+  fallbackToastControlContext,
+} from './ToastContext';
 import type { ToastControllerContextType } from './ToastContext';
 import type { ToastContainerProps } from './types';
 import { useDeprecation } from '../../utils/hooks';
@@ -29,8 +33,7 @@ const ToastProvider = ({
   );
 
   const toastRef = useRef<ToastControllerContextType>(null);
-  // @ts-expect-error: TODO: @tungv Fix this type error
-  const [refState, setRefState] = useState<ToastControllerContextType>(null);
+  const [refState, setRefState] = useState<ToastControllerContextType>();
 
   useEffect(() => {
     if (toastRef.current) {
@@ -44,7 +47,7 @@ const ToastProvider = ({
   );
 
   return (
-    <ToastContext.Provider value={refState}>
+    <ToastContext.Provider value={refState || fallbackToastControlContext}>
       <View style={{ flex: 1 }}>
         {refState ? children : null}
         <ToastConfigContext.Provider value={config}>

package/types/components/Carousel/CardCarousel.d.ts

@@ -38,4 +38,5 @@ export interface CardCarouselProps {
     ref?: React.Ref<CardCarouselHandles>;
     onLayout?: (event: LayoutChangeEvent) => void;
 }
+export declare const getCardCarouselValidIndex: (index: number, length: number) => number;
 export declare const CardCarousel: React.ForwardRefExoticComponent<Omit<CardCarouselProps, "ref"> & React.RefAttributes<CardCarouselHandles>>;