@hero-design/rn 8.2.3 → 8.3.1

package/src/components/Carousel/index.tsx

@@ -0,0 +1,157 @@
+import React, {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+} from 'react';
+import {
+  Animated,
+  FlatList,
+  StyleProp,
+  useWindowDimensions,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+import { CarouselData } from './types';
+import CarouselPaginator from './CarouselPaginator';
+import {
+  StyledBackDrop,
+  StyledCarouselFooterWrapper,
+  StyledCarouselView,
+} from './StyledCarousel';
+import CarouselItem from './CarouselItem';
+
+interface CarouselProps extends ViewProps {
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * onItemIndexChange event handler receiving index of selected Item.
+   */
+  onItemIndexChange?: Dispatch<SetStateAction<number>>;
+  /**
+   * Carousel data.
+   */
+  items: CarouselData[];
+  /**
+   * Render action elements function.
+   */
+  renderActions?: (pageIndex: number) => JSX.Element;
+  /**
+   * Current selected item index.
+   */
+  selectedItemIndex?: number;
+}
+
+export function useStateFromProp<T>(
+  initialValue: T
+): [T, Dispatch<SetStateAction<T>>] {
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => setValue(initialValue), [initialValue]);
+
+  return [value, setValue];
+}
+
+const Carousel = ({
+  items,
+  onItemIndexChange,
+  renderActions,
+  selectedItemIndex = 0,
+  style,
+  ...nativeProps
+}: CarouselProps) => {
+  const carouselRef = useRef<FlatList>(null);
+
+  const [currentSlideIndex, setCurrentSlideIndex] =
+    useStateFromProp(selectedItemIndex);
+
+  const internalOnItemIndexChange = useCallback(
+    (index: number) => {
+      setCurrentSlideIndex(index);
+      if (onItemIndexChange) {
+        onItemIndexChange(index);
+      }
+    },
+    [setCurrentSlideIndex, onItemIndexChange]
+  );
+  const { width } = useWindowDimensions();
+
+  const scrollX = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    // must use setTimeout since when layout is mounted, the pagination dots are not set correct scrollX
+    const handle = setTimeout(() => {
+      scrollX.setValue(currentSlideIndex * width);
+      carouselRef.current?.scrollToOffset({
+        offset: currentSlideIndex * width,
+        animated: true,
+      });
+    }, 100);
+    return () => {
+      clearTimeout(handle);
+    };
+  }, [currentSlideIndex, carouselRef]);
+
+  const visibleSlideChanged = useCallback(({ viewableItems }) => {
+    if (!viewableItems || (viewableItems && !viewableItems.length)) return;
+    const { index } = viewableItems[0];
+    internalOnItemIndexChange(index);
+  }, []);
+
+  const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
+
+  return (
+    <View style={style} {...nativeProps}>
+      <StyledBackDrop
+        themeSlideBackground={items[currentSlideIndex].background}
+      />
+      <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}
+                width={width}
+              />
+            );
+          }}
+        />
+        <StyledCarouselFooterWrapper>
+          {renderActions && renderActions(currentSlideIndex)}
+          <CarouselPaginator numberOfSlides={items.length} scrollX={scrollX} />
+        </StyledCarouselFooterWrapper>
+      </StyledCarouselView>
+    </View>
+  );
+};
+
+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/components/Typography/Text/StyledText.tsx

@@ -15,6 +15,7 @@ const StyledText = styled(Text)<{
     | 'xlarge'
     | 'xxxlarge'
     | 'xxxxxlarge'
+    | '6xlarge'
     | '7xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
   themeIntent:

package/src/components/Typography/Text/index.tsx

@@ -22,6 +22,7 @@ export interface TextProps extends NativeTextProps {
     | 'xlarge'
     | 'xxxlarge'
     | 'xxxxxlarge'
+    | '6xlarge'
     | '7xlarge';
   /**
    * Font weight of the text.

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,36 @@ Object {
         "indicatorWidth": 16,
       },
     },
+    "carousel": Object {
+      "colors": Object {
+        "paginatorBackgroundColor": "#401960",
+      },
+      "fontSizes": Object {
+        "heading": 36,
+      },
+      "fonts": Object {
+        "heading": "RebondGrotesque-SemiBold",
+      },
+      "lineHeights": Object {
+        "heading": 44,
+      },
+      "radii": Object {
+        "paginatorBorderRadius": 999,
+      },
+      "sizes": Object {
+        "indicatorWidth": 16,
+        "paginatorHeight": 8,
+        "paginatorWidth": 8,
+      },
+      "space": Object {
+        "footerMarginBottom": 24,
+        "footerPaddingHorizontal": 24,
+        "footerPaddingVertical": 16,
+        "headingMarginBottom": 16,
+        "headingMarginTop": 8,
+        "paginatorMarginHorizontal": 8,
+      },
+    },
     "checkbox": Object {
       "borderWidths": Object {
         "icon": 2,
@@ -900,6 +930,7 @@ Object {
         "warning": "#ffa234",
       },
       "fontSizes": Object {
+        "6xlarge": 36,
         "7xlarge": 42,
         "large": 16,
         "medium": 14,
@@ -921,6 +952,7 @@ Object {
         },
       },
       "lineHeights": Object {
+        "6xlarge": 44,
         "7xlarge": 50,
         "large": 24,
         "medium": 22,
@@ -980,6 +1012,7 @@ Object {
     "warningSurface": "#fff6eb",
   },
   "fontSizes": Object {
+    "6xlarge": 36,
     "7xlarge": 42,
     "large": 16,
     "medium": 14,
@@ -1004,6 +1037,7 @@ Object {
     },
   },
   "lineHeights": Object {
+    "6xlarge": 44,
     "7xlarge": 50,
     "large": 24,
     "medium": 22,

package/src/theme/components/carousel.ts

@@ -0,0 +1,42 @@
+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,
+    footerPaddingHorizontal: theme.space.large,
+    footerPaddingVertical: theme.space.medium,
+    footerMarginBottom: theme.space.large,
+  };
+
+  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['6xlarge'],
+  };
+
+  const fonts = {
+    heading: theme.fonts.playful.semiBold,
+  };
+
+  const lineHeights = {
+    heading: theme.lineHeights['6xlarge'],
+  };
+
+  return { colors, sizes, radii, space, fonts, fontSizes, lineHeights };
+};
+
+export default getCarouselTheme;

package/src/theme/components/typography.ts

@@ -20,6 +20,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '6xlarge': theme.fontSizes['6xlarge'],
     '7xlarge': theme.fontSizes['7xlarge'],
   };
 
@@ -30,6 +31,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '6xlarge': theme.lineHeights['6xlarge'],
     '7xlarge': theme.lineHeights['7xlarge'],
   };
 

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/src/theme/global/typography.ts

@@ -13,6 +13,7 @@ interface Fonts {
 
 interface FontSizes {
   '7xlarge': number;
+  '6xlarge': number;
   xxxxxlarge: number;
   xxxxlarge: number;
   xxxlarge: number;
@@ -62,6 +63,7 @@ const getFontSizes = (baseFontSize: number): FontSizes => {
   });
   return {
     '7xlarge': scale(fontSizes[10]), // 42
+    '6xlarge': scale(fontSizes[9]), //  36
     xxxxxlarge: scale(fontSizes[8]), // 32
     xxxxlarge: scale(fontSizes[7]), //  28
     xxxlarge: scale(fontSizes[6]), //   24
@@ -78,6 +80,7 @@ const getLineHeights = (fontSizes: FontSizes): LineHeights => {
   const additionalSpace = 8;
   return {
     '7xlarge': fontSizes['7xlarge'] + additionalSpace,
+    '6xlarge': fontSizes['6xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,

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

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

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

@@ -0,0 +1,14 @@
+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;
+}, {}, {}>;
+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,36 @@
+import { View } from 'react-native';
+declare const StyledBackDrop: 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("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, };

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

@@ -0,0 +1,32 @@
+import { Dispatch, SetStateAction } from 'react';
+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;
+    /**
+     * onItemIndexChange event handler receiving index of selected Item.
+     */
+    onItemIndexChange?: Dispatch<SetStateAction<number>>;
+    /**
+     * Carousel data.
+     */
+    items: CarouselData[];
+    /**
+     * Render action elements function.
+     */
+    renderActions?: (pageIndex: number) => JSX.Element;
+    /**
+     * Current selected item index.
+     */
+    selectedItemIndex?: number;
+}
+export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
+declare const Carousel: ({ items, onItemIndexChange, renderActions, selectedItemIndex, style, ...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/components/Typography/Text/StyledText.d.ts

@@ -3,7 +3,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '7xlarge';
+    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
     themeTypeface: 'neutral' | 'playful';

package/types/components/Typography/Text/index.d.ts

@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '7xlarge';
+    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     /**
      * Font weight of the text.
      */

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';

package/types/theme/components/carousel.d.ts

@@ -0,0 +1,32 @@
+import type { GlobalTheme } from '../global';
+declare const getCarouselTheme: (theme: GlobalTheme) => {
+    colors: {
+        paginatorBackgroundColor: string;
+    };
+    sizes: {
+        indicatorWidth: number;
+        paginatorHeight: number;
+        paginatorWidth: number;
+    };
+    radii: {
+        paginatorBorderRadius: number;
+    };
+    space: {
+        headingMarginTop: number;
+        headingMarginBottom: number;
+        paginatorMarginHorizontal: number;
+        footerPaddingHorizontal: number;
+        footerPaddingVertical: number;
+        footerMarginBottom: number;
+    };
+    fonts: {
+        heading: string;
+    };
+    fontSizes: {
+        heading: number;
+    };
+    lineHeights: {
+        heading: number;
+    };
+};
+export default getCarouselTheme;

package/types/theme/components/typography.d.ts

@@ -19,6 +19,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xlarge: number;
         xxxlarge: number;
         xxxxxlarge: number;
+        '6xlarge': number;
         '7xlarge': number;
     };
     lineHeights: {
@@ -28,6 +29,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xlarge: number;
         xxxlarge: number;
         xxxxxlarge: number;
+        '6xlarge': number;
         '7xlarge': number;
     };
 };

package/types/theme/getTheme.d.ts

@@ -8,6 +8,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';
@@ -49,6 +50,7 @@ declare 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>;

package/types/theme/global/typography.d.ts

@@ -9,6 +9,7 @@ interface Fonts {
 }
 interface FontSizes {
     '7xlarge': number;
+    '6xlarge': number;
     xxxxxlarge: number;
     xxxxlarge: number;
     xxxlarge: number;