@hero-design/rn 8.2.3 → 8.3.0

package/src/components/Carousel/CarouselPaginator/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Animated, useWindowDimensions } from 'react-native';
+
+import {
+  StyledCarouselPaginatorAnimatedView,
+  StyledCarouselPaginator,
+} from './StyledCarouselPaginator';
+import { useTheme } from '../../../theme';
+
+interface CarouselPaginatorProps {
+  numberOfSlides: number;
+  scrollX: Animated.Value;
+}
+const CarouselPaginator = ({
+  numberOfSlides,
+  scrollX,
+}: CarouselPaginatorProps) => {
+  const { width } = useWindowDimensions();
+  const theme = useTheme();
+
+  return (
+    <StyledCarouselPaginator>
+      {new Array(numberOfSlides).fill('').map((_, index) => {
+        const inputRange = [
+          (index - 1) * width,
+          index * width,
+          (index + 1) * width,
+        ];
+
+        const indicatorWidth = scrollX.interpolate({
+          inputRange,
+          outputRange: [
+            theme.space.small,
+            theme.space.large,
+            theme.space.small,
+          ],
+          extrapolate: 'clamp',
+        });
+
+        const opacity = scrollX.interpolate({
+          inputRange,
+          outputRange: [0.5, 1, 0.5],
+          extrapolate: 'clamp',
+        });
+
+        return (
+          <StyledCarouselPaginatorAnimatedView
+            indicatorWidth={indicatorWidth}
+            style={[{ width: indicatorWidth, opacity }]}
+            key={index.toString()}
+          />
+        );
+      })}
+    </StyledCarouselPaginator>
+  );
+};
+
+export default CarouselPaginator;

package/src/components/Carousel/StyledCarousel.tsx

@@ -0,0 +1,55 @@
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import Typography from '../Typography';
+import Image from '../Image';
+import Box from '../Box';
+
+const StyledCarousel = styled(View)<{
+  themeSlideBackground: string;
+}>(({ themeSlideBackground }) => ({
+  zIndex: 99999,
+  position: 'absolute',
+  backgroundColor: themeSlideBackground,
+  top: 0,
+  bottom: 0,
+  right: 0,
+  left: 0,
+}));
+
+const StyledCarouselView = styled(View)(() => ({
+  justifyContent: 'space-between',
+  height: '100%',
+}));
+
+const StyledCarouselHeading = styled(Typography.Text)(({ theme }) => ({
+  marginTop: theme.__hd__.carousel.space.headingMarginTop,
+  marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
+  fontFamily: theme.__hd__.carousel.fonts.heading,
+  fontSize: theme.__hd__.carousel.fontSizes.heading,
+  lineHeight: theme.__hd__.carousel.lineHeights.heading,
+}));
+
+const StyledCarouselImage = styled(Image)(() => ({
+  flex: 1,
+  width: '100%',
+  resizeMode: 'contain',
+}));
+
+const StyledCarouselContentWrapper = styled(Box)<{
+  width: number;
+}>(({ width }) => ({
+  width,
+}));
+
+const StyledCarouselFooterWrapper = styled(Box)(() => ({
+  width: '100%',
+}));
+
+export {
+  StyledCarousel,
+  StyledCarouselView,
+  StyledCarouselHeading,
+  StyledCarouselImage,
+  StyledCarouselContentWrapper,
+  StyledCarouselFooterWrapper,
+};

package/src/components/Carousel/__tests__/StyledCarousel.spec.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledCarousel } from '../StyledCarousel';
+import theme from '../../../theme';
+
+describe('StyledCard', () => {
+  it('renders correct basic style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledCarousel themeSlideBackground={theme.colors.highlightedSurface} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Carousel/__tests__/__snapshots__/StyledCarousel.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledCard renders correct basic style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ece8ef",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      },
+      undefined,
+    ]
+  }
+  themeSlideBackground="#ece8ef"
+/>
+`;

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Carousel from '..';
+import Image from '../../Image';
+import { theme } from '../../..';
+
+const carouselData = [
+  {
+    image: 'https://picsum.photos/800/1200',
+    heading: 'Welcome to the new Employment Hero app',
+    body: 'Access your Work, Money and Benefits in the palm of your hand.',
+    background: theme.colors.highlightedSurface,
+  },
+  {
+    image: 'https://picsum.photos/800/1200',
+    content: <Image source={{ uri: 'https://picsum.photos/30' }} />,
+    heading: 'Same app with a new look!',
+    body: 'Our app now has a new bright clean modern look and feel with the same great features.',
+    background: theme.colors.decorativePrimarySurface,
+  },
+  {
+    image: 'https://picsum.photos/800/1200',
+    heading: 'Easier to get around',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.',
+    background: theme.colors.decorativePrimarySurface,
+  },
+];
+
+describe('Carousel', () => {
+  it('renders basic carousel', async () => {
+    const onSkip = jest.fn();
+    const onFinish = jest.fn();
+
+    const { getByTestId, queryByText } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={carouselData}
+        onSkipPress={onSkip}
+        onFinishPress={onFinish}
+      />
+    );
+
+    expect(getByTestId('carousel')).toBeTruthy();
+
+    expect(queryByText('Skip')).toBeTruthy();
+
+    // Slide 1
+    expect(queryByText('Welcome to the new Employment Hero app')).toBeTruthy();
+    expect(
+      queryByText(
+        'Access your Work, Money and Benefits in the palm of your hand.'
+      )
+    ).toBeTruthy();
+
+    // Slide 2
+    expect(queryByText('Same app with a new look!')).toBeTruthy();
+    expect(
+      queryByText(
+        'Our app now has a new bright clean modern look and feel with the same great features.'
+      )
+    ).toBeTruthy();
+
+    // Slide 3
+    expect(queryByText('Easier to get around')).toBeTruthy();
+    expect(
+      queryByText(
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.'
+      )
+    ).toBeTruthy();
+  });
+
+  it('should call skip call back when press skip', () => {
+    const onSkip = jest.fn();
+
+    const { queryByText } = renderWithTheme(
+      <Carousel testID="carousel" items={carouselData} onSkipPress={onSkip} />
+    );
+
+    expect(queryByText('Skip')).toBeTruthy();
+
+    fireEvent.press(queryByText('Skip'));
+    expect(onSkip).toBeCalled();
+  });
+});

package/src/components/Carousel/index.tsx

@@ -0,0 +1,176 @@
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  Animated,
+  FlatList,
+  StyleProp,
+  useWindowDimensions,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+import { CarouselData } from './types';
+import CarouselPaginator from './CarouselPaginator';
+import {
+  StyledCarousel,
+  StyledCarouselFooterWrapper,
+  StyledCarouselView,
+} from './StyledCarousel';
+import Button from '../Button';
+import CarouselItem from './CarouselItem';
+
+interface CarouselProps extends ViewProps {
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+
+  /**
+   * Callback to be called when the user slides to the next slide.
+   */
+  onSlideChange?: (currentSlide?: CarouselData) => void;
+
+  /**
+   * Callback to be called when the user skips the intro carousel.
+   */
+  onSkipPress?: (currentSlide?: CarouselData) => void;
+
+  /**
+   * Callback to be called when the user finishes the intro carousel.
+   */
+  onFinishPress?: (currentSlide?: CarouselData) => void;
+
+  /**
+   * Carousel data.
+   */
+  items: CarouselData[];
+
+  /**
+   * Finish button label.
+   */
+  finishButtonLabel?: string;
+
+  /**
+   * Skip button label.
+   */
+  skipButtonLabel?: string;
+
+  /**
+   * Footer height.
+   */
+  footerHeight?: number;
+
+  /**
+   * Min content height.
+   */
+  minContentHeight?: number;
+}
+
+const Carousel = ({
+  items,
+  onFinishPress,
+  onSkipPress,
+  onSlideChange,
+  finishButtonLabel = `Let's go!`,
+  skipButtonLabel = 'Skip',
+  footerHeight = 70,
+  minContentHeight = 250,
+  ...nativeProps
+}: CarouselProps) => {
+  const carouselRef = useRef(null);
+  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
+  const { width } = useWindowDimensions();
+
+  const scrollX = useRef(new Animated.Value(0)).current;
+
+  const visibleSlideChanged = useCallback(
+    ({ viewableItems }) => {
+      if (!viewableItems || (viewableItems && !viewableItems.length)) return;
+      const currentIndex = viewableItems[0].index;
+      setCurrentSlideIndex(viewableItems[0].index);
+      const currentSlide = items[currentIndex];
+      if (onSlideChange) {
+        onSlideChange(currentSlide);
+      }
+    },
+    [items, onSlideChange]
+  );
+
+  const skipCarousel = useCallback(() => {
+    const currentSlide = items[currentSlideIndex];
+    if (onSkipPress) {
+      onSkipPress(currentSlide);
+    }
+  }, [currentSlideIndex, onSkipPress, items]);
+
+  const finishCarousel = useCallback(() => {
+    const currentSlide = items[currentSlideIndex];
+    if (onFinishPress) {
+      onFinishPress(currentSlide);
+    }
+  }, [onFinishPress, items, currentSlideIndex]);
+
+  const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
+
+  const isLastSlide = currentSlideIndex === items.length - 1;
+
+  return (
+    <StyledCarousel
+      themeSlideBackground={items[currentSlideIndex].background}
+      {...nativeProps}
+    >
+      <StyledCarouselView>
+        <FlatList
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          pagingEnabled
+          bounces={false}
+          data={items}
+          onViewableItemsChanged={visibleSlideChanged}
+          viewabilityConfig={viewConfig}
+          scrollEventThrottle={32}
+          ref={carouselRef}
+          onScroll={Animated.event(
+            [{ nativeEvent: { contentOffset: { x: scrollX } } }],
+            { useNativeDriver: false }
+          )}
+          renderItem={({ item }) => {
+            if (!item) return null;
+
+            const { image, heading, body, content } = item;
+
+            return (
+              <CarouselItem
+                image={image}
+                heading={heading}
+                body={body}
+                content={content}
+                minHeight={minContentHeight}
+                width={width}
+              />
+            );
+          }}
+        />
+        <StyledCarouselFooterWrapper
+          paddingHorizontal="large"
+          flexDirection="row"
+          justifyContent="space-between"
+          style={{ height: footerHeight }}
+        >
+          <Button
+            variant={isLastSlide ? 'filled' : 'text'}
+            intent="primary"
+            onPress={isLastSlide ? finishCarousel : skipCarousel}
+            text={isLastSlide ? finishButtonLabel : skipButtonLabel}
+          />
+          <CarouselPaginator numberOfSlides={items.length} scrollX={scrollX} />
+        </StyledCarouselFooterWrapper>
+      </StyledCarouselView>
+    </StyledCarousel>
+  );
+};
+
+export default Carousel;

package/src/components/Carousel/types.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ImageSourcePropType } from 'react-native';
+
+export type CarouselData = {
+  image: ImageSourcePropType | string;
+  content?: ReactNode;
+  heading: string;
+  body?: string;
+  background: string;
+};

package/src/index.ts

@@ -21,6 +21,7 @@ import BottomSheet from './components/BottomSheet';
 import Box from './components/Box';
 import Button from './components/Button';
 import Calendar from './components/Calendar';
+import Carousel from './components/Carousel';
 import Card from './components/Card';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
@@ -76,6 +77,7 @@ export {
   Button,
   Calendar,
   Card,
+  Carousel,
   Collapse,
   Checkbox,
   ContentNavigator,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -253,6 +253,33 @@ Object {
         "indicatorWidth": 16,
       },
     },
+    "carousel": Object {
+      "colors": Object {
+        "paginatorBackgroundColor": "#401960",
+      },
+      "fontSizes": Object {
+        "heading": 32,
+      },
+      "fonts": Object {
+        "heading": "RebondGrotesque-SemiBold",
+      },
+      "lineHeights": Object {
+        "heading": 32,
+      },
+      "radii": Object {
+        "paginatorBorderRadius": 999,
+      },
+      "sizes": Object {
+        "indicatorWidth": 16,
+        "paginatorHeight": 8,
+        "paginatorWidth": 8,
+      },
+      "space": Object {
+        "headingMarginBottom": 16,
+        "headingMarginTop": 8,
+        "paginatorMarginHorizontal": 8,
+      },
+    },
     "checkbox": Object {
       "borderWidths": Object {
         "icon": 2,

package/src/theme/components/carousel.ts

@@ -0,0 +1,39 @@
+import type { GlobalTheme } from '../global';
+
+const getCarouselTheme = (theme: GlobalTheme) => {
+  const colors = {
+    paginatorBackgroundColor: theme.colors.primary,
+  };
+
+  const space = {
+    headingMarginTop: theme.space.small,
+    headingMarginBottom: theme.space.medium,
+    paginatorMarginHorizontal: theme.space.small,
+  };
+
+  const sizes = {
+    indicatorWidth: theme.sizes.medium,
+    paginatorHeight: theme.sizes.small,
+    paginatorWidth: theme.sizes.small,
+  };
+
+  const radii = {
+    paginatorBorderRadius: theme.radii.rounded,
+  };
+
+  const fontSizes = {
+    heading: theme.fontSizes.xxxxxlarge,
+  };
+
+  const fonts = {
+    heading: theme.fonts.playful.semiBold,
+  };
+
+  const lineHeights = {
+    heading: theme.lineHeights.xxxlarge,
+  };
+
+  return { colors, sizes, radii, space, fonts, fontSizes, lineHeights };
+};
+
+export default getCarouselTheme;

package/src/theme/getTheme.ts

@@ -10,6 +10,7 @@ import getBottomSheetTheme from './components/bottomSheet';
 import getButtonTheme from './components/button';
 import getCalendarTheme from './components/calendar';
 import getCardTheme from './components/card';
+import getCarouselTheme from './components/carousel';
 import getCheckboxTheme from './components/checkbox';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
@@ -53,6 +54,7 @@ type Theme = GlobalTheme & {
     button: ReturnType<typeof getButtonTheme>;
     calendar: ReturnType<typeof getCalendarTheme>;
     card: ReturnType<typeof getCardTheme>;
+    carousel: ReturnType<typeof getCarouselTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     datePicker: ReturnType<typeof getDatePickerTheme>;
@@ -102,6 +104,7 @@ const getTheme = (
       button: getButtonTheme(globalTheme),
       calendar: getCalendarTheme(globalTheme),
       card: getCardTheme(globalTheme),
+      carousel: getCarouselTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
       datePicker: getDatePickerTheme(globalTheme),

package/types/components/Carousel/CarouselItem.d.ts

@@ -0,0 +1,7 @@
+import { CarouselData } from './types';
+interface CarouselItemProps extends Omit<CarouselData, 'background'> {
+    width: number;
+    minHeight: number;
+}
+declare const CarouselItem: ({ width, image, content, heading, body, minHeight, }: CarouselItemProps) => JSX.Element;
+export default CarouselItem;

package/types/components/Carousel/CarouselPaginator/StyledCarouselPaginator.d.ts

@@ -0,0 +1,16 @@
+import { Animated, View } from 'react-native';
+declare const StyledCarouselPaginator: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCarouselPaginatorAnimatedView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    indicatorWidth: Animated.AnimatedInterpolation;
+}, {}, {}>;
+export { StyledCarouselPaginator, StyledCarouselPaginatorAnimatedView };

package/types/components/Carousel/CarouselPaginator/index.d.ts

@@ -0,0 +1,7 @@
+import { Animated } from 'react-native';
+interface CarouselPaginatorProps {
+    numberOfSlides: number;
+    scrollX: Animated.Value;
+}
+declare const CarouselPaginator: ({ numberOfSlides, scrollX, }: CarouselPaginatorProps) => JSX.Element;
+export default CarouselPaginator;

package/types/components/Carousel/StyledCarousel.d.ts

@@ -0,0 +1,34 @@
+import { View } from 'react-native';
+declare const StyledCarousel: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSlideBackground: string;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCarouselView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCarouselHeading: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledCarouselImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledCarouselContentWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width: number;
+}, {}, {}>;
+declare const StyledCarouselFooterWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { StyledCarousel, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, };

package/types/components/Carousel/index.d.ts

@@ -0,0 +1,46 @@
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { CarouselData } from './types';
+interface CarouselProps extends ViewProps {
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Callback to be called when the user slides to the next slide.
+     */
+    onSlideChange?: (currentSlide?: CarouselData) => void;
+    /**
+     * Callback to be called when the user skips the intro carousel.
+     */
+    onSkipPress?: (currentSlide?: CarouselData) => void;
+    /**
+     * Callback to be called when the user finishes the intro carousel.
+     */
+    onFinishPress?: (currentSlide?: CarouselData) => void;
+    /**
+     * Carousel data.
+     */
+    items: CarouselData[];
+    /**
+     * Finish button label.
+     */
+    finishButtonLabel?: string;
+    /**
+     * Skip button label.
+     */
+    skipButtonLabel?: string;
+    /**
+     * Footer height.
+     */
+    footerHeight?: number;
+    /**
+     * Min content height.
+     */
+    minContentHeight?: number;
+}
+declare const Carousel: ({ items, onFinishPress, onSkipPress, onSlideChange, finishButtonLabel, skipButtonLabel, footerHeight, minContentHeight, ...nativeProps }: CarouselProps) => JSX.Element;
+export default Carousel;

package/types/components/Carousel/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ImageSourcePropType } from 'react-native';
+export declare type CarouselData = {
+    image: ImageSourcePropType | string;
+    content?: ReactNode;
+    heading: string;
+    body?: string;
+    background: string;
+};

package/types/index.d.ts

@@ -10,6 +10,7 @@ import BottomSheet from './components/BottomSheet';
 import Box from './components/Box';
 import Button from './components/Button';
 import Calendar from './components/Calendar';
+import Carousel from './components/Carousel';
 import Card from './components/Card';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
@@ -40,5 +41,5 @@ import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, swagSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
 export * from './types';