@hero-design/rn 7.3.2 → 7.6.0

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/playground/{components → src}/Tabs.tsx

@@ -7,7 +7,7 @@ import {
   Icon,
   useTheme,
   IconName,
-} from '../../src/index';
+} from '@hero-design/rn';
 
 const CustomScreen = ({ title }: { title: string }) => (
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

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

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

package/playground/src/TextInput.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View } from 'react-native';
+import { TextInput, useTheme } from '@hero-design/rn';
+
+const TextInputPlayground = () => {
+  const theme = useTheme();
+  return (
+    <View style={{ padding: theme.space.medium }}>
+      <TextInput label="Amount (AUD)" prefix="dollar-sign" />
+    </View>
+  );
+};
+
+export default TextInputPlayground;

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

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

package/playground/src/emotion.d.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line  import/no-extraneous-dependencies
+import '@emotion/react';
+import { Theme as HeroTheme } from '@hero-design/rn';
+
+declare module '@emotion/react' {
+  export interface Theme extends HeroTheme {}
+}

package/playground/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "declaration": true,
+    "outDir": "types",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "jsx": "react-native",
+    "strict": true,
+    "allowUnreachableCode": false,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "types": ["jest"],
+    "typeRoots": ["./src"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"],
+  "extends": "expo/tsconfig.base"
+}

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,
+};