@hero-design/rn 7.20.0 → 7.21.0

package/src/components/TextInput/index.tsx

@@ -1,5 +1,5 @@
-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,
@@ -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 = ({
@@ -144,9 +148,9 @@ const TextInput = ({
   helpText,
   value,
   defaultValue,
+  renderInputValue,
   ...nativeProps
 }: TextInputProps): JSX.Element => {
-  const textInputReference = useRef<RNTextInput | null>(null);
   const displayText = (value !== undefined ? value : defaultValue) ?? '';
   const isEmptyValue = displayText.length === 0;
   const actualSuffix = loading ? 'loading' : suffix;
@@ -165,6 +169,37 @@ 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}
@@ -224,40 +259,11 @@ 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' ? (
           <Icon

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",
@@ -620,8 +630,21 @@ Object {
       "radii": Object {
         "rounded": 999,
       },
+      "sizes": Object {
+        "heights": Object {
+          "medium": 32,
+          "small": 24,
+        },
+        "thumbs": Object {
+          "medium": 24,
+          "small": 16,
+        },
+        "widths": Object {
+          "medium": 64,
+          "small": 48,
+        },
+      },
       "spaces": Object {
-        "inactive": 0,
         "medium": 4,
         "small": 4,
       },
@@ -888,6 +911,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 +996,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 = {

package/src/theme/components/progress.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getProgressTheme = (theme: GlobalTheme) => {
@@ -13,8 +12,8 @@ const getProgressTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    circleWidth: scale(76),
-    barHeight: scale(4),
+    circleWidth: theme.sizes['6xlarge'],
+    barHeight: theme.sizes.xsmall,
   };
 
   const radii = {

package/src/theme/components/radio.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getRadioTheme = (theme: GlobalTheme) => {
@@ -11,9 +10,14 @@ const getRadioTheme = (theme: GlobalTheme) => {
     groupTopMargin: theme.space.xsmall,
   };
 
+  const boundingBoxSize = theme.sizes.large;
+  const innerPadding = theme.space.xsmall;
+  const circle = boundingBoxSize - innerPadding;
+  const innerCircle = circle / 2;
+
   const sizes = {
-    circle: scale(20),
-    innerCircle: scale(10),
+    circle,
+    innerCircle,
   };
 
   const borderWidths = {

package/src/theme/components/richTextEditor.ts

@@ -12,10 +12,10 @@ const getRichTextEditorTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    editorMinHeight: 21,
-    toolbarButtonSize: theme.space.xxxlarge,
-    toolbarSeparatorWidth: 1,
-    toolbarSeparatorHeight: theme.space.medium,
+    editorMinHeight: theme.sizes.large,
+    toolbarButtonSize: theme.sizes.xxxlarge,
+    toolbarSeparatorWidth: theme.sizes.xxsmall,
+    toolbarSeparatorHeight: theme.sizes.medium,
   };
 
   const fontSizes = {

package/src/theme/components/slider.ts

@@ -0,0 +1,13 @@
+import type { GlobalTheme } from '../global';
+
+const getSliderTheme = (theme: GlobalTheme) => {
+  const colors = {
+    minimumTrackTint: theme.colors.__alpha__primary1,
+    thumbTint: theme.colors.__alpha__globalSecondary4,
+    maximumTrackTint: theme.colors.__alpha__secondary4,
+  };
+
+  return { colors };
+};
+
+export default getSliderTheme;

package/src/theme/components/switch.ts

@@ -26,10 +26,24 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     medium: theme.space.large * 1.2,
   };
 
+  const sizes = {
+    thumbs: {
+      small: theme.sizes.medium,
+      medium: theme.sizes.large,
+    },
+    widths: {
+      small: theme.sizes.xxxlarge,
+      medium: theme.sizes.xxxxxlarge,
+    },
+    heights: {
+      small: theme.sizes.large,
+      medium: theme.sizes.xlarge,
+    },
+  };
+
   const spaces = {
     small: theme.space.xsmall,
     medium: theme.space.xsmall,
-    inactive: 0,
   };
 
   const radii = {
@@ -38,6 +52,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
 
   return {
     colors,
+    sizes,
     thumbSizes,
     widths,
     heights,

package/src/theme/components/tabs.ts

@@ -27,7 +27,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    indicator: theme.space.xxsmall,
+    indicator: theme.sizes.xxsmall,
   };
 
   return { borderWidths, colors, space, radii, sizes };

package/src/theme/components/timePicker.ts

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

package/src/theme/components/toast.ts

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