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

package/src/components/AppCue/__tests__/utils.spec.ts

@@ -0,0 +1,90 @@
+import { calculatePosition, calulateContentMaxWidth } from '../utils';
+
+describe('utils', () => {
+  describe('calculatePosition', () => {
+    const testCases = [
+      {
+        placement: 'top' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        contentSize: { width: 30, height: 20 },
+        offset: 10,
+        expected: { x: 110, y: 170 },
+      },
+      {
+        placement: 'bottom' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        contentSize: { width: 30, height: 20 },
+        offset: 10,
+        expected: { x: 110, y: 260 },
+      },
+      {
+        placement: 'right' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        contentSize: { width: 30, height: 20 },
+        offset: 10,
+        expected: { x: 160, y: 215 },
+      },
+      {
+        placement: 'left' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        contentSize: { width: 30, height: 20 },
+        offset: 10,
+        expected: { x: 60, y: 215 },
+      },
+    ];
+    it.each(testCases)(
+      'should calculate the correct position for placement $placement',
+      ({ placement, position, contentSize, offset, expected }) => {
+        const result = calculatePosition({
+          placement,
+          position,
+          contentSize,
+          offset,
+        });
+        expect(result).toEqual(expected);
+      }
+    );
+  });
+
+  describe('calulateContentMaxWidth', () => {
+    const windowWidth = 1024;
+    const testCases = [
+      {
+        placement: 'top' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        offset: 10,
+        expected: undefined,
+      },
+      {
+        placement: 'bottom' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        offset: 10,
+        expected: undefined,
+      },
+      {
+        placement: 'right' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        offset: 10,
+        expected: windowWidth - 100 - 50 - 10,
+      },
+      {
+        placement: 'left' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        offset: 10,
+        expected: 100 - 10,
+      },
+    ];
+    it.each(testCases)(
+      'should calculate the correct max width for placement $placement',
+      ({ placement, position, offset, expected }) => {
+        const result = calulateContentMaxWidth({
+          placement,
+          position,
+          offset,
+          windowWidth,
+        });
+        expect(result).toEqual(expected);
+      }
+    );
+  });
+});

package/src/components/AppCue/index.tsx

@@ -0,0 +1,188 @@
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import {
+  Modal,
+  View,
+  TouchableWithoutFeedback,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
+  useWindowDimensions,
+} from 'react-native';
+import {
+  Placement,
+  StyledContainer,
+  StyledContent,
+  StyledIconContainer,
+} from './StyledAppCue';
+import Typography from '../Typography';
+import Icon from '../Icon';
+import { useTheme } from '../../theme';
+import { calculatePosition, calulateContentMaxWidth } from './utils';
+
+interface AppCueProps {
+  /*
+   * The content of the App Cue.
+   */
+  content: string | React.ReactElement;
+  /*
+   * The target where the App Cue is relatively placed to.
+   */
+  target: React.ReactElement;
+
+  /**
+   * The Position of the App Cue.
+   */
+  placement?: Placement;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing ID of the component.
+   */
+  testID?: string;
+}
+
+const AppCue = ({
+  target,
+  content,
+  placement = 'top',
+  style,
+  testID,
+}: AppCueProps) => {
+  const targetContainerRef = useRef<View>(null);
+
+  const [visible, setVisible] = React.useState(false);
+
+  const theme = useTheme();
+
+  const { offset } = theme.__hd__.appCue.space;
+
+  const [position, setPosition] = React.useState({
+    pageX: 0,
+    pageY: 0,
+    width: 0,
+    height: 0,
+  });
+
+  const [contentSize, setContentSize] = React.useState({
+    width: 0,
+    height: 0,
+  });
+
+  const doMeasure = useCallback((cb?: () => void) => {
+    targetContainerRef.current?.measure(
+      (_, __, width, height, pageX, pageY) => {
+        setPosition({ pageX, pageY, width, height });
+        cb?.();
+      }
+    );
+  }, []);
+
+  const handleOpen = () => {
+    doMeasure(() => setVisible(true));
+  };
+
+  useLayoutEffect(() => {
+    doMeasure();
+  }, [doMeasure]);
+
+  const enhancedTarget = React.cloneElement(
+    target,
+    {
+      onPress: () => {
+        handleOpen();
+        target.props?.onPress?.();
+      },
+    },
+    target.props.children
+  );
+
+  const measureContent = (event: LayoutChangeEvent) => {
+    setContentSize({
+      width: event.nativeEvent.layout.width,
+      height: event.nativeEvent.layout.height,
+    });
+  };
+
+  const pos = calculatePosition({
+    position,
+    contentSize,
+    placement,
+    offset,
+  });
+
+  const { width: windowWidth } = useWindowDimensions();
+
+  const maxWidth = calulateContentMaxWidth({
+    position,
+    offset,
+    placement,
+    windowWidth,
+  });
+
+  const renderContent = () => {
+    if (typeof content === 'string') {
+      return <Typography.Body intent="inverted">{content}</Typography.Body>;
+    }
+    return content;
+  };
+
+  return (
+    <>
+      <TouchableWithoutFeedback onPress={handleOpen}>
+        <View
+          collapsable={false}
+          ref={targetContainerRef}
+          style={{ alignSelf: 'center' }}
+        >
+          {enhancedTarget}
+        </View>
+      </TouchableWithoutFeedback>
+      <Modal
+        animationType="fade"
+        visible={visible}
+        onDismiss={() => setVisible(false)}
+        transparent
+        presentationStyle="overFullScreen"
+        statusBarTranslucent
+      >
+        <TouchableWithoutFeedback
+          testID={testID && `${testID}-backdrop`}
+          onPress={() => setVisible(false)}
+        >
+          <StyledContainer>
+            <View
+              style={StyleSheet.flatten([
+                {
+                  position: 'absolute',
+                  top: pos.y,
+                  left: pos.x,
+                },
+                style,
+              ])}
+              onLayout={measureContent}
+              testID={testID}
+            >
+              <StyledContent
+                style={{ maxWidth }}
+                testID={testID && `${testID}-content`}
+              >
+                {renderContent()}
+              </StyledContent>
+              <StyledIconContainer
+                themePlacement={placement}
+                testID={testID && `${testID}-arrow`}
+              >
+                <Icon icon="caret-down" size="small" />
+              </StyledIconContainer>
+            </View>
+          </StyledContainer>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+};
+
+export default AppCue;

package/src/components/AppCue/utils.ts

@@ -0,0 +1,122 @@
+import { Placement } from './StyledAppCue';
+
+/**
+ * Calculates the position of an element based on its placement relative to a reference position.
+ *
+ * @param {Object} params - The parameters for calculating the position.
+ * @param {Object} params.position - The position and size of target element.
+ * @param {number} params.position.pageX - The X coordinate of the target position.
+ * @param {number} params.position.pageY - The Y coordinate of the target position.
+ * @param {number} params.position.width - The width of the reference element.
+ * @param {number} params.position.height - The height of the reference element.
+ * @param {Object} params.contentSize - The size of the App Cue content.
+ * @param {number} params.contentSize.width - The width of the content.
+ * @param {number} params.contentSize.height - The height of the content.
+ * @param {Placement} params.placement - The placement of the content relative to the reference position ('top', 'bottom', 'right', 'left').
+ * @param {number} params.offset - The offset distance to display an arrow.
+ *
+ * @returns {Object} The calculated position of the App Cue.
+ * @returns {number} return.x - The X coordinate of the App Cue.
+ * @returns {number} return.y - The Y coordinate of the App Cue.
+ */
+export const calculatePosition = ({
+  placement,
+  position,
+  contentSize,
+  offset,
+}: {
+  position: {
+    pageX: number;
+    pageY: number;
+    width: number;
+    height: number;
+  };
+  contentSize: {
+    width: number;
+    height: number;
+  };
+  placement: Placement;
+  offset: number;
+}) => {
+  switch (placement) {
+    case 'top': {
+      return {
+        // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
+        x: position.pageX + (position.width - contentSize.width) / 2,
+        // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
+        y: position.pageY - contentSize.height - offset,
+      };
+    }
+    case 'bottom': {
+      return {
+        // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
+        x: position.pageX + (position.width - contentSize.width) / 2,
+        // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+        y: position.pageY + position.height + offset,
+      };
+    }
+    case 'right': {
+      return {
+        // The X coordinate is calculated by adding the width of the target element and the offset to the X coordinate of the target element.
+        x: position.pageX + position.width + offset,
+        // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
+        y: position.pageY + (position.height - contentSize.height) / 2,
+      };
+    }
+    case 'left': {
+      return {
+        // The X coordinate is calculated by subtracting the width of the content and the offset from the X coordinate of the target element.
+        x: position.pageX - contentSize.width - offset,
+        // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
+        y: position.pageY + (position.height - contentSize.height) / 2,
+      };
+    }
+  }
+};
+
+/**
+ * Calculates the maximum width of the content based on its position, offset, placement, and window width.
+ *
+ * @param {Object} params - The parameters for the calculation.
+ * @param {Object} params.position - The position and dimensions of the target element.
+ * @param {number} params.position.pageX - The X coordinate of the target element.
+ * @param {number} params.position.pageY - The Y coordinate of the target element.
+ * @param {number} params.position.width - The width of the target element.
+ * @param {number} params.position.height - The height of the target element.
+ * @param {number} params.offset - The offset value to display an arrow.
+ * @param {Placement} params.placement - The placement of the content relative to the element.
+ * @param {number} params.windowWidth - The width of the window.
+ *
+ * @returns {number | undefined} The maximum width of the content.
+ */
+export const calulateContentMaxWidth = ({
+  position,
+  offset,
+  placement,
+  windowWidth,
+}: {
+  position: {
+    pageX: number;
+    pageY: number;
+    width: number;
+    height: number;
+  };
+  offset: number;
+  placement: Placement;
+  windowWidth: number;
+}) => {
+  switch (placement) {
+    case 'top': {
+      return undefined;
+    }
+    case 'bottom': {
+      return undefined;
+    }
+    case 'right': {
+      return windowWidth - position.pageX - position.width - offset;
+    }
+    case 'left': {
+      return position.pageX - offset;
+    }
+  }
+};

package/src/components/Chip/StyledChip.tsx

@@ -3,7 +3,7 @@ import { TouchableOpacity } from 'react-native';
 import Icon from '../Icon';
 
 type StyledChipWrapperProps = {
-  themeVariant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
+  themeVariant?: 'selection' | 'filter' | 'compact' | 'compact-outlined';
   themeSelected?: boolean;
 };
 
@@ -12,11 +12,11 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
     const getShadowStyles = () => {
       switch (themeVariant) {
         case 'compact':
-        case 'filled':
+        case 'filter':
           return {
             ...theme.__hd__.chip.shadows.filledWrapper,
           };
-        case 'outlined':
+        case 'selection':
         case 'compact-outlined':
           return undefined;
       }
@@ -24,7 +24,7 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
 
     const getBorderStyles = () => {
       switch (themeVariant) {
-        case 'outlined':
+        case 'selection':
         case 'compact-outlined': {
           return {
             borderColor: themeSelected
@@ -34,7 +34,7 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
           };
         }
         case 'compact':
-        case 'filled': {
+        case 'filter': {
           return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
           };
@@ -45,7 +45,7 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
     const getBackgroundStyles = () => {
       if (themeSelected) {
         switch (themeVariant) {
-          case 'outlined':
+          case 'selection':
           case 'compact-outlined': {
             return {
               backgroundColor: themeSelected
@@ -53,7 +53,7 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
                 : theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled':
+          case 'filter':
           case 'compact': {
             return {
               backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
@@ -62,14 +62,14 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
         }
       } else {
         switch (themeVariant) {
-          case 'outlined':
+          case 'selection':
           case 'compact-outlined': {
             return {
               backgroundColor:
                 theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled':
+          case 'filter':
           case 'compact': {
             return {
               backgroundColor: theme.__hd__.chip.colors.filledBackground,