@hero-design/rn 7.1.3-alpha3 → 7.1.3-alpha6

package/src/theme/components/bottomNavigation.ts

@@ -17,7 +17,11 @@ const getBottomNavigationTheme = (theme: GlobalTheme) => {
     elevation: 10,
   };
 
-  return { colors, shadows, sizes };
+  const space = {
+    titleMarginTop: `${theme.space.xsmall}px`,
+  };
+
+  return { colors, shadows, sizes, space };
 };
 
 export default getBottomNavigationTheme;

package/src/theme/components/fab.ts

@@ -35,11 +35,11 @@ const getFABTheme = (theme: GlobalTheme) => {
     actionItemPaddingRight: `${theme.space.medium}px`,
     actionItemPaddingTop: `${theme.space.small}px`,
     actionItemPaddingBottom: `${theme.space.small}px`,
-    actionItemMargin: `${theme.space.small}px`,
+    actionItemMargin: `${theme.space.xsmall}px`,
     actionItemMarginRight: `${theme.space.large}px`,
     actionItemTextPaddingLeft: `${theme.space.small}px`,
     headerTextMarginRight: `${theme.space.large}px`,
-    headerTextMarginBottom: `${theme.space.large}px`,
+    headerTextMarginBottom: `${theme.space.medium}px`,
   };
 
   const radii = {

package/src/theme/components/tabs.ts

@@ -0,0 +1,20 @@
+import { GlobalTheme } from '../global';
+
+const getTabsTheme = (theme: GlobalTheme) => {
+  const colors = {
+    background: theme.colors.primary,
+    active: theme.colors.invertedText,
+    inactive: `${theme.colors.invertedText}50`,
+  };
+
+  const space = {
+    flatListHorizontalPadding: `${theme.space.small}px`,
+    titleMarginLeft: `${theme.space.small}px`,
+    itemHorizontalPadding: `${theme.space.medium}px`,
+    itemVerticalPadding: `${theme.space.large}px`,
+  };
+
+  return { colors, space };
+};
+
+export default getTabsTheme;

package/src/theme/index.ts

@@ -4,6 +4,7 @@ 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,6 +16,7 @@ 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>;
   };
@@ -28,6 +30,7 @@ const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
     card: getCardTheme(theme),
     divider: getDividerTheme(theme),
     icon: getIconTheme(theme),
+    tabs: getTabsTheme(theme),
     typography: getTypographyTheme(theme),
     fab: getFABTheme(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/src/utils/scale.ts

@@ -2,9 +2,12 @@ import { Dimensions } from 'react-native';
 
 export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
-export const scale = (size: number) => {
+export const horizontalScale = (size: number) => {
   const { width, height } = Dimensions.get('window');
   const shortDimension = width < height ? width : height;
 
   return (shortDimension / BASE_WIDTH) * size;
 };
+
+export const scale = (size: number, factor: number = 0.5) =>
+  size + (horizontalScale(size) - size) * factor;

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,9 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
 declare const StyledView: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
     themeIntent: ThemeIntent;
 }, never>;
-declare const StyledText: import("styled-components").StyledComponent<typeof Text, import("../../theme").Theme, {
+declare const StyledText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../Typography/Text").TextProps) => JSX.Element, import("../../theme").Theme, {
     themeIntent: ThemeIntent;
 }, never>;
 export { StyledView, StyledText };

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

@@ -14,4 +14,5 @@ declare const BottomBarWrapper: import("styled-components").StyledComponent<type
 }, 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, };
+declare const StyledBottomBarText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../Typography/Text").TextProps) => JSX.Element, import("../../theme").Theme, {}, never>;
+export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

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

@@ -1,19 +1,19 @@
-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 { IconProps } from '../Icon';
+declare type IconType = IconProps['icon'];
+export declare type Tab = {
+    key: string;
     title?: string;
     icon: IconType;
     component: ReactNode;
     testID?: string;
 };
-interface BottomNavigationType<V extends string | number, T extends Tab<V>> extends ViewProps {
+interface BottomNavigationType extends ViewProps {
     /**
      * Callback which is called on tab change, receiving id of upcoming active Tab.
      */
-    onChange: (key: V) => void;
+    onChange: (key: string) => void;
     /**
      * Whether inactive tabs should be removed and unmounted in React.
      * Defaults to `false`.
@@ -22,11 +22,11 @@ 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.
      */
-    tabs: T[];
+    tabs: Tab[];
     /**
      * Addditional style.
      */
@@ -36,5 +36,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: ({ onChange, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationType) => 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 } from '../Icon';
+export interface IconButtonProps {
+    /**
+     * Set how far you can touch from the button
+     */
+    hitSlop?: TouchableOpacityProps['hitSlop'];
+    /**
+     * Name of the Icon.
+     */
+    icon: IconProps['icon'];
+    /**
+     * Intent of the Icon.
+     */
+    intent?: IconProps['intent'];
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress: () => void;
+    /**
+     * Size of the Icon.
+     */
+    size?: IconProps['size'];
+    /**
+     * Addditional 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/__tests__/index.spec.d.ts

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

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/Tabs/StyledTabs.d.ts

@@ -0,0 +1,23 @@
+import { View, FlatList } from 'react-native';
+declare const TabScreen: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeVisibility?: boolean | undefined;
+}, never>;
+declare const TabContainer: 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 HeaderTabWrapper: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, never>;
+declare const StyledFlatList: new <T>() => FlatList<T>;
+declare const HeaderTabItem: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+declare const StyledHeaderTabIcon: import("styled-components").StyledComponent<({ icon, style, size, intent, testID, }: import("../Icon").IconProps) => JSX.Element, import("../../theme").Theme, {
+    themeActive: boolean;
+}, never>;
+declare const StyledHeaderTabText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../Typography/Text").TextProps) => JSX.Element, import("../../theme").Theme, {
+    themeActive: boolean;
+}, never>;
+export { StyledFlatList, HeaderTabItem, TabScreen, TabContainer, HeaderTabWrapper, ContentWrapper, StyledHeaderTabIcon, StyledHeaderTabText, };

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

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

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

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

package/types/src/index.d.ts

@@ -5,7 +5,9 @@ import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import Card from './components/Card';
 import Divider from './components/Divider';
+import Tabs from './components/Tabs';
 import Icon from './components/Icon';
 import Typography from './components/Typography';
 import FAB from './components/FAB';
-export { theme, getTheme, useTheme, scale, ThemeProvider, Badge, BottomNavigation, Card, Divider, Icon, Typography, FAB, };
+import Button from './components/Button';
+export { theme, getTheme, useTheme, scale, ThemeProvider, Badge, BottomNavigation, Card, Divider, Icon, Tabs, Typography, FAB, Button, };

package/types/src/theme/components/badge.d.ts

@@ -16,12 +16,6 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
     padding: {
         default: string;
     };
-    fonts: {
-        default: string;
-    };
-    fontSizes: {
-        default: string;
-    };
     radii: {
         default: string;
     };

package/types/src/theme/components/bottomNavigation.d.ts

@@ -13,5 +13,8 @@ declare const getBottomNavigationTheme: (theme: GlobalTheme) => {
     sizes: {
         height: number;
     };
+    space: {
+        titleMarginTop: string;
+    };
 };
 export default getBottomNavigationTheme;

package/types/src/theme/components/tabs.d.ts

@@ -0,0 +1,15 @@
+import { GlobalTheme } from '../global';
+declare const getTabsTheme: (theme: GlobalTheme) => {
+    colors: {
+        background: string;
+        active: string;
+        inactive: string;
+    };
+    space: {
+        flatListHorizontalPadding: string;
+        titleMarginLeft: string;
+        itemHorizontalPadding: string;
+        itemVerticalPadding: string;
+    };
+};
+export default getTabsTheme;

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

@@ -3,6 +3,7 @@ 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';
@@ -13,6 +14,7 @@ declare 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>;
     };

package/types/src/utils/scale.d.ts

@@ -1,2 +1,3 @@
 export declare const BASE_WIDTH = 390;
-export declare const scale: (size: number) => number;
+export declare const horizontalScale: (size: number) => number;
+export declare const scale: (size: number, factor?: number) => number;