@hero-design/rn 7.2.0 → 7.3.0

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;

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();
+  });
+});