@hero-design/rn 7.4.0 → 7.6.1-alpha

package/playground/src/App.tsx

@@ -16,6 +16,7 @@ import {
   Divider,
 } from '@hero-design/rn';
 
+import AlertPlayground from './Alert';
 import AvatarPlayground from './Avatar';
 import BadgePlayground from './Badge';
 import BottomNavigation from './BottomNavigation';
@@ -33,10 +34,13 @@ 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');
@@ -44,6 +48,7 @@ const beVietnamProRegularFont = require('@hero-design/rn/assets/fonts/be-vietnam
 const beVietnamProSemiBoldFont = require('@hero-design/rn/assets/fonts/be-vietnam-pro-semibold.ttf');
 
 type RootStackParamList = {
+  Alert: undefined;
   Avatar: undefined;
   Badge: undefined;
   BottomNavigation: undefined;
@@ -62,10 +67,13 @@ type RootStackParamList = {
   Spinner: undefined;
   Radio: undefined;
   SectionHeading: undefined;
+  Select: undefined;
+  Switch: undefined;
   Tabs: undefined;
   Tag: undefined;
   TextInput: undefined;
   Typography: undefined;
+  MultipleThemes: undefined;
 };
 
 type Navigation = NativeStackScreenProps<RootStackParamList>;
@@ -73,6 +81,7 @@ 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 },
@@ -90,10 +99,13 @@ const components = [
   { 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 => {

package/playground/src/ContentNavigator.tsx

@@ -24,22 +24,15 @@ function formatDate(date: Date) {
 }
 
 const ContentNavigatorPlayground = (): JSX.Element => {
-  const {
-    space: { medium },
-  } = useTheme();
+  const theme = 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={{ margin: theme.space.medium }}>
       <View style={{ flexDirection: 'row' }}>
-        <Typography.Text style={{ paddingRight: medium }}>
+        <Typography.Text style={{ paddingRight: theme.space.medium }}>
           Age (18 to 25):
         </Typography.Text>
         <ContentNavigator

package/playground/src/MultipleThemes.tsx

@@ -0,0 +1,34 @@
+import { ThemeProvider, theme, Button } from '@hero-design/rn';
+
+import React from 'react';
+import { Alert } from 'react-native';
+
+const CustomizedTheme = {
+  ...theme,
+  __hd__: {
+    ...theme.__hd__,
+    button: {
+      ...theme.__hd__.button,
+      colors: {
+        ...theme.__hd__.button.colors,
+        primary: '#000000',
+      },
+    },
+  },
+};
+const MutipleThemesPlayground = () => (
+  <>
+    <Button
+      text="Button with Origin theme"
+      onPress={() => Alert.alert('Button')}
+    />
+    <ThemeProvider theme={CustomizedTheme}>
+      <Button
+        text="Button with Customized theme"
+        onPress={() => Alert.alert('Button')}
+      />
+    </ThemeProvider>
+  </>
+);
+
+export default MutipleThemesPlayground;

package/playground/src/Select.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Select, useTheme } from '@hero-design/rn';
+
+const SelectPlayground = (): JSX.Element => {
+  const theme = useTheme();
+  const options = [
+    { text: 'Monday', value: 'mon' },
+    { text: 'Tuesday', value: 'tue' },
+    { text: 'Wednesday', value: 'wed' },
+    { text: 'Thursday', value: 'thu' },
+    { text: 'Friday', value: 'fri' },
+    { text: 'Saturday', value: 'sat' },
+    { text: 'Sunday', value: 'sun' },
+  ];
+  const [value, setValue] = useState(['mon', 'tue']);
+
+  return (
+    <View style={{ margin: theme.space.medium }}>
+      <Select.Multi
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={value}
+        onPress={setValue}
+        keyExtractor={opt => opt.value}
+      />
+    </View>
+  );
+};
+
+export default SelectPlayground;

package/playground/src/Switch.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Switch, Typography, useTheme } from '@hero-design/rn';
+
+type StateIndex = 'switchOne' | 'switchTwo' | 'switchThree' | 'switchFour';
+
+type SwitchStates = {
+  switchOne: boolean;
+  switchTwo: boolean;
+  switchThree: boolean;
+  switchFour: boolean;
+};
+
+const SwitchPlayground = () => {
+  const theme = useTheme();
+
+  const [isChecked, setIsChecked] = React.useState<SwitchStates>({
+    switchOne: true,
+    switchTwo: false,
+    switchThree: true,
+    switchFour: false,
+  });
+
+  const toggleState = React.useCallback(
+    (switchId: StateIndex) =>
+      setIsChecked({
+        ...isChecked,
+        [switchId]: !isChecked[switchId],
+      }),
+    [isChecked]
+  );
+
+  return (
+    <View
+      style={{
+        margin: theme.space.medium,
+      }}
+    >
+      <Typography.Text style={{ marginVertical: theme.space.xsmall }}>
+        Medium size
+      </Typography.Text>
+      <Switch
+        checked={isChecked.switchOne}
+        onPress={() => toggleState('switchOne')}
+      />
+      <Switch
+        style={{ marginTop: theme.space.small }}
+        checked={isChecked.switchTwo}
+        onPress={() => toggleState('switchTwo')}
+      />
+      <Switch checked disabled style={{ marginTop: theme.space.small }} />
+      <Switch disabled style={{ marginTop: theme.space.small }} />
+
+      <Typography.Text style={{ marginVertical: theme.space.xsmall }}>
+        Small size
+      </Typography.Text>
+      <Switch
+        size="small"
+        checked={isChecked.switchThree}
+        onPress={() => toggleState('switchThree')}
+      />
+      <Switch
+        style={{ marginTop: theme.space.small }}
+        size="small"
+        checked={isChecked.switchFour}
+        onPress={() => toggleState('switchFour')}
+      />
+      <Switch
+        checked
+        disabled
+        style={{ marginTop: theme.space.small }}
+        size="small"
+      />
+      <Switch disabled style={{ marginTop: theme.space.small }} size="small" />
+    </View>
+  );
+};
+
+export default SwitchPlayground;

package/rollup.config.js

@@ -22,7 +22,13 @@ export default {
       format: 'esm',
     },
   ],
-  external: ['react', 'react-native', 'react-native-safe-area-context'],
+  external: [
+    'react',
+    'react-native',
+    'react-native-safe-area-context',
+    'react-native-vector-icons',
+    'react-native-pager-view',
+  ],
   plugins: [
     replace({
       'process.env.NODE_ENV': JSON.stringify('production'),

package/src/components/Alert/StyledAlert.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/native';
+import { ComponentProps } from 'react';
+import { TouchableOpacity, View, ViewProps } from 'react-native';
+
+const Container = styled(View)<{
+  themeVariant: 'default' | 'round';
+  themeIntent: 'success' | 'info' | 'warning' | 'error';
+}>(({ theme, themeVariant = 'default', themeIntent }) => ({
+  borderRadius: themeVariant === 'round' ? theme.__hd__.alert.radii.default : 0,
+  backgroundColor: theme.__hd__.alert.colors[themeIntent],
+  minHeight: theme.__hd__.alert.sizes.height,
+  flexDirection: 'row',
+}));
+
+const IconContainer = styled(View)<ViewProps>(({ theme }) => ({
+  alignItems: 'center',
+  paddingLeft: theme.__hd__.alert.space.padding,
+}));
+
+const TextContainer = styled(View)<ViewProps>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.alert.space.padding,
+  flex: 1,
+}));
+
+const ContentContainer = styled(View)<{ showDivider: boolean }>(
+  ({ theme, showDivider }) => ({
+    paddingVertical: theme.__hd__.alert.space.padding,
+    flex: 1,
+    borderRightWidth: showDivider ? theme.__hd__.alert.borderWidths.base : 0,
+    borderColor: theme.__hd__.alert.colors.divider,
+    flexDirection: 'row',
+  })
+);
+
+const CTAWrapper = styled(TouchableOpacity)<
+  ComponentProps<typeof TouchableOpacity>
+>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.alert.space.padding,
+  justifyContent: 'center',
+}));
+
+export {
+  Container,
+  ContentContainer,
+  TextContainer,
+  IconContainer,
+  CTAWrapper,
+};