@hero-design/rn 7.1.1 → 7.1.3-alpha2

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

@@ -20,8 +20,8 @@ Object {
       "fontSizes": Object {
         "default": "12px",
       },
-      "fontWeights": Object {
-        "default": 600,
+      "fonts": Object {
+        "default": "Be Vietnam Pro SemiBold",
       },
       "padding": Object {
         "default": "4px 8px",
@@ -30,6 +30,21 @@ Object {
         "default": "4px",
       },
     },
+    "bottomNavigation": Object {
+      "colors": Object {
+        "background": "#ffffff",
+        "shadow": "#292a2b",
+      },
+      "shadows": Object {
+        "elevation": 10,
+        "offset": "0px 3px",
+        "opacity": 0.27,
+        "radius": "4.65px",
+      },
+      "sizes": Object {
+        "height": 72,
+      },
+    },
     "card": Object {
       "padding": Object {
         "default": "8px",
@@ -55,16 +70,43 @@ Object {
     },
     "fab": Object {
       "colors": Object {
+        "actionItemBackground": "#d1d9fe",
+        "backdropBackground": "#ffffff",
         "buttonBackground": "#292a2b",
+        "headerText": "#292a2b",
         "icon": "#ffffff",
       },
       "fontSizes": Object {
-        "default": "28px",
+        "actionItemText": "14px",
+        "buttonIcon": "24px",
+        "header": "24px",
+      },
+      "fonts": Object {
+        "actionItemText": "Be Vietnam Pro Regular",
+        "header": "Be Vietnam Pro SemiBold",
+      },
+      "lineHeights": Object {
+        "actionItemText": "22px",
+        "header": "32px",
+      },
+      "radii": Object {
+        "actionItem": "999px",
       },
       "sizes": Object {
         "height": "64px",
         "width": "64px",
       },
+      "space": Object {
+        "actionItemMargin": "8px",
+        "actionItemMarginRight": "24px",
+        "actionItemPaddingBottom": "8px",
+        "actionItemPaddingLeft": "16px",
+        "actionItemPaddingRight": "16px",
+        "actionItemPaddingTop": "8px",
+        "actionItemTextPaddingLeft": "8px",
+        "headerTextMarginBottom": "24px",
+        "headerTextMarginRight": "24px",
+      },
     },
     "icon": Object {
       "colors": Object {
@@ -86,6 +128,7 @@ Object {
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",
+        "primary": "#7622d7",
         "subdued": "#8b8d92",
       },
       "fontSizes": Object {
@@ -94,10 +137,10 @@ Object {
         "small": 12,
         "xlarge": 18,
       },
-      "fontWeights": Object {
-        "light": 200,
-        "regular": 400,
-        "semiBold": 600,
+      "fonts": Object {
+        "light": "Be Vietnam Pro Light",
+        "regular": "Be Vietnam Pro Regular",
+        "semiBold": "Be Vietnam Pro SemiBold",
       },
       "lineHeights": Object {
         "large": "24px",
@@ -145,11 +188,10 @@ Object {
     "xxxxlarge": 28,
     "xxxxxlarge": 32,
   },
-  "fontWeights": Object {
-    "bold": 700,
-    "light": 200,
-    "regular": 400,
-    "semiBold": 600,
+  "fonts": Object {
+    "light": "Be Vietnam Pro Light",
+    "regular": "Be Vietnam Pro Regular",
+    "semiBold": "Be Vietnam Pro SemiBold",
   },
   "lineHeights": Object {
     "large": 24,
@@ -157,6 +199,10 @@ Object {
     "small": 20,
     "xlarge": 26,
     "xsmall": 18,
+    "xxlarge": 28,
+    "xxxlarge": 32,
+    "xxxxlarge": 36,
+    "xxxxxlarge": 40,
   },
   "space": Object {
     "large": 24,

package/src/theme/components/badge.ts

@@ -20,19 +20,19 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     default: `${theme.space.xsmall}px ${theme.space.small}px`,
   };
 
-  const fontSizes = {
-    default: `${theme.fontSizes.small}px`,
+  const fonts = {
+    default: theme.fonts.semiBold,
   };
 
-  const fontWeights = {
-    default: theme.fontWeights.semiBold,
+  const fontSizes = {
+    default: `${theme.fontSizes.small}px`,
   };
 
   const radii = {
     default: `4px`,
   };
 
-  return { borderWidths, colors, padding, fontSizes, fontWeights, radii };
+  return { borderWidths, colors, padding, fonts, fontSizes, radii };
 };
 
 export default getBadgeTheme;

package/src/theme/components/bottomNavigation.ts

@@ -0,0 +1,23 @@
+import { GlobalTheme } from '../global';
+
+const getBottomNavigationTheme = (theme: GlobalTheme) => {
+  const colors = {
+    shadow: theme.colors.backgroundDark,
+    background: theme.colors.platformBackground,
+  };
+
+  const sizes = {
+    height: 72,
+  };
+
+  const shadows = {
+    offset: `0px 3px`,
+    opacity: 0.27,
+    radius: `4.65px`,
+    elevation: 10,
+  };
+
+  return { colors, shadows, sizes };
+};
+
+export default getBottomNavigationTheme;

package/src/theme/components/fab.ts

@@ -4,6 +4,9 @@ const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.backgroundDark,
     icon: theme.colors.invertedText,
+    headerText: theme.colors.text,
+    actionItemBackground: theme.colors.infoLight,
+    backdropBackground: theme.colors.platformBackground,
   };
 
   const sizes = {
@@ -11,11 +14,39 @@ const getFABTheme = (theme: GlobalTheme) => {
     height: '64px',
   };
 
+  const fonts = {
+    header: theme.fonts.semiBold,
+    actionItemText: theme.fonts.regular,
+  };
+
   const fontSizes = {
-    default: `${theme.fontSizes.xxxxlarge}px`,
+    header: `${theme.fontSizes.xxxlarge}px`,
+    buttonIcon: `${theme.fontSizes.xxxlarge}px`,
+    actionItemText: `${theme.fontSizes.medium}px`,
+  };
+
+  const lineHeights = {
+    header: `${theme.lineHeights.xxxlarge}px`,
+    actionItemText: `${theme.lineHeights.medium}px`,
+  };
+
+  const space = {
+    actionItemPaddingLeft: `${theme.space.medium}px`,
+    actionItemPaddingRight: `${theme.space.medium}px`,
+    actionItemPaddingTop: `${theme.space.small}px`,
+    actionItemPaddingBottom: `${theme.space.small}px`,
+    actionItemMargin: `${theme.space.small}px`,
+    actionItemMarginRight: `${theme.space.large}px`,
+    actionItemTextPaddingLeft: `${theme.space.small}px`,
+    headerTextMarginRight: `${theme.space.large}px`,
+    headerTextMarginBottom: `${theme.space.large}px`,
+  };
+
+  const radii = {
+    actionItem: `999px`,
   };
 
-  return { fontSizes, colors, sizes };
+  return { radii, fonts, fontSizes, colors, sizes, lineHeights, space };
 };
 
 export default getFABTheme;

package/src/theme/components/typography.ts

@@ -4,6 +4,13 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   const colors = {
     body: theme.colors.text,
     subdued: theme.colors.disabledText,
+    primary: theme.colors.primary,
+  };
+
+  const fonts = {
+    light: theme.fonts.light,
+    regular: theme.fonts.regular,
+    semiBold: theme.fonts.semiBold,
   };
 
   const fontSizes = {
@@ -13,12 +20,6 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.fontSizes.xlarge,
   };
 
-  const fontWeights = {
-    light: theme.fontWeights.light,
-    regular: theme.fontWeights.regular,
-    semiBold: theme.fontWeights.semiBold,
-  };
-
   const lineHeights = {
     small: `${theme.lineHeights.small}px`,
     medium: `${theme.lineHeights.medium}px`,
@@ -26,7 +27,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: `${theme.lineHeights.xlarge}px`,
   };
 
-  return { colors, fontSizes, fontWeights, lineHeights };
+  return { colors, fonts, fontSizes, lineHeights };
 };
 
 export default getTypographyTheme;

package/src/theme/global/index.ts

@@ -1,6 +1,6 @@
 import { systemPalette } from './colors';
 import { space } from './space';
-import { fontSizes, fontWeights, lineHeights } from './typography';
+import { fonts, fontSizes, lineHeights } from './typography';
 import { borderWidths } from './borders';
 
 const globalTheme = {
@@ -8,8 +8,8 @@ const globalTheme = {
     ...systemPalette,
   },
   space,
+  fonts,
   fontSizes,
-  fontWeights,
   lineHeights,
   borderWidths,
 };

package/src/theme/global/typography.ts

@@ -2,6 +2,12 @@ import { scale } from '../../utils/scale';
 
 const BASE = 16;
 
+const fonts = {
+  light: 'Be Vietnam Pro Light',
+  regular: 'Be Vietnam Pro Regular',
+  semiBold: 'Be Vietnam Pro SemiBold',
+};
+
 const fontSizes = {
   xxxxxlarge: scale(BASE * 2), //      32
   xxxxlarge: scale(BASE * 1.75), //    28
@@ -14,14 +20,11 @@ const fontSizes = {
   xsmall: scale(BASE * 0.625), //      10
 };
 
-const fontWeights = {
-  light: 200,
-  regular: 400,
-  semiBold: 600,
-  bold: 700,
-};
-
 const lineHeights = {
+  xxxxxlarge: fontSizes.xxxxxlarge + 8,
+  xxxxlarge: fontSizes.xxxxlarge + 8,
+  xxxlarge: fontSizes.xxxlarge + 8,
+  xxlarge: fontSizes.xxlarge + 8,
   xlarge: fontSizes.xlarge + 8,
   large: fontSizes.large + 8,
   medium: fontSizes.medium + 8,
@@ -29,4 +32,4 @@ const lineHeights = {
   xsmall: fontSizes.xsmall + 8,
 };
 
-export { fontSizes, fontWeights, lineHeights };
+export { fonts, fontSizes, lineHeights };

package/src/theme/index.ts

@@ -1,6 +1,7 @@
 import globalTheme, { GlobalTheme } from './global';
 
 import getBadgeTheme from './components/badge';
+import getBottomNavigationTheme from './components/bottomNavigation';
 import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
 import getIconTheme from './components/icon';
@@ -10,6 +11,7 @@ import getFABTheme from './components/fab';
 type Theme = GlobalTheme & {
   __hd__: {
     badge: ReturnType<typeof getBadgeTheme>;
+    bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
     card: ReturnType<typeof getCardTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     icon: ReturnType<typeof getIconTheme>;
@@ -22,6 +24,7 @@ const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
   ...theme,
   __hd__: {
     badge: getBadgeTheme(theme),
+    bottomNavigation: getBottomNavigationTheme(theme),
     card: getCardTheme(theme),
     divider: getDividerTheme(theme),
     icon: getIconTheme(theme),

package/src/utils/helpers.ts

@@ -0,0 +1,4 @@
+import { Platform } from 'react-native';
+
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = Platform.OS === 'android';

package/types/components/Card/StyledView.d.ts

@@ -0,0 +1,12 @@
+import { View } from 'react-native';
+export interface Props {
+    boxSize: 'small' | 'medium' | 'large';
+    boxSpace: 'small' | 'medium' | 'large';
+    bgColor: 'primary' | 'danger' | 'warning';
+}
+declare const Square: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    boxSize: Props['boxSize'];
+    boxSpace: Props['boxSpace'];
+    bgColor: Props['bgColor'];
+}, never>;
+export { Square };

package/types/index.d.ts

@@ -0,0 +1,4 @@
+import { ThemeProvider, useTheme } from './styled-components';
+import theme, { getTheme } from './theme';
+import ExampleComponent from './components/ExampleComponent';
+export { theme, getTheme, useTheme, ThemeProvider, ExampleComponent };

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

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

package/types/src/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -0,0 +1,17 @@
+import { View } from 'react-native';
+declare const BottomNavigationTab: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeVisibility?: boolean | undefined;
+}, never>;
+declare const BottomNavigationContainer: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const ContentWrapper: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const BottomBarWrapper: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, never>;
+declare const BottomBar: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const BottomBarItem: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, };

package/types/src/components/BottomNavigation/__tests__/BottomNavigation.spec.d.ts

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

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

@@ -0,0 +1,40 @@
+import { ComponentProps, ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import Icon from '../Icon';
+declare type IconType = ComponentProps<typeof Icon>['icon'];
+export declare type Tab<V> = {
+    key: V;
+    title?: string;
+    icon: IconType;
+    component: ReactNode;
+    testID?: string;
+};
+interface BottomNavigationType<V extends string | number, T extends Tab<V>> extends ViewProps {
+    /**
+     * Callback which is called on tab change, receiving id of upcoming active Tab.
+     */
+    onChange: (key: V) => void;
+    /**
+     * Whether inactive tabs should be removed and unmounted in React.
+     * Defaults to `false`.
+     */
+    renderActiveTabOnly?: boolean;
+    /**
+     * Current selected tab key.
+     */
+    selectedTabKey: V;
+    /**
+     * List of Tab to be rendered. Each Tab must have an unique id.
+     */
+    tabs: T[];
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const BottomNavigation: <V extends string | number, T extends Tab<V>>({ onChange, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationType<V, T>) => JSX.Element;
+export default BottomNavigation;

package/types/src/components/FAB/ActionGroup/ActionItem.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Icon from '../../Icon';
+export interface ActionItemProps {
+    testID?: string;
+    title: string;
+    icon: ComponentProps<typeof Icon>['icon'];
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare const ActionItem: ({ icon, title, onPress, style, testID, }: ActionItemProps) => JSX.Element;
+export default ActionItem;

package/types/src/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -0,0 +1,12 @@
+import { Animated, View, ViewProps } from 'react-native';
+import { TextProps } from '../../Typography/Text';
+declare const StyledContainer: import("styled-components").StyledComponent<typeof View, import("../../../theme").Theme, ViewProps, never>;
+declare const StyledActionGroupContainer: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof View>, import("../../../theme").Theme, Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+}, never>;
+declare const StyledFAB: import("styled-components").StyledComponent<({ onPress, icon, animated, testID, active, style }: import("../FAB").FABProps) => JSX.Element, import("../../../theme").Theme, {}, never>;
+declare const StyledBackdrop: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof View>, import("../../../theme").Theme, Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+}, never>;
+declare const StyledHeaderText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: TextProps) => JSX.Element, import("../../../theme").Theme, TextProps, never>;
+export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };

package/types/src/components/FAB/ActionGroup/StyledActionItem.d.ts

@@ -0,0 +1,4 @@
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+declare const StyledActionItem: import("styled-components").StyledComponent<typeof TouchableOpacity, import("../../../theme").Theme, TouchableOpacityProps, never>;
+declare const StyledActionItemText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../../Typography/Text").TextProps) => JSX.Element, import("../../../theme").Theme, TouchableOpacityProps, never>;
+export { StyledActionItem, StyledActionItemText };

package/types/src/components/FAB/ActionGroup/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-native/extend-expect';

package/types/src/components/FAB/ActionGroup/index.d.ts

@@ -0,0 +1,27 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { ActionItemProps } from './ActionItem';
+export interface ActionGroupProps {
+    headerTitle?: string;
+    /**
+     * This function is called on pressing the FAB button.
+     * */
+    onPress?: () => void;
+    /**
+     * Specify if the FAB button is in active state and the action group is shown.
+     * */
+    active?: boolean;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Action items of the action group.
+     * */
+    items?: Array<ActionItemProps>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const ActionGroup: ({ headerTitle, onPress, active, style, items, testID, }: ActionGroupProps) => JSX.Element;
+export default ActionGroup;

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

@@ -0,0 +1,30 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+export interface FABProps {
+    /**
+     * Name of the Icon.
+     */
+    icon: IconProps['icon'];
+    /**
+     * This function is called on pressing the button.
+     * */
+    onPress?: () => void;
+    /**
+     * Specify if the button is animated.
+     */
+    animated?: boolean;
+    /**
+     * Specify if the button is in active state. It only works if animated is true.
+     */
+    active?: boolean;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const FAB: ({ onPress, icon, animated, testID, active, style }: FABProps) => JSX.Element;
+export default FAB;

package/types/src/components/FAB/FABButton.d.ts

@@ -0,0 +1,30 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+export interface FABProps {
+    /**
+     * Name of the Icon.
+     */
+    icon: IconProps['icon'];
+    /**
+     * This function is called on pressing the button.
+     * */
+    onPress?: () => void;
+    /**
+     * Specify if the button is animated.
+     */
+    animated?: boolean;
+    /**
+     * Specify if the button is in active state. It only works if animated is true.
+     */
+    active?: boolean;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const FAB: ({ onPress, icon, animated, testID, active, style }: FABProps) => JSX.Element;
+export default FAB;

package/types/src/components/FAB/MenuList/MenuItem.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Icon, { IconProps } from '../../Icon';
+import { TextProps } from '../../Typography/Text';
+export interface MenuItemProps {
+    testID?: string;
+    label: string;
+    icon: ComponentProps<typeof Icon>['icon'];
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+    iconStyle?: IconProps['style'];
+    textStyle?: TextProps['style'];
+}
+declare const MenuItem: ({ icon, label, onPress, style, textStyle, iconStyle, testID, }: MenuItemProps) => JSX.Element;
+export default MenuItem;

package/types/src/components/FAB/MenuList/StyleBackDrop.d.ts

@@ -0,0 +1,5 @@
+import { Animated } from 'react-native';
+declare const StyledBackdrop: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof import("react-native").View>, import("../../../theme").Theme, Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
+    children?: import("react").ReactNode;
+}, never>;
+export { StyledBackdrop };

package/types/src/components/FAB/MenuList/StyledHeaderText.d.ts

@@ -0,0 +1,3 @@
+import { TextProps } from 'react-native';
+declare const StyledHeaderText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../../Typography/Text").TextProps) => JSX.Element, import("../../../theme").Theme, TextProps, never>;
+export { StyledHeaderText };

package/types/src/components/FAB/MenuList/StyledMenuItem.d.ts

@@ -0,0 +1,4 @@
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+declare const StyledMenuItem: import("styled-components").StyledComponent<typeof TouchableOpacity, import("../../../theme").Theme, TouchableOpacityProps, never>;
+declare const StyledMenuItemText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../../Typography/Text").TextProps) => JSX.Element, import("../../../theme").Theme, TouchableOpacityProps, never>;
+export { StyledMenuItem, StyledMenuItemText };

package/types/src/components/FAB/MenuList/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-native/extend-expect';

package/types/src/components/FAB/MenuList/index.d.ts

@@ -0,0 +1,27 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { MenuItemProps } from './MenuItem';
+export interface MenuListProps {
+    headerLabel?: string;
+    /**
+     * This function is called on pressing the FAB button.
+     * */
+    onFABPress?: () => void;
+    /**
+     * Specify if the FAB button is in active state and the menu list is shown.
+     * */
+    active?: boolean;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Menu items of the menu list.
+     * */
+    menuItems?: Array<MenuItemProps>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const MenuList: ({ headerLabel, onFABPress, active, style, menuItems, testID, }: MenuListProps) => JSX.Element;
+export default MenuList;

package/types/src/components/FAB/__tests__/FABButton.spec.d.ts

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