@hero-design/rn 8.83.0-test.0 → 8.83.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.83.0-test.0",
+  "version": "8.83.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,13 +22,13 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.45.1",
+    "@hero-design/colors": "8.45.2",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.10",
+    "@hero-design/react-native-month-year-picker": "^8.42.11",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
@@ -52,7 +52,7 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
     "@hero-design/eslint-plugin": "9.2.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.10",
+    "@hero-design/react-native-month-year-picker": "^8.42.11",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",
@@ -72,7 +72,7 @@
     "babel-preset-expo": "^11.0.15",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-hd": "8.42.4",
+    "eslint-config-hd": "8.42.5",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
@@ -93,7 +93,7 @@
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",
-    "typescript": "4.8.4"
+    "typescript": "^5.7.3"
   },
   "prettier": "prettier-config-hd"
 }

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