@hero-design/rn 7.2.2 → 7.3.0

package/src/components/Button/index.tsx

@@ -1,5 +1,13 @@
+import { FunctionComponent } from 'react';
+import Button, { ButtonProps } from './Button';
 import IconButton from './IconButton';
 
-const Button = { Icon: IconButton } as const;
+interface CompoundButtonProps extends FunctionComponent<ButtonProps> {
+  Icon: typeof IconButton;
+}
 
-export default Button;
+const CompoundButton = Button as CompoundButtonProps;
+
+CompoundButton.Icon = IconButton;
+
+export default CompoundButton;

package/src/components/Card/StyledCard.tsx

@@ -1,9 +1,32 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
+import { scale } from '../../utils/scale';
 
-const StyledCard = styled(View)(({ theme }) => ({
-  borderRadius: theme.__hd__.card.radii.default,
-  overflow: 'hidden',
+const StyledCard = styled(View)<{ themeVariant: 'basic' | 'data' }>(
+  ({ themeVariant, theme }) => {
+    const sharedStyles = {
+      borderRadius: theme.__hd__.card.radii.default,
+      overflow: 'hidden',
+    } as const;
+
+    const dataStyles = {
+      flex: 1,
+      flexDirection: 'row',
+    };
+
+    switch (themeVariant) {
+      case 'basic':
+        return sharedStyles;
+      case 'data':
+        return { ...sharedStyles, ...dataStyles };
+    }
+  }
+);
+
+const LeftDataCard = styled(View)(({ theme }) => ({
+  backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
+  width: scale(16),
+  height: '100%',
 }));
 
-export { StyledCard };
+export { StyledCard, LeftDataCard };

package/src/components/Card/__tests__/StyledCard.spec.tsx

@@ -1,10 +1,22 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledCard } from '../StyledCard';
+import { StyledCard, LeftDataCard } from '../StyledCard';
 
 describe('StyledCard', () => {
-  it('renders correct style', () => {
-    const { toJSON } = renderWithTheme(<StyledCard />);
+  it('renders correct basic style', () => {
+    const { toJSON } = renderWithTheme(<StyledCard themeVariant="basic" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correct data style', () => {
+    const { toJSON } = renderWithTheme(<StyledCard themeVariant="data" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('LeftDataCard', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<LeftDataCard />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap

@@ -1,15 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledCard renders correct style 1`] = `
+exports[`LeftDataCard renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#a26fb0",
+        "height": "100%",
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`StyledCard renders correct basic style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="basic"
+/>
+`;
+
+exports[`StyledCard renders correct data style 1`] = `
 <View
   style={
     Array [
       Object {
         "borderRadius": 12,
+        "flex": 1,
+        "flexDirection": "row",
         "overflow": "hidden",
       },
       undefined,
     ]
   }
+  themeVariant="data"
 />
 `;

package/src/components/Card/__tests__/index.spec.tsx

@@ -1,35 +1,30 @@
 import React from 'react';
-import { RenderAPI } from '@testing-library/react-native';
 import { View } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { theme } from '../../../index';
 import Card from '..';
 
 describe('Card', () => {
-  let wrapper: RenderAPI;
-
-  beforeEach(() => {
-    wrapper = renderWithTheme(
-      <Card
-        style={{ backgroundColor: theme.colors.backgroundDark }}
-        testID="card"
-        nativeID="card-native-id"
-        hitSlop={{ top: 1, left: 1, bottom: 1, right: 1 }}
-        pointerEvents="box-only"
-        removeClippedSubviews
-      >
+  it('renders basic card', () => {
+    const { queryAllByTestId } = renderWithTheme(
+      <Card testID="card" variant="basic">
         <View testID="child-view" />
       </Card>
     );
-  });
 
-  it('renders correctly', () => {
-    expect(wrapper.queryAllByTestId('card')).toHaveLength(1);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(queryAllByTestId('card')).toHaveLength(1);
+    expect(queryAllByTestId('child-view')).toHaveLength(1);
+    expect(queryAllByTestId('data-card-indicator')).toHaveLength(0);
   });
 
-  it('has child', () => {
-    expect(wrapper.queryAllByTestId('child-view')).toHaveLength(1);
+  it('renders data card', () => {
+    const { queryAllByTestId } = renderWithTheme(
+      <Card testID="card" variant="data">
+        <View testID="child-view" />
+      </Card>
+    );
+
+    expect(queryAllByTestId('card')).toHaveLength(1);
+    expect(queryAllByTestId('child-view')).toHaveLength(1);
+    expect(queryAllByTestId('data-card-indicator')).toHaveLength(1);
   });
 });

package/src/components/Card/index.tsx

@@ -1,12 +1,16 @@
 import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { StyledCard } from './StyledCard';
+import { StyledCard, LeftDataCard } from './StyledCard';
 
 interface CardProps extends ViewProps {
   /**
    * Card's content.
    */
   children?: ReactNode;
+  /**
+   * Card type.
+   */
+  variant?: 'basic' | 'data';
   /**
    * Addditional style.
    */
@@ -17,6 +21,15 @@ interface CardProps extends ViewProps {
   testID?: string;
 }
 
-const Card = (props: CardProps): JSX.Element => <StyledCard {...props} />;
+const Card = ({
+  variant = 'basic',
+  children,
+  ...nativeProps
+}: CardProps): JSX.Element => (
+  <StyledCard {...nativeProps} testID="card" themeVariant={variant}>
+    {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
+    {children}
+  </StyledCard>
+);
 
 export default Card;

package/src/components/Collapse/StyledCollapse.tsx

@@ -0,0 +1,15 @@
+import { Animated, View } from 'react-native';
+import styled from '@emotion/native';
+
+const StyledWrapper = styled(Animated.View)(() => ({
+  margin: 0,
+  padding: 0,
+  overflow: 'hidden',
+}));
+
+const StyledChildWrapper = styled(View)(() => ({
+  margin: 0,
+  padding: 0,
+}));
+
+export { StyledWrapper, StyledChildWrapper };

package/src/components/Collapse/__tests__/StyledCollapse.spec.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledWrapper, StyledChildWrapper } from '../StyledCollapse';
+
+describe('StyledWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledWrapper>
+        <Text>Sample Child</Text>
+      </StyledWrapper>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledChildWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledChildWrapper>
+        <Text>Sample Child</Text>
+      </StyledChildWrapper>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Collapse/__tests__/__snapshots__/StyledCollapse.spec.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledChildWrapper renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "margin": 0,
+        "padding": 0,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text>
+    Sample Child
+  </Text>
+</View>
+`;
+
+exports[`StyledWrapper renders correct style 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "margin": 0,
+      "overflow": "hidden",
+      "padding": 0,
+    }
+  }
+>
+  <Text>
+    Sample Child
+  </Text>
+</View>
+`;

package/src/components/Collapse/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collapse renders correctly 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  onLayout={[Function]}
+  style={
+    Object {
+      "margin": 0,
+      "maxHeight": "0%",
+      "overflow": "hidden",
+      "padding": 0,
+    }
+  }
+  testID="collapse"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "margin": 0,
+          "padding": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Sample Text
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Collapse should not render Sample Text 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  onLayout={[Function]}
+  style={
+    Object {
+      "margin": 0,
+      "maxHeight": "0%",
+      "overflow": "hidden",
+      "padding": 0,
+    }
+  }
+  testID="collapse"
+/>
+`;
+
+exports[`Collapse should render Sample Text but not visible 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  onLayout={[Function]}
+  style={
+    Object {
+      "margin": 0,
+      "maxHeight": "0%",
+      "overflow": "hidden",
+      "padding": 0,
+    }
+  }
+  testID="collapse"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "margin": 0,
+          "padding": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Sample Text
+    </Text>
+  </View>
+</View>
+`;

package/src/components/Collapse/__tests__/index.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Text } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Collapse from '..';
+
+describe('Collapse', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <Collapse open testID="collapse">
+        <Text>Sample Text</Text>
+      </Collapse>
+    );
+    expect(wrapper.queryAllByTestId('collapse')).toHaveLength(1);
+    expect(wrapper.getByText('Sample Text')).toBeDefined();
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('should not render Sample Text', () => {
+    const wrapper = renderWithTheme(
+      <Collapse testID="collapse">
+        <Text>Sample Text</Text>
+      </Collapse>
+    );
+    expect(wrapper.queryAllByTestId('collapse')).toHaveLength(1);
+    expect(wrapper.queryByText('Sample Text')).toBeNull();
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('should render Sample Text but not visible', () => {
+    const wrapper = renderWithTheme(
+      <Collapse testID="collapse" keepChildrenMounted>
+        <Text>Sample Text</Text>
+      </Collapse>
+    );
+    expect(wrapper.queryAllByTestId('collapse')).toHaveLength(1);
+    expect(wrapper.queryByText('Sample Text')).toBeDefined();
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Collapse/index.tsx

@@ -0,0 +1,109 @@
+import {
+  Animated,
+  Easing,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import { StyledChildWrapper, StyledWrapper } from './StyledCollapse';
+import { usePrevious } from '../../utils/hooks';
+
+type HeightSource = 'percent' | 'container';
+
+interface CollapseProps extends ViewProps {
+  /*
+   * The collapse's content.
+   */
+  children: ReactNode;
+  /**
+   * Whether the child components will remain mounted when the Collapse is closed.
+   */
+  keepChildrenMounted?: boolean;
+  /**
+   * Whether the component is open or closed.
+   */
+  open?: boolean;
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Collapse = ({
+  open = false,
+  keepChildrenMounted = false,
+  children,
+  testID,
+  style,
+}: CollapseProps) => {
+  const collapseAnim = React.useRef(new Animated.Value(0)).current;
+  const innerRef = React.useRef(null);
+  const [contentHeight, setContentHeight] = React.useState<number>(0);
+  const [maxHeight, setMaxHeight] = React.useState<number>(0);
+  const [isWaitingToClose, setIsWaitingToClose] = useState<boolean>(false);
+  const [heightSource, setHeightSource] = useState<HeightSource>('percent');
+
+  const previousOpenState = usePrevious(open);
+
+  const animatedCallback = useCallback(() => {
+    if (open === true) {
+      setIsWaitingToClose(true);
+      setMaxHeight(contentHeight);
+    } else {
+      setIsWaitingToClose(false);
+    }
+  }, [open, contentHeight]);
+
+  useEffect(() => {
+    if (open !== previousOpenState && previousOpenState !== undefined) {
+      const useHeightValue = maxHeight || 100;
+      setHeightSource(useHeightValue > 100 ? 'container' : 'percent');
+      Animated.timing(collapseAnim, {
+        toValue: open ? useHeightValue : 0,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: false,
+      }).start(animatedCallback);
+    }
+  }, [open, previousOpenState, maxHeight]);
+
+  const checkMaxHeight = useCallback(
+    ({ height }) => {
+      if (height > contentHeight) {
+        setContentHeight(height);
+      }
+    },
+    [contentHeight]
+  );
+
+  return (
+    <StyledWrapper
+      onLayout={event => checkMaxHeight(event.nativeEvent.layout)}
+      style={[
+        style,
+        {
+          maxHeight:
+            heightSource === 'container'
+              ? collapseAnim
+              : collapseAnim.interpolate({
+                  inputRange: [0, 100],
+                  outputRange: ['0%', '100%'],
+                }),
+        },
+      ]}
+      testID={testID}
+    >
+      {(keepChildrenMounted === true ||
+        open === true ||
+        (open === false && isWaitingToClose === true)) && (
+        <StyledChildWrapper ref={innerRef}>{children}</StyledChildWrapper>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default Collapse;

package/src/components/Divider/index.tsx

@@ -29,11 +29,11 @@ const Divider = ({
   ...nativeProps
 }: DividerProps) => (
   <StyledDivider
+    {...nativeProps}
     themeMarginHorizontal={marginHorizontal}
     themeMarginVertical={marginVertical}
     style={style}
     testID={testID}
-    {...nativeProps}
   />
 );
 

package/src/components/Drawer/StyledDrawer.tsx

@@ -0,0 +1,39 @@
+import styled from '@emotion/native';
+import { ComponentProps } from 'react';
+import { Animated, Pressable, StyleSheet, View } from 'react-native';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const StyledContainer = styled(View)<{ enableShadow: boolean }>(
+  ({ theme, enableShadow }) => ({
+    ...StyleSheet.absoluteFillObject,
+    shadowColor: enableShadow
+      ? theme.__hd__.drawer.colors.shadow
+      : 'transparent',
+    shadowOffset: theme.__hd__.drawer.shadows.offset,
+    shadowOpacity: theme.__hd__.drawer.shadows.opacity,
+    shadowRadius: theme.__hd__.drawer.shadows.radius,
+    overflow: 'hidden',
+    zIndex: 9999,
+    elevation: 9999,
+  })
+);
+
+const StyledBackdrop = styled(AnimatedPressable)<
+  ComponentProps<typeof AnimatedPressable>
+>(({ theme }) => ({
+  ...StyleSheet.absoluteFillObject,
+  backgroundColor: theme.__hd__.drawer.colors.backdrop,
+}));
+
+const StyledDrawerContainer = styled(Animated.View)<{ enableShadow: boolean }>(
+  ({ theme, enableShadow }) => ({
+    borderBottomLeftRadius: theme.__hd__.drawer.radii.default,
+    borderBottomRightRadius: theme.__hd__.drawer.radii.default,
+    backgroundColor: theme.__hd__.drawer.colors.background,
+    elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
+    overflow: 'hidden',
+  })
+);
+
+export { StyledBackdrop, StyledContainer, StyledDrawerContainer };