@hero-design/rn 7.0.6 → 7.1.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.0.6",
+  "version": "7.1.2",
   "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,19 +18,20 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "7.0.6",
+    "@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": {
     "@babel/core": "^7.17.5",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
+    "@babel/preset-typescript": "^7.17.12",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "@rollup/plugin-babel": "^5.3.1",

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,24 +1,108 @@
 import React, { ComponentProps } from 'react';
-import { View, ViewProps, StyleSheet } from 'react-native';
+import {
+  View,
+  ViewProps,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
 import { palette } from '@hero-design/colors';
-import { Card, useTheme, Typography, Icon, Divider } from '../../src/index';
+import { scale, Card, Typography, Icon, Divider, theme } from '../../src/index';
 
-const TextBox = (props: ViewProps) => (
-  <View
-    style={{
-      flex: 1,
-      justifyContent: 'flex-end',
-    }}
-    {...props}
-  />
-);
-
-const Screen = View;
 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,
@@ -26,16 +110,22 @@ const DashboardCard = ({
   title,
   subtitle,
 }: DashboardCardProps) => (
-  <Card testID="inductionContent" style={style}>
+  <Card style={style}>
     <View style={{ flex: 1, alignItems: 'flex-end' }}>
       <Icon icon={icon} />
     </View>
-    <TextBox>
+    <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>
-    </TextBox>
+    </View>
   </Card>
 );
 
@@ -59,14 +149,13 @@ const PoliciesCard = (props: ViewProps) => (
 const CertificationsCard = (props: ViewProps) => (
   <DashboardCard
     icon="file-certified"
-    title="Certification"
+    title="Certifications"
     subtitle="1 to update"
     {...props}
   />
 );
 
-const Payslip = (props: ViewProps) => {
-  const theme = useTheme();
+const RostersCard = (props: ViewProps) => {
   const { style, ...otherProps } = props;
   return (
     <Card
@@ -74,45 +163,35 @@ const Payslip = (props: ViewProps) => {
       style={StyleSheet.flatten([
         {
           flexDirection: 'row',
-          alignItems: 'stretch',
-          backgroundColor: palette.greyLight75,
+          alignItems: 'center',
+          backgroundColor: palette.greyLight90,
         },
         style,
       ])}
     >
-      <View>
+      <View style={{ padding: theme.space.small }}>
         <View
           style={{
             padding: theme.space.small,
-            backgroundColor: '#C0ECE6',
+            backgroundColor: theme.colors.infoLight,
             borderRadius: 999,
-            alignContent: 'stretch',
           }}
         >
-          <Icon icon="coin" />
+          <Icon icon="calendar-clock" />
         </View>
       </View>
       <View style={{ flex: 1, marginLeft: theme.space.small }}>
-        <Typography.Text fontSize="large" fontWeight="semi-bold">
+        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
           Rosters
         </Typography.Text>
-        <Typography.Text fontSize="medium">3 shifts this week</Typography.Text>
-      </View>
-      <View
-        style={{
-          alignItems: 'center',
-          alignContent: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Icon icon="arrow-right" />
+        <Typography.Text fontSize="large">3 shifts this week</Typography.Text>
       </View>
+      <Icon icon="arrow-right" />
     </Card>
   );
 };
 
 const MyLeaveCard = (props: ViewProps) => {
-  const theme = useTheme();
   const { style, ...otherProps } = props;
   return (
     <Card
@@ -129,58 +208,53 @@ const MyLeaveCard = (props: ViewProps) => {
       ])}
     >
       <View
-        testID="header"
         style={{
-          marginHorizontal: theme.space.small,
-          marginTop: theme.space.small,
+          padding: theme.space.medium,
           justifyContent: 'space-between',
           flexDirection: 'row',
         }}
       >
-        <Typography.Text fontSize="large" fontWeight="semi-bold">
+        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
           My Leave
         </Typography.Text>
-
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <Typography.Text fontWeight="semi-bold">Add / view</Typography.Text>
+          <Typography.Text fontSize="large" fontWeight="semi-bold">
+            Add / view
+          </Typography.Text>
           <Icon
             icon="circle-add-outlined"
             size="xsmall"
-            style={{ margin: theme.space.xxsmall }}
+            style={{ marginLeft: theme.space.small }}
           />
         </View>
       </View>
-      <Divider marginVertical="small" />
-      <View testID="content" style={{ margin: theme.space.small }}>
-        <Typography.Text fontSize="medium" fontWeight="semi-bold">
+      <Divider />
+      <View style={{ padding: theme.space.medium }}>
+        <Typography.Text
+          fontSize="large"
+          fontWeight="semi-bold"
+          style={{ marginBottom: theme.space.small }}
+        >
           Leave Balances
         </Typography.Text>
-        <View
-          testID="listItem1"
-          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-        >
-          <Typography.Text>Jury Duty</Typography.Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">Jury Duty</Typography.Text>
           <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
         </View>
-        <View
-          testID="listItem1"
-          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-        >
-          <Typography.Text>Annual Leave</Typography.Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">Annual Leave</Typography.Text>
           <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
         </View>
-        <View
-          testID="listItem1"
-          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-        >
-          <Typography.Text>Values Champion Award</Typography.Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">
+            Values Champion Award
+          </Typography.Text>
           <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
         </View>
-        <View
-          testID="listItem1"
-          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-        >
-          <Typography.Text>Family and Domestic</Typography.Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">
+            Family and Domestic
+          </Typography.Text>
           <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
         </View>
       </View>
@@ -188,51 +262,39 @@ const MyLeaveCard = (props: ViewProps) => {
   );
 };
 
-const CardPlayground = () => {
-  const theme = useTheme();
-  return (
-    <Screen>
-      <View style={{ flexDirection: 'row', height: 250 }}>
-        <View style={{ flex: 1 }}>
-          <InductionCard
-            style={{
-              flex: 1,
-              margin: theme.space.small,
-              backgroundColor: theme.colors.primaryLight,
-            }}
-          />
-        </View>
-        <View style={{ flex: 1 }}>
-          <PoliciesCard
-            style={{
-              flex: 1,
-              backgroundColor: palette.dodgerBlueLight75,
-              margin: theme.space.small,
-            }}
-            testID="policies"
-          />
-          <CertificationsCard
-            style={{
-              flex: 1,
-              margin: theme.space.small,
-              backgroundColor: palette.dodgerBlueLight75,
-            }}
-            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>
-      <Payslip
-        style={{
-          margin: theme.space.small,
-        }}
-      />
-      <MyLeaveCard
-        style={{
-          margin: theme.space.small,
-        }}
-      />
-    </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/components/FAB.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+/* eslint-disable import/no-extraneous-dependencies */
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import { FAB, 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"
+          onPress={() => {
+            setActive(!active);
+          }}
+          animated
+          active={active}
+          style={{
+            position: 'absolute',
+            bottom: Math.max(insets.bottom, theme.space.large),
+            right: theme.space.large,
+          }}
+        />
+
+        <FAB
+          icon="share-1"
+          onPress={() => {
+            alert('button pressed');
+          }}
+          style={{
+            backgroundColor: theme.colors.primary,
+            position: 'absolute',
+            bottom: Math.max(insets.bottom, theme.space.large),
+            left: theme.space.large,
+          }}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default FABPlayground;

package/playground/index.tsx

@@ -6,24 +6,27 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import { useFonts } from 'expo-font';
-/* eslint-enable import/no-extraneous-dependencies */
 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';
 import TypographyPlayground from './components/Typography';
+import FABPlayground from './components/FAB';
 
 const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
 
 type RootStackParamList = {
   Home: undefined;
   Badge: undefined;
+  BottomNavigation: undefined;
   Card: undefined;
   Divider: undefined;
   Icon: undefined;
   Typography: undefined;
+  FAB: undefined;
 };
 
 type Navigation = NativeStackScreenProps<RootStackParamList>;
@@ -32,10 +35,12 @@ 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 },
   { name: 'Typography', component: TypographyPlayground },
+  { name: 'FAB', component: FABPlayground },
 ] as const;
 
 const ComponentItem = ({

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