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

package/playground/components/BottomNavigation.tsx

@@ -62,7 +62,7 @@ const BottomNavigationPlayground = () => {
 
   return (
     <BottomNavigation
-      onChange={newTabKey => setSelectedTabKey(newTabKey)}
+      onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       selectedTabKey={selectedTabKey}
       tabs={tabs}
     />

package/playground/components/Tabs.tsx

@@ -34,7 +34,7 @@ const TabsPlayground = () => {
 
   return (
     <Tabs
-      onChange={newTabKey => setSelectedTabKey(newTabKey)}
+      onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       selectedTabKey={selectedTabKey}
       tabs={tabs}
     />

package/src/components/BottomNavigation/__tests__/__snapshots__/index.spec.tsx.snap

@@ -48,7 +48,6 @@ exports[`BottomNavigation renders correctly 1`] = `
             undefined,
           ]
         }
-        testID="route-screen-home"
         themeVisibility={true}
       >
         <Text>

package/src/components/BottomNavigation/__tests__/index.spec.tsx

@@ -8,7 +8,7 @@ import BottomNavigation, { BottomNavigationTabType } from '..';
 const TestComponent = (
   props: Omit<
     ComponentProps<typeof BottomNavigation>,
-    'selectedTabKey' | 'onChange' | 'tabs'
+    'selectedTabKey' | 'onTabPress' | 'tabs'
   >
 ) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('home');
@@ -50,7 +50,7 @@ const TestComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onChange={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );

package/src/components/BottomNavigation/index.tsx

@@ -29,9 +29,9 @@ export 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`.
@@ -67,7 +67,7 @@ const getInactiveIcon = (icon: IconName): IconName => {
 };
 
 const BottomNavigation = ({
-  onChange,
+  onTabPress,
   renderActiveTabOnly = false,
   selectedTabKey,
   tabs,
@@ -89,7 +89,7 @@ const BottomNavigation = ({
     <BottomNavigationContainer {...nativeProps}>
       <ContentWrapper>
         {tabs.map(tab => {
-          const { key, component } = tab;
+          const { key, component, testID } = tab;
           const active = selectedTabKey === key;
 
           if (renderActiveTabOnly && !active) {
@@ -104,7 +104,7 @@ const BottomNavigation = ({
           return (
             <BottomNavigationTab
               key={key}
-              testID={`route-screen-${selectedTabKey}`}
+              testID={testID ? `route-screen-${testID}` : undefined}
               pointerEvents={active ? 'auto' : 'none'}
               accessibilityElementsHidden={!active}
               importantForAccessibility={
@@ -133,11 +133,7 @@ const BottomNavigation = ({
             return (
               <TouchableWithoutFeedback
                 key={key}
-                onPress={() => {
-                  if (key !== selectedTabKey) {
-                    onChange(key);
-                  }
-                }}
+                onPress={() => onTabPress(key)}
                 testID={testID}
               >
                 <BottomBarItem>

package/src/components/Tabs/__tests__/__snapshots__/index.spec.tsx.snap

@@ -309,7 +309,6 @@ exports[`Tabs renders correctly 1`] = `
             undefined,
           ]
         }
-        testID="tab-screen-work"
         themeVisibility={true}
       >
         <Text>

package/src/components/Tabs/__tests__/index.spec.tsx

@@ -8,7 +8,7 @@ import Tabs, { TabType } from '..';
 const TestTabsComponent = (
   props: Omit<
     ComponentProps<typeof Tabs>,
-    'selectedTabKey' | 'onChange' | 'tabs'
+    'selectedTabKey' | 'onTabPress' | 'tabs'
   >
 ) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('work');
@@ -38,7 +38,7 @@ const TestTabsComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onChange={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );

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

@@ -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/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 };

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

@@ -1,4 +1,6 @@
-declare const globalTheme: {
+import { scale as defaultScale, Scale } from './scale';
+import { systemPalette as defaultSystemPalette, SystemPalette } from './colors';
+declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     colors: {
         primary: string;
         primaryLight: string;
@@ -23,48 +25,11 @@ declare const globalTheme: {
         invertedText: string;
         outline: string;
     };
-    space: {
-        xxsmall: number;
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-        xlarge: number;
-        xxlarge: number;
-        xxxlarge: number;
-        xxxxlarge: number;
-    };
-    fonts: {
-        light: string;
-        regular: string;
-        semiBold: string;
-    };
-    fontSizes: {
-        xxxxxlarge: number;
-        xxxxlarge: number;
-        xxxlarge: number;
-        xxlarge: number;
-        xlarge: number;
-        large: number;
-        medium: number;
-        small: number;
-        xsmall: number;
-    };
-    lineHeights: {
-        xxxxxlarge: number;
-        xxxxlarge: number;
-        xxxlarge: number;
-        xxlarge: number;
-        xlarge: number;
-        large: number;
-        medium: number;
-        small: number;
-        xsmall: number;
-    };
-    borderWidths: {
-        base: number;
-    };
+    fonts: import("./typography").Fonts;
+    fontSizes: import("./typography").FontSizes;
+    lineHeights: import("./typography").FontSizes;
+    borderWidths: import("./borders").BorderWidths;
+    space: import("./space").Space;
 };
-declare type GlobalTheme = typeof globalTheme;
-export { GlobalTheme };
-export default globalTheme;
+declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
+export { GlobalTheme, Scale, SystemPalette, getGlobalTheme, defaultScale, defaultSystemPalette, };

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

@@ -0,0 +1,8 @@
+declare const scale: {
+    borderWidth: number;
+    space: number;
+    font: string;
+    fontSize: number;
+};
+declare type Scale = typeof scale;
+export { scale, Scale };

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

@@ -1,12 +1,13 @@
-declare const space: {
-    xxsmall: number;
-    xsmall: number;
-    small: number;
-    medium: number;
+interface Space {
     large: number;
+    medium: number;
+    small: number;
     xlarge: number;
+    xsmall: number;
     xxlarge: number;
+    xxsmall: number;
     xxxlarge: number;
     xxxxlarge: number;
-};
-export { space };
+}
+declare const getSpace: (baseSpace: number) => Space;
+export { Space, getSpace };