@hero-design/rn 7.2.2 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.2.2",
+  "version": "7.3.0",
   "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.2"
+    "@hero-design/colors": "7.3.0"
   },
   "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

@@ -179,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" />
@@ -265,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();
 
@@ -300,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>
   );
 };

package/playground/components/Collapse.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback } from 'react';
+import { Text, View } from 'react-native';
+import palette from '@hero-design/colors';
+import {
+  Avatar,
+  Typography,
+  useTheme,
+  Button,
+  Card,
+  Collapse,
+} from '../../src/index';
+
+const CollapsePlayground = () => {
+  const theme = useTheme();
+  const source = { uri: 'https://i.pravatar.cc/300' };
+  const [isCollapsed, setIsCollapsed] = React.useState<boolean>(true);
+
+  const toggleContent = useCallback(() => {
+    setIsCollapsed(!isCollapsed);
+  }, [isCollapsed]);
+
+  return (
+    <View
+      style={{
+        marginVertical: theme.space.medium,
+        marginHorizontal: theme.space.medium,
+      }}
+    >
+      <Typography.Text style={{ marginBottom: theme.space.small }}>
+        Integrate as Accordion example
+      </Typography.Text>
+      <View>
+        <Card
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            backgroundColor: palette.greyLight90,
+            padding: theme.space.medium,
+            ...(isCollapsed
+              ? {}
+              : {
+                  borderBottomEndRadius: 0,
+                  borderBottomStartRadius: 0,
+                }),
+          }}
+        >
+          <View
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <Avatar source={source} />
+            <View
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                marginLeft: theme.space.medium,
+              }}
+            >
+              <Typography.Text fontSize="large">Rob Dunn</Typography.Text>
+              <Typography.Text fontSize="small" intent="subdued">
+                3 OKRS
+              </Typography.Text>
+            </View>
+          </View>
+          <Button.Icon
+            icon={`carat-${isCollapsed ? 'left' : 'down'}`}
+            intent="text"
+            size="xsmall"
+            onPress={toggleContent}
+            style={{ padding: theme.space.small }}
+          />
+        </Card>
+        <Collapse
+          open={!isCollapsed}
+          style={{
+            backgroundColor: palette.greyLight90,
+          }}
+        >
+          <View
+            style={{
+              padding: theme.space.large,
+              borderTopWidth: theme.space.xxsmall,
+              borderTopColor: palette.greyLight85,
+            }}
+          >
+            <Text>Hidden Content</Text>
+          </View>
+        </Collapse>
+      </View>
+    </View>
+  );
+};
+
+export default CollapsePlayground;