@hero-design/rn 7.6.1-alpha.0 → 7.8.0

package/playground/src/App.tsx

@@ -1,202 +0,0 @@
-import React from 'react';
-/* eslint-disable  import/no-extraneous-dependencies */
-import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
-import {
-  createNativeStackNavigator,
-  NativeStackScreenProps,
-} from '@react-navigation/native-stack';
-import { loadAsync } from 'expo-font';
-import { SafeAreaView, FlatList, View, TouchableOpacity } from 'react-native';
-import {
-  ThemeProvider,
-  theme,
-  useTheme,
-  Typography,
-  Icon,
-  Divider,
-} from '@hero-design/rn';
-
-import AlertPlayground from './Alert';
-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 SelectPlayground from './Select';
-import SwitchPlayground from './Switch';
-import TabsPlayground from './Tabs';
-import TagPlayground from './Tag';
-import TextInputPlayground from './TextInput';
-import TypographyPlayground from './Typography';
-import MultipleThemesPlayground from './MultipleThemes';
-
-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 = {
-  Alert: undefined;
-  Avatar: undefined;
-  Badge: undefined;
-  BottomNavigation: undefined;
-  BottomSheet: undefined;
-  Button: undefined;
-  Card: undefined;
-  Collapse: undefined;
-  ContentNavigator: undefined;
-  Divider: undefined;
-  Drawer: undefined;
-  FAB: undefined;
-  Home: undefined;
-  Icon: undefined;
-  IconButton: undefined;
-  Progress: undefined;
-  Spinner: undefined;
-  Radio: undefined;
-  SectionHeading: undefined;
-  Select: undefined;
-  Switch: undefined;
-  Tabs: undefined;
-  Tag: undefined;
-  TextInput: undefined;
-  Typography: undefined;
-  MultipleThemes: undefined;
-};
-
-type Navigation = NativeStackScreenProps<RootStackParamList>;
-
-const Stack = createNativeStackNavigator<RootStackParamList>();
-
-const components = [
-  { name: 'Alert', component: AlertPlayground },
-  { 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: 'Select', component: SelectPlayground },
-  { name: 'Switch', component: SwitchPlayground },
-  { name: 'Tabs', component: TabsPlayground },
-  { name: 'Tag', component: TagPlayground },
-  { name: 'TextInput', component: TextInputPlayground },
-  { name: 'Typography', component: TypographyPlayground },
-  { name: 'MultipleThemes', component: MultipleThemesPlayground },
-] as const;
-
-const ComponentItem = ({ name }: { name: string }): JSX.Element => {
-  const hdTheme = useTheme();
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginHorizontal: hdTheme.space.medium,
-        marginVertical: hdTheme.space.medium,
-      }}
-    >
-      <Typography.Text fontSize="large">{name}</Typography.Text>
-      <Icon
-        icon="arrow-right"
-        size="small"
-        style={{ color: hdTheme.colors.disabledText }}
-      />
-    </View>
-  );
-};
-
-const ComponentList = ({ navigation }: Navigation) => (
-  <SafeAreaView>
-    <FlatList
-      data={components}
-      renderItem={({ item }) => (
-        <>
-          <TouchableOpacity onPress={() => navigation.navigate(item.name)}>
-            <ComponentItem name={item.name} />
-          </TouchableOpacity>
-          <Divider marginHorizontal="small" />
-        </>
-      )}
-    />
-  </SafeAreaView>
-);
-
-const App = () => {
-  const CustomNavigationTheme = {
-    ...DefaultTheme,
-    colors: {
-      ...DefaultTheme.colors,
-      primary: theme.colors.primary,
-      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);
-
-      setFontsLoaded(true);
-    }
-
-    loadFonts();
-  }, []);
-
-  if (!fontsLoaded) {
-    return null;
-  }
-  return (
-    <ThemeProvider theme={theme}>
-      <NavigationContainer theme={CustomNavigationTheme}>
-        <Stack.Navigator initialRouteName="Home">
-          <Stack.Screen
-            name="Home"
-            component={ComponentList}
-            options={{ title: 'Mobile Hero Design' }}
-          />
-          {components.map(component => (
-            <Stack.Screen
-              key={component.name}
-              name={component.name}
-              component={component.component}
-            />
-          ))}
-        </Stack.Navigator>
-      </NavigationContainer>
-    </ThemeProvider>
-  );
-};
-
-export default App;

package/playground/src/Avatar.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-import { Alert, View } from 'react-native';
-import { Avatar, Typography, useTheme } from '@hero-design/rn';
-
-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/src/Badge.tsx

@@ -1,187 +0,0 @@
-import React from 'react';
-import { Button, View } from 'react-native';
-import { Badge, Icon, Typography, useTheme } from '@hero-design/rn';
-
-const BadgePlayground = () => {
-  const theme = useTheme();
-  const [isVisibleBadge, setIsVisibleBadge] = React.useState(true);
-  const [isVisibleStatusBadge, setIsVisibleStatusBadge] = React.useState(true);
-
-  return (
-    <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',
-          flexDirection: 'row',
-          marginBottom: theme.space.small,
-        }}
-      >
-        <Badge
-          content="APPROVED"
-          intent="success"
-          style={{ marginEnd: theme.space.small }}
-        />
-        <Badge
-          content="PENDING"
-          intent="warning"
-          style={{ marginEnd: theme.space.small }}
-        />
-      </View>
-      <View
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          marginBottom: theme.space.small,
-        }}
-      >
-        <Badge
-          content="DECLINED"
-          intent="danger"
-          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>
-  );
-};
-
-export default BadgePlayground;

package/playground/src/BottomNavigation.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import {
-  BottomNavigation,
-  Typography,
-  BottomNavigationTabType,
-} from '@hero-design/rn';
-
-const HomeScreen = () => (
-  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Typography.Text>Home Screen</Typography.Text>
-  </View>
-);
-
-const FeedScreen = () => (
-  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Typography.Text>Feed Screen</Typography.Text>
-  </View>
-);
-
-const AlertsScreen = () => (
-  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Typography.Text>Alerts Screen</Typography.Text>
-  </View>
-);
-
-const ProfileScreen = () => (
-  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Typography.Text>Profile Screen</Typography.Text>
-  </View>
-);
-
-const tabs: BottomNavigationTabType[] = [
-  {
-    key: 'home',
-    title: 'Home',
-    icon: 'home',
-    component: <HomeScreen />,
-  },
-  {
-    key: 'feed',
-    title: 'Feed',
-    icon: 'speaker',
-    component: <FeedScreen />,
-  },
-  {
-    key: 'alerts',
-    title: 'Alerts',
-    icon: 'bell',
-    component: <AlertsScreen />,
-  },
-  {
-    key: 'profile',
-    title: 'Profile',
-    icon: 'user',
-    component: <ProfileScreen />,
-  },
-];
-
-const BottomNavigationPlayground = () => {
-  const [selectedTabKey, setSelectedTabKey] = React.useState('home');
-
-  return (
-    <BottomNavigation
-      onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
-      selectedTabKey={selectedTabKey}
-      tabs={tabs}
-    />
-  );
-};
-
-export default BottomNavigationPlayground;

package/playground/src/BottomSheet.tsx

@@ -1,43 +0,0 @@
-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;