@hero-design/rn 7.1.1 → 7.1.3-alpha2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.1",
+  "version": "7.1.3-alpha2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "types": "types/index.d.ts",
+  "types": "types/src/index.d.ts",
   "scripts": {
     "lint": "eslint src playground --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
@@ -18,12 +18,13 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "7.1.1",
+    "@hero-design/colors": "7.1.2",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0"
   },
   "devDependencies": {

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,115 @@
 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;
+  title: string;
+  onPress?: () => void;
+  wrapperTestID?: string;
+  countTestID?: string;
+};
+
+const PendingItem = ({
+  count,
+  title,
+  onPress,
+  wrapperTestID,
+  countTestID,
+}: Omit<PendingItemProps, 'isLoading'>) => (
+  <TouchableOpacity
+    onPress={onPress}
+    style={{ flex: 1, padding: theme.space.small }}
+    testID={wrapperTestID}
+  >
+    <Typography.Text
+      fontSize="xlarge"
+      fontWeight="semi-bold"
+      style={{
+        textAlign: 'center',
+        paddingBottom: theme.space.small,
+        color: palette.redLight15,
+      }}
+      testID={countTestID}
+    >
+      {count}
+    </Typography.Text>
+    <Typography.Text style={{ textAlign: 'center', color: palette.greyDark75 }}>
+      {title}
+    </Typography.Text>
+  </TouchableOpacity>
+);
+
+const ApprovalCard = ({ style }: ViewProps) => (
+  <Card
+    style={StyleSheet.flatten([
+      {
+        backgroundColor: palette.greyLight90,
+        paddingTop: 0,
+        paddingRight: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+      },
+      style,
+    ])}
+  >
+    <View
+      style={{
+        backgroundColor: palette.redLight60,
+        display: 'flex',
+        flexDirection: 'row',
+        padding: theme.space.medium,
+      }}
+    >
+      <Icon icon="multiple-users" style={{ marginRight: theme.space.small }} />
+      <Typography.Text fontWeight="semi-bold" fontSize="large">
+        Awaiting your approval
+      </Typography.Text>
+    </View>
+    <View style={{ flex: 1, flexDirection: 'row', padding: theme.space.small }}>
+      <PendingItem count={1} title="Timesheets" />
+      <PendingItem count={2} title="Leave Requests" />
+      <PendingItem count={7} title="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 +138,6 @@ const CertificationsCard = (props: ViewProps) => (
 );
 
 const RostersCard = (props: ViewProps) => {
-  const theme = useTheme();
   const { style, ...otherProps } = props;
   return (
     <Card
@@ -110,7 +174,6 @@ const RostersCard = (props: ViewProps) => {
 };
 
 const MyLeaveCard = (props: ViewProps) => {
-  const theme = useTheme();
   const { style, ...otherProps } = props;
   return (
     <Card
@@ -181,41 +244,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 contentContainerStyle={{ 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 }} />
+    <ApprovalCard style={{ marginTop: theme.space.medium }} />
+  </ScrollView>
+);
 
 export default CardPlayground;

package/playground/components/FAB.tsx

@@ -1,45 +1,47 @@
 import React, { useState } from 'react';
+import { TouchableHighlight } from 'react-native';
 /* eslint-disable import/no-extraneous-dependencies */
-import {
-  SafeAreaProvider,
-  SafeAreaView,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
-import { FAB, useTheme } from '../../src/index';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { FAB, Typography, useTheme } from '../../src/index';
 
 const FABPlayground = (): JSX.Element => {
   const [active, setActive] = useState(false);
-  const insets = useSafeAreaInsets();
   const theme = useTheme();
-
   return (
     <SafeAreaProvider>
-      <SafeAreaView style={{ flex: 1 }} edges={['right', 'left']}>
-        <FAB
-          icon="add"
+      <SafeAreaView style={{ flex: 1 }}>
+        <TouchableHighlight
           onPress={() => {
-            setActive(!active);
+            alert('touched');
           }}
-          animated
-          active={active}
+        >
+          <Typography.Text
+            style={{
+              backgroundColor: theme.colors.dangerBackground,
+              margin: theme.space.xxxlarge,
+            }}
+            fontSize="xlarge"
+            fontWeight="semi-bold"
+          >
+            Content View should be blured when menu list is shown
+          </Typography.Text>
+        </TouchableHighlight>
+        <FAB.ActionGroup
           style={{
-            position: 'absolute',
-            bottom: Math.max(insets.bottom, theme.space.large),
-            right: theme.space.large,
+            marginBottom: theme.space.large,
           }}
-        />
-
-        <FAB
-          icon="share-1"
+          items={[
+            { icon: 'speaker', title: 'Give shout out' },
+            { icon: 'target', title: 'Goal' },
+            { icon: 'plane', title: 'Leave request' },
+            { icon: 'health-bag', title: 'Safety incident' },
+            { icon: 'clock', title: 'Timesheets' },
+          ]}
+          headerTitle="What would you like to create?"
           onPress={() => {
-            alert('button pressed');
-          }}
-          style={{
-            backgroundColor: theme.colors.primary,
-            position: 'absolute',
-            bottom: Math.max(insets.bottom, theme.space.large),
-            left: theme.space.large,
+            setActive(!active);
           }}
+          active={active}
         />
       </SafeAreaView>
     </SafeAreaProvider>

package/playground/components/Typography.tsx

@@ -12,8 +12,10 @@ const TypographyPlayground = () => {
       </Typography.Text>
       <Typography.Text fontSize="large">This is a subtitle</Typography.Text>
       <Typography.Text>This is a 2nd subtitle</Typography.Text>
-      <Typography.Text>This is body text</Typography.Text>
-      <Typography.Text intent="subdued">This is body text</Typography.Text>
+      <Typography.Text fontWeight="light">This is body text</Typography.Text>
+      <Typography.Text intent="subdued" fontWeight="light">
+        This is subdued text
+      </Typography.Text>
     </View>
   );
 };

package/playground/index.tsx

@@ -6,9 +6,10 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import { useFonts } from 'expo-font';
-import { SafeAreaView, FlatList, Text } from 'react-native';
-import { ThemeProvider, theme, useTheme } from '../src/index';
+import { SafeAreaView, FlatList } from 'react-native';
+import { ThemeProvider, theme, useTheme, Typography } 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';
@@ -16,10 +17,14 @@ import TypographyPlayground from './components/Typography';
 import FABPlayground from './components/FAB';
 
 const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
+const beVietnamProLightFont = require('../assets/fonts/be-vietnam-pro-light.ttf');
+const beVietnamProRegularFont = require('../assets/fonts/be-vietnam-pro-regular.ttf');
+const beVietnamProSemiBoldFont = require('../assets/fonts/be-vietnam-pro-semibold.ttf');
 
 type RootStackParamList = {
   Home: undefined;
   Badge: undefined;
+  BottomNavigation: undefined;
   Card: undefined;
   Divider: undefined;
   Icon: undefined;
@@ -33,6 +38,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 },
@@ -49,15 +55,15 @@ const ComponentItem = ({
 }) => {
   const hdTheme = useTheme();
   return (
-    <Text
+    <Typography.Text
+      fontSize="large"
       onPress={onPress}
       style={{
-        marginTop: hdTheme.space.large,
-        fontSize: hdTheme.fontSizes.large,
+        marginTop: hdTheme.space.medium,
       }}
     >
       {name}
-    </Text>
+    </Typography.Text>
   );
 };
 
@@ -90,7 +96,11 @@ const App = () => {
 
   const [fontsLoaded] = useFonts({
     'hero-icons': heroIconFontPath,
+    'Be Vietnam Pro Light': beVietnamProLightFont,
+    'Be Vietnam Pro Regular': beVietnamProRegularFont,
+    'Be Vietnam Pro SemiBold': beVietnamProSemiBoldFont,
   });
+
   if (!fontsLoaded) {
     return null;
   }

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/Badge/StyledBadge.tsx

@@ -23,7 +23,7 @@ const StyledView = styled(View)<{ themeIntent: ThemeIntent }>`
 `;
 
 const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>`
-  font-weight: ${({ theme }) => theme.__hd__.badge.fontWeights.default};
+  font-family: ${({ theme }) => theme.__hd__.badge.fonts.default};
   font-size: ${({ theme }) => theme.__hd__.badge.fontSizes.default};
 
   ${({ themeIntent }) => css`

package/src/components/Badge/__tests__/__snapshots__/Badge.spec.tsx.snap

@@ -29,8 +29,8 @@ exports[`Badge has danger style when intent is danger 1`] = `
     style={
       Object {
         "color": "#de350b",
+        "fontFamily": "Be Vietnam Pro SemiBold",
         "fontSize": 12,
-        "fontWeight": "600",
       }
     }
     themeIntent="danger"
@@ -69,8 +69,8 @@ exports[`Badge has info style when intent is info 1`] = `
     style={
       Object {
         "color": "#4568fb",
+        "fontFamily": "Be Vietnam Pro SemiBold",
         "fontSize": 12,
-        "fontWeight": "600",
       }
     }
     themeIntent="info"
@@ -109,8 +109,8 @@ exports[`Badge has success style when intent is success 1`] = `
     style={
       Object {
         "color": "#017d6d",
+        "fontFamily": "Be Vietnam Pro SemiBold",
         "fontSize": 12,
-        "fontWeight": "600",
       }
     }
     themeIntent="success"
@@ -149,8 +149,8 @@ exports[`Badge has warning style when intent is warning 1`] = `
     style={
       Object {
         "color": "#d98a2c",
+        "fontFamily": "Be Vietnam Pro SemiBold",
         "fontSize": 12,
-        "fontWeight": "600",
       }
     }
     themeIntent="warning"

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,
+};