@hero-design/rn 7.2.2 → 7.3.0

package/src/theme/global/colors.ts

@@ -3,12 +3,15 @@ import palette from '@hero-design/colors';
 const systemPalette = {
   primary: palette.violet,
   primaryLight: palette.violetLight60,
+  primaryDark: palette.purpleDark15,
+  primaryBackground: palette.violetLight90,
+  secondary: palette.dodgerBlue,
+  secondaryLight: palette.dodgerBlueLight75,
   info: palette.dodgerBlue,
   infoLight: palette.dodgerBlueLight75,
   infoBackground: palette.dodgerBlueLight90,
   success: palette.green,
   successDark: palette.greenDark30,
-  successLight: palette.greenDark75,
   successBackground: palette.grotesqueGreenLight90,
   danger: palette.red,
   dangerLight: palette.redLight60,
@@ -21,8 +24,10 @@ const systemPalette = {
   backgroundDark: palette.greyDark75,
   text: palette.greyDark75,
   disabledText: palette.greyDark15,
+  disabledLightText: palette.greyLight45,
   invertedText: palette.white,
   outline: palette.greyLight60,
+  archived: palette.greyLight45,
 };
 
 type SystemPalette = typeof systemPalette;

package/src/theme/global/index.ts

@@ -2,7 +2,7 @@ import { scale as defaultScale, Scale } from './scale';
 import { systemPalette as defaultSystemPalette, SystemPalette } from './colors';
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
-import { getBorderWidths } from './borders';
+import { getBorderWidths, getRadii } from './borders';
 
 const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const fonts = getFonts(scale.font);
@@ -10,6 +10,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const lineHeights = getLineHeights(fontSizes);
   const borderWidths = getBorderWidths(scale.borderWidth);
   const space = getSpace(scale.space);
+  const radii = getRadii(scale.radius);
 
   return {
     colors: {
@@ -20,6 +21,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
     lineHeights,
     borderWidths,
     space,
+    radii,
   };
 };
 

package/src/theme/global/scale.ts

@@ -6,11 +6,14 @@ const BASE_FONT = 'BeVietnamPro';
 
 const BASE_FONT_SIZE = 10;
 
+const BASE_RADIUS = 4;
+
 const scale = {
   borderWidth: BASE_BORDER_WIDTH,
   space: BASE_SPACE,
   font: BASE_FONT,
   fontSize: BASE_FONT_SIZE,
+  radius: BASE_RADIUS,
 };
 
 type Scale = typeof scale;

package/src/theme/index.ts

@@ -9,21 +9,31 @@ import {
 
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
+import getButtonTheme from './components/button';
 import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
+import getDrawerTheme from './components/drawer';
 import getTabsTheme from './components/tabs';
+import getTagTheme from './components/tag';
 import getIconTheme from './components/icon';
+import getProgressTheme from './components/progress';
 import getTypographyTheme from './components/typography';
 import getFABTheme from './components/fab';
+import getAvatarTheme from './components/avatar';
 
 type Theme = GlobalTheme & {
   __hd__: {
+    avatar: ReturnType<typeof getAvatarTheme>;
     badge: ReturnType<typeof getBadgeTheme>;
     bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
+    button: ReturnType<typeof getButtonTheme>;
     card: ReturnType<typeof getCardTheme>;
     divider: ReturnType<typeof getDividerTheme>;
+    drawer: ReturnType<typeof getDrawerTheme>;
     icon: ReturnType<typeof getIconTheme>;
+    progress: ReturnType<typeof getProgressTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
+    tag: ReturnType<typeof getTagTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
     fab: ReturnType<typeof getFABTheme>;
   };
@@ -37,12 +47,17 @@ const getTheme = (
   return {
     ...globalTheme,
     __hd__: {
+      avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
-      card: getCardTheme(),
+      button: getButtonTheme(globalTheme),
+      card: getCardTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
+      drawer: getDrawerTheme(globalTheme),
+      progress: getProgressTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
+      tag: getTagTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       fab: getFABTheme(globalTheme),
     },

package/src/utils/hooks.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+// Get previous state value
+export const usePrevious = <T>(value: T) => {
+  const ref = React.useRef<T>();
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};

package/testUtils/setup.tsx

@@ -0,0 +1,43 @@
+jest.mock('react-native-vector-icons', () => ({
+  createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
+}));
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+
+  RN.Animated.timing = () => ({
+    start: () => jest.fn(),
+    stop: () => jest.fn(),
+    _isUsingNativeDriver: () => jest.fn(),
+    _startNativeLoop: () => jest.fn(),
+  });
+
+  return RN;
+});
+
+jest.mock('../src/utils/scale', () => ({
+  scale: jest.fn(size => size),
+}));
+
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+jest.mock('react-native-pager-view', () => {
+  const RealComponent = jest.requireActual('react-native-pager-view').default;
+  const React = jest.requireActual('react');
+
+  return class ViewPager extends React.Component<{
+    children: React.ReactNode;
+  }> {
+    index = 0;
+
+    setPage = (page: number) => {
+      const { children } = this.props;
+
+      this.index = Math.max(0, Math.min(page, React.Children.count(children)));
+    };
+
+    render() {
+      const { children } = this.props;
+      return <RealComponent>{children}</RealComponent>;
+    }
+  };
+});

package/types/playground/components/Avatar.d.ts

@@ -0,0 +1,2 @@
+declare const AvatarPlayground: () => JSX.Element;
+export default AvatarPlayground;

package/types/playground/components/Collapse.d.ts

@@ -0,0 +1,2 @@
+declare const CollapsePlayground: () => JSX.Element;
+export default CollapsePlayground;

package/types/playground/components/Drawer.d.ts

@@ -0,0 +1,2 @@
+declare const DrawerPlayground: () => JSX.Element;
+export default DrawerPlayground;

package/types/playground/components/IconButton.d.ts

@@ -0,0 +1,2 @@
+declare const IconButtonPlayground: () => JSX.Element;
+export default IconButtonPlayground;

package/types/playground/components/Progress.d.ts

@@ -0,0 +1,2 @@
+declare const ProgressPlayground: () => JSX.Element;
+export default ProgressPlayground;

package/types/playground/components/Tag.d.ts

@@ -0,0 +1,2 @@
+declare const TagPlayground: () => JSX.Element;
+export default TagPlayground;

package/types/src/components/Avatar/StyledAvatar.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { View, Image, TouchableOpacity, Text } from 'react-native';
+declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge';
+declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+declare const StyledPressable: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<Image> | undefined;
+}>;
+export { StyledPressable, StyledView, StyledImage, StyledTextWrapper, StyledText, };

package/types/src/components/Avatar/index.d.ts

@@ -0,0 +1,25 @@
+import { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
+interface AvatarProps extends ViewProps {
+    /** Callback function when pressing component. */
+    onPress?: () => void;
+    /** Image source to be displayed on avatar. */
+    source?: ImageSourcePropType;
+    /** Renders title in the placeholder. */
+    title?: string;
+    /**
+     * Intent of the Icon.
+     */
+    intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
+    /** Size of the avatar. */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element | null;
+export default Avatar;

package/types/src/components/Badge/Status.d.ts

@@ -0,0 +1,24 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import { ReactNode } from 'react';
+export interface StatusProps extends ViewProps {
+    children: ReactNode;
+    /**
+     * Whether the Status Badge is visible.
+     */
+    visible?: boolean;
+    /**
+    /**
+     * Visual intent color to apply to Status Badge.
+     */
+    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Status: ({ children, visible, intent, style, testID, ...nativeProps }: StatusProps) => JSX.Element;
+export default Status;

package/types/src/components/Badge/StyledBadge.d.ts

@@ -1,20 +1,28 @@
 /// <reference types="react" />
-import { View, Text } from 'react-native';
-declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
-declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+import { Animated, Text } from 'react-native';
+declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
+declare type ThemePadding = 'narrowContent' | 'wideContent';
+declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
+    children?: import("react").ReactNode;
+} & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeIntent: ThemeIntent;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
+    themePadding: ThemePadding;
+}, {}, {}>;
 declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    themeIntent: ThemeIntent;
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;
-export { StyledView, StyledText };
+declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+export { StyledView, StyledText, StyledStatus };

package/types/src/components/Badge/index.d.ts

@@ -1,14 +1,22 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { ReactElement } from 'react';
-interface BadgeProps extends ViewProps {
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
     /**
      * Content of the Badge.
      */
-    content: string;
+    content: string | number;
+    /**
+     * Whether the Badge is visible.
+     */
+    visible?: boolean;
+    /**
+     * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
+     */
+    max?: number;
     /**
      * Visual intent color to apply to Badge.
      */
-    intent?: 'success' | 'warning' | 'danger' | 'info';
+    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
     /**
      * Additional style.
      */
@@ -18,5 +26,7 @@ interface BadgeProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Badge: ({ content, intent, style, testID, ...nativeProps }: BadgeProps) => ReactElement;
-export default Badge;
+declare const _default: (({ content: originalContent, visible, max, intent, style, testID, ...nativeProps }: BadgeProps) => JSX.Element) & {
+    Status: ({ children, visible, intent, style, testID, ...nativeProps }: import("./Status").StatusProps) => JSX.Element;
+};
+export default _default;

package/types/src/components/Button/Button.d.ts

@@ -0,0 +1,57 @@
+import { ReactChild } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+import { Intent, ThemeVariant } from './StyledButton';
+export interface ButtonProps {
+    /**
+     * Helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+     */
+    accessibilityHint?: string;
+    /**
+     * A succinct label in a localized string that identifies the accessibility element
+     */
+    accessibilityLabel?: string;
+    /**
+     * Disable state of button.
+     */
+    disabled?: boolean;
+    /**
+     * Places an icon within the button, before the button's text
+     */
+    icon?: IconName;
+    /**
+     * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
+     */
+    intent?: 'primary' | 'secondary';
+    /**
+     * Loading state of button.
+     */
+    loading?: boolean;
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress: () => void;
+    /**
+     * Places an icon within the button, after the button's text
+     */
+    rightIcon?: IconName;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Button label.
+     */
+    text: ReactChild;
+    /**
+     * Button type.
+     */
+    variant?: 'basic-transparent' | 'filled' | 'outlined';
+}
+export declare const getThemeVariant: (variant: 'basic-transparent' | 'filled' | 'outlined', intent: Intent) => ThemeVariant;
+declare const Button: ({ accessibilityHint, accessibilityLabel, disabled, icon, intent, loading, onPress, rightIcon, style, testID, text, variant, }: ButtonProps) => JSX.Element;
+export default Button;

package/types/src/components/Button/LoadingIndicator/StyledLoadingIndicator.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { View, ViewProps } from 'react-native';
+import { Theme } from '@emotion/react';
+declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'outlined-primary' | 'outlined-secondary';
+declare const StyledLoadingIndicatorWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledLoadingDot: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    size?: number | undefined;
+    themeVariant: ThemeVariant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledLoadingIndicatorWrapper, StyledLoadingDot };

package/types/src/components/Button/LoadingIndicator/index.d.ts

@@ -0,0 +1,26 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'outlined-primary' | 'outlined-secondary';
+interface LoadingIndicatorProps extends ViewProps {
+    /**
+     * Size of the loading dot.
+     */
+    count?: number;
+    /**
+     * Size of the loading dot.
+     */
+    size?: number;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Testing id of the component.
+     */
+    themeVariant: ThemeVariant;
+}
+declare const LoadingIndicator: ({ count, size, testID, themeVariant, ...nativeProps }: LoadingIndicatorProps) => JSX.Element;
+export default LoadingIndicator;

package/types/src/components/Button/StyledButton.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { View } from 'react-native';
+import { Theme } from '@emotion/react';
+declare type Intent = 'primary' | 'secondary';
+declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'outlined-primary' | 'outlined-secondary';
+declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    disabled?: boolean | undefined;
+    pressed?: boolean | undefined;
+    themeVariant: ThemeVariant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    disabled?: boolean | undefined;
+    pressed?: boolean | undefined;
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+declare const StyledButtonIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themePosition: 'left' | 'right';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledButtonIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    disabled?: boolean | undefined;
+    pressed?: boolean | undefined;
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, StyledButtonIcon, Intent, ThemeVariant, };

package/types/src/components/Button/__tests__/IconButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/components/Button/__tests__/StyledButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/components/Button/index.d.ts

@@ -1,4 +1,8 @@
-declare const Button: {
-    readonly Icon: ({ hitSlop, onPress, icon, testID, style, size, intent, }: import("./IconButton").IconButtonProps) => JSX.Element;
-};
-export default Button;
+import { FunctionComponent } from 'react';
+import { ButtonProps } from './Button';
+import IconButton from './IconButton';
+interface CompoundButtonProps extends FunctionComponent<ButtonProps> {
+    Icon: typeof IconButton;
+}
+declare const CompoundButton: CompoundButtonProps;
+export default CompoundButton;

package/types/src/components/Card/StyledCard.d.ts

@@ -3,7 +3,15 @@ import { View } from 'react-native';
 declare const StyledCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: 'basic' | 'data';
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledCard };
+declare const LeftDataCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledCard, LeftDataCard };

package/types/src/components/Card/index.d.ts

@@ -5,6 +5,10 @@ interface CardProps extends ViewProps {
      * Card's content.
      */
     children?: ReactNode;
+    /**
+     * Card type.
+     */
+    variant?: 'basic' | 'data';
     /**
      * Addditional style.
      */
@@ -14,5 +18,5 @@ interface CardProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Card: (props: CardProps) => JSX.Element;
+declare const Card: ({ variant, children, ...nativeProps }: CardProps) => JSX.Element;
 export default Card;