@hero-design/rn 7.2.1 → 7.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.2.1",
+  "version": "7.3.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,11 +20,12 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.2.1"
+    "@hero-design/colors": "7.3.1"
   },
   "peerDependencies": {
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0"
   },
@@ -62,6 +63,7 @@
     "prettier": "^2.5.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-screens": "^3.13.1",
     "react-native-vector-icons": "^9.1.0",

package/playground/components/Avatar.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Alert, View } from 'react-native';
+import { Avatar, Typography, useTheme } from '../../src/index';
+
+const AvatarPlayground = () => {
+  const theme = useTheme();
+  const source = { uri: 'https://i.pravatar.cc/300' };
+  const text = 'MD';
+
+  const createTwoButtonAlert = () =>
+    Alert.alert('Alert Title', 'My Alert Msg', [
+      {
+        text: 'Cancel',
+        onPress: () => {},
+        style: 'cancel',
+      },
+      { text: 'OK', onPress: () => {} },
+    ]);
+
+  return (
+    <View
+      style={{
+        marginVertical: theme.space.medium,
+        marginHorizontal: theme.space.medium,
+      }}
+    >
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Avatar with different sizes
+      </Typography.Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          marginBottom: theme.space.large,
+          alignItems: 'flex-end',
+        }}
+      >
+        <Avatar source={source} />
+        <Avatar
+          source={source}
+          size="medium"
+          style={{ marginLeft: theme.space.xsmall }}
+        />
+        <Avatar
+          source={source}
+          size="large"
+          style={{ marginLeft: theme.space.xsmall }}
+        />
+        <Avatar
+          source={source}
+          size="xlarge"
+          style={{ marginLeft: theme.space.xsmall }}
+        />
+      </View>
+
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Text Avatar with different sizes
+      </Typography.Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          marginBottom: theme.space.large,
+          alignItems: 'flex-end',
+        }}
+      >
+        <Avatar title={text} />
+        <Avatar
+          title={text}
+          size="medium"
+          intent="info"
+          style={{ marginLeft: theme.space.xsmall }}
+        />
+        <Avatar
+          title={text}
+          size="large"
+          intent="success"
+          style={{ marginLeft: theme.space.xsmall }}
+        />
+        <Avatar
+          title={text}
+          size="xlarge"
+          intent="danger"
+          style={{ marginLeft: theme.space.xsmall }}
+        />
+      </View>
+
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Pressable avatar
+      </Typography.Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          marginBottom: theme.space.large,
+          alignItems: 'flex-end',
+        }}
+      >
+        <Avatar source={source} onPress={createTwoButtonAlert} size="large" />
+      </View>
+    </View>
+  );
+};
+
+export default AvatarPlayground;

package/playground/components/Badge.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { View } from 'react-native';
-import { Badge, useTheme } from '../../src/index';
+import { Button, View } from 'react-native';
+import { Badge, Icon, Typography, useTheme } from '../../src/index';
 
 const BadgePlayground = () => {
   const theme = useTheme();
+  const [isVisibleBadge, setIsVisibleBadge] = React.useState(true);
+  const [isVisibleStatusBadge, setIsVisibleStatusBadge] = React.useState(true);
 
   return (
-    <View
-      style={{
-        marginVertical: theme.space.medium,
-        marginHorizontal: theme.space.medium,
-      }}
-    >
+    <View style={{ margin: theme.space.medium }}>
+      <Typography.Text fontWeight="semi-bold">Standalone</Typography.Text>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Text
+      </Typography.Text>
       <View
         style={{
           display: 'flex',
@@ -34,6 +35,7 @@ const BadgePlayground = () => {
         style={{
           display: 'flex',
           flexDirection: 'row',
+          marginBottom: theme.space.small,
         }}
       >
         <Badge
@@ -41,7 +43,142 @@ const BadgePlayground = () => {
           intent="danger"
           style={{ marginEnd: theme.space.small }}
         />
-        <Badge content="SUBMITTED" style={{ marginEnd: theme.space.small }} />
+        <Badge
+          content="SUBMITTED"
+          intent="info"
+          style={{ marginEnd: theme.space.small }}
+        />
+        <Badge
+          content="ARCHIVED"
+          intent="archived"
+          style={{ marginEnd: theme.space.small }}
+        />
+      </View>
+
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Number
+      </Typography.Text>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          marginBottom: theme.space.small,
+        }}
+      >
+        <Badge content={9} style={{ marginEnd: theme.space.small }} />
+        <Badge content={99} style={{ marginEnd: theme.space.small }} />
+        <Badge content={100} />
+      </View>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          marginBottom: theme.space.large,
+        }}
+      >
+        <Badge
+          content={9}
+          style={{ marginEnd: theme.space.small }}
+          intent="success"
+        />
+        <Badge
+          content={9}
+          max={5}
+          style={{ marginEnd: theme.space.small }}
+          intent="warning"
+        />
+        <Badge
+          content={90}
+          max={80}
+          intent="danger"
+          style={{ marginEnd: theme.space.small }}
+        />
+        <Badge
+          content={99}
+          intent="info"
+          style={{ marginEnd: theme.space.small }}
+        />
+        <Badge max={999} content={1000} intent="archived" />
+      </View>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Visible Badge
+      </Typography.Text>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          marginBottom: theme.space.large,
+        }}
+      >
+        <View
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginEnd: theme.space.medium,
+          }}
+        >
+          <Typography.Text style={{ marginEnd: theme.space.small }}>
+            Notes
+          </Typography.Text>
+          <Badge content={1} intent="archived" visible={isVisibleBadge} />
+        </View>
+        <Button
+          title="Click"
+          onPress={() => setIsVisibleBadge(visible => !visible)}
+        />
+      </View>
+
+      <Typography.Text fontWeight="semi-bold">Status</Typography.Text>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          marginBottom: theme.space.small,
+        }}
+      >
+        <Badge.Status style={{ marginEnd: theme.space.small }}>
+          <Icon icon="bell" size="small" />
+        </Badge.Status>
+        <Badge.Status intent="warning" style={{ marginEnd: theme.space.small }}>
+          <Icon icon="bell" size="small" />
+        </Badge.Status>
+        <Badge.Status intent="info" style={{ marginEnd: theme.space.small }}>
+          <Icon icon="bell" size="small" />
+        </Badge.Status>
+        <Badge.Status intent="success" style={{ marginEnd: theme.space.small }}>
+          <Icon icon="bell" size="small" />
+        </Badge.Status>
+        <Badge.Status
+          intent="archived"
+          style={{ marginEnd: theme.space.small }}
+        >
+          <Icon icon="bell" size="small" />
+        </Badge.Status>
+        <Badge.Status style={{ marginEnd: theme.space.small }}>
+          <Typography.Text>Activity</Typography.Text>
+        </Badge.Status>
+      </View>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Visible Status Badge
+      </Typography.Text>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}
+      >
+        <Badge.Status
+          visible={isVisibleStatusBadge}
+          style={{ marginEnd: theme.space.small }}
+        >
+          <Typography.Text>Activity</Typography.Text>
+        </Badge.Status>
+        <Button
+          title="Click"
+          onPress={() => setIsVisibleStatusBadge(visible => !visible)}
+        />
       </View>
     </View>
   );

package/playground/components/Button.tsx

@@ -1,66 +1,169 @@
 import React from 'react';
-import { View } from 'react-native';
+import { ScrollView, 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 }}>
+    <ScrollView style={{ padding: theme.space.small }}>
       <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Different Intents and Sizes from Icon
+        Variants
       </Typography.Text>
       <View
         style={{
-          flexDirection: 'row',
-          alignItems: 'center',
+          flexDirection: 'column',
           marginBottom: theme.space.large,
         }}
       >
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="text"
-          size="xsmall"
+        <View
+          style={{
+            backgroundColor: theme.colors.primary,
+            paddingVertical: theme.space.large,
+            marginBottom: theme.space.medium,
+          }}
+        >
+          <Button
+            text="Basic Transparent"
+            variant="basic-transparent"
+            onPress={() => {}}
+          />
+        </View>
+        <Button
+          text="Primary (Filled)"
+          variant="filled"
+          intent="primary"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.medium }}
+        />
+        <Button
+          text="Secondary (Filled)"
+          variant="filled"
+          intent="secondary"
           onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
+          style={{ marginBottom: theme.space.medium }}
         />
-        <Button.Icon
-          icon="circle-add-outlined"
+        <Button
+          text="Primary (Outlined)"
+          variant="outlined"
           intent="primary"
-          size="xsmall"
           onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
+          style={{ marginBottom: theme.space.medium }}
         />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="success"
-          size="small"
+        <Button
+          text="Secondary (Outlined)"
+          variant="outlined"
+          intent="secondary"
           onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
+          style={{ marginBottom: theme.space.medium }}
         />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="info"
-          size="medium"
+      </View>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        With Icon
+      </Typography.Text>
+      <View
+        style={{
+          flexDirection: 'column',
+          marginBottom: theme.space.large,
+        }}
+      >
+        <Button
+          text="Add Item"
+          variant="filled"
+          intent="primary"
+          icon="add"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.medium }}
+        />
+        <Button
+          text="Delete"
+          variant="filled"
+          intent="primary"
+          icon="trash-bin-outlined"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.medium }}
+        />
+        <Button
+          text="More"
+          variant="outlined"
+          intent="secondary"
+          rightIcon="arrow-down"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.medium }}
+        />
+      </View>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Loading
+      </Typography.Text>
+      <View
+        style={{
+          flexDirection: 'column',
+          marginBottom: theme.space.large,
+        }}
+      >
+        <View
+          style={{
+            backgroundColor: theme.colors.primary,
+            paddingVertical: theme.space.large,
+            marginBottom: theme.space.medium,
+          }}
+        >
+          <Button
+            text="Basic Transparent (Loading)"
+            variant="basic-transparent"
+            onPress={() => {}}
+            loading
+          />
+        </View>
+        <Button
+          text="Filled (Loading)"
+          variant="filled"
+          intent="primary"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.medium }}
+          loading
+        />
+        <Button
+          text="Outlined (Loading)"
+          variant="outlined"
+          intent="primary"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.medium }}
+          loading
+        />
+      </View>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Disabled
+      </Typography.Text>
+      <View
+        style={{
+          flexDirection: 'column',
+          marginBottom: theme.space.large,
+        }}
+      >
+        <Button
+          text="Basic Transparent (Disabled)"
+          variant="basic-transparent"
           onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
+          style={{ marginBottom: theme.space.medium }}
+          disabled
         />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="warning"
-          size="large"
+        <Button
+          text="Filled (Disabled)"
+          variant="filled"
           onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
+          style={{ marginBottom: theme.space.medium }}
+          disabled
         />
-        <Button.Icon
-          icon="circle-add-outlined"
-          intent="danger"
-          size="xlarge"
+        <Button
+          text="Outlined (Disabled)"
+          variant="outlined"
           onPress={() => {}}
-          style={{ marginEnd: theme.space.medium }}
+          style={{ marginBottom: theme.space.medium }}
+          disabled
         />
       </View>
-    </View>
+    </ScrollView>
   );
 };
 

package/playground/components/Card.tsx

@@ -71,13 +71,7 @@ const ApprovalCard = ({ style }: ViewProps) => {
   return (
     <Card
       style={StyleSheet.flatten([
-        {
-          backgroundColor: palette.greyLight90,
-          paddingTop: 0,
-          paddingRight: 0,
-          paddingBottom: 0,
-          paddingLeft: 0,
-        },
+        { backgroundColor: palette.greyLight90 },
         style,
       ])}
     >
@@ -117,7 +111,7 @@ const DashboardCard = ({
   const theme = useTheme();
 
   return (
-    <Card style={style}>
+    <Card style={StyleSheet.flatten([{ padding: theme.space.small }, style])}>
       <View style={{ flex: 1, alignItems: 'flex-end' }}>
         <Icon icon={icon} />
       </View>
@@ -175,6 +169,7 @@ const RostersCard = (props: ViewProps) => {
           flexDirection: 'row',
           alignItems: 'center',
           backgroundColor: palette.greyLight90,
+          padding: theme.space.small,
         },
         style,
       ])}
@@ -184,7 +179,7 @@ const RostersCard = (props: ViewProps) => {
           style={{
             padding: theme.space.small,
             backgroundColor: theme.colors.infoLight,
-            borderRadius: 999,
+            borderRadius: theme.radii.rounded,
           }}
         >
           <Icon icon="calendar-clock" />
@@ -211,10 +206,6 @@ const MyLeaveCard = (props: ViewProps) => {
       style={StyleSheet.flatten([
         {
           backgroundColor: palette.greyLight90,
-          paddingBottom: 0,
-          paddingTop: 0,
-          paddingRight: 0,
-          paddingLeft: 0,
         },
         style,
       ])}
@@ -274,6 +265,35 @@ const MyLeaveCard = (props: ViewProps) => {
   );
 };
 
+const DataCard = ({ style }: ViewProps) => {
+  const theme = useTheme();
+
+  return (
+    <Card variant="data" style={style}>
+      <View style={{ padding: theme.space.medium }}>
+        <Typography.Text fontSize="small" intent="subdued">
+          Update Key Results
+        </Typography.Text>
+        <Typography.Text
+          fontSize="xlarge"
+          fontWeight="semi-bold"
+          style={{ marginTop: theme.space.small }}
+        >
+          CX Global Ready
+        </Typography.Text>
+        <Typography.Text fontSize="small">From 20% to 25%</Typography.Text>
+        <Typography.Text
+          fontSize="small"
+          intent="subdued"
+          style={{ marginTop: theme.space.small }}
+        >
+          Making progress
+        </Typography.Text>
+      </View>
+    </Card>
+  );
+};
+
 const CardPlayground = () => {
   const theme = useTheme();
 
@@ -309,6 +329,12 @@ const CardPlayground = () => {
       <RostersCard style={{ marginTop: theme.space.medium }} />
       <MyLeaveCard style={{ marginTop: theme.space.medium }} />
       <ApprovalCard style={{ marginTop: theme.space.medium }} />
+      <DataCard
+        style={{
+          marginTop: theme.space.medium,
+          backgroundColor: palette.greyLight90,
+        }}
+      />
     </ScrollView>
   );
 };