Merge pull request #1 from travelpassgroup/AXO-1616

Creation of the base component and basic operations

Author: fedpre

example/package.json

@@ -15,6 +15,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.6",
+    "react-native-reanimated": "^3.16.7",
+    "react-native-svg": "^15.11.1",
     "react-native-web": "~0.19.13"
   },
   "devDependencies": {

example/src/App.tsx

@@ -1,20 +1,97 @@
-import { Text, View, StyleSheet } from 'react-native';
-import { multiply } from 'react-native-tipkit';
-
-const result = multiply({ n1: 3, n2: 7 });
+import { View, StyleSheet, Pressable, Text } from 'react-native';
+import { TipKitInlineView, TipKitPopOverView } from 'react-native-tipkit';
+import CloseIcon from './CloseIcon';
 
 export default function App() {
+  const onActionButtonPress = () => {
+    console.log('Action button pressed');
+  };
+
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <Text style={styles.title}>TipKit Example</Text>
+      <TipKitInlineView
+        visible={true}
+        tipContainer={styles.inline}
+        title="Set favorites"
+        description="Tap and hold a color to add it to your favorites"
+      />
+
+      <TipKitPopOverView
+        // Tip Props
+        title="Add New Color"
+        description="Tap here to add a new color to the list"
+        tipContainer={styles.tipContainer}
+        leftIcon={<CloseIcon height={40} width={40} />}
+        actionButtonOnPress={onActionButtonPress}
+        actionButtonTitle="Learn more"
+        // Popover Button Props
+        popoverButtonProps={{ title: 'Show Popover Top' }}
+        popoverButtonArrowDirection="top"
+      />
+
+      <TipKitPopOverView
+        // Tip Props
+        title="Add New Color"
+        description="Tap here to add a new color to the list"
+        tipContainer={styles.tipContainer}
+        leftIcon={<CloseIcon height={40} width={40} />}
+        actionButtonOnPress={onActionButtonPress}
+        // Popover Button Props
+        popoverButtonProps={{ title: 'Show Popover Bottom' }}
+        popoverButtonArrowDirection="bottom"
+      />
+
+      {/* TODO: Fix the positioning of the arrow when the button is smaller than 100% */}
+      <TipKitPopOverView
+        // Tip Props
+        title="Add New Color"
+        description="Tap here to add a new color to the list"
+        tipContainer={styles.tipContainer}
+        leftIcon={<CloseIcon height={40} width={40} />}
+        actionButtonOnPress={onActionButtonPress}
+        popoverButtonArrowDirection="bottom-end"
+        // Popover Button Props
+        popoverButton={
+          <Pressable style={styles.customPopoverButton} onPress={() => {}}>
+            <Text style={styles.customPopoverButtonText}>
+              Custom Popover button
+            </Text>
+          </Pressable>
+        }
+      />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
+    gap: 12,
     justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  inline: {
+    backgroundColor: '#d7eef3',
+  },
+  tipContainer: {
+    backgroundColor: '#f1f4f2',
+  },
+  customPopoverButton: {
+    width: '60%',
+    backgroundColor: '#66D210',
+    padding: 12,
+    borderRadius: 8,
+  },
+  customPopoverButtonText: {
+    color: 'white',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#333',
   },
 });

example/src/CloseIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+type CloseIconProps = SvgProps;
+
+const CloseIcon: React.FC<CloseIconProps> = ({ ...props }) => {
+  return (
+    <Svg viewBox="0 0 24 24" width="18px" height="18px" {...props}>
+      <Path d="M4.99 3.99a1 1 0 00-.697 1.717L10.586 12l-6.293 6.293a1 1 0 101.414 1.414L12 13.414l6.293 6.293a1 1 0 101.414-1.414L13.414 12l6.293-6.293a1 1 0 00-.727-1.717 1 1 0 00-.687.303L12 10.586 5.707 4.293a1 1 0 00-.717-.303z" />
+    </Svg>
+  );
+};
+
+export default CloseIcon;

package.json

@@ -80,6 +80,8 @@
     "react": "18.3.1",
     "react-native": "0.76.6",
     "react-native-builder-bob": "^0.32.0",
+    "react-native-reanimated": "^3.16.7",
+    "react-native-svg": "^15.11.1",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },
@@ -88,7 +90,9 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-reanimated": "*",
+    "react-native-svg": "*"
   },
   "workspaces": [
     "example"
@@ -196,8 +200,5 @@
     "languages": "js",
     "type": "library",
     "version": "0.45.5"
-  },
-  "dependencies": {
-    "react-native-reanimated": "^3.16.7"
   }
 }

src/TipKitInlineView/TipKitInlineView.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import BaseTipKit, { type BaseTipKitProps } from '../components/BaseTipKit';
+
+interface TipKitInlineViewProps extends BaseTipKitProps {}
+
+const TipKitInlineView: React.FC<TipKitInlineViewProps> = ({ ...rest }) => {
+  return <BaseTipKit popoverButtonArrowDirection={undefined} {...rest} />;
+};
+
+export default TipKitInlineView;

src/TipKitInlineView/index.tsx

@@ -0,0 +1,2 @@
+import TipKitInlineView from './TipKitInlineView';
+export { TipKitInlineView };

src/TipKitPopOverView/TipKitPopOverView.tsx

@@ -0,0 +1,115 @@
+import React, {
+  Fragment,
+  useMemo,
+  useRef,
+  useState,
+  type JSXElementConstructor,
+  type ReactElement,
+} from 'react';
+import BaseTipKit, { type BaseTipKitProps } from '../components/BaseTipKit';
+import { Button, StyleSheet, View, type ButtonProps } from 'react-native';
+
+export type TipKitPopOverArrowDirection =
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'bottom-end';
+
+interface TipKitPopOverViewProps extends BaseTipKitProps {
+  popoverButtonArrowDirection?: TipKitPopOverArrowDirection;
+  popoverButton?: ReactElement<any, string | JSXElementConstructor<any>>;
+  popoverButtonOnPress?: () => void;
+  popoverButtonTitle?: string;
+  popoverButtonProps?: ButtonProps;
+}
+
+const TipKitPopOverView: React.FC<TipKitPopOverViewProps> = ({
+  popoverButton,
+  popoverButtonOnPress,
+  popoverButtonProps,
+  popoverButtonArrowDirection = 'bottom',
+  ...rest
+}) => {
+  const buttonRef = useRef<View>(null);
+
+  const [visible, setVisible] = useState(false);
+  const [buttonPosition, setButtonPosition] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+
+  const measureButtonPosition = () => {
+    buttonRef.current?.measure((_fx, _fy, width, height, px, py) => {
+      setButtonPosition({ x: px, y: py, width, height });
+    });
+  };
+
+  const popoverStyle = useMemo(() => {
+    const { y, x, height } = buttonPosition;
+    const isTop = popoverButtonArrowDirection?.includes('top');
+
+    return {
+      top: y + (isTop ? -height * 2.5 : height * 1.5),
+      left: x,
+    };
+  }, [buttonPosition, popoverButtonArrowDirection]);
+
+  const onDismiss = () => {
+    setVisible(false);
+  };
+
+  const handlePopoverButtonPress = () => {
+    measureButtonPosition();
+    popoverButtonOnPress?.();
+    setVisible(true);
+  };
+
+  return (
+    <Fragment>
+      <View ref={buttonRef} style={styles.buttonContainer}>
+        {popoverButton ? (
+          React.cloneElement(popoverButton, {
+            onPress: () => {
+              handlePopoverButtonPress();
+              popoverButton.props.onPress?.();
+            },
+          })
+        ) : (
+          <Button
+            onPress={handlePopoverButtonPress}
+            title={popoverButtonProps?.title || ''}
+            color="#158481"
+            {...popoverButtonProps}
+          />
+        )}
+      </View>
+      {visible && (
+        <View style={[styles.popoverContainer, popoverStyle]}>
+          <BaseTipKit
+            visible={true}
+            onDismiss={onDismiss}
+            popoverButtonArrowDirection={popoverButtonArrowDirection}
+            {...rest}
+          />
+        </View>
+      )}
+    </Fragment>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    zIndex: 9998,
+  },
+  popoverContainer: {
+    position: 'absolute',
+    zIndex: 9999,
+    width: '100%',
+  },
+});
+
+export default TipKitPopOverView;

src/TipKitPopOverView/index.tsx

@@ -0,0 +1,2 @@
+import TipKitPopOverView from './TipKitPopOverView';
+export { TipKitPopOverView };