@hero-design/rn 7.1.1 → 7.1.2

package/playground/components/BottomNavigation.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Tab } from '../../src/components/BottomNavigation';
+import { BottomNavigation, Typography } from '../../src/index';
+
+const HomeScreen = () => (
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Typography.Text>Home Screen</Typography.Text>
+  </View>
+);
+
+const FeedScreen = () => (
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Typography.Text>Feed Screen</Typography.Text>
+  </View>
+);
+
+const AlertsScreen = () => (
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Typography.Text>Alerts Screen</Typography.Text>
+  </View>
+);
+
+const ProfileScreen = () => (
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Typography.Text>Profile Screen</Typography.Text>
+  </View>
+);
+
+const tabs: Tab<number>[] = [
+  {
+    key: 0,
+    title: 'Home',
+    icon: 'home',
+    component: <HomeScreen />,
+  },
+  {
+    key: 1,
+    title: 'Feed',
+    icon: 'speaker',
+    component: <FeedScreen />,
+  },
+  {
+    key: 2,
+    title: 'Alerts',
+    icon: 'bell',
+    component: <AlertsScreen />,
+  },
+  {
+    key: 3,
+    title: 'Profile',
+    icon: 'user',
+    component: <ProfileScreen />,
+  },
+];
+
+const MyComponent = () => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState(0);
+
+  return (
+    <BottomNavigation
+      onChange={newTabKey => setSelectedTabKey(newTabKey)}
+      selectedTabKey={selectedTabKey}
+      tabs={tabs}
+    />
+  );
+};
+
+export default MyComponent;

package/playground/components/Card.tsx

@@ -1,50 +1,133 @@
 import React, { ComponentProps } from 'react';
-import { View, ViewProps, StyleSheet } from 'react-native';
-import { palette } from '@hero-design/colors';
 import {
-  useTheme,
-  scale,
-  Card,
-  Typography,
-  Icon,
-  Divider,
-} from '../../src/index';
-
-const Screen = View;
+  View,
+  ViewProps,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+import { palette } from '@hero-design/colors';
+import { scale, Card, Typography, Icon, Divider, theme } from '../../src/index';
 
 type DashboardCardProps = ViewProps & {
   icon: ComponentProps<typeof Icon>['icon'];
   title: string;
   subtitle: string;
 };
+type PendingItemProps = {
+  count: number;
+  label: string;
+  onPress?: () => void;
+  wrapperTestID?: string;
+  countTestID?: string;
+};
+
+const PendingItem = ({
+  count,
+  label,
+  onPress,
+  wrapperTestID,
+  countTestID,
+}: Omit<PendingItemProps, 'isLoading'>) => (
+  <TouchableOpacity
+    onPress={onPress}
+    style={{
+      paddingHorizontal: theme.space.small,
+      flex: 1,
+    }}
+    testID={wrapperTestID}
+  >
+    <Typography.Text
+      fontSize="xlarge"
+      fontWeight="semi-bold"
+      style={{
+        textAlign: 'center',
+        paddingBottom: theme.space.small,
+        color: palette.redLight30,
+      }}
+      testID={countTestID}
+    >
+      {count}
+    </Typography.Text>
+    <Typography.Text
+      style={{ textAlign: 'center', color: palette.greyDark75 }}
+      fontSize="large"
+    >
+      {label}
+    </Typography.Text>
+  </TouchableOpacity>
+);
+
+const ApprovalsCardLayout = ({ style }: ViewProps) => (
+  <Card
+    style={StyleSheet.flatten([
+      {
+        backgroundColor: palette.greyLight90,
+        marginBottom: theme.space.medium,
+        paddingTop: 0,
+        paddingRight: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+      },
+      style,
+    ])}
+  >
+    <View
+      style={{
+        backgroundColor: palette.redLight60,
+        display: 'flex',
+        flexDirection: 'row',
+        padding: theme.space.medium,
+        marginBottom: theme.space.medium,
+      }}
+    >
+      <Icon
+        icon="multiple-users"
+        style={{
+          marginRight: theme.space.small,
+        }}
+      />
+      <Typography.Text fontWeight="semi-bold" fontSize="xlarge">
+        Approval card
+      </Typography.Text>
+    </View>
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+      }}
+    >
+      <PendingItem count={1} label="Timesheets" />
+      <PendingItem count={2} label="Leave Requests" />
+      <PendingItem count={7} label="Expense Claims" />
+    </View>
+  </Card>
+);
 
 const DashboardCard = ({
   style,
   icon,
   title,
   subtitle,
-}: DashboardCardProps) => {
-  const theme = useTheme();
-  return (
-    <Card style={style}>
-      <View style={{ flex: 1, alignItems: 'flex-end' }}>
-        <Icon icon={icon} />
-      </View>
-      <View
-        style={{
-          flex: 1,
-          justifyContent: 'flex-end',
-          margin: theme.space.small,
-        }}
-      >
-        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
-          {title}
-        </Typography.Text>
-        <Typography.Text fontSize="medium">{subtitle}</Typography.Text>
-      </View>
-    </Card>
-  );
-};
+}: DashboardCardProps) => (
+  <Card style={style}>
+    <View style={{ flex: 1, alignItems: 'flex-end' }}>
+      <Icon icon={icon} />
+    </View>
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'flex-end',
+        margin: theme.space.small,
+      }}
+    >
+      <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+        {title}
+      </Typography.Text>
+      <Typography.Text fontSize="medium">{subtitle}</Typography.Text>
+    </View>
+  </Card>
+);
 
 const InductionCard = (props: ViewProps) => (
   <DashboardCard
@@ -73,7 +156,6 @@ const CertificationsCard = (props: ViewProps) => (
 );
 
 const RostersCard = (props: ViewProps) => {
-  const theme = useTheme();
   const { style, ...otherProps } = props;
   return (
     <Card
@@ -110,7 +192,6 @@ const RostersCard = (props: ViewProps) => {
 };
 
 const MyLeaveCard = (props: ViewProps) => {
-  const theme = useTheme();
   const { style, ...otherProps } = props;
   return (
     <Card
@@ -181,41 +262,39 @@ const MyLeaveCard = (props: ViewProps) => {
   );
 };
 
-const CardPlayground = () => {
-  const theme = useTheme();
-  return (
-    <Screen style={{ padding: theme.space.medium }}>
-      <View style={{ flexDirection: 'row', height: scale(216) }}>
-        <View style={{ flex: 1, marginRight: theme.space.medium }}>
-          <InductionCard
-            style={{
-              flex: 1,
-              backgroundColor: theme.colors.primaryLight,
-            }}
-          />
-        </View>
-        <View style={{ flex: 1 }}>
-          <PoliciesCard
-            style={{
-              flex: 1,
-              backgroundColor: theme.colors.infoLight,
-              marginBottom: theme.space.medium,
-            }}
-            testID="policies"
-          />
-          <CertificationsCard
-            style={{
-              flex: 1,
-              backgroundColor: theme.colors.infoLight,
-            }}
-            testID="certifications"
-          />
-        </View>
+const CardPlayground = () => (
+  <ScrollView style={{ padding: theme.space.medium }}>
+    <View style={{ flexDirection: 'row', height: scale(216) }}>
+      <View style={{ flex: 1, marginRight: theme.space.medium }}>
+        <InductionCard
+          style={{
+            flex: 1,
+            backgroundColor: theme.colors.primaryLight,
+          }}
+        />
       </View>
-      <RostersCard style={{ marginTop: theme.space.medium }} />
-      <MyLeaveCard style={{ marginTop: theme.space.medium }} />
-    </Screen>
-  );
-};
+      <View style={{ flex: 1 }}>
+        <PoliciesCard
+          style={{
+            flex: 1,
+            backgroundColor: theme.colors.infoLight,
+            marginBottom: theme.space.medium,
+          }}
+          testID="policies"
+        />
+        <CertificationsCard
+          style={{
+            flex: 1,
+            backgroundColor: theme.colors.infoLight,
+          }}
+          testID="certifications"
+        />
+      </View>
+    </View>
+    <RostersCard style={{ marginTop: theme.space.medium }} />
+    <MyLeaveCard style={{ marginTop: theme.space.medium }} />
+    <ApprovalsCardLayout style={{ marginTop: theme.space.medium }} />
+  </ScrollView>
+);
 
 export default CardPlayground;

package/playground/index.tsx

@@ -9,6 +9,7 @@ import { useFonts } from 'expo-font';
 import { SafeAreaView, FlatList, Text } from 'react-native';
 import { ThemeProvider, theme, useTheme } from '../src/index';
 import BadgePlayground from './components/Badge';
+import BottomNavigation from './components/BottomNavigation';
 import CardPlayground from './components/Card';
 import DividerPlayground from './components/Divider';
 import IconPlayground from './components/Icon';
@@ -20,6 +21,7 @@ const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
 type RootStackParamList = {
   Home: undefined;
   Badge: undefined;
+  BottomNavigation: undefined;
   Card: undefined;
   Divider: undefined;
   Icon: undefined;
@@ -33,6 +35,7 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 
 const components = [
   { name: 'Badge', component: BadgePlayground },
+  { name: 'BottomNavigation', component: BottomNavigation },
   { name: 'Card', component: CardPlayground },
   { name: 'Divider', component: DividerPlayground },
   { name: 'Icon', component: IconPlayground },

package/rollup.config.js

@@ -22,7 +22,7 @@ export default {
       format: 'esm',
     },
   ],
-  external: ['react', 'react-native'],
+  external: ['react', 'react-native', 'react-native-safe-area-context'],
   plugins: [
     replace({
       'process.env.NODE_ENV': JSON.stringify('production'),

package/src/components/BottomNavigation/StyledBottomNavigation.tsx

@@ -0,0 +1,58 @@
+import { View } from 'react-native';
+import styled from 'styled-components-native';
+
+const BottomNavigationTab = styled(View)<{ themeVisibility?: boolean }>`
+  flex: 1;
+  display: ${({ themeVisibility }) =>
+    themeVisibility === false ? 'none' : 'flex'};
+`;
+
+const BottomNavigationContainer = styled(View)`
+  flex: 1;
+  overflow: hidden;
+`;
+
+const ContentWrapper = styled(View)`
+  flex: 1;
+`;
+
+const BottomBarWrapper = styled(View)<{
+  themeInsets: { top: number; right: number; bottom: number; left: number };
+}>`
+  height: ${({ theme, themeInsets }) =>
+    theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom}px;
+  padding-bottom: ${({ themeInsets }) => themeInsets.bottom}px;
+  padding-left: ${({ themeInsets }) =>
+    Math.max(themeInsets.left, themeInsets.right)}px;
+  padding-right: ${({ themeInsets }) =>
+    Math.max(themeInsets.left, themeInsets.right)}px;
+  background-color: ${({ theme }) =>
+    theme.__hd__.bottomNavigation.colors.background};
+  shadow-color: ${({ theme }) => theme.__hd__.bottomNavigation.colors.shadow};
+  shadow-offset: ${({ theme }) => theme.__hd__.bottomNavigation.shadows.offset};
+  shadow-opacity: ${({ theme }) =>
+    theme.__hd__.bottomNavigation.shadows.opacity};
+  shadow-radius: ${({ theme }) => theme.__hd__.bottomNavigation.shadows.radius};
+  elevation: ${({ theme }) => theme.__hd__.bottomNavigation.shadows.elevation};
+`;
+
+const BottomBar = styled(View)`
+  flex: 1;
+  flex-direction: row;
+  overflow: hidden;
+  align-items: center;
+`;
+
+const BottomBarItem = styled(View)`
+  flex: 1;
+  align-items: center;
+`;
+
+export {
+  BottomBar,
+  BottomBarItem,
+  BottomNavigationTab,
+  BottomNavigationContainer,
+  BottomBarWrapper,
+  ContentWrapper,
+};

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

@@ -0,0 +1,95 @@
+import React, { ComponentProps } from 'react';
+import { Text } from 'react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import BottomNavigation, { Tab } from '..';
+
+const TestComponent = (
+  props: Omit<
+    ComponentProps<typeof BottomNavigation>,
+    'selectedTabKey' | 'onChange' | 'tabs'
+  >
+) => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('home');
+  const tabs: Tab<string>[] = [
+    {
+      key: 'home',
+      title: 'Home',
+      icon: 'home',
+      component: <Text>Home Screen</Text>,
+    },
+    {
+      key: 'feed',
+      title: 'Feed',
+      icon: 'speaker-outlined',
+      component: <Text>Feed Screen</Text>,
+    },
+    {
+      key: 'alerts',
+      title: 'Alerts',
+      icon: 'bell-outlined',
+      component: <Text>Alerts Screen</Text>,
+    },
+    {
+      key: 'profile',
+      title: 'Profile',
+      icon: 'user-outlined',
+      component: <Text>Profile Screen</Text>,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      <BottomNavigation
+        {...props}
+        tabs={tabs}
+        selectedTabKey={selectedTabKey}
+        onChange={newTabKey => setSelectedTabKey(newTabKey)}
+      />
+    </SafeAreaProvider>
+  );
+};
+
+describe('BottomNavigation', () => {
+  it('renders correctly', () => {
+    const { getByText, toJSON } = renderWithTheme(<TestComponent />);
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Home')).toBeDefined();
+    fireEvent.press(getByText('Feed'));
+    fireEvent.press(getByText('Alerts'));
+    fireEvent.press(getByText('Profile'));
+
+    // All screens are rendered and component is not unmounted when switching screen.
+    expect(getByText('Home Screen')).toBeDefined();
+    expect(getByText('Feed Screen')).toBeDefined();
+    expect(getByText('Alerts Screen')).toBeDefined();
+    expect(getByText('Profile Screen')).toBeDefined();
+  });
+
+  it('renders correctly with renderActiveTabOnly is true', () => {
+    const { getByText, queryByText, getByTestId } = renderWithTheme(
+      <TestComponent renderActiveTabOnly />
+    );
+
+    // Can switch tab by clicking icon.
+    expect(getByText('Home Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-speaker-outlined'));
+    expect(getByText('Feed Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-bell-outlined'));
+    expect(getByText('Alerts Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-user-outlined'));
+    expect(getByText('Profile Screen')).toBeDefined();
+
+    // Only render selected screen, others are unmounted.
+    expect(queryByText('Home Screen')).toBeNull();
+    expect(queryByText('Feed Screen')).toBeNull();
+    expect(queryByText('Alerts Screen')).toBeNull();
+  });
+});