@hero-design/rn 7.20.1 → 7.22.0

package/src/components/TextInput/index.tsx

@@ -1,11 +1,11 @@
-import React, { useRef } from 'react';
-import { TextInput as RNTextInput, StyleSheet } from 'react-native';
+import React from "react";
+import { StyleSheet } from "react-native";
 import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-} from 'react-native';
+} from "react-native";
 import {
   StyledTextInputContainer,
   StyledLabel,
@@ -24,11 +24,11 @@ import {
   StyledErrorAndHelpTextContainer,
   StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
-} from './StyledTextInput';
-import Icon from '../Icon';
-import { useTheme } from '../../theme';
-import type { Variant } from './StyledTextInput';
-import type { IconName } from '../Icon';
+} from "./StyledTextInput";
+import Icon from "../Icon";
+import { useTheme } from "../../theme";
+import type { Variant } from "./StyledTextInput";
+import type { IconName } from "../Icon";
 
 export interface TextInputProps extends NativeTextInputProps {
   /**
@@ -92,6 +92,10 @@ export interface TextInputProps extends NativeTextInputProps {
    * The helper text to display.
    */
   helpText?: string;
+  /*
+   * Customise input value renderer
+   */
+  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
 }
 
 export const getVariant = ({
@@ -110,21 +114,21 @@ export const getVariant = ({
   isEmptyValue?: boolean;
 }): Variant => {
   if (disabled) {
-    return 'disabled';
+    return "disabled";
   }
   if (error) {
-    return 'error';
+    return "error";
   }
   if (!editable || loading) {
-    return 'readonly';
+    return "readonly";
   }
   if (isFocused) {
-    return 'focused';
+    return "focused";
   }
   if (!isEmptyValue) {
-    return 'filled';
+    return "filled";
   }
-  return 'default';
+  return "default";
 };
 
 const TextInput = ({
@@ -144,12 +148,12 @@ const TextInput = ({
   helpText,
   value,
   defaultValue,
+  renderInputValue,
   ...nativeProps
 }: TextInputProps): JSX.Element => {
-  const textInputReference = useRef<RNTextInput | null>(null);
-  const displayText = (value !== undefined ? value : defaultValue) ?? '';
+  const displayText = (value !== undefined ? value : defaultValue) ?? "";
   const isEmptyValue = displayText.length === 0;
-  const actualSuffix = loading ? 'loading' : suffix;
+  const actualSuffix = loading ? "loading" : suffix;
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -165,16 +169,46 @@ const TextInput = ({
   const shouldShowMaxLength = maxLength !== undefined;
 
   const theme = useTheme();
+
+  const nativeInputProps: NativeTextInputProps = {
+    style: StyleSheet.flatten([
+      { color: theme.__hd__.textInput.colors.text },
+      textStyle,
+    ]),
+    testID: "text-input",
+    accessibilityState: {
+      disabled: variant === "disabled" || variant === "readonly",
+    },
+    // @ts-ignore
+    accessibilityLabelledBy,
+    ...nativeProps,
+    onFocus: (event) => {
+      setIsFocused(true);
+      nativeProps.onFocus?.(event);
+    },
+    onBlur: (event) => {
+      setIsFocused(false);
+      nativeProps.onBlur?.(event);
+    },
+    editable,
+    maxLength,
+    value,
+    onChangeText: (text) => {
+      nativeProps.onChangeText?.(text);
+    },
+    defaultValue,
+    placeholder: variant === "focused" ? nativeProps.placeholder : undefined,
+  };
+
   return (
     <StyledContainer
-      style={style}
       pointerEvents={
-        variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
+        variant === "disabled" || variant === "readonly" ? "none" : "auto"
       }
       testID={testID}
     >
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} />
+        <StyledBorderBackDrop themeVariant={variant} style={style} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (
@@ -194,9 +228,9 @@ const TextInput = ({
             )}
           </StyledLabelContainer>
         )}
-        {typeof prefix === 'string' ? (
+        {typeof prefix === "string" ? (
           <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+            intent={variant === "disabled" ? "disabled-text" : "text"}
             testID="input-prefix"
             icon={prefix}
             size="xsmall"
@@ -224,47 +258,18 @@ const TextInput = ({
               )}
             </StyledLabelContainerInsideTextInput>
           )}
-          <StyledTextInput
-            // when input is not editable on Android, the text color is gray
-            // hence, adding this to make the text color the same as iOS
-            style={StyleSheet.flatten([
-              { color: theme.__hd__.textInput.colors.text },
-              textStyle,
-            ])}
-            testID="text-input"
-            accessibilityState={{
-              disabled: variant === 'disabled' || variant === 'readonly',
-            }}
-            // @ts-ignore
-            accessibilityLabelledBy={accessibilityLabelledBy}
-            {...nativeProps}
-            onFocus={event => {
-              setIsFocused(true);
-              nativeProps.onFocus?.(event);
-            }}
-            onBlur={event => {
-              setIsFocused(false);
-              nativeProps.onBlur?.(event);
-            }}
-            ref={textInputReference}
-            editable={editable}
-            maxLength={maxLength}
-            value={value}
-            onChangeText={text => {
-              nativeProps.onChangeText?.(text);
-            }}
-            defaultValue={defaultValue}
-            placeholder={
-              variant === 'focused' ? nativeProps.placeholder : undefined
-            }
-          />
+          {renderInputValue ? (
+            renderInputValue(nativeInputProps)
+          ) : (
+            <StyledTextInput {...nativeInputProps} />
+          )}
         </StyledTextInputAndLabelContainer>
-        {typeof actualSuffix === 'string' ? (
+        {typeof actualSuffix === "string" ? (
           <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+            intent={variant === "disabled" ? "disabled-text" : "text"}
             testID="input-suffix"
             icon={actualSuffix}
-            spin={actualSuffix === 'loading'}
+            spin={actualSuffix === "loading"}
             size="xsmall"
           />
         ) : (

package/src/components/Toast/ToastContainer.tsx

@@ -28,7 +28,7 @@ const SingleToastDisplay = ({
       key={toast.id}
       style={{ marginBottom: theme.space.small }}
       onDismiss={() => {
-        setToastList(state => state.filter(item => item.id !== toast.id));
+        setToastList((state) => state.filter((item) => item.id !== toast.id));
         toast.props.onDismiss?.();
       }}
     />
@@ -43,17 +43,17 @@ const ToastContainer = React.forwardRef<
   const [toastList, setToastList] = useState<ToastItemProps[]>([]);
 
   useImperativeHandle(ref, () => ({
-    show: props => {
+    show: (props) => {
       const item = {
         id: generateID(),
         props,
       };
 
-      setToastList(state => [item, ...state]);
+      setToastList((state) => [item, ...state]);
       return item.id;
     },
-    hide: id => {
-      setToastList(state => state.filter(item => item.id !== id));
+    hide: (id) => {
+      setToastList((state) => state.filter((item) => item.id !== id));
     },
     clearAll: () => {
       setToastList([]);
@@ -75,7 +75,7 @@ const ToastContainer = React.forwardRef<
             key={id}
             style={{ marginBottom: theme.space.small }}
             onDismiss={() => {
-              setToastList(state => state.filter(item => item.id !== id));
+              setToastList((state) => state.filter((item) => item.id !== id));
               props.onDismiss?.();
             }}
           />

package/src/index.ts

@@ -26,9 +26,11 @@ import Drawer from './components/Drawer';
 import Empty from './components/Empty';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
+import Image from './components/Image';
 import List from './components/List';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
+import Slider from './components/Slider';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
@@ -70,9 +72,11 @@ export {
   Empty,
   FAB,
   Icon,
+  Image,
   List,
   PinInput,
   Progress,
+  Slider,
   Spinner,
   Radio,
   SectionHeading,

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

@@ -262,11 +262,11 @@ Object {
         "wrapper": 8,
       },
       "sizes": Object {
-        "icon": 20,
+        "icon": 24,
       },
       "space": Object {
         "iconDescriptionPadding": 12,
-        "iconTop": -3,
+        "iconTop": 0,
         "wrapperPadding": 16,
       },
     },
@@ -338,14 +338,11 @@ Object {
         "description": "BeVietnamPro-Light",
         "title": "BeVietnamPro-SemiBold",
       },
-      "radii": Object {
-        "illustration": 999,
-      },
       "sizes": Object {
-        "illustration": 168,
+        "image": 168,
       },
       "space": Object {
-        "illustrationMargin": 24,
+        "imageMargin": 24,
         "titleMargin": 16,
         "wrapperPadding": 16,
       },
@@ -419,6 +416,12 @@ Object {
         "xsmall": 16,
       },
     },
+    "image": Object {
+      "sizes": Object {
+        "15xlarge": 144,
+        "6xlarge": 72,
+      },
+    },
     "list": Object {
       "colors": Object {
         "checkedListItemContainerBackground": "#f3e6f6",
@@ -507,7 +510,7 @@ Object {
       },
       "sizes": Object {
         "barHeight": 4,
-        "circleWidth": 76,
+        "circleWidth": 72,
       },
     },
     "radio": Object {
@@ -539,10 +542,10 @@ Object {
         "editor": 14,
       },
       "sizes": Object {
-        "editorMinHeight": 21,
+        "editorMinHeight": 24,
         "toolbarButtonSize": 48,
         "toolbarSeparatorHeight": 16,
-        "toolbarSeparatorWidth": 1,
+        "toolbarSeparatorWidth": 2,
       },
       "space": Object {
         "editorPadding": 16,
@@ -578,6 +581,13 @@ Object {
         "sectionSpacing": 12,
       },
     },
+    "slider": Object {
+      "colors": Object {
+        "maximumTrackTint": "#ece8ef",
+        "minimumTrackTint": "#401960",
+        "thumbTint": "#e6e9e9",
+      },
+    },
     "spinner": Object {
       "colors": Object {
         "dot1": "#795e90",
@@ -611,28 +621,43 @@ Object {
           "disabled-unchecked": "#ccced1",
           "unchecked": "#808f91",
         },
+        "selector": Object {
+          "background": "#f6f6f7",
+          "textBackground": "#401960",
+        },
         "thumb": "#ffffff",
       },
-      "heights": Object {
-        "medium": 28.799999999999997,
-        "small": 24,
-      },
       "radii": Object {
         "rounded": 999,
+        "selector": Object {
+          "default": 999,
+        },
+      },
+      "sizes": Object {
+        "heights": Object {
+          "medium": 32,
+          "small": 24,
+        },
+        "selector": Object {
+          "height": 56,
+        },
+        "thumbs": Object {
+          "medium": 24,
+          "small": 16,
+        },
+        "widths": Object {
+          "medium": 64,
+          "small": 48,
+        },
       },
       "spaces": Object {
-        "inactive": 0,
         "medium": 4,
+        "selector": Object {
+          "iconPadding": 16,
+          "wrapperPadding": 4,
+        },
         "small": 4,
       },
-      "thumbSizes": Object {
-        "medium": 20.8,
-        "small": 16,
-      },
-      "widths": Object {
-        "medium": 56,
-        "small": 48,
-      },
     },
     "tabs": Object {
       "borderWidths": Object {
@@ -888,6 +913,8 @@ Object {
     "__alpha__globalNeutral3": "#f6f6f7",
     "__alpha__globalPrimary": "#001f23",
     "__alpha__globalSecondary1": "#4d6265",
+    "__alpha__globalSecondary4": "#e6e9e9",
+    "__alpha__primary1": "#401960",
     "__alpha__primary2": "#c38cee",
     "__alpha__secondary1": "#795e90",
     "__alpha__secondary2": "#a08cb0",
@@ -971,6 +998,26 @@ Object {
     "rounded": 999,
     "xlarge": 16,
   },
+  "sizes": Object {
+    "14xlarge": 136,
+    "15xlarge": 144,
+    "18xlarge": 168,
+    "19xlarge": 176,
+    "6xlarge": 72,
+    "7xlarge": 80,
+    "9xlarge": 96,
+    "large": 24,
+    "medium": 16,
+    "small": 8,
+    "smallMedium": 12,
+    "xlarge": 32,
+    "xsmall": 4,
+    "xxlarge": 40,
+    "xxsmall": 2,
+    "xxxlarge": 48,
+    "xxxxlarge": 56,
+    "xxxxxlarge": 64,
+  },
   "space": Object {
     "large": 24,
     "medium": 16,

package/src/theme/components/alert.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getAlertTheme = (theme: GlobalTheme) => {
@@ -12,7 +11,7 @@ const getAlertTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    height: scale(48),
+    height: theme.sizes.xxxlarge,
   };
 
   const space = {

package/src/theme/components/avatar.ts

@@ -10,14 +10,14 @@ const getAvatarTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    small: theme.space.xlarge,
-    medium: theme.space.xxlarge,
-    large: theme.space.xxxlarge,
-    xlarge: theme.space.xxxxlarge,
-    xxlarge: theme.space.xlarge * 2,
-    xxxlarge: theme.space.xxlarge * 2,
-    xxxxlarge: theme.space.xxxlarge * 2,
-    xxxxxlarge: theme.space.small * 17,
+    small: theme.sizes.xlarge,
+    medium: theme.sizes.xxlarge,
+    large: theme.sizes.xxxlarge,
+    xlarge: theme.sizes.xxxxlarge,
+    xxlarge: theme.sizes.xxxxxlarge,
+    xxxlarge: theme.sizes['7xlarge'],
+    xxxxlarge: theme.sizes['9xlarge'],
+    xxxxxlarge: theme.sizes['14xlarge'],
   };
 
   const fontSizes = {

package/src/theme/components/badge.ts

@@ -19,10 +19,10 @@ const getBadgeTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    height: theme.fontSizes.small + theme.space.small,
-    minWidth: theme.fontSizes.small + theme.space.small,
-    statusHeight: theme.space.small,
-    statusWidth: theme.space.small,
+    height: theme.fontSizes.small + theme.sizes.small,
+    minWidth: theme.fontSizes.small + theme.sizes.small,
+    statusHeight: theme.sizes.small,
+    statusWidth: theme.sizes.small,
   };
 
   const space = {

package/src/theme/components/bottomNavigation.ts

@@ -7,7 +7,7 @@ const getBottomNavigationTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    height: 72,
+    height: theme.sizes['6xlarge'],
   };
 
   const shadows = {

package/src/theme/components/bottomSheet.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getBottomSheetTheme = (theme: GlobalTheme) => {
@@ -9,8 +8,8 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    sectionHeight: scale(64),
-    closeIcon: scale(48),
+    sectionHeight: theme.sizes.xxxxxlarge,
+    closeIcon: theme.sizes.xxxlarge,
   };
 
   const space = {

package/src/theme/components/calendar.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getCalendarTheme = (theme: GlobalTheme) => {
@@ -9,13 +8,16 @@ const getCalendarTheme = (theme: GlobalTheme) => {
     inverted: theme.colors.invertedText,
   };
 
+  const cellSize = theme.sizes.xxxlarge;
+  const markSize = theme.sizes.xsmall;
+
   const sizes = {
-    cellWidth: scale(48),
-    cellHeight: scale(48),
-    cellCircleWidth: scale(44),
-    cellCircleHeight: scale(44),
-    markWidth: scale(4),
-    markHeight: scale(4),
+    cellWidth: cellSize,
+    cellHeight: cellSize,
+    cellCircleWidth: cellSize - markSize,
+    cellCircleHeight: cellSize - markSize,
+    markWidth: markSize,
+    markHeight: markSize,
   };
 
   const space = {

package/src/theme/components/card.ts

@@ -12,7 +12,7 @@ const getCardTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    indicatorWidth: theme.space.medium,
+    indicatorWidth: theme.sizes.medium,
   };
 
   const radii = {

package/src/theme/components/checkbox.ts

@@ -1,5 +1,4 @@
 import type { GlobalTheme } from '../global';
-import { scale } from '../../utils/scale';
 
 const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
@@ -8,15 +7,13 @@ const getCheckboxTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    // to remove the empty space above the check icon
-    // and also to center the check mark
-    iconTop: -scale(3),
+    iconTop: 0,
     wrapperPadding: theme.space.medium,
     iconDescriptionPadding: theme.space.smallMedium,
   };
 
   const sizes = {
-    icon: scale(20),
+    icon: theme.sizes.large,
   };
 
   const radii = {

package/src/theme/components/datePicker.ts

@@ -1,8 +1,8 @@
-import { scale } from '../../utils/scale';
+import { GlobalTheme } from '../global';
 
-const getDatePickerTheme = () => {
+const getDatePickerTheme = (theme: GlobalTheme) => {
   const sizes = {
-    height: scale(176),
+    height: theme.sizes['19xlarge'],
   };
 
   return { sizes };

package/src/theme/components/drawer.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getDrawerTheme = (theme: GlobalTheme) => {
@@ -19,8 +18,8 @@ const getDrawerTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    handlerWidth: scale(56),
-    handlerHeight: scale(4),
+    handlerWidth: theme.sizes.xxxxlarge,
+    handlerHeight: theme.sizes.xsmall,
   };
 
   const shadows = {

package/src/theme/components/empty.ts

@@ -1,19 +1,14 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getEmptyTheme = (theme: GlobalTheme) => {
   const space = {
     titleMargin: theme.space.medium,
-    illustrationMargin: theme.space.large,
+    imageMargin: theme.space.large,
     wrapperPadding: theme.space.medium,
   };
 
   const sizes = {
-    illustration: scale(168),
-  };
-
-  const radii = {
-    illustration: theme.radii.rounded,
+    image: theme.sizes['18xlarge'],
   };
 
   const colors = {
@@ -33,7 +28,7 @@ const getEmptyTheme = (theme: GlobalTheme) => {
     description: theme.fonts.light,
   };
 
-  return { fontSizes, colors, sizes, space, fonts, radii };
+  return { fontSizes, colors, sizes, space, fonts };
 };
 
 export default getEmptyTheme;

package/src/theme/components/fab.ts

@@ -12,8 +12,8 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    width: 64,
-    height: 64,
+    width: theme.sizes.xxxxxlarge,
+    height: theme.sizes.xxxxxlarge,
   };
 
   const fonts = {

package/src/theme/components/image.ts

@@ -0,0 +1,12 @@
+import type { GlobalTheme } from '../global';
+
+const getImageTheme = (theme: GlobalTheme) => {
+  const sizes = {
+    '6xlarge': theme.sizes['6xlarge'],
+    '15xlarge': theme.sizes['15xlarge'],
+  };
+
+  return { sizes };
+};
+
+export default getImageTheme;

package/src/theme/components/pinInput.ts

@@ -24,9 +24,9 @@ const getPinInputTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    cellWidth: theme.space.xxlarge,
-    cellHeight: theme.space.xxxlarge,
-    mask: theme.space.medium,
+    cellWidth: theme.sizes.xxlarge,
+    cellHeight: theme.sizes.xxxlarge,
+    mask: theme.sizes.medium,
   };
 
   const space = {