@hero-design/rn 8.12.5-alpha.1 → 8.13.0

package/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx

@@ -1,24 +1,19 @@
 import React from 'react';
-import { FlatList, Text } from 'react-native';
-import { fireEvent, waitFor } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import PagerView from 'react-native-pager-view';
+import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tabs from '..';
 import Button from '../../Button';
 import type { TabType } from '..';
-import { ScrollableTabsProps, ScrollableTabsHandles } from '../ScrollableTabs';
 
-type TestTabsProps = Omit<
-  ScrollableTabsProps,
-  'selectedTabKey' | 'onTabPress' | 'tabs'
-> & {
-  onTabPress?: (tabKey: string) => void;
-};
-const TestTabsComponent = React.forwardRef<
-  ScrollableTabsHandles,
-  TestTabsProps
->((props, ref) => {
+const TestTabsComponent = (
+  props: Omit<
+    ComponentProps<typeof Tabs>,
+    'selectedTabKey' | 'onTabPress' | 'tabs'
+  >
+) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('work');
   const tabs: TabType[] = [
     {
@@ -66,20 +61,14 @@ const TestTabsComponent = React.forwardRef<
         icon="sync"
       />
       <Tabs.Scroll
-        ref={ref}
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onTabPress={(newTabKey) => {
-          setSelectedTabKey(newTabKey);
-          if (props.onTabPress) {
-            props.onTabPress(newTabKey);
-          }
-        }}
+        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );
-});
+};
 
 describe('Tabs.Scroll', () => {
   it('renders correctly', () => {
@@ -117,40 +106,4 @@ describe('Tabs.Scroll', () => {
     expect(getByText('Home Screen')).toBeDefined();
     expect(queryByText('Work Screen')).toBeNull();
   });
-
-  describe('selectTabKey', () => {
-    it('should render correctly', () => {
-      const ref = React.createRef<
-        ScrollableTabsHandles & {
-          getFlatListRef: () => FlatList;
-          getPagerViewRef: () => PagerView;
-        }
-      >();
-      const onTabPressSpye = jest.fn();
-      renderWithTheme(
-        <TestTabsComponent
-          ref={ref}
-          lazy
-          lazyPreloadDistance={1}
-          onTabPress={onTabPressSpye}
-          swipeEnabled={false}
-        />
-      );
-
-      const flatListRef = ref.current!.getFlatListRef()!;
-      const pagerViewRef = ref.current!.getPagerViewRef()!;
-      const scrollToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
-      const setPageSpy = jest.spyOn(pagerViewRef, 'setPage');
-      ref.current?.selectTabKey('personal');
-      waitFor(() => expect(scrollToIndexSpy).toHaveBeenCalled());
-      waitFor(() => expect(setPageSpy).toHaveBeenCalled());
-
-      expect(scrollToIndexSpy).toHaveBeenCalledWith({
-        index: 1,
-        viewPosition: 0.5,
-      });
-      expect(setPageSpy).toHaveBeenCalledWith(1);
-      expect(onTabPressSpye).toHaveBeenCalledWith('personal');
-    });
-  });
 });

package/src/index.ts

@@ -32,6 +32,7 @@ import DatePicker from './components/DatePicker';
 import Divider from './components/Divider';
 import Drawer from './components/Drawer';
 import Empty from './components/Empty';
+import Error from './components/Error';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
 import Image from './components/Image';
@@ -90,6 +91,7 @@ export {
   Divider,
   Drawer,
   Empty,
+  Error,
   FAB,
   Icon,
   Image,

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

@@ -420,6 +420,36 @@ Object {
         "wrapperPadding": 16,
       },
     },
+    "error": Object {
+      "colors": Object {
+        "description": "#4d6265",
+        "fullScreenBackground": "#ccd2d3",
+        "inPageBackground": "#f6f6f7",
+        "title": "#001f23",
+      },
+      "fontSizes": Object {
+        "description": 18,
+        "title": 24,
+      },
+      "fonts": Object {
+        "description": "RebondGrotesque",
+        "title": "RebondGrotesque-SemiBold",
+      },
+      "sizes": Object {
+        "image": 176,
+      },
+      "space": Object {
+        "button": Object {
+          "margin": 16,
+          "padding": 16,
+          "wrapperHorizontalPadding": 16,
+          "wrapperVerticalPadding": 48,
+        },
+        "imageMarginBottom": 32,
+        "titleMarginBottom": 8,
+        "wrapperPadding": 24,
+      },
+    },
     "fab": Object {
       "colors": Object {
         "actionItemBackground": "#401960",

package/src/theme/components/error.ts

@@ -0,0 +1,40 @@
+import type { GlobalTheme } from '../global';
+
+const getErrorTheme = (theme: GlobalTheme) => {
+  const space = {
+    titleMarginBottom: theme.space.small,
+    imageMarginBottom: theme.space.xlarge,
+    wrapperPadding: theme.space.large,
+    button: {
+      wrapperHorizontalPadding: theme.space.medium,
+      wrapperVerticalPadding: theme.space.xxxlarge,
+      margin: theme.space.medium,
+      padding: theme.space.medium,
+    },
+  };
+
+  const sizes = {
+    image: theme.sizes['19xlarge'],
+  };
+
+  const colors = {
+    title: theme.colors.onDefaultGlobalSurface,
+    description: theme.colors.mutedOnDefaultGlobalSurface,
+    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    inPageBackground: theme.colors.neutralGlobalSurface,
+  };
+
+  const fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
+  };
+
+  const fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts };
+};
+
+export default getErrorTheme;

package/src/theme/getTheme.ts

@@ -18,6 +18,7 @@ import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
 import getEmptyTheme from './components/empty';
+import getErrorTheme from './components/error';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getImageTheme from './components/image';
@@ -64,6 +65,7 @@ type Theme = GlobalTheme & {
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
     empty: ReturnType<typeof getEmptyTheme>;
+    error: ReturnType<typeof getErrorTheme>;
     fab: ReturnType<typeof getFABTheme>;
     icon: ReturnType<typeof getIconTheme>;
     image: ReturnType<typeof getImageTheme>;
@@ -116,6 +118,7 @@ const getTheme = (
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
       empty: getEmptyTheme(globalTheme),
+      error: getErrorTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),

package/src/types.ts

@@ -15,7 +15,6 @@ import type {
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
-import { ScrollableTabsHandles } from './components/Tabs/ScrollableTabs';
 
 export type {
   BottomNavigationTabType,
@@ -28,7 +27,6 @@ export type {
   RichTextEditorProps,
   RichTextEditorRef,
   TabType,
-  ScrollableTabsHandles,
   TextInputProps,
   TextProps,
   TextInputHandles,

package/types/components/Error/StyledError.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import { Modal, View } from 'react-native';
+declare type ErrorVariant = 'full-screen' | 'in-page';
+declare const StyledErrorModal: import("@emotion/native").StyledComponent<import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<Modal> | undefined;
+}>;
+declare const StyledErrorContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: ErrorVariant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledErrorContent: 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 StyledErrorButtonContainer: 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 StyledErrorButtonPrimary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledErrorButtonSecondary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledErrorImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledErrorTitle: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledErrorDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { ErrorVariant, StyledErrorModal, StyledErrorImage, StyledErrorContainer, StyledErrorButtonContainer, StyledErrorButtonPrimary, StyledErrorButtonSecondary, StyledErrorContent, StyledErrorTitle, StyledErrorDescription, };

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

@@ -0,0 +1,55 @@
+import type { ReactElement } from 'react';
+import type { ImageSourcePropType, ViewProps } from 'react-native';
+import { ErrorVariant } from './StyledError';
+interface ErrorPageProps extends ViewProps {
+    /**
+     * Variant of the error
+     */
+    variant?: ErrorVariant;
+    /**
+     * Title of the error
+     */
+    title: string;
+    /**
+     * Description of the error
+     */
+    description?: string;
+    /**
+     * Image of the error
+     */
+    image?: ImageSourcePropType | string;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Action button text
+     */
+    ctaText?: string;
+    /**
+     * Callback when the action button is pressed.
+     */
+    onCtaPress?: () => void;
+    /**
+     * Secondary button text
+     */
+    secondaryCtaText?: string;
+    /**
+     * Callback when the secondary button is pressed.
+     */
+    onSecondaryCtaPress?: () => void;
+}
+declare type ErrorProps = ErrorPageProps & {
+    /**
+     * Visibility of the error
+     */
+    visible: boolean;
+};
+/**
+ * Renders error page
+ *
+ * @param {ErrorProps}
+ * @return {*}  {ReactElement}
+ */
+declare const Error: ({ visible, variant, title, description, testID, ctaText, onCtaPress, secondaryCtaText, onSecondaryCtaPress, ...nativeProps }: ErrorProps) => ReactElement;
+export default Error;