@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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

@@ -1,3 +1,4 @@
+import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import Alert from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
@@ -29,6 +30,23 @@ describe('Alert', () => {
     expect(getByTestId('alert-close-icon')).toBeDefined();
   });
 
+  it('renders correctly with CTA ', () => {
+    const onCloseSpy = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Alert
+        title="Title"
+        content="Content"
+        actionLabel="CTA"
+        onClose={onCloseSpy}
+      />
+    );
+
+    expect(getByText('CTA')).toBeVisible();
+    fireEvent.press(getByText('CTA'));
+
+    expect(onCloseSpy).toHaveBeenCalledTimes(1);
+  });
+
   it('renders correctly without rounded ', () => {
     const { toJSON, getByTestId, getByText, queryByTestId } = renderWithTheme(
       <Alert title="Title" content="Content" variant="unrounded" />
@@ -90,7 +108,9 @@ describe('Alert', () => {
     it('renders custom title correctly', () => {
       const { getByText } = renderWithTheme(
         <Alert
-          title={<Typography.Text>Custom Title</Typography.Text>}
+          title={
+            <Typography.Body variant="small">Custom Title</Typography.Body>
+          }
           content="Content"
         />
       );
@@ -101,7 +121,11 @@ describe('Alert', () => {
   describe('Content', () => {
     it('renders custom content correctly', () => {
       const { getByText } = renderWithTheme(
-        <Alert content={<Typography.Text>Custom Content</Typography.Text>} />
+        <Alert
+          content={
+            <Typography.Body variant="small">Custom Content</Typography.Body>
+          }
+        />
       );
 
       expect(getByText('Custom Content')).toBeDefined();
@@ -116,3 +140,21 @@ describe('Alert', () => {
     });
   });
 });
+
+describe('AlertProps', () => {
+  it('raises type error if actionLabel has value but no close icon', () => {
+    // should raise error which requires onClose
+    renderWithTheme(
+      // @ts-expect-error: Type '{ title: string; content: string; actionLabel: string; }' i
+      <Alert title="Title" content="Content" actionLabel="VIEW" />
+    );
+
+    // if onClose is standalone, it's valid
+    renderWithTheme(
+      <Alert title="Title" content="Content" onClose={jest.fn()} />
+    );
+
+    // if onClose and actionLabel are undefined, it's valid
+    renderWithTheme(<Alert title="Title" content="Content" />);
+  });
+});

package/src/components/Alert/index.tsx

@@ -37,7 +37,7 @@ const AlertIcon = ({ icon }: { icon?: IconName }) =>
     </IconContainer>
   ) : null;
 
-interface AlertProps {
+interface BasicAlertProps {
   /**
    * Alert title.
    */
@@ -59,6 +59,7 @@ interface AlertProps {
   intent?: 'success' | 'info' | 'warning' | 'error' | 'notification';
   /**
    * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
+   * - undefined: no action button.
    */
   onClose?: () => void;
   /**
@@ -73,8 +74,26 @@ interface AlertProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Action label at the right side of the alert.
+   * - undefined: a close icon.
+   */
+  actionLabel?: string;
 }
 
+type AlertProps =
+  | (BasicAlertProps & {
+      actionLabel?: undefined;
+    })
+  | (BasicAlertProps & {
+      onClose: () => void;
+      /**
+       * Action label at the right side of the alert.
+       * - undefined: a close icon.
+       */
+      actionLabel: string;
+    });
+
 const Alert = ({
   content,
   icon,
@@ -84,6 +103,7 @@ const Alert = ({
   variant = 'rounded',
   style,
   testID,
+  actionLabel,
 }: AlertProps): JSX.Element => {
   useDeprecation(
     `Alert's notification intent is deprecated and will be removed in the next major release. Please use other intents instead.`,
@@ -103,12 +123,12 @@ const Alert = ({
         ) : null}
         <TextContainer>
           {typeof title === 'string' ? (
-            <Typography.Text fontWeight="semi-bold">{title}</Typography.Text>
+            <Typography.Body variant="small-bold">{title}</Typography.Body>
           ) : (
             title
           )}
           {typeof content === 'string' ? (
-            <Typography.Text>{content}</Typography.Text>
+            <Typography.Body variant="small">{content}</Typography.Body>
           ) : (
             content
           )}
@@ -116,7 +136,13 @@ const Alert = ({
       </ContentContainer>
       {onClose ? (
         <CTAWrapper onPress={onClose} testID="alert-close-icon">
-          <Icon icon="cancel" size="small" />
+          {typeof actionLabel === 'string' ? (
+            <Typography.Body variant="small-bold">
+              {actionLabel}
+            </Typography.Body>
+          ) : (
+            <Icon icon="cancel" size="small" />
+          )}
         </CTAWrapper>
       ) : null}
     </Container>

package/src/components/AnimatedScroller/AnimatedFAB.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import FAB from '../FAB';
+import ActionGroup, {
+  ActionGroupHandles,
+  ActionGroupProps,
+} from '../FAB/ActionGroup';
+import { FABHandles, FABProps } from '../FAB/FAB';
+
+const LAST_BREAKPOINT = 100;
+const MIDDLE_BREAKPOINT = 250;
+const MAX_ANIMATABLE_SCROLL_DISTANCE = 400;
+const REF_ACTIONS_BY_COMPONENT = {
+  FAB: {
+    show: 'show',
+    hide: 'hide',
+    collapse: 'collapse',
+  },
+  ActionGroup: {
+    show: 'showFAB',
+    hide: 'hideFAB',
+    collapse: 'collapseFAB',
+  },
+} as const;
+
+interface AnimatedFABProps {
+  fabProps: FABProps | ActionGroupProps;
+  contentOffsetY: Animated.Value;
+  contentHeight: Animated.Value;
+  layoutHeight: Animated.Value;
+}
+
+const AnimatedFAB = ({
+  fabProps,
+  contentOffsetY,
+  contentHeight,
+  layoutHeight,
+}: AnimatedFABProps) => {
+  const component = 'items' in fabProps ? 'ActionGroup' : 'FAB';
+  const ref = React.useRef<FABHandles & ActionGroupHandles>(null);
+  const currentContentHeight = React.useRef(0);
+  const currentLayoutHeight = React.useRef(0);
+
+  /** fabState is used to avoid calling duplicated animations. */
+  const fabState = React.useRef<'show' | 'hide' | 'collapse'>('show');
+
+  /** remainingScrollOffset determines whether to animate the FAB. */
+  const remainingScrollOffset = React.useRef(MAX_ANIMATABLE_SCROLL_DISTANCE);
+
+  /** currentScrollDirection is used to determine the scroll direction. */
+  const currentScrollDirection = React.useRef<'up' | 'down'>('down');
+
+  /** lastScrollY is the scrollY from the preview scroll event. */
+  const lastScrollY = React.useRef(0);
+
+  const animateFab = React.useCallback(
+    (newState: 'show' | 'hide' | 'collapse') => {
+      if (fabState.current !== newState) {
+        if (newState === 'show') {
+          ref.current?.[REF_ACTIONS_BY_COMPONENT[component].show]();
+        } else if (newState === 'hide') {
+          ref.current?.[REF_ACTIONS_BY_COMPONENT[component].hide]();
+        } else {
+          ref.current?.[REF_ACTIONS_BY_COMPONENT[component].collapse]();
+        }
+        fabState.current = newState;
+      }
+    },
+    [component]
+  );
+
+  React.useEffect(() => {
+    contentHeight.addListener(({ value }) => {
+      if (value > 0 && value !== currentContentHeight.current) {
+        currentContentHeight.current = value;
+      }
+    });
+
+    layoutHeight.addListener(({ value }) => {
+      if (value > 0 && value !== currentLayoutHeight.current) {
+        currentLayoutHeight.current = value;
+      }
+    });
+
+    // Listen to ScrollView's contentOffsetY value
+    contentOffsetY.addListener(({ value }) => {
+      if (
+        value < 0 ||
+        // Prevent calling the function if the scroll is not significant
+        (value > 0 && Math.abs(value - lastScrollY.current) < 5)
+      ) {
+        return;
+      }
+
+      // Scroll up to top, bouncing included.
+      if (value === 0 && lastScrollY.current !== 0) {
+        animateFab('show');
+      }
+
+      const newScrollDirection = value >= lastScrollY.current ? 'down' : 'up';
+
+      if (newScrollDirection !== currentScrollDirection.current) {
+        // If scroll direction changes, reset all values
+        currentScrollDirection.current = newScrollDirection;
+        remainingScrollOffset.current = MAX_ANIMATABLE_SCROLL_DISTANCE;
+      }
+
+      const hasReachedBottom =
+        value + currentLayoutHeight.current >= currentContentHeight.current;
+
+      // Scroll down to bottom, bouncing included.
+      if (hasReachedBottom) {
+        animateFab('hide');
+        return;
+      }
+
+      if (remainingScrollOffset.current) {
+        const offsetDiff = Math.round(
+          Math.max(Math.abs(value - lastScrollY.current), 0)
+        );
+
+        const newRemainingScrollOffset = Math.max(
+          remainingScrollOffset.current - offsetDiff,
+          0
+        );
+
+        if (newRemainingScrollOffset <= LAST_BREAKPOINT) {
+          animateFab(
+            currentScrollDirection.current === 'down' ? 'hide' : 'show'
+          );
+        } else if (newRemainingScrollOffset <= MIDDLE_BREAKPOINT) {
+          animateFab('collapse');
+        }
+
+        remainingScrollOffset.current = newRemainingScrollOffset;
+      }
+
+      lastScrollY.current = value;
+    });
+
+    return () => {
+      contentOffsetY.removeAllListeners();
+      contentHeight.removeAllListeners();
+      layoutHeight.removeAllListeners();
+    };
+  }, [contentHeight, contentOffsetY, layoutHeight]);
+
+  return component === 'FAB' ? (
+    <FAB ref={ref} {...(fabProps as FABProps)} />
+  ) : (
+    <ActionGroup ref={ref} {...(fabProps as ActionGroupHandles)} />
+  );
+};
+
+export default AnimatedFAB;

package/src/components/AnimatedScroller/AnimatedScrollable.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  Animated,
+  FlatListProps,
+  ScrollViewProps as RnScrollViewProps,
+  SectionListProps,
+} from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+import AnimatedFAB from './AnimatedFAB';
+
+export interface AnimatedScrollerProps<T> {
+  /**
+   * Scroll component, it can be ScrollView, FlatList or SectionList.
+   */
+  ScrollComponent: React.ReactElement<
+    RnScrollViewProps | FlatListProps<T> | SectionListProps<T>
+  >;
+  /**
+   * FAB or FAB.ActionGroup props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+function AnimatedScroller<T>({
+  ScrollComponent,
+  fabProps,
+}: AnimatedScrollerProps<T>) {
+  const contentOffsetY = React.useRef(new Animated.Value(0)).current;
+  const contentHeight = React.useRef(new Animated.Value(0)).current;
+  const layoutHeight = React.useRef(new Animated.Value(0)).current;
+
+  // Common props for all ScrollView, FlatList and SectionList.
+  const { onScroll, scrollEventThrottle } = ScrollComponent.props;
+
+  return (
+    <>
+      {React.cloneElement(ScrollComponent, {
+        ...ScrollComponent.props,
+        scrollEventThrottle: scrollEventThrottle || 100,
+        onScroll: Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: { y: contentOffsetY },
+                contentSize: { height: contentHeight },
+                layoutMeasurement: { height: layoutHeight },
+              },
+            },
+          ],
+          {
+            useNativeDriver: false,
+            listener: onScroll,
+          }
+        ),
+      })}
+
+      {!!fabProps && (
+        <AnimatedFAB
+          fabProps={fabProps}
+          contentOffsetY={contentOffsetY}
+          contentHeight={contentHeight}
+          layoutHeight={layoutHeight}
+        />
+      )}
+    </>
+  );
+}
+
+export default AnimatedScroller;

package/src/components/AnimatedScroller/FlatListWithFAB.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+import { FABProps } from '../FAB/FAB';
+import AnimatedScroller from './AnimatedScrollable';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+
+export interface FlatListWithFABProps<T> extends FlatListProps<T> {
+  /**
+   * FAB or FAB.ActionGroup props props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+function FlatListWithFAB<T>({ fabProps, ...props }: FlatListWithFABProps<T>) {
+  return (
+    <AnimatedScroller
+      ScrollComponent={<FlatList {...props} />}
+      fabProps={fabProps}
+    />
+  );
+}
+
+export default FlatListWithFAB;

package/src/components/AnimatedScroller/ScrollViewWithFAB.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ScrollView, ScrollViewProps } from 'react-native';
+import AnimatedScroller from './AnimatedScrollable';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+
+export interface ScrollViewWithFABProps extends ScrollViewProps {
+  /**
+   * FAB or FAB.ActionGroup props props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+const ScrollViewWithFAB = ({ fabProps, ...props }: ScrollViewWithFABProps) => (
+  <AnimatedScroller
+    ScrollComponent={<ScrollView {...props} />}
+    fabProps={fabProps}
+  />
+);
+
+export default ScrollViewWithFAB;

package/src/components/AnimatedScroller/SectionListWithFAB.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SectionList, SectionListProps } from 'react-native';
+import AnimatedScroller from './AnimatedScrollable';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+
+export interface SectionListWithFABProps<T> extends SectionListProps<T> {
+  /**
+   * FAB or FAB.ActionGroup props props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+function SectionListWithFAB<T>({
+  fabProps,
+  ...props
+}: SectionListWithFABProps<T>) {
+  return (
+    <AnimatedScroller
+      ScrollComponent={<SectionList {...props} />}
+      fabProps={fabProps}
+    />
+  );
+}
+
+export default SectionListWithFAB;

package/src/components/AnimatedScroller/__tests__/ScrollablesWithFAB.spec.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { FlatListWithFAB, ScrollViewWithFAB, SectionListWithFAB } from '..';
+import Box from '../../Box';
+import { ActionGroupProps } from '../../FAB/ActionGroup';
+import { FABProps } from '../../FAB/FAB';
+import Typography from '../../Typography';
+import { ScrollViewWithFABProps } from '../ScrollViewWithFAB';
+import { FlatListWithFABProps } from '../FlatListWithFAB';
+import SectionHeading from '../../SectionHeading';
+
+const ExampleScrollViewWithFAB = ({ fabProps }: ScrollViewWithFABProps) => (
+  <ScrollViewWithFAB fabProps={fabProps} testID="scrollable-with-fab">
+    <Box style={{ height: 2000 }} justifyContent="space-between">
+      <Typography.Body>Content 1</Typography.Body>
+      <Typography.Body>Content 2</Typography.Body>
+      <Typography.Body>Content 3</Typography.Body>
+    </Box>
+  </ScrollViewWithFAB>
+);
+
+function ExampleFlatListWithFAB<T>({ fabProps }: FlatListWithFABProps<T>) {
+  return (
+    <FlatListWithFAB
+      testID="scrollable-with-fab"
+      fabProps={fabProps}
+      data={Array.from({ length: 30 }, (_, i) => ({
+        id: i,
+        title: `Content ${i}`,
+      }))}
+      renderItem={({ item }) => (
+        <Box marginBottom="xxxxlarge">
+          <Typography.Title level="h5">{item.title}</Typography.Title>
+          <Typography.Body>Item {item.id}</Typography.Body>
+        </Box>
+      )}
+    />
+  );
+}
+
+function ExampleSectionListWithFAB<T>({ fabProps }: FlatListWithFABProps<T>) {
+  const theme = useTheme();
+
+  return (
+    <SectionListWithFAB
+      testID="scrollable-with-fab"
+      fabProps={fabProps}
+      sections={[
+        {
+          title: 'Title 1',
+          data: ['Content 1', 'Content 2', 'Content 3', 'Content 4'],
+        },
+        {
+          title: 'Title 2',
+          data: ['Content 5', 'Content 6', 'Content 7'],
+        },
+      ]}
+      renderSectionHeader={({ section: { title } }) => (
+        <SectionHeading text={title} />
+      )}
+      renderItem={({ item }) => (
+        <Typography.Title style={{ marginBottom: theme.space.xxxxlarge }}>
+          {item}
+        </Typography.Title>
+      )}
+    />
+  );
+}
+
+const defaultFabProps: FABProps = {
+  icon: 'speaker',
+  title: 'Shout out',
+  animated: true,
+};
+
+const defaultActionGroupProps: ActionGroupProps = {
+  fabTitle: 'Shout out',
+  items: [
+    { icon: 'speaker', title: 'Announcements' },
+    { icon: 'target', title: 'Goal' },
+  ],
+  active: false,
+};
+
+describe('Scrollables With FAB', () => {
+  it.each`
+    fabComponent     | ScrollComponent
+    ${'FAB'}         | ${ExampleScrollViewWithFAB}
+    ${'ActionGroup'} | ${ExampleScrollViewWithFAB}
+    ${'FAB'}         | ${ExampleFlatListWithFAB}
+    ${'ActionGroup'} | ${ExampleFlatListWithFAB}
+    ${'FAB'}         | ${ExampleSectionListWithFAB}
+    ${'ActionGroup'} | ${ExampleSectionListWithFAB}
+  `(
+    '$ScrollComponent renders $fabComponent correctly',
+    ({ fabComponent, ScrollComponent }) => {
+      const fabProps =
+        fabComponent === 'FAB' ? defaultFabProps : defaultActionGroupProps;
+
+      const { getByText, toJSON } = renderWithTheme(
+        <ScrollComponent fabProps={fabProps} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText('Content 1')).toBeDefined();
+      expect(getByText('Content 2')).toBeDefined();
+      expect(getByText('Content 3')).toBeDefined();
+      expect(getByText('Shout out')).toBeDefined();
+    }
+  );
+
+  it.each`
+    fabComponent     | ScrollComponent
+    ${'FAB'}         | ${ExampleScrollViewWithFAB}
+    ${'ActionGroup'} | ${ExampleScrollViewWithFAB}
+    ${'FAB'}         | ${ExampleFlatListWithFAB}
+    ${'ActionGroup'} | ${ExampleFlatListWithFAB}
+    ${'FAB'}         | ${ExampleSectionListWithFAB}
+    ${'ActionGroup'} | ${ExampleSectionListWithFAB}
+  `(
+    '$ScrollComponent animates $fabComponent correctly',
+    ({ fabComponent, ScrollComponent }) => {
+      const fabProps =
+        fabComponent === 'FAB' ? defaultFabProps : defaultActionGroupProps;
+
+      const scrollConfig = {
+        contentSize: { height: 2000 },
+        layoutMeasurement: { height: 700, width: 400 },
+      };
+
+      const { getByText, queryByText, getByTestId, queryByTestId } =
+        renderWithTheme(<ScrollComponent fabProps={fabProps} />);
+
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          ...scrollConfig,
+          contentOffset: { y: 50 },
+        },
+      });
+
+      // Scrolling down
+      expect(getByText('Shout out')).toBeDefined();
+
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          ...scrollConfig,
+          contentOffset: { y: 150 },
+        },
+      });
+
+      // Collapsed
+      expect(queryByText('Shout out')).toBeNull();
+      expect(getByTestId('animated-fab-icon')).toBeDefined();
+
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          ...scrollConfig,
+          contentOffset: { y: 500 },
+        },
+      });
+
+      // Hidden
+      expect(queryByText('Shout out')).toBeNull();
+      expect(queryByTestId('styled-fab-icon')).toBeNull();
+
+      // Scrolling up
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          ...scrollConfig,
+          contentOffset: { y: -150 },
+        },
+      });
+
+      // Collapsed
+      expect(queryByText('Shout out')).toBeNull();
+      expect(getByTestId('animated-fab-icon')).toBeDefined();
+
+      // Scrolling up to top
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          ...scrollConfig,
+          contentOffset: { y: 0 },
+        },
+      });
+
+      // Expanded
+      expect(getByText('Shout out')).toBeDefined();
+      expect(getByTestId('styled-fab-icon')).toBeDefined();
+    }
+  );
+});