@hero-design/rn 8.82.2-alpha.2 → 8.83.0

package/rollup.config.mjs

@@ -42,6 +42,7 @@ export default {
     'react-native-vector-icons',
     'react-native-linear-gradient',
     '@hero-design/react-native-month-year-picker',
+    '@ptomasroos/react-native-multi-slider',
   ],
   plugins: [
     replace({

package/src/components/AppCue/StyledAppCue.tsx

@@ -0,0 +1,46 @@
+import styled from '@emotion/native';
+import { View, Animated } from 'react-native';
+
+export type Placement = 'top' | 'bottom' | 'right' | 'left';
+
+export const StyledContent = styled(View)(({ theme }) => ({
+  padding: theme.__hd__.appCue.space.padding,
+  backgroundColor: theme.__hd__.appCue.colors.background,
+  borderRadius: theme.__hd__.appCue.radii.container,
+  alignSelf: 'center',
+}));
+
+export const StyledContainer = styled(View)(({ theme }) => ({
+  width: '100%',
+  height: '100%',
+  backgroundColor: theme.__hd__.appCue.colors.backdropColor,
+}));
+
+export const StyledIconContainer = styled(Animated.View)<{
+  themePlacement: Placement;
+}>(({ theme, themePlacement }) => ({
+  position: 'absolute',
+  color: theme.__hd__.appCue.colors.background,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ...(themePlacement === 'top' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    width: '100%',
+  }),
+  ...(themePlacement === 'bottom' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    transform: [{ rotate: '180deg' }],
+    width: '100%',
+  }),
+  ...(themePlacement === 'right' && {
+    left: -theme.__hd__.appCue.space.arrowOffset,
+    transform: [{ rotate: '90deg' }],
+    height: '100%',
+  }),
+  ...(themePlacement === 'left' && {
+    right: -theme.__hd__.appCue.space.arrowOffset,
+    transform: [{ rotate: '-90deg' }],
+    height: '100%',
+  }),
+}));

package/src/components/AppCue/__tests__/StyledAppCue.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledIconContainer } from '../StyledAppCue';
+
+describe('AppCue', () => {
+  it.each`
+    placement
+    ${'top'}
+    ${'bottom'}
+    ${'left'}
+    ${'right'}
+  `('renders icon $placement correctly', ({ placement }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledIconContainer themePlacement={placement} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/AppCue/__tests__/__snapshots__/StyledAppCue.tsx.snap

@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppCue renders icon bottom correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "position": "absolute",
+        "top": -12,
+        "transform": [
+          {
+            "rotate": "180deg",
+          },
+        ],
+        "width": "100%",
+      }
+    }
+    themePlacement="bottom"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders icon left correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "color": "#001f23",
+        "display": "flex",
+        "height": "100%",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": -12,
+        "transform": [
+          {
+            "rotate": "-90deg",
+          },
+        ],
+      }
+    }
+    themePlacement="left"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders icon right correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "color": "#001f23",
+        "display": "flex",
+        "height": "100%",
+        "justifyContent": "center",
+        "left": -12,
+        "position": "absolute",
+        "transform": [
+          {
+            "rotate": "90deg",
+          },
+        ],
+      }
+    }
+    themePlacement="right"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders icon top correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "bottom": -12,
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "position": "absolute",
+        "width": "100%",
+      }
+    }
+    themePlacement="top"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,391 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppCue renders custom content 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders placement bottom correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders placement left correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders placement right correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders placement top correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders placement undefined correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { fireEvent, waitFor } from '@testing-library/react-native';
+import AppCue from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+describe('AppCue', () => {
+  it.each`
+    placement
+    ${undefined}
+    ${'top'}
+    ${'bottom'}
+    ${'left'}
+    ${'right'}
+  `('renders placement $placement correctly', ({ placement }) => {
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <AppCue
+        content="AppCue Content"
+        placement={placement}
+        target={
+          <View>
+            <Text>Target</Text>
+          </View>
+        }
+        testID="app-cue"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    const target = getByText('Target');
+    expect(target).toBeDefined();
+    fireEvent.press(target);
+    waitFor(() => {
+      expect(getByTestId('app-cue-arrow')).toBeDefined();
+      expect(getByText('AppCue Content')).toBeDefined();
+    });
+  });
+
+  it('renders custom content', () => {
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <AppCue
+        content={<Text>Custom Content</Text>}
+        target={
+          <View>
+            <Text>Target</Text>
+          </View>
+        }
+        testID="app-cue"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    const target = getByText('Target');
+    expect(target).toBeDefined();
+    fireEvent.press(target);
+    waitFor(() => {
+      expect(getByTestId('app-cue-arrow')).toBeDefined();
+      expect(getByText('Custom Content')).toBeDefined();
+    });
+  });
+});