@hero-design/rn 7.2.2 → 7.3.0

package/playground/components/Drawer.tsx

@@ -0,0 +1,32 @@
+import { Button, SafeAreaView, Text, View } from 'react-native';
+import React, { useState } from 'react';
+
+import { Drawer } from '../../src/index';
+
+const DrawerContent = () => (
+  <View style={{ padding: 30 }}>
+    <Text>Drawer Content</Text>
+    <Text>Drawer Content</Text>
+    <Text>Drawer Content</Text>
+    <Text>Drawer Content</Text>
+    <Text>Drawer Content</Text>
+    <Text>Drawer Content</Text>
+  </View>
+);
+
+const DrawerPlayground = () => {
+  const [visible, setVisibility] = useState(false);
+
+  return (
+    <SafeAreaView
+      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
+    >
+      <Drawer visible={visible} onDismiss={() => setVisibility(false)}>
+        <DrawerContent />
+      </Drawer>
+      <Button title="Toggle Drawer" onPress={() => setVisibility(!visible)} />
+    </SafeAreaView>
+  );
+};
+
+export default DrawerPlayground;

package/playground/components/FAB.tsx

@@ -43,6 +43,21 @@ const FABPlayground = (): JSX.Element => {
           }}
           active={active}
         />
+
+        <FAB
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            marginLeft: theme.space.large,
+            marginBottom: theme.space.large,
+          }}
+          onPress={() => {
+            alert('pressed shout out');
+          }}
+          title="Shout out"
+          icon="pencil"
+          animated
+        />
       </SafeAreaView>
     </SafeAreaProvider>
   );

package/playground/components/IconButton.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Button, Typography, useTheme } from '../../src/index';
+
+const IconButtonPlayground = (): 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 IconButtonPlayground;

package/playground/components/Progress.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { View, Button } from 'react-native';
+import { Progress, Typography, useTheme } from '../../src/index';
+
+const ProgressPlayground = () => {
+  const [progress, setProgress] = useState(0);
+  const theme = useTheme();
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View
+        style={{ alignItems: 'center', paddingVertical: theme.space.xlarge }}
+      >
+        <Typography.Text
+          fontSize="large"
+          style={{ marginBottom: theme.space.small }}
+        >
+          Progress Circle
+        </Typography.Text>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <Progress.Circle value={progress} />
+          <Progress.Circle value={progress} intent="success" />
+          <Progress.Circle value={progress} intent="warning" />
+        </View>
+
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <Progress.Circle value={progress} intent="danger" />
+          <Progress.Circle value={progress} intent="info" />
+        </View>
+      </View>
+      <View
+        style={{ alignItems: 'center', paddingVertical: theme.space.small }}
+      >
+        <Typography.Text
+          fontSize="large"
+          style={{ marginBottom: theme.space.small }}
+        >
+          Progress Bar
+        </Typography.Text>
+        <Progress.Bar
+          value={progress}
+          style={{ marginBottom: theme.space.small }}
+        />
+        <Progress.Bar
+          value={progress}
+          intent="success"
+          style={{ marginBottom: theme.space.small }}
+        />
+        <Progress.Bar
+          value={progress}
+          intent="warning"
+          style={{ marginBottom: theme.space.small }}
+        />
+        <Progress.Bar
+          value={progress}
+          intent="danger"
+          style={{ marginBottom: theme.space.small }}
+        />
+        <Progress.Bar
+          value={progress}
+          intent="info"
+          style={{ marginBottom: theme.space.small }}
+        />
+      </View>
+      <View style={{ alignItems: 'center', padding: theme.space.xlarge }}>
+        <View
+          style={{
+            flexDirection: 'row',
+            width: '80%',
+            justifyContent: 'space-around',
+          }}
+        >
+          <Button
+            title="Random Value"
+            onPress={() => setProgress(Math.floor(Math.random() * 100))}
+          />
+          <Button title="Min" onPress={() => setProgress(0)} />
+          <Button title="Max" onPress={() => setProgress(100)} />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default ProgressPlayground;

package/playground/components/Tabs.tsx

@@ -1,31 +1,121 @@
 import React from 'react';
 import { View } from 'react-native';
-import { Tabs, Typography, TabType } from '../../src/index';
+import {
+  Tabs,
+  Typography,
+  TabType,
+  Icon,
+  useTheme,
+  IconName,
+} from '../../src/index';
 
-const WorkScreen = () => (
+const CustomScreen = ({ title }: { title: string }) => (
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Typography.Text>Work Screen</Typography.Text>
+    <Typography.Text>{title}</Typography.Text>
   </View>
 );
 
-const PersonalScreen = () => (
-  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Typography.Text>Personal Screen</Typography.Text>
-  </View>
-);
+const CustomItem = ({
+  color,
+  icon,
+  title,
+}: {
+  color: string;
+  icon: IconName;
+  title: string;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <View style={{ display: 'flex', flexDirection: 'row' }}>
+      <Icon
+        icon={icon}
+        size="small"
+        style={{ color, marginEnd: theme.space.small }}
+      />
+      <Typography.Text
+        fontWeight="semi-bold"
+        numberOfLines={1}
+        style={{ color }}
+      >
+        {title}
+      </Typography.Text>
+    </View>
+  );
+};
+
+const workTabs: TabType[] = [
+  {
+    key: 'activity',
+    activeItem: 'Activity',
+    component: <CustomScreen title="Activity" />,
+    showBadge: true,
+  },
+  {
+    key: 'news',
+    activeItem: `What's new`,
+    component: <CustomScreen title="News" />,
+  },
+];
+
+const WorkScreen = () => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('activity');
+
+  return (
+    <Tabs
+      onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
+      selectedTabKey={selectedTabKey}
+      tabs={workTabs}
+    />
+  );
+};
 
 const tabs: TabType[] = [
   {
     key: 'work',
-    title: 'Work',
-    icon: 'suitcase',
+    activeItem: ({ color }) => (
+      <CustomItem color={color} icon="home-outlined" title="Home" />
+    ),
+    inactiveItem: 'home-outlined',
     component: <WorkScreen />,
   },
   {
     key: 'personal',
-    title: 'Personal',
-    icon: 'face-smiley',
-    component: <PersonalScreen />,
+    activeItem: ({ color }) => (
+      <CustomItem color={color} icon="bell-outlined" title="Notifications" />
+    ),
+    inactiveItem: 'bell-outlined',
+    component: <CustomScreen title="Notifications Screen" />,
+    showBadge: true,
+  },
+  {
+    key: 'speaker',
+    activeItem: ({ color }) => (
+      <CustomItem color={color} icon="speaker-outlined" title="Shoutouts" />
+    ),
+    inactiveItem: 'speaker-outlined',
+    component: <CustomScreen title="Shoutouts Screen" />,
+  },
+  {
+    key: 'payslips',
+    activeItem: 'Payslips',
+    component: <CustomScreen title="Payslips Screen" />,
+  },
+  {
+    key: 'leave',
+    activeItem: 'Leave',
+    component: <CustomScreen title="Leave Screen" />,
+    showBadge: true,
+  },
+  {
+    key: 'rosters',
+    activeItem: 'Rosters',
+    component: <CustomScreen title="Rosters Screen" />,
+  },
+  {
+    key: 'timesheets',
+    activeItem: 'Timesheets',
+    component: <CustomScreen title="Timesheets Screen" />,
   },
 ];
 
@@ -33,10 +123,12 @@ const TabsPlayground = () => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('work');
 
   return (
-    <Tabs
+    <Tabs.Scroll
       onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       selectedTabKey={selectedTabKey}
       tabs={tabs}
+      lazy
+      lazyPreloadDistance={3}
     />
   );
 };

package/playground/components/Tag.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Tag, useTheme } from '../../src/index';
+
+const TagPlayground = () => {
+  const theme = useTheme();
+
+  return (
+    <View style={{ margin: theme.space.medium }}>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          marginBottom: theme.space.small,
+        }}
+      >
+        <Tag
+          content="APPROVED"
+          intent="success"
+          style={{ marginEnd: theme.space.small }}
+        />
+        <Tag
+          content="PENDING"
+          intent="warning"
+          style={{ marginEnd: theme.space.small }}
+        />
+      </View>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+        }}
+      >
+        <Tag
+          content="DECLINED"
+          intent="danger"
+          style={{ marginEnd: theme.space.small }}
+        />
+        <Tag content="SUBMITTED" style={{ marginEnd: theme.space.small }} />
+      </View>
+    </View>
+  );
+};
+
+export default TagPlayground;

package/playground/index.tsx

@@ -15,14 +15,20 @@ import {
   Icon,
   Divider,
 } from '../src/index';
+import AvatarPlayground from './components/Avatar';
 import BadgePlayground from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import Button from './components/Button';
 import CardPlayground from './components/Card';
+import CollapsePlayground from './components/Collapse';
 import DividerPlayground from './components/Divider';
+import DrawerPlayground from './components/Drawer';
 import FABPlayground from './components/FAB';
 import IconPlayground from './components/Icon';
+import IconButtonPlayground from './components/IconButton';
+import ProgressPlayground from './components/Progress';
 import TabsPlayground from './components/Tabs';
+import TagPlayground from './components/Tag';
 import TypographyPlayground from './components/Typography';
 
 const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
@@ -31,15 +37,21 @@ const beVietnamProRegularFont = require('../assets/fonts/be-vietnam-pro-regular.
 const beVietnamProSemiBoldFont = require('../assets/fonts/be-vietnam-pro-semibold.ttf');
 
 type RootStackParamList = {
+  Avatar: undefined;
   Badge: undefined;
   BottomNavigation: undefined;
   Button: undefined;
   Card: undefined;
+  Collapse: undefined;
   Divider: undefined;
+  Drawer: undefined;
   FAB: undefined;
   Home: undefined;
   Icon: undefined;
+  IconButton: undefined;
+  Progress: undefined;
   Tabs: undefined;
+  Tag: undefined;
   Typography: undefined;
 };
 
@@ -48,14 +60,20 @@ type Navigation = NativeStackScreenProps<RootStackParamList>;
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
 const components = [
+  { name: 'Avatar', component: AvatarPlayground },
   { name: 'Badge', component: BadgePlayground },
   { name: 'BottomNavigation', component: BottomNavigation },
   { name: 'Button', component: Button },
   { name: 'Card', component: CardPlayground },
+  { name: 'Collapse', component: CollapsePlayground },
   { name: 'Divider', component: DividerPlayground },
+  { name: 'Drawer', component: DrawerPlayground },
   { name: 'FAB', component: FABPlayground },
   { name: 'Icon', component: IconPlayground },
+  { name: 'IconButton', component: IconButtonPlayground },
+  { name: 'Progress', component: ProgressPlayground },
   { name: 'Tabs', component: TabsPlayground },
+  { name: 'Tag', component: TagPlayground },
   { name: 'Typography', component: TypographyPlayground },
 ] as const;
 

package/src/components/Avatar/StyledAvatar.tsx

@@ -0,0 +1,61 @@
+import { View, Image, TouchableOpacity, Text } from 'react-native';
+import styled from '@emotion/native';
+
+type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge';
+type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+
+const StyledPressable = styled(TouchableOpacity)<{
+  themeSize: ThemeSize;
+  themeIntent: ThemeIntent;
+}>(({ themeSize, themeIntent, theme }) => ({
+  borderWidth: theme.__hd__.avatar.borderWidths.default,
+  borderRadius: theme.__hd__.avatar.radii[themeSize],
+  borderColor: theme.__hd__.avatar.colors[themeIntent],
+  width: theme.__hd__.avatar.sizes[themeSize],
+  height: theme.__hd__.avatar.sizes[themeSize],
+  overflow: 'hidden',
+}));
+
+const StyledView = styled(View)<{
+  themeSize: ThemeSize;
+  themeIntent: ThemeIntent;
+}>(({ themeSize, themeIntent, theme }) => ({
+  borderWidth: theme.__hd__.avatar.borderWidths.default,
+  borderRadius: theme.__hd__.avatar.radii[themeSize],
+  borderColor: theme.__hd__.avatar.colors[themeIntent],
+  width: theme.__hd__.avatar.sizes[themeSize],
+  height: theme.__hd__.avatar.sizes[themeSize],
+  overflow: 'hidden',
+}));
+
+const StyledTextWrapper = styled(View)(() => ({
+  alignItems: 'center',
+  justifyContent: 'center',
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+}));
+
+const StyledText = styled(Text)<{
+  themeSize: ThemeSize;
+  themeIntent: ThemeIntent;
+}>(({ themeSize, themeIntent, theme }) => ({
+  fontSize: theme.__hd__.avatar.fontSizes[themeSize],
+  color: theme.__hd__.avatar.colors[themeIntent],
+  overflow: 'hidden',
+}));
+
+const StyledImage = styled(Image)<{
+  themeSize: ThemeSize;
+}>(({ themeSize, theme }) => ({
+  width: theme.__hd__.avatar.sizes[themeSize],
+  height: theme.__hd__.avatar.sizes[themeSize],
+}));
+
+export {
+  StyledPressable,
+  StyledView,
+  StyledImage,
+  StyledTextWrapper,
+  StyledText,
+};

package/src/components/Avatar/__tests__/StyledAvatar.spec.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import {
+  StyledView,
+  StyledPressable,
+  StyledImage,
+  StyledText,
+} from '../StyledAvatar';
+
+describe('StyledPressable', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledPressable themeIntent="primary" themeSize="small" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledView', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledView themeIntent="primary" themeSize="small" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledText', () => {
+  it('renders correct style', () => {
+    const text = 'MD';
+    const { toJSON } = renderWithTheme(
+      <StyledText themeSize="small" themeIntent="primary">
+        {text}
+      </StyledText>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledImage', () => {
+  it('renders correct style', () => {
+    const source = 'https://i.pravatar.cc/300';
+    const { toJSON } = renderWithTheme(
+      <StyledImage themeSize="small" source={{ uri: source }} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledImage renders correct style 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "https://i.pravatar.cc/300",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "height": 32,
+        "width": 32,
+      },
+      undefined,
+    ]
+  }
+  themeSize="small"
+/>
+`;
+
+exports[`StyledPressable renders correct style 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#7622d7",
+      "borderRadius": 16,
+      "borderWidth": 1,
+      "height": 32,
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 32,
+    }
+  }
+/>
+`;
+
+exports[`StyledText renders correct style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#7622d7",
+        "fontSize": 16,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+  themeSize="small"
+>
+  MD
+</Text>
+`;
+
+exports[`StyledView renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#7622d7",
+        "borderRadius": 16,
+        "borderWidth": 1,
+        "height": 32,
+        "overflow": "hidden",
+        "width": 32,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+  themeSize="small"
+/>
+`;