@hero-design/rn 7.1.3-alpha5 → 7.1.3-alpha8

package/src/theme/global/borders.ts

@@ -1,3 +1,9 @@
-const borderWidths = { base: 1 };
+interface BorderWidths {
+  base: number;
+}
 
-export { borderWidths };
+const getBorderWidths = (baseBorderWidth: number): BorderWidths => ({
+  base: baseBorderWidth,
+});
+
+export { BorderWidths, getBorderWidths };

package/src/theme/global/colors.ts

@@ -25,4 +25,6 @@ const systemPalette = {
   outline: palette.greyLight60,
 };
 
-export { palette, systemPalette };
+type SystemPalette = typeof systemPalette;
+
+export { systemPalette, SystemPalette };

package/src/theme/global/index.ts

@@ -1,21 +1,35 @@
-import { systemPalette } from './colors';
-import { space } from './space';
-import { fonts, fontSizes, lineHeights } from './typography';
-import { borderWidths } from './borders';
+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';
 
-const globalTheme = {
-  colors: {
-    ...systemPalette,
-  },
-  space,
-  fonts,
-  fontSizes,
-  lineHeights,
-  borderWidths,
-};
+const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
+  const fonts = getFonts(scale.font);
+  const fontSizes = getFontSizes(scale.fontSize);
+  const lineHeights = getLineHeights(fontSizes);
+  const borderWidths = getBorderWidths(scale.borderWidth);
+  const space = getSpace(scale.space);
 
-type GlobalTheme = typeof globalTheme;
+  return {
+    colors: {
+      ...systemPalette,
+    },
+    fonts,
+    fontSizes,
+    lineHeights,
+    borderWidths,
+    space,
+  };
+};
 
-export { GlobalTheme };
+type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 
-export default globalTheme;
+export {
+  GlobalTheme,
+  Scale,
+  SystemPalette,
+  getGlobalTheme,
+  defaultScale,
+  defaultSystemPalette,
+};

package/src/theme/global/scale.ts

@@ -0,0 +1,18 @@
+const BASE_BORDER_WIDTH = 1;
+
+const BASE_SPACE = 8;
+
+const BASE_FONT = 'BeVietnamPro';
+
+const BASE_FONT_SIZE = 10;
+
+const scale = {
+  borderWidth: BASE_BORDER_WIDTH,
+  space: BASE_SPACE,
+  font: BASE_FONT,
+  fontSize: BASE_FONT_SIZE,
+};
+
+type Scale = typeof scale;
+
+export { scale, Scale };

package/src/theme/global/space.ts

@@ -1,17 +1,27 @@
 import { scale } from '../../utils/scale';
 
-const BASE = 8;
+interface Space {
+  large: number;
+  medium: number;
+  small: number;
+  xlarge: number;
+  xsmall: number;
+  xxlarge: number;
+  xxsmall: number;
+  xxxlarge: number;
+  xxxxlarge: number;
+}
 
-const space = {
-  xxsmall: scale(BASE * 0.25),
-  xsmall: scale(BASE * 0.5),
-  small: scale(BASE),
-  medium: scale(BASE * 2),
-  large: scale(BASE * 3),
-  xlarge: scale(BASE * 4),
-  xxlarge: scale(BASE * 5),
-  xxxlarge: scale(BASE * 6),
-  xxxxlarge: scale(BASE * 7),
-};
+const getSpace = (baseSpace: number): Space => ({
+  xxsmall: scale(baseSpace * 0.25),
+  xsmall: scale(baseSpace * 0.5),
+  small: scale(baseSpace),
+  medium: scale(baseSpace * 2),
+  large: scale(baseSpace * 3),
+  xlarge: scale(baseSpace * 4),
+  xxlarge: scale(baseSpace * 5),
+  xxxlarge: scale(baseSpace * 6),
+  xxxxlarge: scale(baseSpace * 7),
+});
 
-export { space };
+export { Space, getSpace };

package/src/theme/global/typography.ts

@@ -1,35 +1,79 @@
 import { scale } from '../../utils/scale';
 
-const BASE = 16;
+interface Fonts {
+  light: string;
+  regular: string;
+  semiBold: string;
+}
 
-const fonts = {
-  light: 'Be Vietnam Pro Light',
-  regular: 'Be Vietnam Pro Regular',
-  semiBold: 'Be Vietnam Pro SemiBold',
-};
+interface FontSizes {
+  xxxxxlarge: number;
+  xxxxlarge: number;
+  xxxlarge: number;
+  xxlarge: number;
+  xlarge: number;
+  large: number;
+  medium: number;
+  small: number;
+  xsmall: number;
+}
+
+type LineHeights = FontSizes;
+
+// Hero design web typo scale is following
+// https://www.ibm.com/design/language/typography/type-specs-ui#scales
+const genFontSize = (prev: number, at: number): number =>
+  prev + Math.floor(Math.abs((at - 2) / 4) + 1) * 2;
 
-const fontSizes = {
-  xxxxxlarge: scale(BASE * 2), //      32
-  xxxxlarge: scale(BASE * 1.75), //    28
-  xxxlarge: scale(BASE * 1.5), //      24
-  xxlarge: scale(BASE * 1.25), //      20
-  xlarge: scale(BASE * 1.125), //      18
-  large: scale(BASE), //               16
-  medium: scale(BASE * 0.875), //      14
-  small: scale(BASE * 0.75), //        12
-  xsmall: scale(BASE * 0.625), //      10
+const getFonts = (baseFont: string): Fonts => ({
+  light: `${baseFont}-Light`,
+  regular: `${baseFont}-Regular`,
+  semiBold: `${baseFont}-SemiBold`,
+});
+
+const getFontSizes = (baseFontSize: number): FontSizes => {
+  const fontSizes = Array.from(new Array(9));
+  fontSizes.forEach((_, index) => {
+    if (index === 0) {
+      fontSizes[0] = baseFontSize;
+    } else {
+      fontSizes[index] = genFontSize(fontSizes[index - 1], index);
+    }
+    return undefined;
+  });
+  return {
+    xxxxxlarge: scale(fontSizes[8]), // 32
+    xxxxlarge: scale(fontSizes[7]), //  28
+    xxxlarge: scale(fontSizes[6]), //   24
+    xxlarge: scale(fontSizes[5]), //    20
+    xlarge: scale(fontSizes[4]), //     18
+    large: scale(fontSizes[3]), //      16
+    medium: scale(fontSizes[2]), //     14
+    small: scale(fontSizes[1]), //      12
+    xsmall: scale(fontSizes[0]), //     10
+  };
 };
 
-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,
-  small: fontSizes.small + 8,
-  xsmall: fontSizes.xsmall + 8,
+const getLineHeights = (fontSizes: FontSizes): LineHeights => {
+  const additionalSpace = 8;
+  return {
+    xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
+    xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
+    xxxlarge: fontSizes.xxxlarge + additionalSpace,
+    xxlarge: fontSizes.xxlarge + additionalSpace,
+    xlarge: fontSizes.xlarge + additionalSpace,
+    large: fontSizes.large + additionalSpace,
+    medium: fontSizes.medium + additionalSpace,
+    small: fontSizes.small + additionalSpace,
+    xsmall: fontSizes.xsmall + additionalSpace,
+  };
 };
 
-export { fonts, fontSizes, lineHeights };
+export {
+  Fonts,
+  FontSizes,
+  LineHeights,
+  getFonts,
+  getFontSizes,
+  getLineHeights,
+};

package/src/theme/index.ts

@@ -1,9 +1,17 @@
-import globalTheme, { GlobalTheme } from './global';
+import {
+  GlobalTheme,
+  Scale,
+  SystemPalette,
+  getGlobalTheme,
+  defaultScale,
+  defaultSystemPalette,
+} from './global';
 
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
 import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
+import getTabsTheme from './components/tabs';
 import getIconTheme from './components/icon';
 import getTypographyTheme from './components/typography';
 import getFABTheme from './components/fab';
@@ -15,23 +23,31 @@ type Theme = GlobalTheme & {
     card: ReturnType<typeof getCardTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     icon: ReturnType<typeof getIconTheme>;
+    tabs: ReturnType<typeof getTabsTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
     fab: ReturnType<typeof getFABTheme>;
   };
 };
 
-const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
-  ...theme,
-  __hd__: {
-    badge: getBadgeTheme(theme),
-    bottomNavigation: getBottomNavigationTheme(theme),
-    card: getCardTheme(theme),
-    divider: getDividerTheme(theme),
-    icon: getIconTheme(theme),
-    typography: getTypographyTheme(theme),
-    fab: getFABTheme(theme),
-  },
-});
+const getTheme = (
+  scale: Scale = defaultScale,
+  systemPallete: SystemPalette = defaultSystemPalette
+): Theme => {
+  const globalTheme = getGlobalTheme(scale, systemPallete);
+  return {
+    ...globalTheme,
+    __hd__: {
+      badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
+      card: getCardTheme(globalTheme),
+      divider: getDividerTheme(globalTheme),
+      icon: getIconTheme(globalTheme),
+      tabs: getTabsTheme(globalTheme),
+      typography: getTypographyTheme(globalTheme),
+      fab: getFABTheme(globalTheme),
+    },
+  };
+};
 
 const theme = getTheme();
 

package/src/types.ts

@@ -0,0 +1,7 @@
+import { BottomNavigationTabType } from './components/BottomNavigation';
+import { IconName } from './components/Icon';
+import { TabType } from './components/Tabs';
+
+import { Theme } from './theme';
+
+export type { BottomNavigationTabType, IconName, TabType, Theme };

package/src/utils/__tests__/scale.spec.ts

@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import { scale, BASE_WIDTH } from '../scale';
+import { scale } from '../scale';
 
 jest.unmock('../scale'); // Unmock global mocking of scale for other tests
 
@@ -11,7 +11,7 @@ describe('scale', () => {
 
     const size = 10;
 
-    expect(scale(size)).toBe((400 / BASE_WIDTH) * size);
+    expect(scale(size)).toBe(10.128205128205128);
   });
 
   it('returns scale based on height when width > height', () => {
@@ -21,6 +21,6 @@ describe('scale', () => {
 
     const size = 10;
 
-    expect(scale(size)).toBe((350 / BASE_WIDTH) * size);
+    expect(scale(size)).toBe(9.487179487179487);
   });
 });

package/testUtils/setup.ts

@@ -2,6 +2,17 @@ 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(),
+  });
+
+  return RN;
+});
+
 jest.mock('../src/utils/scale', () => ({
   scale: jest.fn(size => size),
 }));

package/tsconfig.json

@@ -12,11 +12,7 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "skipLibCheck": true,
-    "types": ["jest", "styled-components", "styled-components-react-native"],
-    "baseUrl": ".",
-    "paths": {
-      "styled-components-native": ["./src/styled-components.ts"]
-    }
+    "types": ["jest"],
   },
   "include": ["src", "playground"],
   "exclude": ["node_modules"],

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

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

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

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

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

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

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

@@ -1,9 +1,20 @@
-import { Text, View } from 'react-native';
+/// <reference types="react" />
+import { View, Text } from 'react-native';
 declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
-declare const StyledView: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeIntent: ThemeIntent;
-}, never>;
-declare const StyledText: import("styled-components").StyledComponent<typeof Text, import("../../theme").Theme, {
+}, {}, {
+    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;
+} & {
     themeIntent: ThemeIntent;
-}, never>;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
 export { StyledView, StyledText };

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

@@ -10,7 +10,7 @@ interface BadgeProps extends ViewProps {
      */
     intent?: 'success' | 'warning' | 'danger' | 'info';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

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

@@ -1,17 +1,52 @@
+/// <reference types="react" />
 import { View } from 'react-native';
-declare const BottomNavigationTab: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+declare const BottomNavigationTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     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, {
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomNavigationContainer: 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 ContentWrapper: 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 BottomBarWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     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, };
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBar: 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 BottomBarItem: 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 StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

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

@@ -1,19 +1,18 @@
-import { ComponentProps, ReactNode } from 'react';
+import { 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;
+import { IconName } from '../Icon';
+export declare type BottomNavigationTabType = {
+    key: string;
     title?: string;
-    icon: IconType;
+    icon: IconName;
     component: ReactNode;
     testID?: string;
 };
-interface BottomNavigationType<V extends string | number, T extends Tab<V>> extends ViewProps {
+interface BottomNavigationProps extends ViewProps {
     /**
-     * Callback which is called on tab change, receiving id of upcoming active Tab.
+     * Callback which is called on tab press, receiving key of upcoming active Tab.
      */
-    onChange: (key: V) => void;
+    onTabPress: (key: string) => void;
     /**
      * Whether inactive tabs should be removed and unmounted in React.
      * Defaults to `false`.
@@ -22,13 +21,19 @@ interface BottomNavigationType<V extends string | number, T extends Tab<V>> exte
     /**
      * Current selected tab key.
      */
-    selectedTabKey: V;
+    selectedTabKey: string;
     /**
-     * List of Tab to be rendered. Each Tab must have an unique id.
+     * List of Tabs to be rendered. Each Tab must have an unique key.
      */
-    tabs: T[];
+    tabs: {
+        key: string;
+        title?: string;
+        icon: IconName;
+        component: ReactNode;
+        testID?: string;
+    }[];
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**
@@ -36,5 +41,5 @@ interface BottomNavigationType<V extends string | number, T extends Tab<V>> exte
      */
     testID?: string;
 }
-declare const BottomNavigation: <V extends string | number, T extends Tab<V>>({ onChange, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationType<V, T>) => JSX.Element;
+declare const BottomNavigation: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationProps) => JSX.Element;
 export default BottomNavigation;

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

@@ -0,0 +1,34 @@
+import { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
+import { IconProps, IconName } from '../Icon';
+export interface IconButtonProps {
+    /**
+     * Set how far you can touch from the button.
+     */
+    hitSlop?: TouchableOpacityProps['hitSlop'];
+    /**
+     * Name of the Icon.
+     */
+    icon: IconName;
+    /**
+     * Intent of the Icon.
+     */
+    intent?: IconProps['intent'];
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress: () => void;
+    /**
+     * Size of the Icon.
+     */
+    size?: IconProps['size'];
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of component.
+     */
+    testID?: string;
+}
+declare const IconButton: ({ hitSlop, onPress, icon, testID, style, size, intent, }: IconButtonProps) => JSX.Element;
+export default IconButton;

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

@@ -0,0 +1,4 @@
+declare const Button: {
+    readonly Icon: ({ hitSlop, onPress, icon, testID, style, size, intent, }: import("./IconButton").IconButtonProps) => JSX.Element;
+};
+export default Button;

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

@@ -1,3 +1,9 @@
+/// <reference types="react" />
 import { View } from 'react-native';
-declare const StyledCard: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const StyledCard: 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 };

package/types/src/components/Divider/StyledDivider.d.ts

@@ -1,7 +1,13 @@
+/// <reference types="react" />
 import { View } from 'react-native';
 declare type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare const StyledDivider: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+declare const StyledDivider: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeMarginHorizontal?: MarginSize | undefined;
     themeMarginVertical?: MarginSize | undefined;
-}, never>;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 export { StyledDivider };

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

@@ -9,7 +9,7 @@ interface DividerProps extends ViewProps {
      */
     marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**