@hero-design/rn 7.1.3-alpha7 → 7.2.1

package/src/components/Tabs/index.tsx

@@ -30,9 +30,9 @@ export type TabType = {
 
 interface TabsProps 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: string) => void;
+  onTabPress: (key: string) => void;
   /**
    * Whether inactive tabs should be removed and unmounted in React.
    * Defaults to `false`.
@@ -63,7 +63,7 @@ interface TabsProps extends ViewProps {
 }
 
 const Tabs = ({
-  onChange,
+  onTabPress,
   renderActiveTabOnly = false,
   selectedTabKey,
   tabs,
@@ -77,6 +77,18 @@ const Tabs = ({
    */
   const [loaded, setLoaded] = React.useState([selectedTabKey]);
 
+  React.useEffect(() => {
+    const selectedTabIndex = tabs.findIndex(
+      item => item.key === selectedTabKey
+    );
+    if (selectedTabIndex !== -1) {
+      flatListRef.current?.scrollToIndex({
+        index: selectedTabIndex,
+        viewPosition: 0.5,
+      });
+    }
+  }, [selectedTabKey, tabs]);
+
   if (!loaded.includes(selectedTabKey)) {
     // Set the current tab to be loaded if it was not loaded before
     setLoaded(loadedState => [...loadedState, selectedTabKey]);
@@ -101,22 +113,14 @@ const Tabs = ({
               100
             );
           }}
-          renderItem={({ item: tab, index }) => {
+          renderItem={({ item: tab }) => {
             const { key, icon, title, testID } = tab;
             const active = selectedTabKey === key;
 
             return (
               <TouchableOpacity
                 key={key}
-                onPress={() => {
-                  if (key !== selectedTabKey) {
-                    onChange(key);
-                    flatListRef.current?.scrollToIndex({
-                      index,
-                      viewPosition: 0.5,
-                    });
-                  }
-                }}
+                onPress={() => onTabPress(key)}
                 testID={testID}
               >
                 <HeaderTabItem>
@@ -140,7 +144,7 @@ const Tabs = ({
       </HeaderTabWrapper>
       <ContentWrapper>
         {tabs.map(tab => {
-          const { key, component } = tab;
+          const { key, component, testID } = tab;
           const active = selectedTabKey === key;
 
           if (renderActiveTabOnly && !active) {
@@ -155,7 +159,7 @@ const Tabs = ({
           return (
             <TabScreen
               key={key}
-              testID={`tab-screen-${selectedTabKey}`}
+              testID={testID ? `tab-screen-${testID}` : undefined}
               pointerEvents={active ? 'auto' : 'none'}
               accessibilityElementsHidden={!active}
               importantForAccessibility={

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

@@ -1,4 +1,4 @@
-import { palette } from '@hero-design/colors';
+import palette from '@hero-design/colors';
 
 const systemPalette = {
   primary: palette.violet,
@@ -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: 'BeVietnamPro-Light',
-  regular: 'BeVietnamPro-Regular',
-  semiBold: 'BeVietnamPro-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,4 +1,11 @@
-import globalTheme, { GlobalTheme } from './global';
+import {
+  GlobalTheme,
+  Scale,
+  SystemPalette,
+  getGlobalTheme,
+  defaultScale,
+  defaultSystemPalette,
+} from './global';
 
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
@@ -22,19 +29,25 @@ type Theme = GlobalTheme & {
   };
 };
 
-const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
-  ...theme,
-  __hd__: {
-    badge: getBadgeTheme(theme),
-    bottomNavigation: getBottomNavigationTheme(theme),
-    card: getCardTheme(theme),
-    divider: getDividerTheme(theme),
-    icon: getIconTheme(theme),
-    tabs: getTabsTheme(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/types/src/components/BottomNavigation/index.d.ts

@@ -10,9 +10,9 @@ export declare type BottomNavigationTabType = {
 };
 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: string) => void;
+    onTabPress: (key: string) => void;
     /**
      * Whether inactive tabs should be removed and unmounted in React.
      * Defaults to `false`.
@@ -41,5 +41,5 @@ interface BottomNavigationProps extends ViewProps {
      */
     testID?: string;
 }
-declare const BottomNavigation: ({ onChange, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationProps) => JSX.Element;
+declare const BottomNavigation: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationProps) => JSX.Element;
 export default BottomNavigation;

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

@@ -1,6 +1,9 @@
 import { StyleProp, ViewStyle } from 'react-native';
 import { ActionItemProps } from './ActionItem';
 export interface ActionGroupProps {
+    /**
+     * Title of the action group header.
+     */
     headerTitle?: string;
     /**
      * This function is called on pressing the FAB button.

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

@@ -10,9 +10,9 @@ export declare type TabType = {
 };
 interface TabsProps 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: string) => void;
+    onTabPress: (key: string) => void;
     /**
      * Whether inactive tabs should be removed and unmounted in React.
      * Defaults to `false`.
@@ -41,5 +41,5 @@ interface TabsProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Tabs: ({ onChange, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: TabsProps) => JSX.Element;
+declare const Tabs: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: TabsProps) => JSX.Element;
 export default Tabs;

package/types/src/theme/global/borders.d.ts

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

package/types/src/theme/global/colors.d.ts

@@ -1,4 +1,3 @@
-import { palette } from '@hero-design/colors';
 declare const systemPalette: {
     primary: string;
     primaryLight: string;
@@ -23,4 +22,5 @@ declare const systemPalette: {
     invertedText: string;
     outline: string;
 };
-export { palette, systemPalette };
+declare type SystemPalette = typeof systemPalette;
+export { systemPalette, SystemPalette };