@hero-design/rn 8.56.1 → 8.57.1

package/src/components/Tabs/__tests__/useInitHighlightedAnimation.spec.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import Typography from '../../Typography';
+import useInitHighlightedAnimation from '../ScrollableTabsHeader/hooks/useInitHighlightedAnimation';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { theme } from '../../..';
+import HeroDesignProvider from '../../HeroDesignProvider';
+
+const TestComponent = ({
+  tabsLength,
+  variant,
+  selectedIndex,
+}: {
+  tabsLength: number;
+  variant: 'highlighted' | 'underlined';
+  selectedIndex?: number;
+}) => {
+  const { tabsAnims } = useInitHighlightedAnimation({
+    tabsLength,
+    variant,
+    selectedIndex,
+  });
+
+  return (
+    <Typography.Body>
+      {/* @ts-expect-error: _value is private */}
+      {tabsAnims.map((item) => item._value).toString()}
+    </Typography.Body>
+  );
+};
+
+describe('useCounter', () => {
+  test('should return correct anims array', () => {
+    const { getByText } = renderWithTheme(
+      <TestComponent tabsLength={3} variant="highlighted" selectedIndex={2} />
+    );
+
+    expect(getByText('0,0,1')).toBeDefined();
+  });
+
+  test('should not update anims array values if variant is not highlighted', () => {
+    const { getByText, rerender } = renderWithTheme(
+      <TestComponent tabsLength={3} variant="underlined" selectedIndex={2} />
+    );
+
+    expect(getByText('0,0,1')).toBeDefined();
+
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <TestComponent tabsLength={3} variant="underlined" selectedIndex={0} />
+      </HeroDesignProvider>
+    );
+
+    expect(getByText('0,0,1')).toBeDefined();
+  });
+});

package/src/components/Tabs/__tests__/useInitUnderlinedAnimation.spec.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import useInitUnderlinedAnimation from '../ScrollableTabsHeader/hooks/useInitUnderlinedAnimation';
+import HeroDesignProvider from '../../HeroDesignProvider';
+import { theme } from '../../..';
+
+const TestComponent = ({
+  tabsLength,
+  variant,
+  selectedIndex = 0,
+}: {
+  tabsLength: number;
+  variant: 'highlighted' | 'underlined';
+  selectedIndex?: number;
+}) => {
+  const { underlinedTranslateX, underlinedOpacity } =
+    useInitUnderlinedAnimation({
+      tabsLength,
+      variant,
+      selectedIndex,
+    });
+
+  return (
+    <>
+      <Typography.Body>
+        {/* @ts-expect-error: _value is private */}
+        {underlinedTranslateX.map((item) => item._parent._value).toString()}
+      </Typography.Body>
+
+      <Typography.Body>
+        {/* @ts-expect-error: _value is private */}
+        {underlinedOpacity.map((item) => item._parent._value).toString()}
+      </Typography.Body>
+    </>
+  );
+};
+
+describe('useCounter', () => {
+  test('should return correct anims arrays', () => {
+    const { getByText } = renderWithTheme(
+      <TestComponent tabsLength={3} variant="underlined" selectedIndex={1} />
+    );
+
+    expect(getByText('0,1,0')).toBeDefined();
+    expect(getByText('0,1,0')).toBeDefined();
+  });
+
+  test('should not update translatX anims array values if variant is not underlined', () => {
+    const { getByText, rerender } = renderWithTheme(
+      <TestComponent tabsLength={3} variant="highlighted" selectedIndex={1} />
+    );
+
+    expect(getByText('0,0,0')).toBeDefined();
+
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <TestComponent tabsLength={3} variant="highlighted" selectedIndex={2} />
+      </HeroDesignProvider>
+    );
+
+    expect(getByText('0,0,0')).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/src/components/Typography/Body/__tests__/__snapshots__/StyledBody.tsx.snap

@@ -313,7 +313,7 @@ exports[`StyledBody has regular variant and playful typeface and $fontWeight fon
       [
         {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
+          "fontFamily": "RebondGrotesque",
           "fontSize": 18,
           "letterSpacing": 0.54,
           "lineHeight": 26,
@@ -513,7 +513,7 @@ exports[`StyledBody has small variant and playful typeface and $fontWeight fontW
       [
         {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
+          "fontFamily": "RebondGrotesque",
           "fontSize": 16,
           "letterSpacing": 0.54,
           "lineHeight": 24,

package/src/components/Typography/Body/__tests__/__snapshots__/index.spec.tsx.snap

@@ -422,7 +422,7 @@ exports[`Body has regular variant and playful typeface and $fontWeight fontWeigh
       [
         {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
+          "fontFamily": "RebondGrotesque",
           "fontSize": 18,
           "letterSpacing": 0.54,
           "lineHeight": 26,
@@ -677,7 +677,7 @@ exports[`Body has small variant and playful typeface and $fontWeight fontWeight
       [
         {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
+          "fontFamily": "RebondGrotesque",
           "fontSize": 16,
           "letterSpacing": 0.54,
           "lineHeight": 24,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -1203,7 +1203,7 @@ exports[`theme returns correct theme object 1`] = `
             "semiBold": "BeVietnamPro-SemiBold",
           },
           "playful": {
-            "regular": "BeVietnamPro-Regular",
+            "regular": "RebondGrotesque",
             "semiBold": "RebondGrotesque-SemiBold",
           },
         },

package/src/theme/components/typography.ts

@@ -160,7 +160,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
       },
       playful: {
         semiBold: theme.fonts.playful.semiBold,
-        regular: theme.fonts.neutral.regular,
+        regular: theme.fonts.playful.regular,
       },
     },
   };

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