Onborda PR

.gitignore

@@ -16,4 +16,5 @@ yarn-debug.log*
 yarn-error.log*
 
 # vercel
-.vercel
+.vercel
+/.idea

dist/Onborda.d.ts

@@ -1,4 +1,9 @@
 import React from "react";
 import { OnbordaProps } from "./types";
+/**
+ * Onborda Component
+ * @param {OnbordaProps} props
+ * @constructor
+ */
 declare const Onborda: React.FC<OnbordaProps>;
 export default Onborda;

dist/OnbordaContext.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
-import { OnbordaContextType } from "./types";
+import { OnbordaContextType, OnbordaProviderProps } from "./types";
 declare const useOnborda: () => OnbordaContextType;
-declare const OnbordaProvider: React.FC<{
-    children: React.ReactNode;
-}>;
+declare const OnbordaProvider: React.FC<OnbordaProviderProps>;
 export { OnbordaProvider, useOnborda };

dist/OnbordaContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState, useCallback } from "react";
+import { createContext, useContext, useState, useCallback, useEffect } from "react";
 // Example Hooks Usage:
 // const { setCurrentStep, closeOnborda, startOnborda } = useOnborda();
 // // To trigger a specific step
@@ -16,11 +16,27 @@ const useOnborda = () => {
     }
     return context;
 };
-const OnbordaProvider = ({ children, }) => {
-    const [currentTour, setCurrentTour] = useState(null);
+const OnbordaProvider = ({ children, tours = [], activeTour = null, }) => {
+    const [currentTour, setCurrentTourState] = useState(null);
     const [currentStep, setCurrentStepState] = useState(0);
     const [isOnbordaVisible, setOnbordaVisible] = useState(false);
+    const [currentTourSteps, setCurrentTourStepsState] = useState([]);
+    const [completedSteps, setCompletedSteps] = useState(new Set());
+    // Start the active tour on mount
+    useEffect(() => {
+        if (activeTour) {
+            startOnborda(activeTour);
+        }
+    }, [activeTour]);
     const setCurrentStep = useCallback((step, delay) => {
+        // If step is a string, find the index of the step with that id
+        if (typeof step === 'string') {
+            const index = currentTourSteps.findIndex((s) => s?.id === step);
+            if (index === -1) {
+                throw new Error(`Step with id ${step} not found`);
+            }
+            step = index;
+        }
         if (delay) {
             setTimeout(() => {
                 setCurrentStepState(step);
@@ -33,21 +49,57 @@ const OnbordaProvider = ({ children, }) => {
         }
     }, []);
     const closeOnborda = useCallback(() => {
+        // If all steps are completed, call the onComplete function
+        if (completedSteps.size === currentTourSteps.length) {
+            tours.find((tour) => (tour.tour) === currentTour)?.onComplete?.();
+        }
         setOnbordaVisible(false);
-        setCurrentTour(null);
-    }, []);
+        setCurrentTourState(null);
+        setCurrentTourStepsState([]);
+        setCurrentStepState(0);
+        setCompletedSteps(new Set());
+    }, [currentTour, currentTourSteps, completedSteps]);
+    const initializeCompletedSteps = useCallback(async (tour) => {
+        // Get the initial state of the completed steps
+        const completeSteps = tour?.initialCompletedStepsState && await tour.initialCompletedStepsState() || tour.steps.map(() => false);
+        const firstIncomplete = completeSteps.findIndex((result) => !result);
+        const completed = completeSteps.reduce((acc, result, index) => {
+            if (result) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        setCompletedSteps(new Set(completed));
+        // If all steps are completed, return the last step
+        return firstIncomplete === -1 ? tour.steps.length - 1 : firstIncomplete;
+    }, [currentTour]);
+    const setCurrentTour = useCallback((tourName) => {
+        if (!tourName) {
+            closeOnborda();
+            return;
+        }
+        setCurrentTourState(tourName);
+        const tour = tours.find((tour) => tour.tour === tourName);
+        setCurrentTourStepsState(tour?.steps || []);
+        tour && initializeCompletedSteps(tour).then(r => {
+            setCurrentStep(r);
+            setOnbordaVisible(true);
+        });
+    }, [tours]);
     const startOnborda = useCallback((tourName) => {
         setCurrentTour(tourName);
-        setCurrentStepState(0);
-        setOnbordaVisible(true);
-    }, []);
+    }, [setCurrentTour]);
     return (_jsx(OnbordaContext.Provider, { value: {
+            tours,
             currentTour,
             currentStep,
+            currentTourSteps,
             setCurrentStep,
             closeOnborda,
             startOnborda,
             isOnbordaVisible,
+            completedSteps,
+            setCompletedSteps
         }, children: children }));
 };
 export { OnbordaProvider, useOnborda };

dist/OnbordaStyles.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const getCardStyle: (side: string) => React.CSSProperties;
+export declare const getArrowStyle: (side: string) => React.CSSProperties;

dist/OnbordaStyles.js

@@ -0,0 +1,165 @@
+export const getCardStyle = (side) => {
+    switch (side) {
+        case "top":
+            return {
+                transform: `translate(-50%, 0)`,
+                left: "50%",
+                bottom: "100%",
+                marginBottom: "25px",
+            };
+        case "bottom":
+            return {
+                transform: `translate(-50%, 0)`,
+                left: "50%",
+                top: "100%",
+                marginTop: "25px",
+            };
+        case "left":
+            return {
+                transform: `translate(0, -50%)`,
+                right: "100%",
+                top: "50%",
+                marginRight: "25px",
+            };
+        case "right":
+            return {
+                transform: `translate(0, -50%)`,
+                left: "100%",
+                top: "50%",
+                marginLeft: "25px",
+            };
+        case "top-left":
+            return {
+                bottom: "100%",
+                marginBottom: "25px",
+            };
+        case "top-right":
+            return {
+                right: 0,
+                bottom: "100%",
+                marginBottom: "25px",
+            };
+        case "bottom-left":
+            return {
+                top: "100%",
+                marginTop: "25px",
+            };
+        case "bottom-right":
+            return {
+                right: 0,
+                top: "100%",
+                marginTop: "25px",
+            };
+        case "right-bottom":
+            return {
+                left: "100%",
+                bottom: 0,
+                marginLeft: "25px",
+            };
+        case "right-top":
+            return {
+                left: "100%",
+                top: 0,
+                marginLeft: "25px",
+            };
+        case "left-bottom":
+            return {
+                right: "100%",
+                bottom: 0,
+                marginRight: "25px",
+            };
+        case "left-top":
+            return {
+                right: "100%",
+                top: 0,
+                marginRight: "25px",
+            };
+        default:
+            // Default case if no side is specified. Center the card to the screen
+            return {
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)', // Center the card
+                position: 'fixed', // Make sure it's positioned relative to the viewport
+                margin: '0',
+            };
+    }
+};
+export const getArrowStyle = (side) => {
+    switch (side) {
+        case "bottom":
+            return {
+                transform: `translate(-50%, 0) rotate(270deg)`,
+                left: "50%",
+                top: "-23px",
+            };
+        case "top":
+            return {
+                transform: `translate(-50%, 0) rotate(90deg)`,
+                left: "50%",
+                bottom: "-23px",
+            };
+        case "right":
+            return {
+                transform: `translate(0, -50%) rotate(180deg)`,
+                top: "50%",
+                left: "-23px",
+            };
+        case "left":
+            return {
+                transform: `translate(0, -50%) rotate(0deg)`,
+                top: "50%",
+                right: "-23px",
+            };
+        case "top-left":
+            return {
+                transform: `rotate(90deg)`,
+                left: "10px",
+                bottom: "-23px",
+            };
+        case "top-right":
+            return {
+                transform: `rotate(90deg)`,
+                right: "10px",
+                bottom: "-23px",
+            };
+        case "bottom-left":
+            return {
+                transform: `rotate(270deg)`,
+                left: "10px",
+                top: "-23px",
+            };
+        case "bottom-right":
+            return {
+                transform: `rotate(270deg)`,
+                right: "10px",
+                top: "-23px",
+            };
+        case "right-bottom":
+            return {
+                transform: `rotate(180deg)`,
+                left: "-23px",
+                bottom: "10px",
+            };
+        case "right-top":
+            return {
+                transform: `rotate(180deg)`,
+                left: "-23px",
+                top: "10px",
+            };
+        case "left-bottom":
+            return {
+                transform: `rotate(0deg)`,
+                right: "-23px",
+                bottom: "10px",
+            };
+        case "left-top":
+            return {
+                transform: `rotate(0deg)`,
+                right: "-23px",
+                top: "10px",
+            };
+        default:
+            return {}; // Default case if no side is specified
+    }
+};