@hero-design/rn 7.3.2 → 7.4.0

package/playground/{index.tsx → src/App.tsx}

@@ -5,7 +5,7 @@ import {
   createNativeStackNavigator,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
-import { useFonts } from 'expo-font';
+import { loadAsync } from 'expo-font';
 import { SafeAreaView, FlatList, View, TouchableOpacity } from 'react-native';
 import {
   ThemeProvider,
@@ -14,35 +14,44 @@ import {
   Typography,
   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';
+} from '@hero-design/rn';
 
-const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
-const beVietnamProLightFont = require('../assets/fonts/be-vietnam-pro-light.ttf');
-const beVietnamProRegularFont = require('../assets/fonts/be-vietnam-pro-regular.ttf');
-const beVietnamProSemiBoldFont = require('../assets/fonts/be-vietnam-pro-semibold.ttf');
+import AvatarPlayground from './Avatar';
+import BadgePlayground from './Badge';
+import BottomNavigation from './BottomNavigation';
+import BottomSheet from './BottomSheet';
+import Button from './Button';
+import CardPlayground from './Card';
+import CollapsePlayground from './Collapse';
+import ContentNavigatorPlayground from './ContentNavigator';
+import DividerPlayground from './Divider';
+import DrawerPlayground from './Drawer';
+import FABPlayground from './FAB';
+import IconPlayground from './Icon';
+import IconButtonPlayground from './IconButton';
+import ProgressPlayground from './Progress';
+import SpinnerPlayground from './Spinner';
+import SectionHeadingPlayground from './SectionHeading';
+import RadioPlayground from './Radio';
+import TabsPlayground from './Tabs';
+import TagPlayground from './Tag';
+import TextInputPlayground from './TextInput';
+import TypographyPlayground from './Typography';
+
+const heroIconFontPath = require('@hero-design/rn/assets/fonts/hero-icons.ttf');
+const beVietnamProLightFont = require('@hero-design/rn/assets/fonts/be-vietnam-pro-light.ttf');
+const beVietnamProRegularFont = require('@hero-design/rn/assets/fonts/be-vietnam-pro-regular.ttf');
+const beVietnamProSemiBoldFont = require('@hero-design/rn/assets/fonts/be-vietnam-pro-semibold.ttf');
 
 type RootStackParamList = {
   Avatar: undefined;
   Badge: undefined;
   BottomNavigation: undefined;
+  BottomSheet: undefined;
   Button: undefined;
   Card: undefined;
   Collapse: undefined;
+  ContentNavigator: undefined;
   Divider: undefined;
   Drawer: undefined;
   FAB: undefined;
@@ -50,8 +59,12 @@ type RootStackParamList = {
   Icon: undefined;
   IconButton: undefined;
   Progress: undefined;
+  Spinner: undefined;
+  Radio: undefined;
+  SectionHeading: undefined;
   Tabs: undefined;
   Tag: undefined;
+  TextInput: undefined;
   Typography: undefined;
 };
 
@@ -63,22 +76,29 @@ const components = [
   { name: 'Avatar', component: AvatarPlayground },
   { name: 'Badge', component: BadgePlayground },
   { name: 'BottomNavigation', component: BottomNavigation },
+  { name: 'BottomSheet', component: BottomSheet },
   { name: 'Button', component: Button },
   { name: 'Card', component: CardPlayground },
   { name: 'Collapse', component: CollapsePlayground },
+  { name: 'ContentNavigator', component: ContentNavigatorPlayground },
   { 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: 'Spinner', component: SpinnerPlayground },
+  { name: 'Radio', component: RadioPlayground },
+  { name: 'SectionHeading', component: SectionHeadingPlayground },
   { name: 'Tabs', component: TabsPlayground },
   { name: 'Tag', component: TagPlayground },
+  { name: 'TextInput', component: TextInputPlayground },
   { name: 'Typography', component: TypographyPlayground },
 ] as const;
 
-const ComponentItem = ({ name }: { name: string }) => {
+const ComponentItem = ({ name }: { name: string }): JSX.Element => {
   const hdTheme = useTheme();
+
   return (
     <View
       style={{
@@ -125,18 +145,26 @@ const App = () => {
       background: theme.colors.platformBackground,
     },
   };
+  const [fontsLoaded, setFontsLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    async function loadFonts() {
+      await loadAsync({
+        'hero-icons': heroIconFontPath,
+        'BeVietnamPro-Light': beVietnamProLightFont,
+        'BeVietnamPro-Regular': beVietnamProRegularFont,
+        'BeVietnamPro-SemiBold': beVietnamProSemiBoldFont,
+      }).catch(console.error);
 
-  const [fontsLoaded] = useFonts({
-    'hero-icons': heroIconFontPath,
-    'BeVietnamPro-Light': beVietnamProLightFont,
-    'BeVietnamPro-Regular': beVietnamProRegularFont,
-    'BeVietnamPro-SemiBold': beVietnamProSemiBoldFont,
-  });
+      setFontsLoaded(true);
+    }
+
+    loadFonts();
+  }, []);
 
   if (!fontsLoaded) {
     return null;
   }
-
   return (
     <ThemeProvider theme={theme}>
       <NavigationContainer theme={CustomNavigationTheme}>

package/playground/{components → src}/Avatar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alert, View } from 'react-native';
-import { Avatar, Typography, useTheme } from '../../src/index';
+import { Avatar, Typography, useTheme } from '@hero-design/rn';
 
 const AvatarPlayground = () => {
   const theme = useTheme();

package/playground/{components → src}/Badge.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, View } from 'react-native';
-import { Badge, Icon, Typography, useTheme } from '../../src/index';
+import { Badge, Icon, Typography, useTheme } from '@hero-design/rn';
 
 const BadgePlayground = () => {
   const theme = useTheme();

package/playground/{components → src}/BottomNavigation.tsx

@@ -4,7 +4,7 @@ import {
   BottomNavigation,
   Typography,
   BottomNavigationTabType,
-} from '../../src/index';
+} from '@hero-design/rn';
 
 const HomeScreen = () => (
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

package/playground/src/BottomSheet.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { View, Button } from 'react-native';
+
+import { BottomSheet, Typography, useTheme } from '@hero-design/rn';
+
+const Content = () => {
+  const theme = useTheme();
+
+  return (
+    <View style={{ padding: theme.space.medium }}>
+      <Typography.Text>Sheet Content</Typography.Text>
+      <Typography.Text>Sheet Content</Typography.Text>
+      <Typography.Text>Sheet Content</Typography.Text>
+      <Typography.Text>Sheet Content</Typography.Text>
+      <Typography.Text>Sheet Content</Typography.Text>
+      <Typography.Text>Sheet Content</Typography.Text>
+      <Typography.Text>Sheet Content</Typography.Text>
+      <Typography.Text>Sheet Content</Typography.Text>
+      <Typography.Text>Sheet Content</Typography.Text>
+      <Typography.Text>Sheet Content</Typography.Text>
+    </View>
+  );
+};
+
+const BottomSheetPlayground = (): JSX.Element => {
+  const [visible, setVisiblity] = useState(false);
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center' }}>
+      <Button title="Toggle Bottom Sheet" onPress={() => setVisiblity(true)} />
+      <BottomSheet
+        open={visible}
+        header="Title"
+        footer={<Button title="Close" onPress={() => setVisiblity(false)} />}
+        onRequestClose={() => setVisiblity(false)}
+      >
+        <Content />
+      </BottomSheet>
+    </View>
+  );
+};
+
+export default BottomSheetPlayground;

package/playground/src/Button.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { Button, Typography, useTheme } from '@hero-design/rn';
+
+const ButtonPlayground = (): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <ScrollView style={{ padding: theme.space.small }}>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Variants
+      </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"
+            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={{ marginBottom: theme.space.medium }}
+        />
+        <Button
+          text="Primary (Outlined)"
+          variant="outlined"
+          intent="primary"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.medium }}
+        />
+        <Button
+          text="Secondary (Outlined)"
+          variant="outlined"
+          intent="secondary"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.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={{ marginBottom: theme.space.medium }}
+          disabled
+        />
+        <Button
+          text="Filled (Disabled)"
+          variant="filled"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.medium }}
+          disabled
+        />
+        <Button
+          text="Outlined (Disabled)"
+          variant="outlined"
+          onPress={() => {}}
+          style={{ marginBottom: theme.space.medium }}
+          disabled
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+export default ButtonPlayground;

package/playground/{components → src}/Card.tsx

@@ -14,7 +14,7 @@ import {
   Icon,
   Divider,
   useTheme,
-} from '../../src/index';
+} from '@hero-design/rn';
 
 type DashboardCardProps = ViewProps & {
   icon: ComponentProps<typeof Icon>['icon'];

package/playground/{components → src}/Collapse.tsx

@@ -8,7 +8,7 @@ import {
   Button,
   Card,
   Collapse,
-} from '../../src/index';
+} from '@hero-design/rn';
 
 const CollapsePlayground = () => {
   const theme = useTheme();

package/playground/src/ContentNavigator.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { ContentNavigator, Typography, useTheme } from '@hero-design/rn';
+
+function addDays(date: Date, numDays: number) {
+  const milliseconds = numDays * 24 * 60 * 60 * 1000;
+  return new Date(date.valueOf() + milliseconds);
+}
+
+function getMondayAndSunday(date: Date) {
+  const daysFromMonday = (date.getDay() || 7) - 1;
+  const monday = addDays(date, -daysFromMonday);
+  const sunday = addDays(monday, 6);
+
+  return { monday, sunday };
+}
+
+function formatDate(date: Date) {
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+const ContentNavigatorPlayground = (): JSX.Element => {
+  const {
+    space: { medium },
+  } = useTheme();
+  const [age, setAge] = useState(20);
+  const [date, setDate] = useState(new Date());
+  const { monday, sunday } = getMondayAndSunday(date);
+
+  return (
+    <View
+      style={{
+        marginVertical: medium,
+        marginHorizontal: medium,
+      }}
+    >
+      <View style={{ flexDirection: 'row' }}>
+        <Typography.Text style={{ paddingRight: medium }}>
+          Age (18 to 25):
+        </Typography.Text>
+        <ContentNavigator
+          value={age}
+          onPreviousPress={() => setAge(age - 1)}
+          onNextPress={() => setAge(age + 1)}
+          previousDisabled={age <= 18}
+          nextDisabled={age >= 25}
+        />
+      </View>
+      <Typography.Text>Week calendar:</Typography.Text>
+      <View style={{ flexDirection: 'row' }}>
+        <ContentNavigator
+          value={`${formatDate(monday)} - ${formatDate(sunday)}`}
+          onPreviousPress={() => setDate(addDays(date, -7))}
+          onNextPress={() => setDate(addDays(date, 7))}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ContentNavigatorPlayground;

package/playground/{components → src}/Divider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { Divider } from '../../src/index';
+import { Divider } from '@hero-design/rn';
 
 const DividerPlayground = () => (
   <View>

package/playground/{components → src}/Drawer.tsx

@@ -1,7 +1,7 @@
 import { Button, SafeAreaView, Text, View } from 'react-native';
 import React, { useState } from 'react';
 
-import { Drawer } from '../../src/index';
+import { Drawer } from '@hero-design/rn';
 
 const DrawerContent = () => (
   <View style={{ padding: 30 }}>

package/playground/{components → src}/FAB.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { TouchableHighlight } from 'react-native';
 /* eslint-disable import/no-extraneous-dependencies */
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
-import { FAB, Typography, useTheme } from '../../src/index';
+import { FAB, Typography, useTheme } from '@hero-design/rn';
 
 const FABPlayground = (): JSX.Element => {
   const [active, setActive] = useState(false);

package/playground/{components → src}/Icon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ScrollView, View } from 'react-native';
-import { Typography, Icon, useTheme } from '../../src/index';
+import { Typography, Icon, useTheme } from '@hero-design/rn';
 
 const IconPlayground = () => {
   const theme = useTheme();
@@ -94,9 +94,13 @@ const IconPlayground = () => {
           intent="success"
           style={{ marginEnd: theme.space.medium }}
         />
-        <Icon icon="speaker" intent="warning" />
+        <Icon
+          icon="speaker"
+          intent="warning"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon icon="arrow-right" intent="disabled-text" />
       </View>
-
       <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
         Icon with different sizes
       </Typography.Text>

package/playground/{components → src}/IconButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { Button, Typography, useTheme } from '../../src/index';
+import { Button, Typography, useTheme } from '@hero-design/rn';
 
 const IconButtonPlayground = (): JSX.Element => {
   const theme = useTheme();
@@ -59,7 +59,18 @@ const IconButtonPlayground = (): JSX.Element => {
           onPress={() => {}}
           style={{ marginEnd: theme.space.medium }}
         />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="disabled-text"
+          size="xlarge"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
       </View>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Disabled state
+      </Typography.Text>
+      <Button.Icon icon="circle-add-outlined" disabled onPress={() => {}} />
     </View>
   );
 };

package/playground/{components → src}/Progress.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { View, Button } from 'react-native';
-import { Progress, Typography, useTheme } from '../../src/index';
+import { Progress, Typography, useTheme } from '@hero-design/rn';
 
 const ProgressPlayground = () => {
   const [progress, setProgress] = useState(0);

package/playground/src/Radio.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Radio, Typography, useTheme } from '@hero-design/rn';
+
+const RadioPlayground = () => {
+  const theme = useTheme();
+  const [value, setValue] = useState('everything');
+
+  return (
+    <View style={{ padding: theme.space.medium }}>
+      <Typography.Text fontSize="xlarge">Radio.Group</Typography.Text>
+      <Radio.Group
+        options={[
+          { text: 'Everything', value: 'everything' },
+          { text: 'Direct mentions only', value: 'direct_mentions' },
+          { text: 'Nothing', value: 'nothing' },
+        ]}
+        value={value}
+        onPress={setValue}
+      />
+    </View>
+  );
+};
+
+export default RadioPlayground;

package/playground/src/SectionHeading.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { SectionList, Text, TouchableOpacity, View } from 'react-native';
+
+import { SectionHeading, Typography, useTheme } from '@hero-design/rn';
+
+const SectionHeadingPlayground = () => {
+  const theme = useTheme();
+
+  const sampleSections = [
+    {
+      title: 'Main dishes',
+      data: ['Pizza', 'Burger', 'Risotto'],
+      cta: () => {},
+    },
+    {
+      title: 'Sides',
+      data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
+      haveIcon: true,
+    },
+  ];
+
+  return (
+    <View
+      style={{
+        margin: theme.space.medium,
+      }}
+    >
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Default section heading
+      </Typography.Text>
+      <SectionList
+        sections={sampleSections}
+        keyExtractor={(item, index) => item + index}
+        renderItem={({ item }) => (
+          <View
+            style={{
+              borderRadius: theme.radii.base,
+              borderWidth: theme.borderWidths.base,
+              borderColor: theme.colors.outline,
+              paddingVertical: theme.space.small,
+              paddingHorizontal: theme.space.medium,
+              marginBottom: theme.space.medium,
+            }}
+          >
+            <Text>{item}</Text>
+          </View>
+        )}
+        renderSectionHeader={({ section: { title, cta, haveIcon } }) => (
+          <SectionHeading
+            text={title}
+            icon={haveIcon ? 'document' : undefined}
+            rightChildren={
+              cta && (
+                <TouchableOpacity onPress={cta}>
+                  <Typography.Text intent="primary" fontWeight="semi-bold">
+                    Edit
+                  </Typography.Text>
+                </TouchableOpacity>
+              )
+            }
+          />
+        )}
+      />
+    </View>
+  );
+};
+
+export default SectionHeadingPlayground;