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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha6",
+  "version": "7.1.3-alpha7",
   "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,7 +30,7 @@ const ProfileScreen = () => (
   </View>
 );
 
-const tabs: Tab[] = [
+const tabs: BottomNavigationTabType[] = [
   {
     key: 'home',
     title: 'Home',

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/FAB.tsx

@@ -28,15 +28,12 @@ const FABPlayground = (): JSX.Element => {
         </TouchableHighlight>
         <FAB.ActionGroup
           style={{
-            marginBottom: theme.space.medium,
+            marginBottom: theme.space.large,
           }}
           items={[
-            { icon: 'coin', title: 'Expense Claim' },
             { icon: 'speaker', title: 'Give shout out' },
             { icon: 'target', title: 'Goal' },
             { icon: 'plane', title: 'Leave request' },
-            { icon: 'reply', title: 'Memeber Feedback' },
-            { icon: 'star-medal', title: 'Recognition teammate' },
             { icon: 'health-bag', title: 'Safety incident' },
             { icon: 'clock', title: 'Timesheets' },
           ]}

package/playground/components/Tabs.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { Tab } from '../../src/components/Tabs';
-import { Tabs, Typography } from '../../src/index';
+import { Tabs, Typography, TabType } from '../../src/index';
 
 const WorkScreen = () => (
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -15,7 +14,7 @@ const PersonalScreen = () => (
   </View>
 );
 
-const tabs: Tab[] = [
+const tabs: TabType[] = [
   {
     key: 'work',
     title: 'Work',

package/playground/index.tsx

@@ -102,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,6 +1,5 @@
-import { View } from 'react-native';
-import styled, { css } from 'styled-components-native';
-import Typography from '../Typography';
+import { View, Text } from 'react-native';
+import styled from '@emotion/native';
 
 const BACKGROUND_INTENTS = {
   success: 'successBackground',
@@ -11,22 +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(Typography.Text)<{ themeIntent: ThemeIntent }>`
-  ${({ 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 };

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

@@ -1,14 +1,11 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ThemeProvider, theme } from '../../../index';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Badge from '..';
 
 describe('Badge', () => {
   it('has success style when intent is success', () => {
-    const { getByText, toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Badge content="APPROVED" intent="success" />
-      </ThemeProvider>
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="APPROVED" intent="success" />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -16,10 +13,8 @@ describe('Badge', () => {
   });
 
   it('has warning style when intent is warning', () => {
-    const { getByText, toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Badge content="PENDING" intent="warning" />
-      </ThemeProvider>
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="PENDING" intent="warning" />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -27,10 +22,8 @@ describe('Badge', () => {
   });
 
   it('has danger style when intent is danger', () => {
-    const { getByText, toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Badge content="DECLINED" intent="danger" />
-      </ThemeProvider>
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="DECLINED" intent="danger" />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -38,10 +31,8 @@ describe('Badge', () => {
   });
 
   it('has info style when intent is info', () => {
-    const { getByText, toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Badge content="SUBMITTED" intent="info" />
-      </ThemeProvider>
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="SUBMITTED" intent="info" />
     );
 
     expect(toJSON()).toMatchSnapshot();