@hero-design/rn 8.2.2 → 8.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.2.2",
+  "version": "8.3.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.2.2",
+    "@hero-design/colors": "8.3.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.2.2",
+    "@hero-design/eslint-plugin": "8.3.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.2.2",
+    "eslint-config-hd": "8.3.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.2.2",
+    "prettier-config-hd": "8.3.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Box/StyledBox.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/native';
 import { Theme } from '@emotion/react';
 import { View } from 'react-native';
-import { StyleProps, ThemeScale } from './types';
+import { FlexStyleProps, StyleProps, ThemeScale } from './types';
 import { pick } from '../../utils/helpers';
 import config, { ConfigType, flexPropsKey } from './config';
 
@@ -44,10 +44,12 @@ const mapStylePropToThemeValue = (theme: Theme, props: StyleProps) => {
 
 const configKeys = Object.keys(config) as Array<keyof ConfigType>;
 
-const StyledBox = styled(View)<StyleProps>(({ theme, ...otherProps }) => {
-  const styleProps = pick(configKeys, otherProps);
-  const flexProps = pick([...flexPropsKey], otherProps);
-  return { ...mapStylePropToThemeValue(theme, styleProps), ...flexProps };
-});
+const StyledBox = styled(View)<StyleProps & FlexStyleProps>(
+  ({ theme, ...otherProps }) => {
+    const styleProps = pick(configKeys, otherProps);
+    const flexProps = pick([...flexPropsKey], otherProps);
+    return { ...mapStylePropToThemeValue(theme, styleProps), ...flexProps };
+  }
+);
 
 export { StyledBox };

package/src/components/Card/StyledCard.tsx

@@ -2,7 +2,7 @@ import { View } from 'react-native';
 import styled from '@emotion/native';
 
 const StyledCard = styled(View)<{
-  themeIntent?: 'primary' | 'success' | 'warning';
+  themeIntent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
 }>(({ theme, themeIntent }) => ({
   ...(themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent],

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

@@ -1,5 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Card renders correctly when intent is archived 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#abacaf",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="archived"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
+exports[`Card renders correctly when intent is danger 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f46363",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="danger"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
 exports[`Card renders correctly when intent is info 1`] = `
 <View
   style={

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

@@ -23,6 +23,8 @@ describe('Card', () => {
     ${'primary'}
     ${'success'}
     ${'info'}
+    ${'danger'}
+    ${'archived'}
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Card intent={intent}>

package/src/components/Card/index.tsx

@@ -12,7 +12,7 @@ interface CardProps extends ViewProps {
   /**
    * Visual intent color to apply to card.
    */
-  intent?: 'primary' | 'success' | 'warning';
+  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
   /**
    * Additional style.
    */

package/src/components/Carousel/CarouselItem.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import {
+  StyledCarouselContentWrapper,
+  StyledCarouselHeading,
+  StyledCarouselImage,
+} from './StyledCarousel';
+import Box from '../Box';
+import Typography from '../Typography';
+import { CarouselData } from './types';
+
+interface CarouselItemProps extends Omit<CarouselData, 'background'> {
+  width: number;
+  minHeight: number;
+}
+
+const CarouselItem = ({
+  width,
+  image,
+  content,
+  heading,
+  body,
+  minHeight,
+}: CarouselItemProps) => {
+  return (
+    <Box style={{ width }}>
+      {image && (
+        <StyledCarouselImage
+          source={typeof image === 'string' ? { uri: image } : image}
+        />
+      )}
+
+      <StyledCarouselContentWrapper
+        paddingHorizontal="large"
+        marginTop="large"
+        width={width}
+        style={{ minHeight }}
+      >
+        {content}
+        <StyledCarouselHeading>{heading}</StyledCarouselHeading>
+        {body ? (
+          <Typography.Text fontSize="large">{body}</Typography.Text>
+        ) : null}
+      </StyledCarouselContentWrapper>
+    </Box>
+  );
+};
+
+export default CarouselItem;

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

@@ -0,0 +1,19 @@
+import { Animated, View } from 'react-native';
+import styled from '@emotion/native';
+
+const StyledCarouselPaginator = styled(View)(() => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+}));
+
+const StyledCarouselPaginatorAnimatedView = styled(Animated.View)<{
+  indicatorWidth: Animated.AnimatedInterpolation;
+}>(({ theme }) => ({
+  height: theme.__hd__.carousel.sizes.paginatorHeight,
+  width: theme.__hd__.carousel.sizes.paginatorWidth,
+  borderRadius: theme.__hd__.carousel.radii.paginatorBorderRadius,
+  backgroundColor: theme.__hd__.carousel.colors.paginatorBackgroundColor,
+  marginHorizontal: theme.__hd__.carousel.space.paginatorMarginHorizontal,
+}));
+
+export { StyledCarouselPaginator, StyledCarouselPaginatorAnimatedView };

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