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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha5",
+  "version": "7.1.3-alpha8",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -18,8 +18,9 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "7.1.2",
-    "styled-components": "6.0.0-alpha.5"
+    "@emotion/native": "^11.9.3",
+    "@emotion/react": "^11.9.3",
+    "@hero-design/colors": "7.1.2"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -32,6 +33,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.17.12",
+    "@emotion/jest": "^11.9.3",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "@rollup/plugin-babel": "^5.3.1",
@@ -46,11 +48,8 @@
     "@types/react": "^17.0.39",
     "@types/react-native": "^0.66.16",
     "@types/react-native-vector-icons": "^6.4.10",
-    "@types/styled-components": "^5.1.24",
-    "@types/styled-components-react-native": "^5.1.3",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
-    "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^8.9.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
@@ -60,7 +59,6 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "expo": "^44.0.6",
     "jest": "^27.3.1",
-    "jest-styled-components": "^7.0.6",
     "prettier": "^2.5.1",
     "react": "17.0.2",
     "react-native": "0.65.1",

package/playground/components/BottomNavigation.tsx

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

package/playground/components/Button.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Button, Typography, useTheme } from '../../src/index';
+
+const ButtonPlayground = (): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <View style={{ padding: theme.space.small }}>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Different Intents and Sizes from Icon
+      </Typography.Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: theme.space.large,
+        }}
+      >
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="text"
+          size="xsmall"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="primary"
+          size="xsmall"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="success"
+          size="small"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="info"
+          size="medium"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="warning"
+          size="large"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="danger"
+          size="xlarge"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ButtonPlayground;

package/playground/components/Card.tsx

@@ -7,7 +7,14 @@ import {
   ScrollView,
 } from 'react-native';
 import { palette } from '@hero-design/colors';
-import { scale, Card, Typography, Icon, Divider, theme } from '../../src/index';
+import {
+  scale,
+  Card,
+  Typography,
+  Icon,
+  Divider,
+  useTheme,
+} from '../../src/index';
 
 type DashboardCardProps = ViewProps & {
   icon: ComponentProps<typeof Icon>['icon'];
@@ -28,88 +35,107 @@ const PendingItem = ({
   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>
-);
+}: Omit<PendingItemProps, 'isLoading'>) => {
+  const theme = useTheme();
 
-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,
-      }}
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={{ flex: 1, padding: theme.space.small }}
+      testID={wrapperTestID}
     >
-      <Icon icon="multiple-users" style={{ marginRight: theme.space.small }} />
-      <Typography.Text fontWeight="semi-bold" fontSize="large">
-        Awaiting your approval
+      <Typography.Text
+        fontSize="xlarge"
+        fontWeight="semi-bold"
+        style={{
+          textAlign: 'center',
+          paddingBottom: theme.space.small,
+          color: palette.redLight15,
+        }}
+        testID={countTestID}
+      >
+        {count}
       </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>
-);
+      <Typography.Text
+        style={{ textAlign: 'center', color: palette.greyDark75 }}
+      >
+        {title}
+      </Typography.Text>
+    </TouchableOpacity>
+  );
+};
+
+const ApprovalCard = ({ style }: ViewProps) => {
+  const theme = useTheme();
+
+  return (
+    <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) => (
-  <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) => {
+  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>
+  );
+};
 
 const InductionCard = (props: ViewProps) => (
   <DashboardCard
@@ -138,7 +164,9 @@ const CertificationsCard = (props: ViewProps) => (
 );
 
 const RostersCard = (props: ViewProps) => {
+  const theme = useTheme();
   const { style, ...otherProps } = props;
+
   return (
     <Card
       {...otherProps}
@@ -174,7 +202,9 @@ const RostersCard = (props: ViewProps) => {
 };
 
 const MyLeaveCard = (props: ViewProps) => {
+  const theme = useTheme();
   const { style, ...otherProps } = props;
+
   return (
     <Card
       {...otherProps}
@@ -244,39 +274,43 @@ const MyLeaveCard = (props: ViewProps) => {
   );
 };
 
-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>
-      <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"
-        />
+const CardPlayground = () => {
+  const theme = useTheme();
+
+  return (
+    <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>
+        <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>
-    </View>
-    <RostersCard style={{ marginTop: theme.space.medium }} />
-    <MyLeaveCard style={{ marginTop: theme.space.medium }} />
-    <ApprovalCard style={{ marginTop: theme.space.medium }} />
-  </ScrollView>
-);
+      <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/Tabs.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Tabs, Typography, TabType } from '../../src/index';
+
+const WorkScreen = () => (
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Typography.Text>Work Screen</Typography.Text>
+  </View>
+);
+
+const PersonalScreen = () => (
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Typography.Text>Personal Screen</Typography.Text>
+  </View>
+);
+
+const tabs: TabType[] = [
+  {
+    key: 'work',
+    title: 'Work',
+    icon: 'suitcase',
+    component: <WorkScreen />,
+  },
+  {
+    key: 'personal',
+    title: 'Personal',
+    icon: 'face-smiley',
+    component: <PersonalScreen />,
+  },
+];
+
+const TabsPlayground = () => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('work');
+
+  return (
+    <Tabs
+      onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
+      selectedTabKey={selectedTabKey}
+      tabs={tabs}
+    />
+  );
+};
+
+export default TabsPlayground;

package/playground/index.tsx

@@ -10,11 +10,13 @@ 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 Button from './components/Button';
 import CardPlayground from './components/Card';
 import DividerPlayground from './components/Divider';
+import FABPlayground from './components/FAB';
 import IconPlayground from './components/Icon';
+import TabsPlayground from './components/Tabs';
 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');
@@ -22,14 +24,16 @@ const beVietnamProRegularFont = require('../assets/fonts/be-vietnam-pro-regular.
 const beVietnamProSemiBoldFont = require('../assets/fonts/be-vietnam-pro-semibold.ttf');
 
 type RootStackParamList = {
-  Home: undefined;
   Badge: undefined;
   BottomNavigation: undefined;
+  Button: undefined;
   Card: undefined;
   Divider: undefined;
+  FAB: undefined;
+  Home: undefined;
   Icon: undefined;
+  Tabs: undefined;
   Typography: undefined;
-  FAB: undefined;
 };
 
 type Navigation = NativeStackScreenProps<RootStackParamList>;
@@ -39,11 +43,13 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 const components = [
   { name: 'Badge', component: BadgePlayground },
   { name: 'BottomNavigation', component: BottomNavigation },
+  { name: 'Button', component: Button },
   { name: 'Card', component: CardPlayground },
   { name: 'Divider', component: DividerPlayground },
+  { name: 'FAB', component: FABPlayground },
   { name: 'Icon', component: IconPlayground },
+  { name: 'Tabs', component: TabsPlayground },
   { name: 'Typography', component: TypographyPlayground },
-  { name: 'FAB', component: FABPlayground },
 ] as const;
 
 const ComponentItem = ({
@@ -96,9 +102,9 @@ const App = () => {
 
   const [fontsLoaded] = useFonts({
     'hero-icons': heroIconFontPath,
-    'Be Vietnam Pro Light': beVietnamProLightFont,
-    'Be Vietnam Pro Regular': beVietnamProRegularFont,
-    'Be Vietnam Pro SemiBold': beVietnamProSemiBoldFont,
+    'BeVietnamPro-Light': beVietnamProLightFont,
+    'BeVietnamPro-Regular': beVietnamProRegularFont,
+    'BeVietnamPro-SemiBold': beVietnamProSemiBoldFont,
   });
 
   if (!fontsLoaded) {

package/src/components/Badge/StyledBadge.tsx

@@ -1,5 +1,5 @@
-import { Text, View } from 'react-native';
-import styled, { css } from 'styled-components-native';
+import { View, Text } from 'react-native';
+import styled from '@emotion/native';
 
 const BACKGROUND_INTENTS = {
   success: 'successBackground',
@@ -10,25 +10,23 @@ const BACKGROUND_INTENTS = {
 
 type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
 
-const StyledView = styled(View)<{ themeIntent: ThemeIntent }>`
-  border-width: ${({ theme }) => theme.__hd__.badge.borderWidths.default};
-  border-radius: ${({ theme }) => theme.__hd__.badge.radii.default};
-  padding: ${({ theme }) => theme.__hd__.badge.padding.default};
+const StyledView = styled(View)<{ themeIntent: ThemeIntent }>(
+  ({ themeIntent, theme }) => ({
+    borderWidth: theme.__hd__.badge.borderWidths.default,
+    borderRadius: theme.__hd__.badge.radii.default,
+    paddingVertical: theme.__hd__.badge.space.verticalPadding,
+    paddingHorizontal: theme.__hd__.badge.space.horizontalPadding,
+    borderColor: theme.__hd__.badge.colors[themeIntent],
+    backgroundColor: theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]],
+  })
+);
 
-  ${({ themeIntent }) => css`
-    border-color: ${({ theme }) => theme.__hd__.badge.colors[themeIntent]};
-    background-color: ${({ theme }) =>
-      theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]]};
-  `};
-`;
-
-const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>`
-  font-family: ${({ theme }) => theme.__hd__.badge.fonts.default};
-  font-size: ${({ theme }) => theme.__hd__.badge.fontSizes.default};
-
-  ${({ themeIntent }) => css`
-    color: ${({ theme }) => theme.__hd__.badge.colors[themeIntent]};
-  `};
-`;
+const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>(
+  ({ themeIntent, theme }) => ({
+    fontFamily: theme.__hd__.badge.font.default,
+    fontSize: theme.__hd__.badge.fontSize.default,
+    color: theme.__hd__.badge.colors[themeIntent],
+  })
+);
 
 export { StyledView, StyledText };