@hero-design/rn 7.4.0 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.4.0"
+    "@hero-design/colors": "7.5.0"
   },
   "peerDependencies": {
     "react": "17.0.2",

package/playground/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hero-design/playground",
   "private": true,
-  "version": "7.4.0",
+  "version": "7.5.0",
   "license": "MIT",
   "scripts": {
     "lint": "eslint src expoEntry.js --ext .js,.jsx,.ts,.tsx --ignore-path ../../../.gitignore",
@@ -13,8 +13,8 @@
     "visual-test": "detox build -c ios.sim.release && detox test -c ios.sim.release"
   },
   "dependencies": {
-    "@hero-design/colors": "7.4.0",
-    "@hero-design/rn": "7.4.0",
+    "@hero-design/colors": "7.5.0",
+    "@hero-design/rn": "7.5.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/core": "^6.3.0",
     "@react-navigation/native": "^6.0.12",

package/playground/src/Alert.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { Alert, Typography, useTheme } from '@hero-design/rn';
+
+const AlertPlayground = (): JSX.Element => {
+  const theme = useTheme();
+
+  return (
+    <ScrollView style={{ flex: 1, padding: theme.space.medium }}>
+      <Typography.Text>Default variant</Typography.Text>
+      <View style={{ paddingVertical: theme.space.medium }}>
+        <Alert
+          title="Title"
+          content="Success"
+          intent="success"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Info"
+          intent="info"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Warning"
+          intent="warning"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Error"
+          intent="error"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+      </View>
+      <Typography.Text>Round variant</Typography.Text>
+      <View style={{ paddingVertical: theme.space.medium }}>
+        <Alert
+          title="Title"
+          content="Success"
+          intent="success"
+          variant="round"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Info"
+          intent="info"
+          variant="round"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Warning"
+          intent="warning"
+          variant="round"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Error"
+          intent="error"
+          variant="round"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+export default AlertPlayground;

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';
@@ -37,6 +38,7 @@ 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 +46,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;
@@ -66,6 +69,7 @@ type RootStackParamList = {
   Tag: undefined;
   TextInput: undefined;
   Typography: undefined;
+  MultipleThemes: undefined;
 };
 
 type Navigation = NativeStackScreenProps<RootStackParamList>;
@@ -73,6 +77,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 },
@@ -94,6 +99,7 @@ const components = [
   { 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/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/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,
+};