@hero-design/rn 7.3.0 → 7.4.0

package/playground/src/Spinner.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Spinner, useTheme } from '@hero-design/rn';
+
+const SpinnerPlayground = (): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <View
+      style={{
+        marginVertical: theme.space.medium,
+        marginHorizontal: theme.space.medium,
+      }}
+    >
+      <Spinner />
+    </View>
+  );
+};
+
+export default SpinnerPlayground;

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/BottomSheet/Footer.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { View } from 'react-native';
+import Divider from '../Divider';
+import { StyledFooter } from './StyledBottomSheet';
+
+const Footer = ({
+  children,
+  showDivider,
+}: {
+  children: ReactNode;
+  showDivider: boolean;
+}) => (
+  <View>
+    {showDivider ? <Divider /> : null}
+    <StyledFooter>{children}</StyledFooter>
+  </View>
+);
+
+export default Footer;

package/src/components/BottomSheet/Header.tsx

@@ -0,0 +1,49 @@
+import React, { ReactElement } from 'react';
+import { View } from 'react-native';
+import Button from '../Button';
+import Divider from '../Divider';
+import Typography from '../Typography';
+import {
+  StyledHeader,
+  StyledHeaderWrapper,
+  StyledIconWrapper,
+} from './StyledBottomSheet';
+
+const Header = ({
+  content,
+  showDivider,
+  onRequestClose = () => {},
+  showCloseButton,
+}: {
+  content: string | ReactElement;
+  showDivider: boolean;
+  onRequestClose?: () => void;
+  showCloseButton: boolean;
+}) => (
+  <>
+    <StyledHeaderWrapper>
+      {typeof content === 'string' ? (
+        <StyledHeader adjacentIcon={showCloseButton}>
+          <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+            {content}
+          </Typography.Text>
+        </StyledHeader>
+      ) : (
+        <View style={{ flex: 1 }}>{content}</View>
+      )}
+      {showCloseButton ? (
+        <StyledIconWrapper>
+          <Button.Icon
+            icon="cancel"
+            onPress={onRequestClose}
+            intent="text"
+            testID="bottom-sheet-close-icon"
+          />
+        </StyledIconWrapper>
+      ) : null}
+    </StyledHeaderWrapper>
+    {showDivider ? <Divider /> : null}
+  </>
+);
+
+export default Header;

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -0,0 +1,75 @@
+import styled from '@emotion/native';
+import { ComponentProps } from 'react';
+import { Animated, Pressable, StyleSheet, View, ViewProps } from 'react-native';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const StyledWrapper = styled(View)<ViewProps>({
+  ...StyleSheet.absoluteFillObject,
+  flexDirection: 'column-reverse',
+});
+
+const StyledBottomSheet = styled(Animated.View)<
+  ComponentProps<typeof Animated.View>
+>(({ theme }) => ({
+  borderTopLeftRadius: theme.__hd__.bottomSheet.radii.default,
+  borderTopRightRadius: theme.__hd__.bottomSheet.radii.default,
+  backgroundColor: theme.__hd__.bottomSheet.colors.background,
+  width: '100%',
+  shadowColor: theme.__hd__.bottomSheet.colors.shadow,
+  shadowOffset: theme.__hd__.bottomSheet.shadows.offset,
+  shadowOpacity: theme.__hd__.bottomSheet.shadows.opacity,
+  shadowRadius: theme.__hd__.bottomSheet.shadows.radius,
+  elevation: theme.__hd__.bottomSheet.shadows.elevation,
+  maxHeight: '94%',
+}));
+
+const StyledBackdrop = styled(AnimatedPressable)<
+  ComponentProps<typeof AnimatedPressable>
+>(({ theme }) => ({
+  ...StyleSheet.absoluteFillObject,
+  backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
+  opacity: 0.48,
+}));
+
+const StyledHeaderWrapper = styled(View)(({ theme }) => ({
+  minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
+  flexDirection: 'row',
+}));
+
+const StyledHeader = styled(View)<{ adjacentIcon: boolean }>(
+  ({ theme, adjacentIcon }) => ({
+    flex: 1,
+    paddingLeft: theme.__hd__.bottomSheet.space.horizontalPadding,
+    paddingRight: adjacentIcon
+      ? 0
+      : theme.__hd__.bottomSheet.space.horizontalPadding,
+    paddingVertical: theme.__hd__.bottomSheet.space.verticalPadding,
+    justifyContent: 'center',
+  })
+);
+
+const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.bottomSheet.space.horizontalPadding,
+  paddingVertical: theme.__hd__.bottomSheet.space.verticalPadding,
+  minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  flexDirection: 'row',
+}));
+
+const StyledIconWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: theme.__hd__.bottomSheet.sizes.closeIconWidth,
+}));
+
+export {
+  StyledWrapper,
+  StyledHeaderWrapper,
+  StyledHeader,
+  StyledFooter,
+  StyledIconWrapper,
+  StyledBottomSheet,
+  StyledBackdrop,
+};