V3.2 (#275)

* Remove Tooltip and StepNumber passed props in favor of useCopilot context

* Un-register step after name change

* Add changelog

.changeset/blue-paws-refuse.md

@@ -0,0 +1,7 @@
+---
+"react-native-copilot": minor
+---
+
+Remove Tooltip and StepNumber passed props in favor of useCopilot context
+Un-register the step after name change and re-register with the new name
+Add tests for CopilotStep

package.json

@@ -10,7 +10,7 @@
     "build": "tsup",
     "dev": "NODE_ENV=development yarn build --watch",
     "lint": "eslint src/",
-    "test": "jest src/",
+    "test": "jest",
     "changeset": "changeset",
     "release": "changeset publish"
   },
@@ -36,6 +36,7 @@
   },
   "homepage": "https://github.com/mohebifar/react-native-copilot#readme",
   "devDependencies": {
+    "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^12.0.0",
     "@tsconfig/react-native": "^2.0.3",
     "@types/jest": "^29.5.0",

src/components/CopilotModal.tsx

@@ -18,28 +18,19 @@ import {
   type LayoutRectangle,
   type ViewStyle,
 } from "react-native";
-import type { CopilotOptions, Step } from "../types";
+import { useCopilot } from "../contexts/CopilotProvider";
+import type { CopilotOptions } from "../types";
 import { StepNumber } from "./default-ui/StepNumber";
 import { Tooltip } from "./default-ui/Tooltip";
 import {
-  styles,
   ARROW_SIZE,
   MARGIN,
   STEP_NUMBER_DIAMETER,
   STEP_NUMBER_RADIUS,
+  styles,
 } from "./style";
 
-type Props = CopilotOptions & {
-  prev: () => Promise<void>;
-  next: () => Promise<void>;
-  stop: () => Promise<void>;
-  nth: (stepNumber: number) => Promise<void>;
-  currentStepNumber?: number;
-  currentStep?: Step;
-  visible: boolean;
-  isFirstStep: boolean;
-  isLastStep: boolean;
-};
+type Props = CopilotOptions;
 
 const noop = () => {};
 
@@ -57,15 +48,6 @@ export interface CopilotModalHandle {
 export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
   function CopilotModal(
     {
-      stop,
-      prev,
-      next,
-      nth,
-      currentStepNumber,
-      currentStep,
-      visible,
-      isFirstStep,
-      isLastStep,
       easing = Easing.elastic(0.7),
       animationDuration = 400,
       tooltipComponent: TooltipComponent = Tooltip,
@@ -89,6 +71,7 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
     },
     ref
   ) {
+    const { stop, currentStep, visible } = useCopilot();
     const [tooltipStyles, setTooltipStyles] = useState({});
     const [arrowStyles, setArrowStyles] = useState({});
     const [animatedValues] = useState({
@@ -262,18 +245,6 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
       setLayout(undefined);
     };
 
-    const handleNext = () => {
-      void next();
-    };
-
-    const handleNth = (index: number) => {
-      void nth(index);
-    };
-
-    const handlePrev = () => {
-      void prev();
-    };
-
     const handleStop = () => {
       reset();
       void stop();
@@ -365,29 +336,15 @@ export const CopilotModal = forwardRef<CopilotModalHandle, Props>(
               },
             ]}
           >
-            <StepNumberComponent
-              isFirstStep={isFirstStep}
-              isLastStep={isLastStep}
-              currentStep={currentStep}
-              currentStepNumber={currentStepNumber ?? 0}
-            />
+            <StepNumberComponent />
           </Animated.View>
 
           <Animated.View key="arrow" style={[styles.arrow, arrowStyles]} />
           <Animated.View
             key="tooltip"
             style={[styles.tooltip, tooltipStyles, tooltipStyle]}
           >
-            <TooltipComponent
-              isFirstStep={isFirstStep}
-              isLastStep={isLastStep}
-              currentStep={currentStep}
-              handleNext={handleNext}
-              handleNth={handleNth}
-              handlePrev={handlePrev}
-              handleStop={handleStop}
-              labels={labels}
-            />
+            <TooltipComponent labels={labels} />
           </Animated.View>
         </>
       );

src/components/CopilotStep.tsx

@@ -51,6 +51,9 @@ export const CopilotStep = ({
 
   useEffect(() => {
     if (active) {
+      if (registeredName.current && registeredName.current !== name) {
+        unregisterStep(registeredName.current);
+      }
       registerStep({
         name,
         text,

src/components/default-ui/StepNumber.tsx

@@ -1,11 +1,15 @@
-import React from "react";
-import { View, Text } from "react-native";
-import { type StepNumberProps } from "../../types";
+import React, { type FunctionComponent } from "react";
+import { Text, View } from "react-native";
+import { useCopilot } from "../../contexts/CopilotProvider";
 
 import { styles } from "../style";
 
-export const StepNumber = ({ currentStepNumber }: StepNumberProps) => (
-  <View style={styles.stepNumber}>
-    <Text style={[styles.stepNumberText]}>{currentStepNumber}</Text>
-  </View>
-);
+export const StepNumber: FunctionComponent<unknown> = () => {
+  const { currentStepNumber } = useCopilot();
+
+  return (
+    <View style={styles.stepNumber}>
+      <Text style={styles.stepNumberText}>{currentStepNumber}</Text>
+    </View>
+  );
+};

src/components/default-ui/Tooltip.tsx

@@ -6,42 +6,51 @@ import { Button } from "./Button";
 import { styles } from "../style";
 
 import type { TooltipProps } from "../../types";
+import { useCopilot } from "../../contexts/CopilotProvider";
 
-export const Tooltip = ({
-  isFirstStep,
-  isLastStep,
-  handleNext,
-  handlePrev,
-  handleStop,
-  currentStep,
-  labels,
-}: TooltipProps) => (
-  <View>
-    <View style={styles.tooltipContainer}>
-      <Text testID="stepDescription" style={styles.tooltipText}>
-        {currentStep.text}
-      </Text>
-    </View>
-    <View style={[styles.bottomBar]}>
-      {!isLastStep ? (
-        <TouchableOpacity onPress={handleStop}>
-          <Button>{labels.skip}</Button>
-        </TouchableOpacity>
-      ) : null}
-      {!isFirstStep ? (
-        <TouchableOpacity onPress={handlePrev}>
-          <Button>{labels.previous}</Button>
-        </TouchableOpacity>
-      ) : null}
-      {!isLastStep ? (
-        <TouchableOpacity onPress={handleNext}>
-          <Button>{labels.next}</Button>
-        </TouchableOpacity>
-      ) : (
-        <TouchableOpacity onPress={handleStop}>
-          <Button>{labels.finish}</Button>
-        </TouchableOpacity>
-      )}
+export const Tooltip = ({ labels }: TooltipProps) => {
+  const { goToNext, goToPrev, stop, currentStep, isFirstStep, isLastStep } =
+    useCopilot();
+
+  const handleStop = () => {
+    void stop();
+  };
+  const handleNext = () => {
+    void goToNext();
+  };
+
+  const handlePrev = () => {
+    void goToPrev();
+  };
+
+  return (
+    <View>
+      <View style={styles.tooltipContainer}>
+        <Text testID="stepDescription" style={styles.tooltipText}>
+          {currentStep?.text}
+        </Text>
+      </View>
+      <View style={[styles.bottomBar]}>
+        {!isLastStep ? (
+          <TouchableOpacity onPress={handleStop}>
+            <Button>{labels.skip}</Button>
+          </TouchableOpacity>
+        ) : null}
+        {!isFirstStep ? (
+          <TouchableOpacity onPress={handlePrev}>
+            <Button>{labels.previous}</Button>
+          </TouchableOpacity>
+        ) : null}
+        {!isLastStep ? (
+          <TouchableOpacity onPress={handleNext}>
+            <Button>{labels.next}</Button>
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity onPress={handleStop}>
+            <Button>{labels.finish}</Button>
+          </TouchableOpacity>
+        )}
+      </View>
     </View>
-  </View>
-);
+  );
+};