onboard-engine 1.4.1 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +16 -4
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- "use strict";"use client";var Q=Object.create;var T=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var Z=Object.getOwnPropertyNames;var tt=Object.getPrototypeOf,et=Object.prototype.hasOwnProperty;var nt=(n,d)=>{for(var g in d)T(n,g,{get:d[g],enumerable:!0})},X=(n,d,g,I)=>{if(d&&typeof d=="object"||typeof d=="function")for(let f of Z(d))!et.call(n,f)&&f!==g&&T(n,f,{get:()=>d[f],enumerable:!(I=V(d,f))||I.enumerable});return n};var Y=(n,d,g)=>(g=n!=null?Q(tt(n)):{},X(d||!n||!n.__esModule?T(g,"default",{value:n,enumerable:!0}):g,n)),ot=n=>X(T({},"__esModule",{value:!0}),n);var it={};nt(it,{OnboardingProvider:()=>rt,useOnboarding:()=>F});module.exports=ot(it);var a=Y(require("react")),B=Y(require("js-cookie"));var b=require("react"),q=require("react-dom");var l=require("react/jsx-runtime"),J=()=>{let{config:n,currentStep:d,nextStep:g,prevStep:I,finish:f,isFirstStep:y,isLastStep:r}=F(),[i,x]=(0,b.useState)(null),[M,O]=(0,b.useState)({top:0,left:0}),[P,D]=(0,b.useState)({x:0,y:0}),A=(0,b.useRef)(!1),H=(0,b.useRef)({x:0,y:0}),v=(0,b.useRef)(null);(0,b.useEffect)(()=>{D({x:0,y:0})},[d]);let k=(0,b.useCallback)(t=>{if(!A.current)return;let c=t.clientX-H.current.x,h=t.clientY-H.current.y;D({x:c,y:h})},[]),E=(0,b.useCallback)(()=>{A.current=!1,v.current&&(v.current.style.transition="top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)",v.current.style.cursor=n.metadata.draggable?"grab":"auto"),window.removeEventListener("pointermove",k),window.removeEventListener("pointerup",E)},[n.metadata.draggable,k]),j=t=>{n.metadata.draggable&&(t.stopPropagation(),t.preventDefault(),A.current=!0,H.current={x:t.clientX-P.x,y:t.clientY-P.y},v.current&&(v.current.style.transition="none",v.current.style.cursor="grabbing"),window.addEventListener("pointermove",k),window.addEventListener("pointerup",E))};(0,b.useEffect)(()=>()=>{window.removeEventListener("pointermove",k),window.removeEventListener("pointerup",E)},[k,E]);let $=(0,b.useCallback)(t=>{let W=t.top,S=window.innerHeight-t.bottom,K=t.left,G=window.innerWidth-t.right,z=0,N=0;return S>232?(z=t.bottom+12,N=Math.max(20,Math.min(window.innerWidth-300-20,t.left+t.width/2-300/2))):W>232?(z=t.top-200-12,N=Math.max(20,Math.min(window.innerWidth-300-20,t.left+t.width/2-300/2))):G>332?(z=Math.max(20,Math.min(window.innerHeight-200-20,t.top+t.height/2-200/2)),N=t.right+12):K>332?(z=Math.max(20,Math.min(window.innerHeight-200-20,t.top+t.height/2-200/2)),N=t.left-300-12):(z=window.innerHeight/2-200/2,N=window.innerWidth/2-300/2),{top:z+window.scrollY,left:N+window.scrollX}},[]),m=(0,b.useCallback)(()=>{if(!d)return;let t=document.querySelector(`[data-onboarding-id="${d.attribute}"]`);if(t){let c=t.getBoundingClientRect(),h=n.style?.padding||0,L={top:c.top-h,bottom:c.bottom+h,left:c.left-h,right:c.right+h,width:c.width+h*2,height:c.height+h*2},R={top:L.top+window.scrollY,left:L.left+window.scrollX,width:L.width,height:L.height},W=$(L);x(S=>S&&S.top===R.top&&S.left===R.left&&S.width===R.width&&S.height===R.height?S:R),O(S=>S.top===W.top&&S.left===W.left?S:W)}else x(null)},[d,$,n.style]);if((0,b.useEffect)(()=>{m(),window.addEventListener("resize",m),window.addEventListener("scroll",m);let t=new MutationObserver(m);t.observe(document.body,{childList:!0,subtree:!0,attributes:!0});let c=null;if(typeof ResizeObserver<"u"){c=new ResizeObserver(m),c.observe(document.body);let h=d?.attribute?document.querySelector(`[data-onboarding-id="${d.attribute}"]`):null;h&&c.observe(h)}return()=>{window.removeEventListener("resize",m),window.removeEventListener("scroll",m),t.disconnect(),c&&c.disconnect()}},[m,d?.attribute]),!d||!i)return null;let e={...n.style?.background,transition:"all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)"},o=t=>{t.stopPropagation()},u=()=>(0,l.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,l.jsx)("path",{d:"M15 18l-6-6 6-6"})}),p=()=>(0,l.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,l.jsx)("path",{d:"M9 18l6-6-6-6"})}),s=()=>(0,l.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,l.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,l.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),w=(0,l.jsxs)("div",{className:"onboard-overlay-container",children:[(0,l.jsx)("div",{style:{height:i.top,...e},className:"onboard-overlay-mask onboard-mask-top",onPointerDown:o,onMouseDown:o,onClick:o}),(0,l.jsx)("div",{style:{top:i.top+i.height,height:`calc(100vh - ${i.top+i.height}px)`,...e},className:"onboard-overlay-mask onboard-mask-bottom",onPointerDown:o,onMouseDown:o,onClick:o}),(0,l.jsx)("div",{style:{top:i.top,height:i.height,width:i.left,...e},className:"onboard-overlay-mask onboard-mask-left",onPointerDown:o,onMouseDown:o,onClick:o}),(0,l.jsx)("div",{style:{top:i.top,height:i.height,left:i.left+i.width,width:`calc(100% - ${i.left+i.width}px)`,...e},className:"onboard-overlay-mask",onPointerDown:o,onMouseDown:o,onClick:o}),(0,l.jsxs)("div",{ref:v,className:"onboard-tooltip",onPointerDown:j,style:{zIndex:1e6,...n.style?.container,top:M.top+P.y,left:M.left+P.x,transition:"top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)",cursor:n.metadata.draggable?"grab":"auto",touchAction:"none"},onMouseDown:o,onClick:o,children:[(0,l.jsxs)("div",{className:"onboard-tooltip-header",children:[(0,l.jsx)("h3",{className:"onboard-tooltip-title",children:d.title}),(0,l.jsx)("button",{onClick:t=>{t.stopPropagation(),f()},className:"onboard-close-button",children:(0,l.jsx)(s,{})})]}),(0,l.jsx)("p",{className:"onboard-tooltip-description",children:d.description}),(0,l.jsxs)("div",{className:"onboard-tooltip-footer",children:[(0,l.jsxs)("button",{onClick:t=>{t.stopPropagation(),I()},disabled:y,className:"onboard-button-ghost",style:{background:"none",border:"none",cursor:y?"not-allowed":"pointer",...n.style?.prev},children:[(0,l.jsx)(u,{}),"Prev"]}),r?(0,l.jsx)("button",{onClick:t=>{t.stopPropagation(),f()},className:"onboard-button-primary",style:{border:"none",cursor:"pointer",...n.style?.finish},children:"Finish"}):(0,l.jsxs)("button",{onClick:t=>{t.stopPropagation(),g()},className:"onboard-button-primary",style:{border:"none",cursor:"pointer",...y?n.style?.start:{},...y?{}:n.style?.next},children:[y&&n.style?.start?"Start":"Next",!(y&&n.style?.start)&&(0,l.jsx)(p,{})]})]})]})]});return typeof document<"u"?(0,q.createPortal)(w,document.body):null};var C=require("react/jsx-runtime"),_=(0,a.createContext)(void 0),U="onboarding_state",rt=({config:n,ssr:d=!1,onNavigate:g,children:I})=>{let[f,y]=(0,a.useState)(!d),[r,i]=(0,a.useState)({currentStepIndex:0,currentSubStepIndex:null,isActive:!0}),x=a.default.useRef(n);(0,a.useEffect)(()=>{x.current=n},[n]);let M=a.default.useRef(g);(0,a.useEffect)(()=>{M.current=g},[g]);let O=(0,a.useCallback)(e=>{e&&(M.current?M.current(e):(n.metadata.nextRouter,window.location.href=e))},[n.metadata.nextRouter]);(0,a.useEffect)(()=>{d&&y(!0)},[d]);let P=(e,o)=>{if(e.urlMatch instanceof RegExp)return e.urlMatch.test(o);if(typeof e.urlMatch=="string"&&e.urlMatch.includes("*")){let u=e.urlMatch.replace(/[.+?^${}()|[\\]/g,"\\$&").replace(/\*/g,".*");return new RegExp(`^${u}$`).test(o)}return o===e.urlMatch},D=(0,a.useEffectEvent)(()=>{let e=x.current,o=window.location.pathname,u=-1;e.metadata.inOrder===!1&&(u=e.steps.findIndex(s=>P(s,o)));let p=B.default.get(U);if(p)try{let s=JSON.parse(p);if(e.metadata.inOrder===!1)u!==-1?s.currentStepIndex===u?i(s):i({currentStepIndex:u,currentSubStepIndex:null,isActive:!0}):i({...s,isActive:!1});else if(i(s),e.metadata.inOrder!==!1){let w=e.steps[s.currentStepIndex];if(w&&s.isActive){let t;if(s.currentStepIndex>0){let c=e.steps[s.currentStepIndex-1];c.navigate&&(t=c.navigate)}!t&&typeof w.urlMatch=="string"&&(t=w.urlMatch),t&&window.location.pathname!==t&&O(t),e.metadata.simulateClicksOnNavigate&&s.currentSubStepIndex!==null&&w.click&&setTimeout(()=>{let c=document.querySelector(`[data-onboarding-id="${w.attribute}"]`);c&&c.click()},500)}}}catch(s){console.error("Failed to parse onboarding state from cookie",s),u!==-1&&i({currentStepIndex:u,currentSubStepIndex:null,isActive:!0})}else if(u!==-1)i({currentStepIndex:u,currentSubStepIndex:null,isActive:!0});else if(e.metadata.inOrder===!1)i(s=>({...s,isActive:!1}));else{let s=e.steps[0];s&&typeof s.urlMatch=="string"&&window.location.pathname!==s.urlMatch&&O(s.urlMatch)}});(0,a.useEffect)(()=>{D()},[]),(0,a.useEffect)(()=>{f&&B.default.set(U,JSON.stringify(r),{expires:365})},[r,f]);let A=(0,a.useMemo)(()=>{let e=n.steps[r.currentStepIndex];return e?r.currentSubStepIndex!==null&&e.subSteps&&e.subSteps[r.currentSubStepIndex]||e:null},[n.steps,r.currentStepIndex,r.currentSubStepIndex]),H=r.currentStepIndex===0&&r.currentSubStepIndex===null,v=(0,a.useMemo)(()=>{let e=n.steps.length,o=r.currentStepIndex===e-1,u=n.steps[r.currentStepIndex],p=u?.subSteps&&u.subSteps.length>0;return o?p?r.currentSubStepIndex===u.subSteps.length-1:!0:!1},[n.steps,r.currentStepIndex,r.currentSubStepIndex]),k=(0,a.useCallback)(()=>{let e=x.current,o=e.steps[r.currentStepIndex],u=r.currentSubStepIndex!==null&&o.subSteps?o.subSteps[r.currentSubStepIndex]:o;if(u.click){let p=document.querySelector(`[data-onboarding-id="${u.attribute}"]`);p&&p.click()}if(o.subSteps&&(r.currentSubStepIndex===null||r.currentSubStepIndex<o.subSteps.length-1)){let p=r.currentSubStepIndex===null?0:r.currentSubStepIndex+1,s=o.subSteps[p];i(w=>({...w,currentSubStepIndex:p})),s.navigate&&O(s.navigate);return}if(r.currentStepIndex<e.steps.length-1){let p=r.currentStepIndex+1,s=e.steps[p];i({currentStepIndex:p,currentSubStepIndex:null,isActive:!0}),s.navigate&&O(s.navigate)}else i(p=>({...p,isActive:!1})),e.onOnboardingComplete&&e.onOnboardingComplete()},[r.currentStepIndex,r.currentSubStepIndex,O]),E=(0,a.useCallback)(()=>{let e=x.current;if(r.currentSubStepIndex!==null&&r.currentSubStepIndex>0){i(o=>({...o,currentSubStepIndex:o.currentSubStepIndex-1}));return}if(r.currentStepIndex>0&&r.currentSubStepIndex===0){i(o=>({...o,currentSubStepIndex:null}));return}if(r.currentStepIndex>0){let o=r.currentStepIndex-1,u=e.steps[o],p=u.subSteps?u.subSteps.length-1:null;i({currentStepIndex:o,currentSubStepIndex:p,isActive:!0})}},[r.currentStepIndex,r.currentSubStepIndex]),j=(0,a.useCallback)(()=>{i(e=>({...e,isActive:!1})),x.current.onOnboardingComplete&&x.current.onOnboardingComplete()},[]),$=(0,a.useCallback)((e,o=null)=>{i({currentStepIndex:e,currentSubStepIndex:o,isActive:!0})},[]),m={config:n,state:r,nextStep:k,prevStep:E,finish:j,goToStep:$,currentStep:A,isFirstStep:H,isLastStep:v};return f?(0,C.jsxs)(_.Provider,{value:m,children:[I,r.isActive&&(0,C.jsx)(J,{})]}):(0,C.jsx)(C.Fragment,{children:I})},F=()=>{let n=(0,a.useContext)(_);if(n===void 0)throw new Error("useOnboarding must be used within an OnboardingProvider");return n};0&&(module.exports={OnboardingProvider,useOnboarding});
2
+ "use strict";"use client";var K=Object.create;var D=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var tt=(n,a)=>{for(var g in a)D(n,g,{get:a[g],enumerable:!0})},B=(n,a,g,I)=>{if(a&&typeof a=="object"||typeof a=="function")for(let f of Q(a))!Z.call(n,f)&&f!==g&&D(n,f,{get:()=>a[f],enumerable:!(I=G(a,f))||I.enumerable});return n};var et=(n,a,g)=>(g=n!=null?K(V(n)):{},B(a||!n||!n.__esModule?D(g,"default",{value:n,enumerable:!0}):g,n)),nt=n=>B(D({},"__esModule",{value:!0}),n);var at={};tt(at,{OnboardingProvider:()=>st,useOnboarding:()=>j});module.exports=nt(at);var c=require("react"),F=et(require("js-cookie"));var b=require("react"),X=require("react-dom");var l=require("react/jsx-runtime"),ot=()=>(0,l.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,l.jsx)("path",{d:"M15 18l-6-6 6-6"})}),rt=()=>(0,l.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,l.jsx)("path",{d:"M9 18l6-6-6-6"})}),it=()=>(0,l.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,l.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,l.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),Y=()=>{let{config:n,currentStep:a,nextStep:g,prevStep:I,finish:f,isFirstStep:w,isLastStep:r}=j(),[i,m]=(0,b.useState)(null),[C,y]=(0,b.useState)({top:0,left:0}),[M,W]=(0,b.useState)({x:0,y:0}),z=(0,b.useRef)(!1),A=(0,b.useRef)({x:0,y:0}),x=(0,b.useRef)(null),[$,T]=(0,b.useState)(a);a!==$&&(T(a),W({x:0,y:0}));let k=(0,b.useCallback)(t=>{if(!z.current)return;let p=t.clientX-A.current.x,h=t.clientY-A.current.y;W({x:p,y:h})},[]),P=(0,b.useCallback)(()=>{z.current=!1,x.current&&(x.current.style.transition="top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)",x.current.style.cursor=n.metadata.draggable?"grab":"auto"),window.removeEventListener("pointermove",k),window.removeEventListener("pointerup",P)},[n.metadata.draggable,k]),e=t=>{n.metadata.draggable&&(t.stopPropagation(),t.preventDefault(),z.current=!0,A.current={x:t.clientX-M.x,y:t.clientY-M.y},x.current&&(x.current.style.transition="none",x.current.style.cursor="grabbing"),window.addEventListener("pointermove",k),window.addEventListener("pointerup",P))},d=(0,b.useCallback)(t=>{let H=t.top,S=window.innerHeight-t.bottom,U=t.left,_=window.innerWidth-t.right,R=0,N=0;return S>232?(R=t.bottom+12,N=Math.max(20,Math.min(window.innerWidth-300-20,t.left+t.width/2-300/2))):H>232?(R=t.top-200-12,N=Math.max(20,Math.min(window.innerWidth-300-20,t.left+t.width/2-300/2))):_>332?(R=Math.max(20,Math.min(window.innerHeight-200-20,t.top+t.height/2-200/2)),N=t.right+12):U>332?(R=Math.max(20,Math.min(window.innerHeight-200-20,t.top+t.height/2-200/2)),N=t.left-300-12):(R=window.innerHeight/2-200/2,N=window.innerWidth/2-300/2),{top:R+window.scrollY,left:N+window.scrollX}},[]),s=(0,b.useCallback)(()=>{if(!a)return;let t=document.querySelector(`[data-onboarding-id="${a.attribute}"]`);if(t){let p=t.getBoundingClientRect(),h=n.style?.padding||0,L={top:p.top-h,bottom:p.bottom+h,left:p.left-h,right:p.right+h,width:p.width+h*2,height:p.height+h*2},E={top:L.top+window.scrollY,left:L.left+window.scrollX,width:L.width,height:L.height},H=d(L);m(S=>S&&S.top===E.top&&S.left===E.left&&S.width===E.width&&S.height===E.height?S:E),y(S=>S.top===H.top&&S.left===H.left?S:H)}else m(null)},[a,d,n.style]);if((0,b.useEffect)(()=>{s(),window.addEventListener("resize",s),window.addEventListener("scroll",s);let t=new MutationObserver(s);t.observe(document.body,{childList:!0,subtree:!0,attributes:!0});let p=null;if(typeof ResizeObserver<"u"){p=new ResizeObserver(s),p.observe(document.body);let h=a?.attribute?document.querySelector(`[data-onboarding-id="${a.attribute}"]`):null;h&&p.observe(h)}return()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s),window.removeEventListener("pointermove",k),window.removeEventListener("pointerup",P),t.disconnect(),p&&p.disconnect()}},[s,a?.attribute,k,P]),!a||!i)return null;let u={...n.style?.background,transition:"all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)"},o=t=>{t.stopPropagation()},v=(0,l.jsxs)("div",{className:"onboard-overlay-container",children:[(0,l.jsx)("div",{style:{height:i.top,...u},className:"onboard-overlay-mask onboard-mask-top",onPointerDown:o,onMouseDown:o,onClick:o}),(0,l.jsx)("div",{style:{top:i.top+i.height,height:`calc(100vh - ${i.top+i.height}px)`,...u},className:"onboard-overlay-mask onboard-mask-bottom",onPointerDown:o,onMouseDown:o,onClick:o}),(0,l.jsx)("div",{style:{top:i.top,height:i.height,width:i.left,...u},className:"onboard-overlay-mask onboard-mask-left",onPointerDown:o,onMouseDown:o,onClick:o}),(0,l.jsx)("div",{style:{top:i.top,height:i.height,left:i.left+i.width,width:`calc(100% - ${i.left+i.width}px)`,...u},className:"onboard-overlay-mask",onPointerDown:o,onMouseDown:o,onClick:o}),(0,l.jsxs)("div",{ref:x,className:"onboard-tooltip",onPointerDown:e,style:{zIndex:1e6,...n.style?.container,top:C.top+M.y,left:C.left+M.x,transition:"top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)",cursor:n.metadata.draggable?"grab":"auto",touchAction:"none"},onMouseDown:o,onClick:o,children:[(0,l.jsxs)("div",{className:"onboard-tooltip-header",children:[(0,l.jsx)("h3",{className:"onboard-tooltip-title",children:a.title}),(0,l.jsx)("button",{onClick:t=>{t.stopPropagation(),f()},className:"onboard-close-button",children:(0,l.jsx)(it,{})})]}),(0,l.jsx)("p",{className:"onboard-tooltip-description",children:a.description}),(0,l.jsxs)("div",{className:"onboard-tooltip-footer",children:[(0,l.jsxs)("button",{onClick:t=>{t.stopPropagation(),I()},disabled:w,className:"onboard-button-ghost",style:{background:"none",border:"none",cursor:w?"not-allowed":"pointer",...n.style?.prev},children:[(0,l.jsx)(ot,{}),"Prev"]}),r?(0,l.jsx)("button",{onClick:t=>{t.stopPropagation(),f()},className:"onboard-button-primary",style:{border:"none",cursor:"pointer",...n.style?.finish},children:"Finish"}):(0,l.jsxs)("button",{onClick:t=>{t.stopPropagation(),g()},className:"onboard-button-primary",style:{border:"none",cursor:"pointer",...w?n.style?.start:{},...w?{}:n.style?.next},children:[w&&n.style?.start?"Start":"Next",!(w&&n.style?.start)&&(0,l.jsx)(rt,{})]})]})]})]});return typeof document<"u"?(0,X.createPortal)(v,document.body):null};var O=require("react/jsx-runtime"),J=(0,c.createContext)(void 0),q="onboarding_state",st=({config:n,ssr:a=!1,onNavigate:g,children:I})=>{let[f,w]=(0,c.useState)(!a),[r,i]=(0,c.useState)({currentStepIndex:0,currentSubStepIndex:null,isActive:!0}),m=(0,c.useRef)(n),C=(0,c.useRef)(g);m.current=n,C.current=g;let y=(0,c.useCallback)(e=>{e&&(C.current?C.current(e):window.location.href=e)},[]),M=(e,d)=>{if(e.urlMatch instanceof RegExp)return e.urlMatch.test(d);if(typeof e.urlMatch=="string"&&e.urlMatch.includes("*")){let s=e.urlMatch.replace(/[.+?^${}()|[\\]/g,"\\$&").replace(/\*/g,".*");return new RegExp(`^${s}$`).test(d)}return d===e.urlMatch};(0,c.useEffect)(()=>{a&&w(!0);let e=m.current,d=window.location.pathname,s=-1;e.metadata.inOrder===!1&&(s=e.steps.findIndex(o=>M(o,d)));let u=F.default.get(q);if(u)try{let o=JSON.parse(u);if(e.metadata.inOrder===!1)s!==-1?o.currentStepIndex===s?i(o):i({currentStepIndex:s,currentSubStepIndex:null,isActive:!0}):i({...o,isActive:!1});else if(i(o),e.metadata.inOrder!==!1){let v=e.steps[o.currentStepIndex];if(v&&o.isActive){let t;if(o.currentStepIndex>0){let p=e.steps[o.currentStepIndex-1];p.navigate&&(t=p.navigate)}!t&&typeof v.urlMatch=="string"&&(t=v.urlMatch),t&&window.location.pathname!==t&&y(t),e.metadata.simulateClicksOnNavigate&&o.currentSubStepIndex!==null&&v.click&&setTimeout(()=>{let p=document.querySelector(`[data-onboarding-id="${v.attribute}"]`);p&&p.click()},500)}}}catch(o){console.error("Failed to parse onboarding state from cookie",o),s!==-1&&i({currentStepIndex:s,currentSubStepIndex:null,isActive:!0})}else if(s!==-1)i({currentStepIndex:s,currentSubStepIndex:null,isActive:!0});else if(e.metadata.inOrder===!1)i(o=>({...o,isActive:!1}));else{let o=e.steps[0];o&&typeof o.urlMatch=="string"&&window.location.pathname!==o.urlMatch&&y(o.urlMatch)}},[a,y]),(0,c.useEffect)(()=>{f&&F.default.set(q,JSON.stringify(r),{expires:365})},[r,f]);let W=(0,c.useMemo)(()=>{let e=n.steps[r.currentStepIndex];return e?r.currentSubStepIndex!==null&&e.subSteps&&e.subSteps[r.currentSubStepIndex]||e:null},[n.steps,r.currentStepIndex,r.currentSubStepIndex]),z=r.currentStepIndex===0&&r.currentSubStepIndex===null,A=(0,c.useMemo)(()=>{let e=n.steps.length,d=r.currentStepIndex===e-1,s=n.steps[r.currentStepIndex],u=s?.subSteps&&s.subSteps.length>0;return d?u?r.currentSubStepIndex===s.subSteps.length-1:!0:!1},[n.steps,r.currentStepIndex,r.currentSubStepIndex]),x=(0,c.useCallback)(()=>{let e=m.current,d=e.steps[r.currentStepIndex],s=r.currentSubStepIndex!==null&&d.subSteps?d.subSteps[r.currentSubStepIndex]:d;if(s.click){let u=document.querySelector(`[data-onboarding-id="${s.attribute}"]`);u&&u.click()}if(d.subSteps&&(r.currentSubStepIndex===null||r.currentSubStepIndex<d.subSteps.length-1)){let u=r.currentSubStepIndex===null?0:r.currentSubStepIndex+1,o=d.subSteps[u];i(v=>({...v,currentSubStepIndex:u})),o.navigate&&y(o.navigate);return}if(r.currentStepIndex<e.steps.length-1){let u=r.currentStepIndex+1,o=e.steps[u];i({currentStepIndex:u,currentSubStepIndex:null,isActive:!0}),o.navigate&&y(o.navigate)}else i(u=>({...u,isActive:!1})),e.onOnboardingComplete&&e.onOnboardingComplete()},[r.currentStepIndex,r.currentSubStepIndex,y]),$=(0,c.useCallback)(()=>{let e=m.current;if(r.currentSubStepIndex!==null&&r.currentSubStepIndex>0){i(d=>({...d,currentSubStepIndex:d.currentSubStepIndex-1}));return}if(r.currentStepIndex>0&&r.currentSubStepIndex===0){i(d=>({...d,currentSubStepIndex:null}));return}if(r.currentStepIndex>0){let d=r.currentStepIndex-1,s=e.steps[d],u=s.subSteps?s.subSteps.length-1:null;i({currentStepIndex:d,currentSubStepIndex:u,isActive:!0})}},[r.currentStepIndex,r.currentSubStepIndex]),T=(0,c.useCallback)(()=>{i(e=>({...e,isActive:!1})),m.current.onOnboardingComplete&&m.current.onOnboardingComplete()},[]),k=(0,c.useCallback)((e,d=null)=>{i({currentStepIndex:e,currentSubStepIndex:d,isActive:!0})},[]),P={config:n,state:r,nextStep:x,prevStep:$,finish:T,goToStep:k,currentStep:W,isFirstStep:z,isLastStep:A};return f?(0,O.jsxs)(J.Provider,{value:P,children:[I,r.isActive&&(0,O.jsx)(Y,{})]}):(0,O.jsx)(O.Fragment,{children:I})},j=()=>{let n=(0,c.useContext)(J);if(n===void 0)throw new Error("useOnboarding must be used within an OnboardingProvider");return n};0&&(module.exports={OnboardingProvider,useOnboarding});
3
3
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/OnboardingProvider.tsx","../src/components/OnboardingOverlay.tsx"],"sourcesContent":["'use client';\n\nimport './styles.css';\nexport * from './components/OnboardingProvider';\nexport * from './types';\n","'use client';\n\nimport React, {\n createContext,\n useContext,\n useEffect,\n useState,\n useCallback,\n useMemo,\n useEffectEvent,\n} from 'react';\nimport Cookies from 'js-cookie';\nimport { OnboardingConfig, OnboardingState, OnboardingStep, OnboardingSubStep } from '../types';\nimport { OnboardingOverlay } from './OnboardingOverlay';\n\ninterface OnboardingContextType {\n config: OnboardingConfig;\n state: OnboardingState;\n nextStep: () => void;\n prevStep: () => void;\n finish: () => void;\n goToStep: (stepIndex: number, subStepIndex?: number | null) => void;\n currentStep: OnboardingStep | OnboardingSubStep | null;\n isFirstStep: boolean;\n isLastStep: boolean;\n}\n\nconst OnboardingContext = createContext<OnboardingContextType | undefined>(undefined);\n\nconst COOKIE_NAME = 'onboarding_state';\n\nexport const OnboardingProvider: React.FC<{\n config: OnboardingConfig;\n ssr?: boolean;\n onNavigate?: (url: string) => void;\n children: React.ReactNode;\n}> = ({ config, ssr = false, onNavigate, children }) => {\n const [isMounted, setIsMounted] = useState(!ssr);\n const [state, setState] = useState<OnboardingState>({\n currentStepIndex: 0,\n currentSubStepIndex: null,\n isActive: true,\n });\n\n const configRef = React.useRef(config);\n useEffect(() => {\n configRef.current = config;\n }, [config]);\n\n const onNavigateRef = React.useRef(onNavigate);\n useEffect(() => {\n onNavigateRef.current = onNavigate;\n }, [onNavigate]);\n\n const handleNavigation = useCallback(\n (link?: string) => {\n if (!link) return;\n\n if (onNavigateRef.current) {\n onNavigateRef.current(link);\n } else if (config.metadata.nextRouter) {\n window.location.href = link;\n } else {\n window.location.href = link;\n }\n },\n [config.metadata.nextRouter],\n );\n\n useEffect(() => {\n if (ssr) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setIsMounted(true);\n }\n }, [ssr]);\n\n const isMatch = (step: OnboardingStep, path: string) => {\n if (step.urlMatch instanceof RegExp) return step.urlMatch.test(path);\n\n if (typeof step.urlMatch === 'string' && step.urlMatch.includes('*')) {\n const pattern = step.urlMatch.replace(/[.+?^${}()|[\\\\]/g, '\\\\$&').replace(/\\*/g, '.*');\n return new RegExp(`^${pattern}$`).test(path);\n }\n\n return path === step.urlMatch;\n };\n\n const onRestoreState = useEffectEvent(() => {\n const currentConfig = configRef.current;\n const currentPath = window.location.pathname;\n let matchedStepIndex = -1;\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n matchedStepIndex = currentConfig.steps.findIndex((step) => isMatch(step, currentPath));\n }\n\n const savedState = Cookies.get(COOKIE_NAME);\n if (savedState) {\n try {\n const parsed: OnboardingState = JSON.parse(savedState);\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n if (matchedStepIndex !== -1) {\n if (parsed.currentStepIndex === matchedStepIndex) {\n setState(parsed);\n } else {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n }\n } else {\n setState({ ...parsed, isActive: false });\n }\n } else {\n setState(parsed);\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) !== false) {\n const step = currentConfig.steps[parsed.currentStepIndex];\n if (step && parsed.isActive) {\n let targetUrl: string | undefined;\n\n if (parsed.currentStepIndex > 0) {\n const prevStep = currentConfig.steps[parsed.currentStepIndex - 1];\n if (prevStep.navigate) {\n targetUrl = prevStep.navigate;\n }\n }\n\n if (!targetUrl && typeof step.urlMatch === 'string') {\n targetUrl = step.urlMatch;\n }\n\n if (targetUrl && window.location.pathname !== targetUrl) {\n handleNavigation(targetUrl);\n }\n\n if (currentConfig.metadata.simulateClicksOnNavigate) {\n if (parsed.currentSubStepIndex !== null && step.click) {\n setTimeout(() => {\n const element = document.querySelector(\n `[data-onboarding-id=\"${step.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n element.click();\n }\n }, 500);\n }\n }\n }\n }\n }\n } catch (e) {\n console.error('Failed to parse onboarding state from cookie', e);\n if (matchedStepIndex !== -1) {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n }\n }\n } else if (matchedStepIndex !== -1) {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n } else if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n setState((prev) => ({ ...prev, isActive: false }));\n } else {\n const step = currentConfig.steps[0];\n if (step && typeof step.urlMatch === 'string' && window.location.pathname !== step.urlMatch) {\n handleNavigation(step.urlMatch);\n }\n }\n });\n\n useEffect(() => {\n onRestoreState();\n }, []);\n\n useEffect(() => {\n if (isMounted) {\n Cookies.set(COOKIE_NAME, JSON.stringify(state), { expires: 365 });\n }\n }, [state, isMounted]);\n\n const currentStep = useMemo(() => {\n const step = config.steps[state.currentStepIndex];\n if (!step) return null;\n if (state.currentSubStepIndex !== null && step.subSteps) {\n return step.subSteps[state.currentSubStepIndex] || step;\n }\n return step;\n }, [config.steps, state.currentStepIndex, state.currentSubStepIndex]);\n\n const isFirstStep = state.currentStepIndex === 0 && state.currentSubStepIndex === null;\n const isLastStep = useMemo(() => {\n const totalSteps = config.steps.length;\n const isLastMainStep = state.currentStepIndex === totalSteps - 1;\n const step = config.steps[state.currentStepIndex];\n const hasSubSteps = step?.subSteps && step.subSteps.length > 0;\n\n if (isLastMainStep) {\n if (hasSubSteps) {\n return state.currentSubStepIndex === step.subSteps!.length - 1;\n }\n return true;\n }\n return false;\n }, [config.steps, state.currentStepIndex, state.currentSubStepIndex]);\n\n const nextStep = useCallback(() => {\n const currentConfig = configRef.current;\n const stepObj = currentConfig.steps[state.currentStepIndex];\n const currentActiveStep =\n state.currentSubStepIndex !== null && stepObj.subSteps\n ? stepObj.subSteps[state.currentSubStepIndex]\n : stepObj;\n\n if (currentActiveStep.click) {\n const element = document.querySelector(\n `[data-onboarding-id=\"${currentActiveStep.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n element.click();\n }\n }\n\n if (\n stepObj.subSteps &&\n (state.currentSubStepIndex === null ||\n state.currentSubStepIndex < stepObj.subSteps.length - 1)\n ) {\n const nextSubIndex = state.currentSubStepIndex === null ? 0 : state.currentSubStepIndex + 1;\n const nextSubStep = stepObj.subSteps[nextSubIndex];\n setState((prev) => ({ ...prev, currentSubStepIndex: nextSubIndex }));\n\n if (nextSubStep.navigate) handleNavigation(nextSubStep.navigate);\n return;\n }\n\n if (state.currentStepIndex < currentConfig.steps.length - 1) {\n const nextIndex = state.currentStepIndex + 1;\n const nextStepObj = currentConfig.steps[nextIndex];\n setState({\n currentStepIndex: nextIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n\n if (nextStepObj.navigate) handleNavigation(nextStepObj.navigate);\n } else {\n setState((prev) => ({ ...prev, isActive: false }));\n if (currentConfig.onOnboardingComplete) {\n currentConfig.onOnboardingComplete();\n }\n }\n }, [state.currentStepIndex, state.currentSubStepIndex, handleNavigation]);\n\n const prevStep = useCallback(() => {\n const currentConfig = configRef.current;\n\n if (state.currentSubStepIndex !== null && state.currentSubStepIndex > 0) {\n setState((prev) => ({ ...prev, currentSubStepIndex: prev.currentSubStepIndex! - 1 }));\n return;\n }\n\n if (state.currentStepIndex > 0 && state.currentSubStepIndex === 0) {\n setState((prev) => ({ ...prev, currentSubStepIndex: null }));\n return;\n }\n\n if (state.currentStepIndex > 0) {\n const prevIndex = state.currentStepIndex - 1;\n const prevStepObj = currentConfig.steps[prevIndex];\n const prevSubStepIndex = prevStepObj.subSteps ? prevStepObj.subSteps.length - 1 : null;\n\n setState({\n currentStepIndex: prevIndex,\n currentSubStepIndex: prevSubStepIndex,\n isActive: true,\n });\n }\n }, [state.currentStepIndex, state.currentSubStepIndex]);\n\n const finish = useCallback(() => {\n setState((prev) => ({ ...prev, isActive: false }));\n if (configRef.current.onOnboardingComplete) {\n configRef.current.onOnboardingComplete();\n }\n }, []);\n\n const goToStep = useCallback((stepIndex: number, subStepIndex: number | null = null) => {\n setState({\n currentStepIndex: stepIndex,\n currentSubStepIndex: subStepIndex,\n isActive: true,\n });\n }, []);\n\n const value = {\n config,\n state,\n nextStep,\n prevStep,\n finish,\n goToStep,\n currentStep,\n isFirstStep,\n isLastStep,\n };\n\n if (!isMounted) return <>{children}</>;\n\n return (\n <OnboardingContext.Provider value={value}>\n {children}\n {state.isActive && <OnboardingOverlay />}\n </OnboardingContext.Provider>\n );\n};\n\nexport const useOnboarding = () => {\n const context = useContext(OnboardingContext);\n if (context === undefined) {\n throw new Error('useOnboarding must be used within an OnboardingProvider');\n }\n return context;\n};\n","'use client';\n\nimport React, { useState, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useOnboarding } from './OnboardingProvider';\n\nexport const OnboardingOverlay: React.FC = () => {\n const { config, currentStep, nextStep, prevStep, finish, isFirstStep, isLastStep } =\n useOnboarding();\n const [coords, setCoords] = useState<{\n top: number;\n left: number;\n width: number;\n height: number;\n } | null>(null);\n const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });\n const [dragOffset, setDragOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });\n const isDragging = useRef(false);\n const dragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n const tooltipRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setDragOffset({ x: 0, y: 0 });\n }, [currentStep]);\n\n const handlePointerMove = useCallback((e: PointerEvent) => {\n if (!isDragging.current) return;\n\n const newX = e.clientX - dragStart.current.x;\n const newY = e.clientY - dragStart.current.y;\n\n setDragOffset({ x: newX, y: newY });\n }, []);\n\n const handlePointerUp = useCallback(() => {\n isDragging.current = false;\n\n if (tooltipRef.current) {\n tooltipRef.current.style.transition =\n 'top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)';\n tooltipRef.current.style.cursor = config.metadata.draggable ? 'grab' : 'auto';\n }\n\n window.removeEventListener('pointermove', handlePointerMove);\n // eslint-disable-next-line react-hooks/immutability\n window.removeEventListener('pointerup', handlePointerUp);\n }, [config.metadata.draggable, handlePointerMove]);\n\n const handlePointerDown = (e: React.PointerEvent) => {\n if (!config.metadata.draggable) return;\n e.stopPropagation();\n e.preventDefault();\n isDragging.current = true;\n dragStart.current = { x: e.clientX - dragOffset.x, y: e.clientY - dragOffset.y };\n\n if (tooltipRef.current) {\n tooltipRef.current.style.transition = 'none';\n tooltipRef.current.style.cursor = 'grabbing';\n }\n\n window.addEventListener('pointermove', handlePointerMove);\n window.addEventListener('pointerup', handlePointerUp);\n };\n\n useEffect(() => {\n return () => {\n window.removeEventListener('pointermove', handlePointerMove);\n window.removeEventListener('pointerup', handlePointerUp);\n };\n }, [handlePointerMove, handlePointerUp]);\n\n const calculateBestPosition = useCallback(\n (rect: {\n top: number;\n bottom: number;\n left: number;\n right: number;\n width: number;\n height: number;\n }) => {\n const tooltipWidth = 300;\n const tooltipHeight = 200;\n const gap = 12;\n const padding = 20;\n\n const spaceAbove = rect.top;\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceLeft = rect.left;\n const spaceRight = window.innerWidth - rect.right;\n\n let top = 0;\n let left = 0;\n\n if (spaceBelow > tooltipHeight + gap + padding) {\n top = rect.bottom + gap;\n left = Math.max(\n padding,\n Math.min(\n window.innerWidth - tooltipWidth - padding,\n rect.left + rect.width / 2 - tooltipWidth / 2,\n ),\n );\n } else if (spaceAbove > tooltipHeight + gap + padding) {\n top = rect.top - tooltipHeight - gap;\n left = Math.max(\n padding,\n Math.min(\n window.innerWidth - tooltipWidth - padding,\n rect.left + rect.width / 2 - tooltipWidth / 2,\n ),\n );\n } else if (spaceRight > tooltipWidth + gap + padding) {\n top = Math.max(\n padding,\n Math.min(\n window.innerHeight - tooltipHeight - padding,\n rect.top + rect.height / 2 - tooltipHeight / 2,\n ),\n );\n left = rect.right + gap;\n } else if (spaceLeft > tooltipWidth + gap + padding) {\n top = Math.max(\n padding,\n Math.min(\n window.innerHeight - tooltipHeight - padding,\n rect.top + rect.height / 2 - tooltipHeight / 2,\n ),\n );\n left = rect.left - tooltipWidth - gap;\n } else {\n top = window.innerHeight / 2 - tooltipHeight / 2;\n left = window.innerWidth / 2 - tooltipWidth / 2;\n }\n\n return { top: top + window.scrollY, left: left + window.scrollX };\n },\n [],\n );\n\n const updateCoords = useCallback(() => {\n if (!currentStep) return;\n\n const element = document.querySelector(\n `[data-onboarding-id=\"${currentStep.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n const rect = element.getBoundingClientRect();\n const padding = config.style?.padding || 0;\n\n const paddedRect = {\n top: rect.top - padding,\n bottom: rect.bottom + padding,\n left: rect.left - padding,\n right: rect.right + padding,\n width: rect.width + padding * 2,\n height: rect.height + padding * 2,\n };\n\n const newCoords = {\n top: paddedRect.top + window.scrollY,\n left: paddedRect.left + window.scrollX,\n width: paddedRect.width,\n height: paddedRect.height,\n };\n\n const newPosition = calculateBestPosition(paddedRect);\n\n setCoords((prev) => {\n if (\n prev &&\n prev.top === newCoords.top &&\n prev.left === newCoords.left &&\n prev.width === newCoords.width &&\n prev.height === newCoords.height\n ) {\n return prev;\n }\n return newCoords;\n });\n\n setPosition((prev) => {\n if (prev.top === newPosition.top && prev.left === newPosition.left) {\n return prev;\n }\n return newPosition;\n });\n } else {\n setCoords(null);\n }\n }, [currentStep, calculateBestPosition, config.style]);\n\n useEffect(() => {\n updateCoords();\n window.addEventListener('resize', updateCoords);\n window.addEventListener('scroll', updateCoords);\n\n const observer = new MutationObserver(updateCoords);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true });\n\n let resizeObserver: ResizeObserver | null = null;\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(updateCoords);\n resizeObserver.observe(document.body);\n\n const element = currentStep?.attribute\n ? document.querySelector(`[data-onboarding-id=\"${currentStep.attribute}\"]`)\n : null;\n if (element) {\n resizeObserver.observe(element);\n }\n }\n\n return () => {\n window.removeEventListener('resize', updateCoords);\n window.removeEventListener('scroll', updateCoords);\n observer.disconnect();\n if (resizeObserver) resizeObserver.disconnect();\n };\n }, [updateCoords, currentStep?.attribute]);\n\n if (!currentStep || !coords) return null;\n\n const maskStyle = {\n ...config.style?.background,\n transition: 'all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',\n };\n\n const stopPropagation = (e: React.PointerEvent | React.MouseEvent) => {\n e.stopPropagation();\n };\n\n const ChevronLeftIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M15 18l-6-6 6-6\" />\n </svg>\n );\n\n const ChevronRightIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M9 18l6-6-6-6\" />\n </svg>\n );\n\n const XIcon = () => (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n );\n\n const overlayContent = (\n <div className=\"onboard-overlay-container\">\n <div\n style={{ height: coords.top, ...maskStyle }}\n className=\"onboard-overlay-mask onboard-mask-top\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{\n top: coords.top + coords.height,\n height: `calc(100vh - ${coords.top + coords.height}px)`,\n ...maskStyle,\n }}\n className=\"onboard-overlay-mask onboard-mask-bottom\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{ top: coords.top, height: coords.height, width: coords.left, ...maskStyle }}\n className=\"onboard-overlay-mask onboard-mask-left\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{\n top: coords.top,\n height: coords.height,\n left: coords.left + coords.width,\n width: `calc(100% - ${coords.left + coords.width}px)`,\n ...maskStyle,\n }}\n className=\"onboard-overlay-mask\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n\n <div\n ref={tooltipRef}\n className=\"onboard-tooltip\"\n onPointerDown={handlePointerDown}\n style={{\n zIndex: 1000000,\n ...config.style?.container,\n top: position.top + dragOffset.y,\n left: position.left + dragOffset.x,\n transition:\n 'top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',\n cursor: config.metadata.draggable ? 'grab' : 'auto',\n touchAction: 'none',\n }}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n >\n <div className=\"onboard-tooltip-header\">\n <h3 className=\"onboard-tooltip-title\">{currentStep.title}</h3>\n <button\n onClick={(e) => {\n e.stopPropagation();\n finish();\n }}\n className=\"onboard-close-button\"\n >\n <XIcon />\n </button>\n </div>\n <p className=\"onboard-tooltip-description\">{currentStep.description}</p>\n\n <div className=\"onboard-tooltip-footer\">\n <button\n onClick={(e) => {\n e.stopPropagation();\n prevStep();\n }}\n disabled={isFirstStep}\n className=\"onboard-button-ghost\"\n style={{\n background: 'none',\n border: 'none',\n cursor: isFirstStep ? 'not-allowed' : 'pointer',\n ...config.style?.prev,\n }}\n >\n <ChevronLeftIcon />\n Prev\n </button>\n\n {isLastStep ? (\n <button\n onClick={(e) => {\n e.stopPropagation();\n finish();\n }}\n className=\"onboard-button-primary\"\n style={{ border: 'none', cursor: 'pointer', ...config.style?.finish }}\n >\n Finish\n </button>\n ) : (\n <button\n onClick={(e) => {\n e.stopPropagation();\n nextStep();\n }}\n className=\"onboard-button-primary\"\n style={{\n border: 'none',\n cursor: 'pointer',\n ...(isFirstStep ? config.style?.start : {}),\n ...(!isFirstStep ? config.style?.next : {}),\n }}\n >\n {isFirstStep && config.style?.start ? 'Start' : 'Next'}\n {!(isFirstStep && config.style?.start) && <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n </div>\n );\n\n return typeof document !== 'undefined' ? createPortal(overlayContent, document.body) : null;\n};\n"],"mappings":"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","names":["index_exports","__export","OnboardingProvider","useOnboarding","__toCommonJS","import_react","import_js_cookie","import_react","import_react_dom","import_jsx_runtime","OnboardingOverlay","config","currentStep","nextStep","prevStep","finish","isFirstStep","isLastStep","useOnboarding","coords","setCoords","position","setPosition","dragOffset","setDragOffset","isDragging","dragStart","tooltipRef","handlePointerMove","e","newX","newY","handlePointerUp","handlePointerDown","calculateBestPosition","rect","spaceAbove","spaceBelow","spaceLeft","spaceRight","top","left","updateCoords","element","padding","paddedRect","newCoords","newPosition","prev","observer","resizeObserver","maskStyle","stopPropagation","ChevronLeftIcon","ChevronRightIcon","XIcon","overlayContent","import_jsx_runtime","OnboardingContext","COOKIE_NAME","OnboardingProvider","config","ssr","onNavigate","children","isMounted","setIsMounted","state","setState","configRef","React","onNavigateRef","handleNavigation","link","isMatch","step","path","pattern","onRestoreState","currentConfig","currentPath","matchedStepIndex","savedState","Cookies","parsed","targetUrl","prevStep","element","e","prev","currentStep","isFirstStep","isLastStep","totalSteps","isLastMainStep","hasSubSteps","nextStep","stepObj","currentActiveStep","nextSubIndex","nextSubStep","nextIndex","nextStepObj","prevIndex","prevStepObj","prevSubStepIndex","finish","goToStep","stepIndex","subStepIndex","value","OnboardingOverlay","useOnboarding","context"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/components/OnboardingProvider.tsx","../src/components/OnboardingOverlay.tsx"],"sourcesContent":["'use client';\n\nimport './styles.css';\nexport * from './components/OnboardingProvider';\nexport * from './types';\n","'use client';\n\nimport React, {\n createContext,\n useContext,\n useEffect,\n useState,\n useCallback,\n useMemo,\n useRef,\n} from 'react';\nimport Cookies from 'js-cookie';\nimport { OnboardingConfig, OnboardingState, OnboardingStep, OnboardingSubStep } from '../types';\nimport { OnboardingOverlay } from './OnboardingOverlay';\n\ninterface OnboardingContextType {\n config: OnboardingConfig;\n state: OnboardingState;\n nextStep: () => void;\n prevStep: () => void;\n finish: () => void;\n goToStep: (stepIndex: number, subStepIndex?: number | null) => void;\n currentStep: OnboardingStep | OnboardingSubStep | null;\n isFirstStep: boolean;\n isLastStep: boolean;\n}\n\nconst OnboardingContext = createContext<OnboardingContextType | undefined>(undefined);\n\nconst COOKIE_NAME = 'onboarding_state';\n\nexport const OnboardingProvider: React.FC<{\n config: OnboardingConfig;\n ssr?: boolean;\n onNavigate?: (url: string) => void;\n children: React.ReactNode;\n}> = ({ config, ssr = false, onNavigate, children }) => {\n const [isMounted, setIsMounted] = useState(!ssr);\n const [state, setState] = useState<OnboardingState>({\n currentStepIndex: 0,\n currentSubStepIndex: null,\n isActive: true,\n });\n\n const configRef = useRef(config);\n const onNavigateRef = useRef(onNavigate);\n\n configRef.current = config;\n onNavigateRef.current = onNavigate;\n\n const handleNavigation = useCallback((link?: string) => {\n if (!link) return;\n\n if (onNavigateRef.current) {\n onNavigateRef.current(link);\n } else {\n window.location.href = link;\n }\n }, []);\n\n const isMatch = (step: OnboardingStep, path: string) => {\n if (step.urlMatch instanceof RegExp) return step.urlMatch.test(path);\n\n if (typeof step.urlMatch === 'string' && step.urlMatch.includes('*')) {\n const pattern = step.urlMatch.replace(/[.+?^${}()|[\\\\]/g, '\\\\$&').replace(/\\*/g, '.*');\n return new RegExp(`^${pattern}$`).test(path);\n }\n\n return path === step.urlMatch;\n };\n\n useEffect(() => {\n if (ssr) {\n setIsMounted(true);\n }\n\n const currentConfig = configRef.current;\n const currentPath = window.location.pathname;\n let matchedStepIndex = -1;\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n matchedStepIndex = currentConfig.steps.findIndex((step) => isMatch(step, currentPath));\n }\n\n const savedState = Cookies.get(COOKIE_NAME);\n if (savedState) {\n try {\n const parsed: OnboardingState = JSON.parse(savedState);\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n if (matchedStepIndex !== -1) {\n if (parsed.currentStepIndex === matchedStepIndex) {\n setState(parsed);\n } else {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n }\n } else {\n setState({ ...parsed, isActive: false });\n }\n } else {\n setState(parsed);\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) !== false) {\n const step = currentConfig.steps[parsed.currentStepIndex];\n if (step && parsed.isActive) {\n let targetUrl: string | undefined;\n\n if (parsed.currentStepIndex > 0) {\n const prevStep = currentConfig.steps[parsed.currentStepIndex - 1];\n if (prevStep.navigate) {\n targetUrl = prevStep.navigate;\n }\n }\n\n if (!targetUrl && typeof step.urlMatch === 'string') {\n targetUrl = step.urlMatch;\n }\n\n if (targetUrl && window.location.pathname !== targetUrl) {\n handleNavigation(targetUrl);\n }\n\n if (currentConfig.metadata.simulateClicksOnNavigate) {\n if (parsed.currentSubStepIndex !== null && step.click) {\n setTimeout(() => {\n const element = document.querySelector(\n `[data-onboarding-id=\"${step.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n element.click();\n }\n }, 500);\n }\n }\n }\n }\n }\n } catch (e) {\n console.error('Failed to parse onboarding state from cookie', e);\n if (matchedStepIndex !== -1) {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n }\n }\n } else if (matchedStepIndex !== -1) {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n } else if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n setState((prev) => ({ ...prev, isActive: false }));\n } else {\n const step = currentConfig.steps[0];\n if (step && typeof step.urlMatch === 'string' && window.location.pathname !== step.urlMatch) {\n handleNavigation(step.urlMatch);\n }\n }\n }, [ssr, handleNavigation]);\n\n useEffect(() => {\n if (isMounted) {\n Cookies.set(COOKIE_NAME, JSON.stringify(state), { expires: 365 });\n }\n }, [state, isMounted]);\n\n const currentStep = useMemo(() => {\n const step = config.steps[state.currentStepIndex];\n if (!step) return null;\n if (state.currentSubStepIndex !== null && step.subSteps) {\n return step.subSteps[state.currentSubStepIndex] || step;\n }\n return step;\n }, [config.steps, state.currentStepIndex, state.currentSubStepIndex]);\n\n const isFirstStep = state.currentStepIndex === 0 && state.currentSubStepIndex === null;\n const isLastStep = useMemo(() => {\n const totalSteps = config.steps.length;\n const isLastMainStep = state.currentStepIndex === totalSteps - 1;\n const step = config.steps[state.currentStepIndex];\n const hasSubSteps = step?.subSteps && step.subSteps.length > 0;\n\n if (isLastMainStep) {\n if (hasSubSteps) {\n return state.currentSubStepIndex === step.subSteps!.length - 1;\n }\n return true;\n }\n return false;\n }, [config.steps, state.currentStepIndex, state.currentSubStepIndex]);\n\n const nextStep = useCallback(() => {\n const currentConfig = configRef.current;\n const stepObj = currentConfig.steps[state.currentStepIndex];\n const currentActiveStep =\n state.currentSubStepIndex !== null && stepObj.subSteps\n ? stepObj.subSteps[state.currentSubStepIndex]\n : stepObj;\n\n if (currentActiveStep.click) {\n const element = document.querySelector(\n `[data-onboarding-id=\"${currentActiveStep.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n element.click();\n }\n }\n\n if (\n stepObj.subSteps &&\n (state.currentSubStepIndex === null ||\n state.currentSubStepIndex < stepObj.subSteps.length - 1)\n ) {\n const nextSubIndex = state.currentSubStepIndex === null ? 0 : state.currentSubStepIndex + 1;\n const nextSubStep = stepObj.subSteps[nextSubIndex];\n setState((prev) => ({ ...prev, currentSubStepIndex: nextSubIndex }));\n\n if (nextSubStep.navigate) handleNavigation(nextSubStep.navigate);\n return;\n }\n\n if (state.currentStepIndex < currentConfig.steps.length - 1) {\n const nextIndex = state.currentStepIndex + 1;\n const nextStepObj = currentConfig.steps[nextIndex];\n setState({\n currentStepIndex: nextIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n\n if (nextStepObj.navigate) handleNavigation(nextStepObj.navigate);\n } else {\n setState((prev) => ({ ...prev, isActive: false }));\n if (currentConfig.onOnboardingComplete) {\n currentConfig.onOnboardingComplete();\n }\n }\n }, [state.currentStepIndex, state.currentSubStepIndex, handleNavigation]);\n\n const prevStep = useCallback(() => {\n const currentConfig = configRef.current;\n\n if (state.currentSubStepIndex !== null && state.currentSubStepIndex > 0) {\n setState((prev) => ({ ...prev, currentSubStepIndex: prev.currentSubStepIndex! - 1 }));\n return;\n }\n\n if (state.currentStepIndex > 0 && state.currentSubStepIndex === 0) {\n setState((prev) => ({ ...prev, currentSubStepIndex: null }));\n return;\n }\n\n if (state.currentStepIndex > 0) {\n const prevIndex = state.currentStepIndex - 1;\n const prevStepObj = currentConfig.steps[prevIndex];\n const prevSubStepIndex = prevStepObj.subSteps ? prevStepObj.subSteps.length - 1 : null;\n\n setState({\n currentStepIndex: prevIndex,\n currentSubStepIndex: prevSubStepIndex,\n isActive: true,\n });\n }\n }, [state.currentStepIndex, state.currentSubStepIndex]);\n\n const finish = useCallback(() => {\n setState((prev) => ({ ...prev, isActive: false }));\n if (configRef.current.onOnboardingComplete) {\n configRef.current.onOnboardingComplete();\n }\n }, []);\n\n const goToStep = useCallback((stepIndex: number, subStepIndex: number | null = null) => {\n setState({\n currentStepIndex: stepIndex,\n currentSubStepIndex: subStepIndex,\n isActive: true,\n });\n }, []);\n\n const value = {\n config,\n state,\n nextStep,\n prevStep,\n finish,\n goToStep,\n currentStep,\n isFirstStep,\n isLastStep,\n };\n\n if (!isMounted) return <>{children}</>;\n\n return (\n <OnboardingContext.Provider value={value}>\n {children}\n {state.isActive && <OnboardingOverlay />}\n </OnboardingContext.Provider>\n );\n};\n\nexport const useOnboarding = () => {\n const context = useContext(OnboardingContext);\n if (context === undefined) {\n throw new Error('useOnboarding must be used within an OnboardingProvider');\n }\n return context;\n};\n","'use client';\n\nimport React, { useState, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useOnboarding } from './OnboardingProvider';\n\nconst ChevronLeftIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M15 18l-6-6 6-6\" />\n </svg>\n);\n\nconst ChevronRightIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M9 18l6-6-6-6\" />\n </svg>\n);\n\nconst XIcon = () => (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n);\n\nexport const OnboardingOverlay: React.FC = () => {\n const { config, currentStep, nextStep, prevStep, finish, isFirstStep, isLastStep } =\n useOnboarding();\n const [coords, setCoords] = useState<{\n top: number;\n left: number;\n width: number;\n height: number;\n } | null>(null);\n const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });\n const [dragOffset, setDragOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });\n const isDragging = useRef(false);\n const dragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n const tooltipRef = useRef<HTMLDivElement>(null);\n\n // Reset drag offset when step changes\n const [prevStepRef, setPrevStepRef] = useState(currentStep);\n if (currentStep !== prevStepRef) {\n setPrevStepRef(currentStep);\n setDragOffset({ x: 0, y: 0 });\n }\n\n const handlePointerMove = useCallback((e: PointerEvent) => {\n if (!isDragging.current) return;\n\n const newX = e.clientX - dragStart.current.x;\n const newY = e.clientY - dragStart.current.y;\n\n setDragOffset({ x: newX, y: newY });\n }, []);\n\n const handlePointerUp = useCallback(() => {\n isDragging.current = false;\n\n if (tooltipRef.current) {\n tooltipRef.current.style.transition =\n 'top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)';\n tooltipRef.current.style.cursor = config.metadata.draggable ? 'grab' : 'auto';\n }\n\n window.removeEventListener('pointermove', handlePointerMove);\n window.removeEventListener('pointerup', handlePointerUp);\n }, [config.metadata.draggable, handlePointerMove]);\n\n const handlePointerDown = (e: React.PointerEvent) => {\n if (!config.metadata.draggable) return;\n e.stopPropagation();\n e.preventDefault();\n isDragging.current = true;\n dragStart.current = { x: e.clientX - dragOffset.x, y: e.clientY - dragOffset.y };\n\n if (tooltipRef.current) {\n tooltipRef.current.style.transition = 'none';\n tooltipRef.current.style.cursor = 'grabbing';\n }\n\n window.addEventListener('pointermove', handlePointerMove);\n window.addEventListener('pointerup', handlePointerUp);\n };\n\n const calculateBestPosition = useCallback(\n (rect: {\n top: number;\n bottom: number;\n left: number;\n right: number;\n width: number;\n height: number;\n }) => {\n const tooltipWidth = 300;\n const tooltipHeight = 200;\n const gap = 12;\n const padding = 20;\n\n const spaceAbove = rect.top;\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceLeft = rect.left;\n const spaceRight = window.innerWidth - rect.right;\n\n let top = 0;\n let left = 0;\n\n if (spaceBelow > tooltipHeight + gap + padding) {\n top = rect.bottom + gap;\n left = Math.max(\n padding,\n Math.min(\n window.innerWidth - tooltipWidth - padding,\n rect.left + rect.width / 2 - tooltipWidth / 2,\n ),\n );\n } else if (spaceAbove > tooltipHeight + gap + padding) {\n top = rect.top - tooltipHeight - gap;\n left = Math.max(\n padding,\n Math.min(\n window.innerWidth - tooltipWidth - padding,\n rect.left + rect.width / 2 - tooltipWidth / 2,\n ),\n );\n } else if (spaceRight > tooltipWidth + gap + padding) {\n top = Math.max(\n padding,\n Math.min(\n window.innerHeight - tooltipHeight - padding,\n rect.top + rect.height / 2 - tooltipHeight / 2,\n ),\n );\n left = rect.right + gap;\n } else if (spaceLeft > tooltipWidth + gap + padding) {\n top = Math.max(\n padding,\n Math.min(\n window.innerHeight - tooltipHeight - padding,\n rect.top + rect.height / 2 - tooltipHeight / 2,\n ),\n );\n left = rect.left - tooltipWidth - gap;\n } else {\n top = window.innerHeight / 2 - tooltipHeight / 2;\n left = window.innerWidth / 2 - tooltipWidth / 2;\n }\n\n return { top: top + window.scrollY, left: left + window.scrollX };\n },\n [],\n );\n\n const updateCoords = useCallback(() => {\n if (!currentStep) return;\n\n const element = document.querySelector(\n `[data-onboarding-id=\"${currentStep.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n const rect = element.getBoundingClientRect();\n const padding = config.style?.padding || 0;\n\n const paddedRect = {\n top: rect.top - padding,\n bottom: rect.bottom + padding,\n left: rect.left - padding,\n right: rect.right + padding,\n width: rect.width + padding * 2,\n height: rect.height + padding * 2,\n };\n\n const newCoords = {\n top: paddedRect.top + window.scrollY,\n left: paddedRect.left + window.scrollX,\n width: paddedRect.width,\n height: paddedRect.height,\n };\n\n const newPosition = calculateBestPosition(paddedRect);\n\n setCoords((prev) => {\n if (\n prev &&\n prev.top === newCoords.top &&\n prev.left === newCoords.left &&\n prev.width === newCoords.width &&\n prev.height === newCoords.height\n ) {\n return prev;\n }\n return newCoords;\n });\n\n setPosition((prev) => {\n if (prev.top === newPosition.top && prev.left === newPosition.left) {\n return prev;\n }\n return newPosition;\n });\n } else {\n setCoords(null);\n }\n }, [currentStep, calculateBestPosition, config.style]);\n\n useEffect(() => {\n updateCoords();\n window.addEventListener('resize', updateCoords);\n window.addEventListener('scroll', updateCoords);\n\n const observer = new MutationObserver(updateCoords);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true });\n\n let resizeObserver: ResizeObserver | null = null;\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(updateCoords);\n resizeObserver.observe(document.body);\n\n const element = currentStep?.attribute\n ? document.querySelector(`[data-onboarding-id=\"${currentStep.attribute}\"]`)\n : null;\n if (element) {\n resizeObserver.observe(element);\n }\n }\n\n return () => {\n window.removeEventListener('resize', updateCoords);\n window.removeEventListener('scroll', updateCoords);\n window.removeEventListener('pointermove', handlePointerMove);\n window.removeEventListener('pointerup', handlePointerUp);\n observer.disconnect();\n if (resizeObserver) resizeObserver.disconnect();\n };\n }, [updateCoords, currentStep?.attribute, handlePointerMove, handlePointerUp]);\n\n if (!currentStep || !coords) return null;\n\n const maskStyle = {\n ...config.style?.background,\n transition: 'all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',\n };\n\n const stopPropagation = (e: React.PointerEvent | React.MouseEvent) => {\n e.stopPropagation();\n };\n\n const overlayContent = (\n <div className=\"onboard-overlay-container\">\n <div\n style={{ height: coords.top, ...maskStyle }}\n className=\"onboard-overlay-mask onboard-mask-top\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{\n top: coords.top + coords.height,\n height: `calc(100vh - ${coords.top + coords.height}px)`,\n ...maskStyle,\n }}\n className=\"onboard-overlay-mask onboard-mask-bottom\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{ top: coords.top, height: coords.height, width: coords.left, ...maskStyle }}\n className=\"onboard-overlay-mask onboard-mask-left\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{\n top: coords.top,\n height: coords.height,\n left: coords.left + coords.width,\n width: `calc(100% - ${coords.left + coords.width}px)`,\n ...maskStyle,\n }}\n className=\"onboard-overlay-mask\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n\n <div\n ref={tooltipRef}\n className=\"onboard-tooltip\"\n onPointerDown={handlePointerDown}\n style={{\n zIndex: 1000000,\n ...config.style?.container,\n top: position.top + dragOffset.y,\n left: position.left + dragOffset.x,\n transition:\n 'top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',\n cursor: config.metadata.draggable ? 'grab' : 'auto',\n touchAction: 'none',\n }}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n >\n <div className=\"onboard-tooltip-header\">\n <h3 className=\"onboard-tooltip-title\">{currentStep.title}</h3>\n <button\n onClick={(e) => {\n e.stopPropagation();\n finish();\n }}\n className=\"onboard-close-button\"\n >\n <XIcon />\n </button>\n </div>\n <p className=\"onboard-tooltip-description\">{currentStep.description}</p>\n\n <div className=\"onboard-tooltip-footer\">\n <button\n onClick={(e) => {\n e.stopPropagation();\n prevStep();\n }}\n disabled={isFirstStep}\n className=\"onboard-button-ghost\"\n style={{\n background: 'none',\n border: 'none',\n cursor: isFirstStep ? 'not-allowed' : 'pointer',\n ...config.style?.prev,\n }}\n >\n <ChevronLeftIcon />\n Prev\n </button>\n\n {isLastStep ? (\n <button\n onClick={(e) => {\n e.stopPropagation();\n finish();\n }}\n className=\"onboard-button-primary\"\n style={{ border: 'none', cursor: 'pointer', ...config.style?.finish }}\n >\n Finish\n </button>\n ) : (\n <button\n onClick={(e) => {\n e.stopPropagation();\n nextStep();\n }}\n className=\"onboard-button-primary\"\n style={{\n border: 'none',\n cursor: 'pointer',\n ...(isFirstStep ? config.style?.start : {}),\n ...(!isFirstStep ? config.style?.next : {}),\n }}\n >\n {isFirstStep && config.style?.start ? 'Start' : 'Next'}\n {!(isFirstStep && config.style?.start) && <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n </div>\n );\n\n return typeof document !== 'undefined' ? createPortal(overlayContent, document.body) : null;\n};"],"mappings":"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","names":["index_exports","__export","OnboardingProvider","useOnboarding","__toCommonJS","import_react","import_js_cookie","import_react","import_react_dom","import_jsx_runtime","ChevronLeftIcon","ChevronRightIcon","XIcon","OnboardingOverlay","config","currentStep","nextStep","prevStep","finish","isFirstStep","isLastStep","useOnboarding","coords","setCoords","position","setPosition","dragOffset","setDragOffset","isDragging","dragStart","tooltipRef","prevStepRef","setPrevStepRef","handlePointerMove","e","newX","newY","handlePointerUp","handlePointerDown","calculateBestPosition","rect","spaceAbove","spaceBelow","spaceLeft","spaceRight","top","left","updateCoords","element","padding","paddedRect","newCoords","newPosition","prev","observer","resizeObserver","maskStyle","stopPropagation","overlayContent","import_jsx_runtime","OnboardingContext","COOKIE_NAME","OnboardingProvider","config","ssr","onNavigate","children","isMounted","setIsMounted","state","setState","configRef","onNavigateRef","handleNavigation","link","isMatch","step","path","pattern","currentConfig","currentPath","matchedStepIndex","savedState","Cookies","parsed","targetUrl","prevStep","element","e","prev","currentStep","isFirstStep","isLastStep","totalSteps","isLastMainStep","hasSubSteps","nextStep","stepObj","currentActiveStep","nextSubIndex","nextSubStep","nextIndex","nextStepObj","prevIndex","prevStepObj","prevSubStepIndex","finish","goToStep","stepIndex","subStepIndex","value","OnboardingOverlay","useOnboarding","context"]}
package/dist/index.mjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use client";
2
- "use client";import J,{createContext as nt,useContext as ot,useEffect as A,useState as U,useCallback as H,useMemo as _,useEffectEvent as rt}from"react";import K from"js-cookie";import{useState as F,useEffect as B,useCallback as T,useRef as X}from"react";import{createPortal as et}from"react-dom";import{jsx as u,jsxs as w}from"react/jsx-runtime";var Y=()=>{let{config:i,currentStep:c,nextStep:L,prevStep:W,finish:y,isFirstStep:m,isLastStep:o}=q(),[r,f]=F(null),[I,x]=F({top:0,left:0}),[O,D]=F({x:0,y:0}),R=X(!1),z=X({x:0,y:0}),h=X(null);B(()=>{D({x:0,y:0})},[c]);let v=T(t=>{if(!R.current)return;let d=t.clientX-z.current.x,p=t.clientY-z.current.y;D({x:d,y:p})},[]),k=T(()=>{R.current=!1,h.current&&(h.current.style.transition="top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)",h.current.style.cursor=i.metadata.draggable?"grab":"auto"),window.removeEventListener("pointermove",v),window.removeEventListener("pointerup",k)},[i.metadata.draggable,v]),j=t=>{i.metadata.draggable&&(t.stopPropagation(),t.preventDefault(),R.current=!0,z.current={x:t.clientX-O.x,y:t.clientY-O.y},h.current&&(h.current.style.transition="none",h.current.style.cursor="grabbing"),window.addEventListener("pointermove",v),window.addEventListener("pointerup",k))};B(()=>()=>{window.removeEventListener("pointermove",v),window.removeEventListener("pointerup",k)},[v,k]);let $=T(t=>{let N=t.top,b=window.innerHeight-t.bottom,Z=t.left,tt=window.innerWidth-t.right,P=0,E=0;return b>232?(P=t.bottom+12,E=Math.max(20,Math.min(window.innerWidth-300-20,t.left+t.width/2-300/2))):N>232?(P=t.top-200-12,E=Math.max(20,Math.min(window.innerWidth-300-20,t.left+t.width/2-300/2))):tt>332?(P=Math.max(20,Math.min(window.innerHeight-200-20,t.top+t.height/2-200/2)),E=t.right+12):Z>332?(P=Math.max(20,Math.min(window.innerHeight-200-20,t.top+t.height/2-200/2)),E=t.left-300-12):(P=window.innerHeight/2-200/2,E=window.innerWidth/2-300/2),{top:P+window.scrollY,left:E+window.scrollX}},[]),g=T(()=>{if(!c)return;let t=document.querySelector(`[data-onboarding-id="${c.attribute}"]`);if(t){let d=t.getBoundingClientRect(),p=i.style?.padding||0,C={top:d.top-p,bottom:d.bottom+p,left:d.left-p,right:d.right+p,width:d.width+p*2,height:d.height+p*2},M={top:C.top+window.scrollY,left:C.left+window.scrollX,width:C.width,height:C.height},N=$(C);f(b=>b&&b.top===M.top&&b.left===M.left&&b.width===M.width&&b.height===M.height?b:M),x(b=>b.top===N.top&&b.left===N.left?b:N)}else f(null)},[c,$,i.style]);if(B(()=>{g(),window.addEventListener("resize",g),window.addEventListener("scroll",g);let t=new MutationObserver(g);t.observe(document.body,{childList:!0,subtree:!0,attributes:!0});let d=null;if(typeof ResizeObserver<"u"){d=new ResizeObserver(g),d.observe(document.body);let p=c?.attribute?document.querySelector(`[data-onboarding-id="${c.attribute}"]`):null;p&&d.observe(p)}return()=>{window.removeEventListener("resize",g),window.removeEventListener("scroll",g),t.disconnect(),d&&d.disconnect()}},[g,c?.attribute]),!c||!r)return null;let e={...i.style?.background,transition:"all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)"},n=t=>{t.stopPropagation()},a=()=>u("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u("path",{d:"M15 18l-6-6 6-6"})}),l=()=>u("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u("path",{d:"M9 18l6-6-6-6"})}),s=()=>w("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[u("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),u("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),S=w("div",{className:"onboard-overlay-container",children:[u("div",{style:{height:r.top,...e},className:"onboard-overlay-mask onboard-mask-top",onPointerDown:n,onMouseDown:n,onClick:n}),u("div",{style:{top:r.top+r.height,height:`calc(100vh - ${r.top+r.height}px)`,...e},className:"onboard-overlay-mask onboard-mask-bottom",onPointerDown:n,onMouseDown:n,onClick:n}),u("div",{style:{top:r.top,height:r.height,width:r.left,...e},className:"onboard-overlay-mask onboard-mask-left",onPointerDown:n,onMouseDown:n,onClick:n}),u("div",{style:{top:r.top,height:r.height,left:r.left+r.width,width:`calc(100% - ${r.left+r.width}px)`,...e},className:"onboard-overlay-mask",onPointerDown:n,onMouseDown:n,onClick:n}),w("div",{ref:h,className:"onboard-tooltip",onPointerDown:j,style:{zIndex:1e6,...i.style?.container,top:I.top+O.y,left:I.left+O.x,transition:"top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)",cursor:i.metadata.draggable?"grab":"auto",touchAction:"none"},onMouseDown:n,onClick:n,children:[w("div",{className:"onboard-tooltip-header",children:[u("h3",{className:"onboard-tooltip-title",children:c.title}),u("button",{onClick:t=>{t.stopPropagation(),y()},className:"onboard-close-button",children:u(s,{})})]}),u("p",{className:"onboard-tooltip-description",children:c.description}),w("div",{className:"onboard-tooltip-footer",children:[w("button",{onClick:t=>{t.stopPropagation(),W()},disabled:m,className:"onboard-button-ghost",style:{background:"none",border:"none",cursor:m?"not-allowed":"pointer",...i.style?.prev},children:[u(a,{}),"Prev"]}),o?u("button",{onClick:t=>{t.stopPropagation(),y()},className:"onboard-button-primary",style:{border:"none",cursor:"pointer",...i.style?.finish},children:"Finish"}):w("button",{onClick:t=>{t.stopPropagation(),L()},className:"onboard-button-primary",style:{border:"none",cursor:"pointer",...m?i.style?.start:{},...m?{}:i.style?.next},children:[m&&i.style?.start?"Start":"Next",!(m&&i.style?.start)&&u(l,{})]})]})]})]});return typeof document<"u"?et(S,document.body):null};import{Fragment as it,jsx as Q,jsxs as st}from"react/jsx-runtime";var V=nt(void 0),G="onboarding_state",mt=({config:i,ssr:c=!1,onNavigate:L,children:W})=>{let[y,m]=U(!c),[o,r]=U({currentStepIndex:0,currentSubStepIndex:null,isActive:!0}),f=J.useRef(i);A(()=>{f.current=i},[i]);let I=J.useRef(L);A(()=>{I.current=L},[L]);let x=H(e=>{e&&(I.current?I.current(e):(i.metadata.nextRouter,window.location.href=e))},[i.metadata.nextRouter]);A(()=>{c&&m(!0)},[c]);let O=(e,n)=>{if(e.urlMatch instanceof RegExp)return e.urlMatch.test(n);if(typeof e.urlMatch=="string"&&e.urlMatch.includes("*")){let a=e.urlMatch.replace(/[.+?^${}()|[\\]/g,"\\$&").replace(/\*/g,".*");return new RegExp(`^${a}$`).test(n)}return n===e.urlMatch},D=rt(()=>{let e=f.current,n=window.location.pathname,a=-1;e.metadata.inOrder===!1&&(a=e.steps.findIndex(s=>O(s,n)));let l=K.get(G);if(l)try{let s=JSON.parse(l);if(e.metadata.inOrder===!1)a!==-1?s.currentStepIndex===a?r(s):r({currentStepIndex:a,currentSubStepIndex:null,isActive:!0}):r({...s,isActive:!1});else if(r(s),e.metadata.inOrder!==!1){let S=e.steps[s.currentStepIndex];if(S&&s.isActive){let t;if(s.currentStepIndex>0){let d=e.steps[s.currentStepIndex-1];d.navigate&&(t=d.navigate)}!t&&typeof S.urlMatch=="string"&&(t=S.urlMatch),t&&window.location.pathname!==t&&x(t),e.metadata.simulateClicksOnNavigate&&s.currentSubStepIndex!==null&&S.click&&setTimeout(()=>{let d=document.querySelector(`[data-onboarding-id="${S.attribute}"]`);d&&d.click()},500)}}}catch(s){console.error("Failed to parse onboarding state from cookie",s),a!==-1&&r({currentStepIndex:a,currentSubStepIndex:null,isActive:!0})}else if(a!==-1)r({currentStepIndex:a,currentSubStepIndex:null,isActive:!0});else if(e.metadata.inOrder===!1)r(s=>({...s,isActive:!1}));else{let s=e.steps[0];s&&typeof s.urlMatch=="string"&&window.location.pathname!==s.urlMatch&&x(s.urlMatch)}});A(()=>{D()},[]),A(()=>{y&&K.set(G,JSON.stringify(o),{expires:365})},[o,y]);let R=_(()=>{let e=i.steps[o.currentStepIndex];return e?o.currentSubStepIndex!==null&&e.subSteps&&e.subSteps[o.currentSubStepIndex]||e:null},[i.steps,o.currentStepIndex,o.currentSubStepIndex]),z=o.currentStepIndex===0&&o.currentSubStepIndex===null,h=_(()=>{let e=i.steps.length,n=o.currentStepIndex===e-1,a=i.steps[o.currentStepIndex],l=a?.subSteps&&a.subSteps.length>0;return n?l?o.currentSubStepIndex===a.subSteps.length-1:!0:!1},[i.steps,o.currentStepIndex,o.currentSubStepIndex]),v=H(()=>{let e=f.current,n=e.steps[o.currentStepIndex],a=o.currentSubStepIndex!==null&&n.subSteps?n.subSteps[o.currentSubStepIndex]:n;if(a.click){let l=document.querySelector(`[data-onboarding-id="${a.attribute}"]`);l&&l.click()}if(n.subSteps&&(o.currentSubStepIndex===null||o.currentSubStepIndex<n.subSteps.length-1)){let l=o.currentSubStepIndex===null?0:o.currentSubStepIndex+1,s=n.subSteps[l];r(S=>({...S,currentSubStepIndex:l})),s.navigate&&x(s.navigate);return}if(o.currentStepIndex<e.steps.length-1){let l=o.currentStepIndex+1,s=e.steps[l];r({currentStepIndex:l,currentSubStepIndex:null,isActive:!0}),s.navigate&&x(s.navigate)}else r(l=>({...l,isActive:!1})),e.onOnboardingComplete&&e.onOnboardingComplete()},[o.currentStepIndex,o.currentSubStepIndex,x]),k=H(()=>{let e=f.current;if(o.currentSubStepIndex!==null&&o.currentSubStepIndex>0){r(n=>({...n,currentSubStepIndex:n.currentSubStepIndex-1}));return}if(o.currentStepIndex>0&&o.currentSubStepIndex===0){r(n=>({...n,currentSubStepIndex:null}));return}if(o.currentStepIndex>0){let n=o.currentStepIndex-1,a=e.steps[n],l=a.subSteps?a.subSteps.length-1:null;r({currentStepIndex:n,currentSubStepIndex:l,isActive:!0})}},[o.currentStepIndex,o.currentSubStepIndex]),j=H(()=>{r(e=>({...e,isActive:!1})),f.current.onOnboardingComplete&&f.current.onOnboardingComplete()},[]),$=H((e,n=null)=>{r({currentStepIndex:e,currentSubStepIndex:n,isActive:!0})},[]),g={config:i,state:o,nextStep:v,prevStep:k,finish:j,goToStep:$,currentStep:R,isFirstStep:z,isLastStep:h};return y?st(V.Provider,{value:g,children:[W,o.isActive&&Q(Y,{})]}):Q(it,{children:W})},q=()=>{let i=ot(V);if(i===void 0)throw new Error("useOnboarding must be used within an OnboardingProvider");return i};export{mt as OnboardingProvider,q as useOnboarding};
2
+ "use client";import{createContext as rt,useContext as it,useEffect as X,useState as Y,useCallback as N,useMemo as q,useRef as J}from"react";import U from"js-cookie";import{useState as W,useEffect as Z,useCallback as D,useRef as j}from"react";import{createPortal as tt}from"react-dom";import{jsx as u,jsxs as v}from"react/jsx-runtime";var et=()=>u("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u("path",{d:"M15 18l-6-6 6-6"})}),nt=()=>u("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u("path",{d:"M9 18l6-6-6-6"})}),ot=()=>v("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[u("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),u("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),F=()=>{let{config:a,currentStep:c,nextStep:z,prevStep:A,finish:w,isFirstStep:S,isLastStep:o}=B(),[r,g]=W(null),[y,m]=W({top:0,left:0}),[I,H]=W({x:0,y:0}),L=j(!1),E=j({x:0,y:0}),f=j(null),[$,T]=W(c);c!==$&&(T(c),H({x:0,y:0}));let x=D(t=>{if(!L.current)return;let l=t.clientX-E.current.x,p=t.clientY-E.current.y;H({x:l,y:p})},[]),k=D(()=>{L.current=!1,f.current&&(f.current.style.transition="top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)",f.current.style.cursor=a.metadata.draggable?"grab":"auto"),window.removeEventListener("pointermove",x),window.removeEventListener("pointerup",k)},[a.metadata.draggable,x]),e=t=>{a.metadata.draggable&&(t.stopPropagation(),t.preventDefault(),L.current=!0,E.current={x:t.clientX-I.x,y:t.clientY-I.y},f.current&&(f.current.style.transition="none",f.current.style.cursor="grabbing"),window.addEventListener("pointermove",x),window.addEventListener("pointerup",k))},s=D(t=>{let R=t.top,b=window.innerHeight-t.bottom,Q=t.left,V=window.innerWidth-t.right,M=0,P=0;return b>232?(M=t.bottom+12,P=Math.max(20,Math.min(window.innerWidth-300-20,t.left+t.width/2-300/2))):R>232?(M=t.top-200-12,P=Math.max(20,Math.min(window.innerWidth-300-20,t.left+t.width/2-300/2))):V>332?(M=Math.max(20,Math.min(window.innerHeight-200-20,t.top+t.height/2-200/2)),P=t.right+12):Q>332?(M=Math.max(20,Math.min(window.innerHeight-200-20,t.top+t.height/2-200/2)),P=t.left-300-12):(M=window.innerHeight/2-200/2,P=window.innerWidth/2-300/2),{top:M+window.scrollY,left:P+window.scrollX}},[]),i=D(()=>{if(!c)return;let t=document.querySelector(`[data-onboarding-id="${c.attribute}"]`);if(t){let l=t.getBoundingClientRect(),p=a.style?.padding||0,O={top:l.top-p,bottom:l.bottom+p,left:l.left-p,right:l.right+p,width:l.width+p*2,height:l.height+p*2},C={top:O.top+window.scrollY,left:O.left+window.scrollX,width:O.width,height:O.height},R=s(O);g(b=>b&&b.top===C.top&&b.left===C.left&&b.width===C.width&&b.height===C.height?b:C),m(b=>b.top===R.top&&b.left===R.left?b:R)}else g(null)},[c,s,a.style]);if(Z(()=>{i(),window.addEventListener("resize",i),window.addEventListener("scroll",i);let t=new MutationObserver(i);t.observe(document.body,{childList:!0,subtree:!0,attributes:!0});let l=null;if(typeof ResizeObserver<"u"){l=new ResizeObserver(i),l.observe(document.body);let p=c?.attribute?document.querySelector(`[data-onboarding-id="${c.attribute}"]`):null;p&&l.observe(p)}return()=>{window.removeEventListener("resize",i),window.removeEventListener("scroll",i),window.removeEventListener("pointermove",x),window.removeEventListener("pointerup",k),t.disconnect(),l&&l.disconnect()}},[i,c?.attribute,x,k]),!c||!r)return null;let d={...a.style?.background,transition:"all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)"},n=t=>{t.stopPropagation()},h=v("div",{className:"onboard-overlay-container",children:[u("div",{style:{height:r.top,...d},className:"onboard-overlay-mask onboard-mask-top",onPointerDown:n,onMouseDown:n,onClick:n}),u("div",{style:{top:r.top+r.height,height:`calc(100vh - ${r.top+r.height}px)`,...d},className:"onboard-overlay-mask onboard-mask-bottom",onPointerDown:n,onMouseDown:n,onClick:n}),u("div",{style:{top:r.top,height:r.height,width:r.left,...d},className:"onboard-overlay-mask onboard-mask-left",onPointerDown:n,onMouseDown:n,onClick:n}),u("div",{style:{top:r.top,height:r.height,left:r.left+r.width,width:`calc(100% - ${r.left+r.width}px)`,...d},className:"onboard-overlay-mask",onPointerDown:n,onMouseDown:n,onClick:n}),v("div",{ref:f,className:"onboard-tooltip",onPointerDown:e,style:{zIndex:1e6,...a.style?.container,top:y.top+I.y,left:y.left+I.x,transition:"top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)",cursor:a.metadata.draggable?"grab":"auto",touchAction:"none"},onMouseDown:n,onClick:n,children:[v("div",{className:"onboard-tooltip-header",children:[u("h3",{className:"onboard-tooltip-title",children:c.title}),u("button",{onClick:t=>{t.stopPropagation(),w()},className:"onboard-close-button",children:u(ot,{})})]}),u("p",{className:"onboard-tooltip-description",children:c.description}),v("div",{className:"onboard-tooltip-footer",children:[v("button",{onClick:t=>{t.stopPropagation(),A()},disabled:S,className:"onboard-button-ghost",style:{background:"none",border:"none",cursor:S?"not-allowed":"pointer",...a.style?.prev},children:[u(et,{}),"Prev"]}),o?u("button",{onClick:t=>{t.stopPropagation(),w()},className:"onboard-button-primary",style:{border:"none",cursor:"pointer",...a.style?.finish},children:"Finish"}):v("button",{onClick:t=>{t.stopPropagation(),z()},className:"onboard-button-primary",style:{border:"none",cursor:"pointer",...S?a.style?.start:{},...S?{}:a.style?.next},children:[S&&a.style?.start?"Start":"Next",!(S&&a.style?.start)&&u(nt,{})]})]})]})]});return typeof document<"u"?tt(h,document.body):null};import{Fragment as st,jsx as K,jsxs as at}from"react/jsx-runtime";var G=rt(void 0),_="onboarding_state",vt=({config:a,ssr:c=!1,onNavigate:z,children:A})=>{let[w,S]=Y(!c),[o,r]=Y({currentStepIndex:0,currentSubStepIndex:null,isActive:!0}),g=J(a),y=J(z);g.current=a,y.current=z;let m=N(e=>{e&&(y.current?y.current(e):window.location.href=e)},[]),I=(e,s)=>{if(e.urlMatch instanceof RegExp)return e.urlMatch.test(s);if(typeof e.urlMatch=="string"&&e.urlMatch.includes("*")){let i=e.urlMatch.replace(/[.+?^${}()|[\\]/g,"\\$&").replace(/\*/g,".*");return new RegExp(`^${i}$`).test(s)}return s===e.urlMatch};X(()=>{c&&S(!0);let e=g.current,s=window.location.pathname,i=-1;e.metadata.inOrder===!1&&(i=e.steps.findIndex(n=>I(n,s)));let d=U.get(_);if(d)try{let n=JSON.parse(d);if(e.metadata.inOrder===!1)i!==-1?n.currentStepIndex===i?r(n):r({currentStepIndex:i,currentSubStepIndex:null,isActive:!0}):r({...n,isActive:!1});else if(r(n),e.metadata.inOrder!==!1){let h=e.steps[n.currentStepIndex];if(h&&n.isActive){let t;if(n.currentStepIndex>0){let l=e.steps[n.currentStepIndex-1];l.navigate&&(t=l.navigate)}!t&&typeof h.urlMatch=="string"&&(t=h.urlMatch),t&&window.location.pathname!==t&&m(t),e.metadata.simulateClicksOnNavigate&&n.currentSubStepIndex!==null&&h.click&&setTimeout(()=>{let l=document.querySelector(`[data-onboarding-id="${h.attribute}"]`);l&&l.click()},500)}}}catch(n){console.error("Failed to parse onboarding state from cookie",n),i!==-1&&r({currentStepIndex:i,currentSubStepIndex:null,isActive:!0})}else if(i!==-1)r({currentStepIndex:i,currentSubStepIndex:null,isActive:!0});else if(e.metadata.inOrder===!1)r(n=>({...n,isActive:!1}));else{let n=e.steps[0];n&&typeof n.urlMatch=="string"&&window.location.pathname!==n.urlMatch&&m(n.urlMatch)}},[c,m]),X(()=>{w&&U.set(_,JSON.stringify(o),{expires:365})},[o,w]);let H=q(()=>{let e=a.steps[o.currentStepIndex];return e?o.currentSubStepIndex!==null&&e.subSteps&&e.subSteps[o.currentSubStepIndex]||e:null},[a.steps,o.currentStepIndex,o.currentSubStepIndex]),L=o.currentStepIndex===0&&o.currentSubStepIndex===null,E=q(()=>{let e=a.steps.length,s=o.currentStepIndex===e-1,i=a.steps[o.currentStepIndex],d=i?.subSteps&&i.subSteps.length>0;return s?d?o.currentSubStepIndex===i.subSteps.length-1:!0:!1},[a.steps,o.currentStepIndex,o.currentSubStepIndex]),f=N(()=>{let e=g.current,s=e.steps[o.currentStepIndex],i=o.currentSubStepIndex!==null&&s.subSteps?s.subSteps[o.currentSubStepIndex]:s;if(i.click){let d=document.querySelector(`[data-onboarding-id="${i.attribute}"]`);d&&d.click()}if(s.subSteps&&(o.currentSubStepIndex===null||o.currentSubStepIndex<s.subSteps.length-1)){let d=o.currentSubStepIndex===null?0:o.currentSubStepIndex+1,n=s.subSteps[d];r(h=>({...h,currentSubStepIndex:d})),n.navigate&&m(n.navigate);return}if(o.currentStepIndex<e.steps.length-1){let d=o.currentStepIndex+1,n=e.steps[d];r({currentStepIndex:d,currentSubStepIndex:null,isActive:!0}),n.navigate&&m(n.navigate)}else r(d=>({...d,isActive:!1})),e.onOnboardingComplete&&e.onOnboardingComplete()},[o.currentStepIndex,o.currentSubStepIndex,m]),$=N(()=>{let e=g.current;if(o.currentSubStepIndex!==null&&o.currentSubStepIndex>0){r(s=>({...s,currentSubStepIndex:s.currentSubStepIndex-1}));return}if(o.currentStepIndex>0&&o.currentSubStepIndex===0){r(s=>({...s,currentSubStepIndex:null}));return}if(o.currentStepIndex>0){let s=o.currentStepIndex-1,i=e.steps[s],d=i.subSteps?i.subSteps.length-1:null;r({currentStepIndex:s,currentSubStepIndex:d,isActive:!0})}},[o.currentStepIndex,o.currentSubStepIndex]),T=N(()=>{r(e=>({...e,isActive:!1})),g.current.onOnboardingComplete&&g.current.onOnboardingComplete()},[]),x=N((e,s=null)=>{r({currentStepIndex:e,currentSubStepIndex:s,isActive:!0})},[]),k={config:a,state:o,nextStep:f,prevStep:$,finish:T,goToStep:x,currentStep:H,isFirstStep:L,isLastStep:E};return w?at(G.Provider,{value:k,children:[A,o.isActive&&K(F,{})]}):K(st,{children:A})},B=()=>{let a=it(G);if(a===void 0)throw new Error("useOnboarding must be used within an OnboardingProvider");return a};export{vt as OnboardingProvider,B as useOnboarding};
3
3
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/OnboardingProvider.tsx","../src/components/OnboardingOverlay.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n createContext,\n useContext,\n useEffect,\n useState,\n useCallback,\n useMemo,\n useEffectEvent,\n} from 'react';\nimport Cookies from 'js-cookie';\nimport { OnboardingConfig, OnboardingState, OnboardingStep, OnboardingSubStep } from '../types';\nimport { OnboardingOverlay } from './OnboardingOverlay';\n\ninterface OnboardingContextType {\n config: OnboardingConfig;\n state: OnboardingState;\n nextStep: () => void;\n prevStep: () => void;\n finish: () => void;\n goToStep: (stepIndex: number, subStepIndex?: number | null) => void;\n currentStep: OnboardingStep | OnboardingSubStep | null;\n isFirstStep: boolean;\n isLastStep: boolean;\n}\n\nconst OnboardingContext = createContext<OnboardingContextType | undefined>(undefined);\n\nconst COOKIE_NAME = 'onboarding_state';\n\nexport const OnboardingProvider: React.FC<{\n config: OnboardingConfig;\n ssr?: boolean;\n onNavigate?: (url: string) => void;\n children: React.ReactNode;\n}> = ({ config, ssr = false, onNavigate, children }) => {\n const [isMounted, setIsMounted] = useState(!ssr);\n const [state, setState] = useState<OnboardingState>({\n currentStepIndex: 0,\n currentSubStepIndex: null,\n isActive: true,\n });\n\n const configRef = React.useRef(config);\n useEffect(() => {\n configRef.current = config;\n }, [config]);\n\n const onNavigateRef = React.useRef(onNavigate);\n useEffect(() => {\n onNavigateRef.current = onNavigate;\n }, [onNavigate]);\n\n const handleNavigation = useCallback(\n (link?: string) => {\n if (!link) return;\n\n if (onNavigateRef.current) {\n onNavigateRef.current(link);\n } else if (config.metadata.nextRouter) {\n window.location.href = link;\n } else {\n window.location.href = link;\n }\n },\n [config.metadata.nextRouter],\n );\n\n useEffect(() => {\n if (ssr) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setIsMounted(true);\n }\n }, [ssr]);\n\n const isMatch = (step: OnboardingStep, path: string) => {\n if (step.urlMatch instanceof RegExp) return step.urlMatch.test(path);\n\n if (typeof step.urlMatch === 'string' && step.urlMatch.includes('*')) {\n const pattern = step.urlMatch.replace(/[.+?^${}()|[\\\\]/g, '\\\\$&').replace(/\\*/g, '.*');\n return new RegExp(`^${pattern}$`).test(path);\n }\n\n return path === step.urlMatch;\n };\n\n const onRestoreState = useEffectEvent(() => {\n const currentConfig = configRef.current;\n const currentPath = window.location.pathname;\n let matchedStepIndex = -1;\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n matchedStepIndex = currentConfig.steps.findIndex((step) => isMatch(step, currentPath));\n }\n\n const savedState = Cookies.get(COOKIE_NAME);\n if (savedState) {\n try {\n const parsed: OnboardingState = JSON.parse(savedState);\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n if (matchedStepIndex !== -1) {\n if (parsed.currentStepIndex === matchedStepIndex) {\n setState(parsed);\n } else {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n }\n } else {\n setState({ ...parsed, isActive: false });\n }\n } else {\n setState(parsed);\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) !== false) {\n const step = currentConfig.steps[parsed.currentStepIndex];\n if (step && parsed.isActive) {\n let targetUrl: string | undefined;\n\n if (parsed.currentStepIndex > 0) {\n const prevStep = currentConfig.steps[parsed.currentStepIndex - 1];\n if (prevStep.navigate) {\n targetUrl = prevStep.navigate;\n }\n }\n\n if (!targetUrl && typeof step.urlMatch === 'string') {\n targetUrl = step.urlMatch;\n }\n\n if (targetUrl && window.location.pathname !== targetUrl) {\n handleNavigation(targetUrl);\n }\n\n if (currentConfig.metadata.simulateClicksOnNavigate) {\n if (parsed.currentSubStepIndex !== null && step.click) {\n setTimeout(() => {\n const element = document.querySelector(\n `[data-onboarding-id=\"${step.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n element.click();\n }\n }, 500);\n }\n }\n }\n }\n }\n } catch (e) {\n console.error('Failed to parse onboarding state from cookie', e);\n if (matchedStepIndex !== -1) {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n }\n }\n } else if (matchedStepIndex !== -1) {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n } else if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n setState((prev) => ({ ...prev, isActive: false }));\n } else {\n const step = currentConfig.steps[0];\n if (step && typeof step.urlMatch === 'string' && window.location.pathname !== step.urlMatch) {\n handleNavigation(step.urlMatch);\n }\n }\n });\n\n useEffect(() => {\n onRestoreState();\n }, []);\n\n useEffect(() => {\n if (isMounted) {\n Cookies.set(COOKIE_NAME, JSON.stringify(state), { expires: 365 });\n }\n }, [state, isMounted]);\n\n const currentStep = useMemo(() => {\n const step = config.steps[state.currentStepIndex];\n if (!step) return null;\n if (state.currentSubStepIndex !== null && step.subSteps) {\n return step.subSteps[state.currentSubStepIndex] || step;\n }\n return step;\n }, [config.steps, state.currentStepIndex, state.currentSubStepIndex]);\n\n const isFirstStep = state.currentStepIndex === 0 && state.currentSubStepIndex === null;\n const isLastStep = useMemo(() => {\n const totalSteps = config.steps.length;\n const isLastMainStep = state.currentStepIndex === totalSteps - 1;\n const step = config.steps[state.currentStepIndex];\n const hasSubSteps = step?.subSteps && step.subSteps.length > 0;\n\n if (isLastMainStep) {\n if (hasSubSteps) {\n return state.currentSubStepIndex === step.subSteps!.length - 1;\n }\n return true;\n }\n return false;\n }, [config.steps, state.currentStepIndex, state.currentSubStepIndex]);\n\n const nextStep = useCallback(() => {\n const currentConfig = configRef.current;\n const stepObj = currentConfig.steps[state.currentStepIndex];\n const currentActiveStep =\n state.currentSubStepIndex !== null && stepObj.subSteps\n ? stepObj.subSteps[state.currentSubStepIndex]\n : stepObj;\n\n if (currentActiveStep.click) {\n const element = document.querySelector(\n `[data-onboarding-id=\"${currentActiveStep.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n element.click();\n }\n }\n\n if (\n stepObj.subSteps &&\n (state.currentSubStepIndex === null ||\n state.currentSubStepIndex < stepObj.subSteps.length - 1)\n ) {\n const nextSubIndex = state.currentSubStepIndex === null ? 0 : state.currentSubStepIndex + 1;\n const nextSubStep = stepObj.subSteps[nextSubIndex];\n setState((prev) => ({ ...prev, currentSubStepIndex: nextSubIndex }));\n\n if (nextSubStep.navigate) handleNavigation(nextSubStep.navigate);\n return;\n }\n\n if (state.currentStepIndex < currentConfig.steps.length - 1) {\n const nextIndex = state.currentStepIndex + 1;\n const nextStepObj = currentConfig.steps[nextIndex];\n setState({\n currentStepIndex: nextIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n\n if (nextStepObj.navigate) handleNavigation(nextStepObj.navigate);\n } else {\n setState((prev) => ({ ...prev, isActive: false }));\n if (currentConfig.onOnboardingComplete) {\n currentConfig.onOnboardingComplete();\n }\n }\n }, [state.currentStepIndex, state.currentSubStepIndex, handleNavigation]);\n\n const prevStep = useCallback(() => {\n const currentConfig = configRef.current;\n\n if (state.currentSubStepIndex !== null && state.currentSubStepIndex > 0) {\n setState((prev) => ({ ...prev, currentSubStepIndex: prev.currentSubStepIndex! - 1 }));\n return;\n }\n\n if (state.currentStepIndex > 0 && state.currentSubStepIndex === 0) {\n setState((prev) => ({ ...prev, currentSubStepIndex: null }));\n return;\n }\n\n if (state.currentStepIndex > 0) {\n const prevIndex = state.currentStepIndex - 1;\n const prevStepObj = currentConfig.steps[prevIndex];\n const prevSubStepIndex = prevStepObj.subSteps ? prevStepObj.subSteps.length - 1 : null;\n\n setState({\n currentStepIndex: prevIndex,\n currentSubStepIndex: prevSubStepIndex,\n isActive: true,\n });\n }\n }, [state.currentStepIndex, state.currentSubStepIndex]);\n\n const finish = useCallback(() => {\n setState((prev) => ({ ...prev, isActive: false }));\n if (configRef.current.onOnboardingComplete) {\n configRef.current.onOnboardingComplete();\n }\n }, []);\n\n const goToStep = useCallback((stepIndex: number, subStepIndex: number | null = null) => {\n setState({\n currentStepIndex: stepIndex,\n currentSubStepIndex: subStepIndex,\n isActive: true,\n });\n }, []);\n\n const value = {\n config,\n state,\n nextStep,\n prevStep,\n finish,\n goToStep,\n currentStep,\n isFirstStep,\n isLastStep,\n };\n\n if (!isMounted) return <>{children}</>;\n\n return (\n <OnboardingContext.Provider value={value}>\n {children}\n {state.isActive && <OnboardingOverlay />}\n </OnboardingContext.Provider>\n );\n};\n\nexport const useOnboarding = () => {\n const context = useContext(OnboardingContext);\n if (context === undefined) {\n throw new Error('useOnboarding must be used within an OnboardingProvider');\n }\n return context;\n};\n","'use client';\n\nimport React, { useState, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useOnboarding } from './OnboardingProvider';\n\nexport const OnboardingOverlay: React.FC = () => {\n const { config, currentStep, nextStep, prevStep, finish, isFirstStep, isLastStep } =\n useOnboarding();\n const [coords, setCoords] = useState<{\n top: number;\n left: number;\n width: number;\n height: number;\n } | null>(null);\n const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });\n const [dragOffset, setDragOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });\n const isDragging = useRef(false);\n const dragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n const tooltipRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setDragOffset({ x: 0, y: 0 });\n }, [currentStep]);\n\n const handlePointerMove = useCallback((e: PointerEvent) => {\n if (!isDragging.current) return;\n\n const newX = e.clientX - dragStart.current.x;\n const newY = e.clientY - dragStart.current.y;\n\n setDragOffset({ x: newX, y: newY });\n }, []);\n\n const handlePointerUp = useCallback(() => {\n isDragging.current = false;\n\n if (tooltipRef.current) {\n tooltipRef.current.style.transition =\n 'top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)';\n tooltipRef.current.style.cursor = config.metadata.draggable ? 'grab' : 'auto';\n }\n\n window.removeEventListener('pointermove', handlePointerMove);\n // eslint-disable-next-line react-hooks/immutability\n window.removeEventListener('pointerup', handlePointerUp);\n }, [config.metadata.draggable, handlePointerMove]);\n\n const handlePointerDown = (e: React.PointerEvent) => {\n if (!config.metadata.draggable) return;\n e.stopPropagation();\n e.preventDefault();\n isDragging.current = true;\n dragStart.current = { x: e.clientX - dragOffset.x, y: e.clientY - dragOffset.y };\n\n if (tooltipRef.current) {\n tooltipRef.current.style.transition = 'none';\n tooltipRef.current.style.cursor = 'grabbing';\n }\n\n window.addEventListener('pointermove', handlePointerMove);\n window.addEventListener('pointerup', handlePointerUp);\n };\n\n useEffect(() => {\n return () => {\n window.removeEventListener('pointermove', handlePointerMove);\n window.removeEventListener('pointerup', handlePointerUp);\n };\n }, [handlePointerMove, handlePointerUp]);\n\n const calculateBestPosition = useCallback(\n (rect: {\n top: number;\n bottom: number;\n left: number;\n right: number;\n width: number;\n height: number;\n }) => {\n const tooltipWidth = 300;\n const tooltipHeight = 200;\n const gap = 12;\n const padding = 20;\n\n const spaceAbove = rect.top;\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceLeft = rect.left;\n const spaceRight = window.innerWidth - rect.right;\n\n let top = 0;\n let left = 0;\n\n if (spaceBelow > tooltipHeight + gap + padding) {\n top = rect.bottom + gap;\n left = Math.max(\n padding,\n Math.min(\n window.innerWidth - tooltipWidth - padding,\n rect.left + rect.width / 2 - tooltipWidth / 2,\n ),\n );\n } else if (spaceAbove > tooltipHeight + gap + padding) {\n top = rect.top - tooltipHeight - gap;\n left = Math.max(\n padding,\n Math.min(\n window.innerWidth - tooltipWidth - padding,\n rect.left + rect.width / 2 - tooltipWidth / 2,\n ),\n );\n } else if (spaceRight > tooltipWidth + gap + padding) {\n top = Math.max(\n padding,\n Math.min(\n window.innerHeight - tooltipHeight - padding,\n rect.top + rect.height / 2 - tooltipHeight / 2,\n ),\n );\n left = rect.right + gap;\n } else if (spaceLeft > tooltipWidth + gap + padding) {\n top = Math.max(\n padding,\n Math.min(\n window.innerHeight - tooltipHeight - padding,\n rect.top + rect.height / 2 - tooltipHeight / 2,\n ),\n );\n left = rect.left - tooltipWidth - gap;\n } else {\n top = window.innerHeight / 2 - tooltipHeight / 2;\n left = window.innerWidth / 2 - tooltipWidth / 2;\n }\n\n return { top: top + window.scrollY, left: left + window.scrollX };\n },\n [],\n );\n\n const updateCoords = useCallback(() => {\n if (!currentStep) return;\n\n const element = document.querySelector(\n `[data-onboarding-id=\"${currentStep.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n const rect = element.getBoundingClientRect();\n const padding = config.style?.padding || 0;\n\n const paddedRect = {\n top: rect.top - padding,\n bottom: rect.bottom + padding,\n left: rect.left - padding,\n right: rect.right + padding,\n width: rect.width + padding * 2,\n height: rect.height + padding * 2,\n };\n\n const newCoords = {\n top: paddedRect.top + window.scrollY,\n left: paddedRect.left + window.scrollX,\n width: paddedRect.width,\n height: paddedRect.height,\n };\n\n const newPosition = calculateBestPosition(paddedRect);\n\n setCoords((prev) => {\n if (\n prev &&\n prev.top === newCoords.top &&\n prev.left === newCoords.left &&\n prev.width === newCoords.width &&\n prev.height === newCoords.height\n ) {\n return prev;\n }\n return newCoords;\n });\n\n setPosition((prev) => {\n if (prev.top === newPosition.top && prev.left === newPosition.left) {\n return prev;\n }\n return newPosition;\n });\n } else {\n setCoords(null);\n }\n }, [currentStep, calculateBestPosition, config.style]);\n\n useEffect(() => {\n updateCoords();\n window.addEventListener('resize', updateCoords);\n window.addEventListener('scroll', updateCoords);\n\n const observer = new MutationObserver(updateCoords);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true });\n\n let resizeObserver: ResizeObserver | null = null;\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(updateCoords);\n resizeObserver.observe(document.body);\n\n const element = currentStep?.attribute\n ? document.querySelector(`[data-onboarding-id=\"${currentStep.attribute}\"]`)\n : null;\n if (element) {\n resizeObserver.observe(element);\n }\n }\n\n return () => {\n window.removeEventListener('resize', updateCoords);\n window.removeEventListener('scroll', updateCoords);\n observer.disconnect();\n if (resizeObserver) resizeObserver.disconnect();\n };\n }, [updateCoords, currentStep?.attribute]);\n\n if (!currentStep || !coords) return null;\n\n const maskStyle = {\n ...config.style?.background,\n transition: 'all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',\n };\n\n const stopPropagation = (e: React.PointerEvent | React.MouseEvent) => {\n e.stopPropagation();\n };\n\n const ChevronLeftIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M15 18l-6-6 6-6\" />\n </svg>\n );\n\n const ChevronRightIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M9 18l6-6-6-6\" />\n </svg>\n );\n\n const XIcon = () => (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n );\n\n const overlayContent = (\n <div className=\"onboard-overlay-container\">\n <div\n style={{ height: coords.top, ...maskStyle }}\n className=\"onboard-overlay-mask onboard-mask-top\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{\n top: coords.top + coords.height,\n height: `calc(100vh - ${coords.top + coords.height}px)`,\n ...maskStyle,\n }}\n className=\"onboard-overlay-mask onboard-mask-bottom\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{ top: coords.top, height: coords.height, width: coords.left, ...maskStyle }}\n className=\"onboard-overlay-mask onboard-mask-left\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{\n top: coords.top,\n height: coords.height,\n left: coords.left + coords.width,\n width: `calc(100% - ${coords.left + coords.width}px)`,\n ...maskStyle,\n }}\n className=\"onboard-overlay-mask\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n\n <div\n ref={tooltipRef}\n className=\"onboard-tooltip\"\n onPointerDown={handlePointerDown}\n style={{\n zIndex: 1000000,\n ...config.style?.container,\n top: position.top + dragOffset.y,\n left: position.left + dragOffset.x,\n transition:\n 'top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',\n cursor: config.metadata.draggable ? 'grab' : 'auto',\n touchAction: 'none',\n }}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n >\n <div className=\"onboard-tooltip-header\">\n <h3 className=\"onboard-tooltip-title\">{currentStep.title}</h3>\n <button\n onClick={(e) => {\n e.stopPropagation();\n finish();\n }}\n className=\"onboard-close-button\"\n >\n <XIcon />\n </button>\n </div>\n <p className=\"onboard-tooltip-description\">{currentStep.description}</p>\n\n <div className=\"onboard-tooltip-footer\">\n <button\n onClick={(e) => {\n e.stopPropagation();\n prevStep();\n }}\n disabled={isFirstStep}\n className=\"onboard-button-ghost\"\n style={{\n background: 'none',\n border: 'none',\n cursor: isFirstStep ? 'not-allowed' : 'pointer',\n ...config.style?.prev,\n }}\n >\n <ChevronLeftIcon />\n Prev\n </button>\n\n {isLastStep ? (\n <button\n onClick={(e) => {\n e.stopPropagation();\n finish();\n }}\n className=\"onboard-button-primary\"\n style={{ border: 'none', cursor: 'pointer', ...config.style?.finish }}\n >\n Finish\n </button>\n ) : (\n <button\n onClick={(e) => {\n e.stopPropagation();\n nextStep();\n }}\n className=\"onboard-button-primary\"\n style={{\n border: 'none',\n cursor: 'pointer',\n ...(isFirstStep ? config.style?.start : {}),\n ...(!isFirstStep ? config.style?.next : {}),\n }}\n >\n {isFirstStep && config.style?.start ? 'Start' : 'Next'}\n {!(isFirstStep && config.style?.start) && <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n </div>\n );\n\n return typeof document !== 'undefined' ? createPortal(overlayContent, document.body) : null;\n};\n"],"mappings":"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","names":["React","createContext","useContext","useEffect","useState","useCallback","useMemo","useEffectEvent","Cookies","useState","useEffect","useCallback","useRef","createPortal","jsx","jsxs","OnboardingOverlay","config","currentStep","nextStep","prevStep","finish","isFirstStep","isLastStep","useOnboarding","coords","setCoords","useState","position","setPosition","dragOffset","setDragOffset","isDragging","useRef","dragStart","tooltipRef","useEffect","handlePointerMove","useCallback","e","newX","newY","handlePointerUp","handlePointerDown","calculateBestPosition","rect","spaceAbove","spaceBelow","spaceLeft","spaceRight","top","left","updateCoords","element","padding","paddedRect","newCoords","newPosition","prev","observer","resizeObserver","maskStyle","stopPropagation","ChevronLeftIcon","ChevronRightIcon","XIcon","overlayContent","createPortal","Fragment","jsx","jsxs","OnboardingContext","createContext","COOKIE_NAME","OnboardingProvider","config","ssr","onNavigate","children","isMounted","setIsMounted","useState","state","setState","configRef","React","useEffect","onNavigateRef","handleNavigation","useCallback","link","isMatch","step","path","pattern","onRestoreState","useEffectEvent","currentConfig","currentPath","matchedStepIndex","savedState","Cookies","parsed","targetUrl","prevStep","element","e","prev","currentStep","useMemo","isFirstStep","isLastStep","totalSteps","isLastMainStep","hasSubSteps","nextStep","stepObj","currentActiveStep","nextSubIndex","nextSubStep","nextIndex","nextStepObj","prevIndex","prevStepObj","prevSubStepIndex","finish","goToStep","stepIndex","subStepIndex","value","OnboardingOverlay","useOnboarding","context","useContext"]}
1
+ {"version":3,"sources":["../src/components/OnboardingProvider.tsx","../src/components/OnboardingOverlay.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n createContext,\n useContext,\n useEffect,\n useState,\n useCallback,\n useMemo,\n useRef,\n} from 'react';\nimport Cookies from 'js-cookie';\nimport { OnboardingConfig, OnboardingState, OnboardingStep, OnboardingSubStep } from '../types';\nimport { OnboardingOverlay } from './OnboardingOverlay';\n\ninterface OnboardingContextType {\n config: OnboardingConfig;\n state: OnboardingState;\n nextStep: () => void;\n prevStep: () => void;\n finish: () => void;\n goToStep: (stepIndex: number, subStepIndex?: number | null) => void;\n currentStep: OnboardingStep | OnboardingSubStep | null;\n isFirstStep: boolean;\n isLastStep: boolean;\n}\n\nconst OnboardingContext = createContext<OnboardingContextType | undefined>(undefined);\n\nconst COOKIE_NAME = 'onboarding_state';\n\nexport const OnboardingProvider: React.FC<{\n config: OnboardingConfig;\n ssr?: boolean;\n onNavigate?: (url: string) => void;\n children: React.ReactNode;\n}> = ({ config, ssr = false, onNavigate, children }) => {\n const [isMounted, setIsMounted] = useState(!ssr);\n const [state, setState] = useState<OnboardingState>({\n currentStepIndex: 0,\n currentSubStepIndex: null,\n isActive: true,\n });\n\n const configRef = useRef(config);\n const onNavigateRef = useRef(onNavigate);\n\n configRef.current = config;\n onNavigateRef.current = onNavigate;\n\n const handleNavigation = useCallback((link?: string) => {\n if (!link) return;\n\n if (onNavigateRef.current) {\n onNavigateRef.current(link);\n } else {\n window.location.href = link;\n }\n }, []);\n\n const isMatch = (step: OnboardingStep, path: string) => {\n if (step.urlMatch instanceof RegExp) return step.urlMatch.test(path);\n\n if (typeof step.urlMatch === 'string' && step.urlMatch.includes('*')) {\n const pattern = step.urlMatch.replace(/[.+?^${}()|[\\\\]/g, '\\\\$&').replace(/\\*/g, '.*');\n return new RegExp(`^${pattern}$`).test(path);\n }\n\n return path === step.urlMatch;\n };\n\n useEffect(() => {\n if (ssr) {\n setIsMounted(true);\n }\n\n const currentConfig = configRef.current;\n const currentPath = window.location.pathname;\n let matchedStepIndex = -1;\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n matchedStepIndex = currentConfig.steps.findIndex((step) => isMatch(step, currentPath));\n }\n\n const savedState = Cookies.get(COOKIE_NAME);\n if (savedState) {\n try {\n const parsed: OnboardingState = JSON.parse(savedState);\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n if (matchedStepIndex !== -1) {\n if (parsed.currentStepIndex === matchedStepIndex) {\n setState(parsed);\n } else {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n }\n } else {\n setState({ ...parsed, isActive: false });\n }\n } else {\n setState(parsed);\n\n if ((currentConfig.metadata.inOrder as boolean | undefined) !== false) {\n const step = currentConfig.steps[parsed.currentStepIndex];\n if (step && parsed.isActive) {\n let targetUrl: string | undefined;\n\n if (parsed.currentStepIndex > 0) {\n const prevStep = currentConfig.steps[parsed.currentStepIndex - 1];\n if (prevStep.navigate) {\n targetUrl = prevStep.navigate;\n }\n }\n\n if (!targetUrl && typeof step.urlMatch === 'string') {\n targetUrl = step.urlMatch;\n }\n\n if (targetUrl && window.location.pathname !== targetUrl) {\n handleNavigation(targetUrl);\n }\n\n if (currentConfig.metadata.simulateClicksOnNavigate) {\n if (parsed.currentSubStepIndex !== null && step.click) {\n setTimeout(() => {\n const element = document.querySelector(\n `[data-onboarding-id=\"${step.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n element.click();\n }\n }, 500);\n }\n }\n }\n }\n }\n } catch (e) {\n console.error('Failed to parse onboarding state from cookie', e);\n if (matchedStepIndex !== -1) {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n }\n }\n } else if (matchedStepIndex !== -1) {\n setState({\n currentStepIndex: matchedStepIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n } else if ((currentConfig.metadata.inOrder as boolean | undefined) === false) {\n setState((prev) => ({ ...prev, isActive: false }));\n } else {\n const step = currentConfig.steps[0];\n if (step && typeof step.urlMatch === 'string' && window.location.pathname !== step.urlMatch) {\n handleNavigation(step.urlMatch);\n }\n }\n }, [ssr, handleNavigation]);\n\n useEffect(() => {\n if (isMounted) {\n Cookies.set(COOKIE_NAME, JSON.stringify(state), { expires: 365 });\n }\n }, [state, isMounted]);\n\n const currentStep = useMemo(() => {\n const step = config.steps[state.currentStepIndex];\n if (!step) return null;\n if (state.currentSubStepIndex !== null && step.subSteps) {\n return step.subSteps[state.currentSubStepIndex] || step;\n }\n return step;\n }, [config.steps, state.currentStepIndex, state.currentSubStepIndex]);\n\n const isFirstStep = state.currentStepIndex === 0 && state.currentSubStepIndex === null;\n const isLastStep = useMemo(() => {\n const totalSteps = config.steps.length;\n const isLastMainStep = state.currentStepIndex === totalSteps - 1;\n const step = config.steps[state.currentStepIndex];\n const hasSubSteps = step?.subSteps && step.subSteps.length > 0;\n\n if (isLastMainStep) {\n if (hasSubSteps) {\n return state.currentSubStepIndex === step.subSteps!.length - 1;\n }\n return true;\n }\n return false;\n }, [config.steps, state.currentStepIndex, state.currentSubStepIndex]);\n\n const nextStep = useCallback(() => {\n const currentConfig = configRef.current;\n const stepObj = currentConfig.steps[state.currentStepIndex];\n const currentActiveStep =\n state.currentSubStepIndex !== null && stepObj.subSteps\n ? stepObj.subSteps[state.currentSubStepIndex]\n : stepObj;\n\n if (currentActiveStep.click) {\n const element = document.querySelector(\n `[data-onboarding-id=\"${currentActiveStep.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n element.click();\n }\n }\n\n if (\n stepObj.subSteps &&\n (state.currentSubStepIndex === null ||\n state.currentSubStepIndex < stepObj.subSteps.length - 1)\n ) {\n const nextSubIndex = state.currentSubStepIndex === null ? 0 : state.currentSubStepIndex + 1;\n const nextSubStep = stepObj.subSteps[nextSubIndex];\n setState((prev) => ({ ...prev, currentSubStepIndex: nextSubIndex }));\n\n if (nextSubStep.navigate) handleNavigation(nextSubStep.navigate);\n return;\n }\n\n if (state.currentStepIndex < currentConfig.steps.length - 1) {\n const nextIndex = state.currentStepIndex + 1;\n const nextStepObj = currentConfig.steps[nextIndex];\n setState({\n currentStepIndex: nextIndex,\n currentSubStepIndex: null,\n isActive: true,\n });\n\n if (nextStepObj.navigate) handleNavigation(nextStepObj.navigate);\n } else {\n setState((prev) => ({ ...prev, isActive: false }));\n if (currentConfig.onOnboardingComplete) {\n currentConfig.onOnboardingComplete();\n }\n }\n }, [state.currentStepIndex, state.currentSubStepIndex, handleNavigation]);\n\n const prevStep = useCallback(() => {\n const currentConfig = configRef.current;\n\n if (state.currentSubStepIndex !== null && state.currentSubStepIndex > 0) {\n setState((prev) => ({ ...prev, currentSubStepIndex: prev.currentSubStepIndex! - 1 }));\n return;\n }\n\n if (state.currentStepIndex > 0 && state.currentSubStepIndex === 0) {\n setState((prev) => ({ ...prev, currentSubStepIndex: null }));\n return;\n }\n\n if (state.currentStepIndex > 0) {\n const prevIndex = state.currentStepIndex - 1;\n const prevStepObj = currentConfig.steps[prevIndex];\n const prevSubStepIndex = prevStepObj.subSteps ? prevStepObj.subSteps.length - 1 : null;\n\n setState({\n currentStepIndex: prevIndex,\n currentSubStepIndex: prevSubStepIndex,\n isActive: true,\n });\n }\n }, [state.currentStepIndex, state.currentSubStepIndex]);\n\n const finish = useCallback(() => {\n setState((prev) => ({ ...prev, isActive: false }));\n if (configRef.current.onOnboardingComplete) {\n configRef.current.onOnboardingComplete();\n }\n }, []);\n\n const goToStep = useCallback((stepIndex: number, subStepIndex: number | null = null) => {\n setState({\n currentStepIndex: stepIndex,\n currentSubStepIndex: subStepIndex,\n isActive: true,\n });\n }, []);\n\n const value = {\n config,\n state,\n nextStep,\n prevStep,\n finish,\n goToStep,\n currentStep,\n isFirstStep,\n isLastStep,\n };\n\n if (!isMounted) return <>{children}</>;\n\n return (\n <OnboardingContext.Provider value={value}>\n {children}\n {state.isActive && <OnboardingOverlay />}\n </OnboardingContext.Provider>\n );\n};\n\nexport const useOnboarding = () => {\n const context = useContext(OnboardingContext);\n if (context === undefined) {\n throw new Error('useOnboarding must be used within an OnboardingProvider');\n }\n return context;\n};\n","'use client';\n\nimport React, { useState, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useOnboarding } from './OnboardingProvider';\n\nconst ChevronLeftIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M15 18l-6-6 6-6\" />\n </svg>\n);\n\nconst ChevronRightIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M9 18l6-6-6-6\" />\n </svg>\n);\n\nconst XIcon = () => (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n);\n\nexport const OnboardingOverlay: React.FC = () => {\n const { config, currentStep, nextStep, prevStep, finish, isFirstStep, isLastStep } =\n useOnboarding();\n const [coords, setCoords] = useState<{\n top: number;\n left: number;\n width: number;\n height: number;\n } | null>(null);\n const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });\n const [dragOffset, setDragOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });\n const isDragging = useRef(false);\n const dragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n const tooltipRef = useRef<HTMLDivElement>(null);\n\n // Reset drag offset when step changes\n const [prevStepRef, setPrevStepRef] = useState(currentStep);\n if (currentStep !== prevStepRef) {\n setPrevStepRef(currentStep);\n setDragOffset({ x: 0, y: 0 });\n }\n\n const handlePointerMove = useCallback((e: PointerEvent) => {\n if (!isDragging.current) return;\n\n const newX = e.clientX - dragStart.current.x;\n const newY = e.clientY - dragStart.current.y;\n\n setDragOffset({ x: newX, y: newY });\n }, []);\n\n const handlePointerUp = useCallback(() => {\n isDragging.current = false;\n\n if (tooltipRef.current) {\n tooltipRef.current.style.transition =\n 'top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)';\n tooltipRef.current.style.cursor = config.metadata.draggable ? 'grab' : 'auto';\n }\n\n window.removeEventListener('pointermove', handlePointerMove);\n window.removeEventListener('pointerup', handlePointerUp);\n }, [config.metadata.draggable, handlePointerMove]);\n\n const handlePointerDown = (e: React.PointerEvent) => {\n if (!config.metadata.draggable) return;\n e.stopPropagation();\n e.preventDefault();\n isDragging.current = true;\n dragStart.current = { x: e.clientX - dragOffset.x, y: e.clientY - dragOffset.y };\n\n if (tooltipRef.current) {\n tooltipRef.current.style.transition = 'none';\n tooltipRef.current.style.cursor = 'grabbing';\n }\n\n window.addEventListener('pointermove', handlePointerMove);\n window.addEventListener('pointerup', handlePointerUp);\n };\n\n const calculateBestPosition = useCallback(\n (rect: {\n top: number;\n bottom: number;\n left: number;\n right: number;\n width: number;\n height: number;\n }) => {\n const tooltipWidth = 300;\n const tooltipHeight = 200;\n const gap = 12;\n const padding = 20;\n\n const spaceAbove = rect.top;\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceLeft = rect.left;\n const spaceRight = window.innerWidth - rect.right;\n\n let top = 0;\n let left = 0;\n\n if (spaceBelow > tooltipHeight + gap + padding) {\n top = rect.bottom + gap;\n left = Math.max(\n padding,\n Math.min(\n window.innerWidth - tooltipWidth - padding,\n rect.left + rect.width / 2 - tooltipWidth / 2,\n ),\n );\n } else if (spaceAbove > tooltipHeight + gap + padding) {\n top = rect.top - tooltipHeight - gap;\n left = Math.max(\n padding,\n Math.min(\n window.innerWidth - tooltipWidth - padding,\n rect.left + rect.width / 2 - tooltipWidth / 2,\n ),\n );\n } else if (spaceRight > tooltipWidth + gap + padding) {\n top = Math.max(\n padding,\n Math.min(\n window.innerHeight - tooltipHeight - padding,\n rect.top + rect.height / 2 - tooltipHeight / 2,\n ),\n );\n left = rect.right + gap;\n } else if (spaceLeft > tooltipWidth + gap + padding) {\n top = Math.max(\n padding,\n Math.min(\n window.innerHeight - tooltipHeight - padding,\n rect.top + rect.height / 2 - tooltipHeight / 2,\n ),\n );\n left = rect.left - tooltipWidth - gap;\n } else {\n top = window.innerHeight / 2 - tooltipHeight / 2;\n left = window.innerWidth / 2 - tooltipWidth / 2;\n }\n\n return { top: top + window.scrollY, left: left + window.scrollX };\n },\n [],\n );\n\n const updateCoords = useCallback(() => {\n if (!currentStep) return;\n\n const element = document.querySelector(\n `[data-onboarding-id=\"${currentStep.attribute}\"]`,\n ) as HTMLElement;\n if (element) {\n const rect = element.getBoundingClientRect();\n const padding = config.style?.padding || 0;\n\n const paddedRect = {\n top: rect.top - padding,\n bottom: rect.bottom + padding,\n left: rect.left - padding,\n right: rect.right + padding,\n width: rect.width + padding * 2,\n height: rect.height + padding * 2,\n };\n\n const newCoords = {\n top: paddedRect.top + window.scrollY,\n left: paddedRect.left + window.scrollX,\n width: paddedRect.width,\n height: paddedRect.height,\n };\n\n const newPosition = calculateBestPosition(paddedRect);\n\n setCoords((prev) => {\n if (\n prev &&\n prev.top === newCoords.top &&\n prev.left === newCoords.left &&\n prev.width === newCoords.width &&\n prev.height === newCoords.height\n ) {\n return prev;\n }\n return newCoords;\n });\n\n setPosition((prev) => {\n if (prev.top === newPosition.top && prev.left === newPosition.left) {\n return prev;\n }\n return newPosition;\n });\n } else {\n setCoords(null);\n }\n }, [currentStep, calculateBestPosition, config.style]);\n\n useEffect(() => {\n updateCoords();\n window.addEventListener('resize', updateCoords);\n window.addEventListener('scroll', updateCoords);\n\n const observer = new MutationObserver(updateCoords);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true });\n\n let resizeObserver: ResizeObserver | null = null;\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(updateCoords);\n resizeObserver.observe(document.body);\n\n const element = currentStep?.attribute\n ? document.querySelector(`[data-onboarding-id=\"${currentStep.attribute}\"]`)\n : null;\n if (element) {\n resizeObserver.observe(element);\n }\n }\n\n return () => {\n window.removeEventListener('resize', updateCoords);\n window.removeEventListener('scroll', updateCoords);\n window.removeEventListener('pointermove', handlePointerMove);\n window.removeEventListener('pointerup', handlePointerUp);\n observer.disconnect();\n if (resizeObserver) resizeObserver.disconnect();\n };\n }, [updateCoords, currentStep?.attribute, handlePointerMove, handlePointerUp]);\n\n if (!currentStep || !coords) return null;\n\n const maskStyle = {\n ...config.style?.background,\n transition: 'all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',\n };\n\n const stopPropagation = (e: React.PointerEvent | React.MouseEvent) => {\n e.stopPropagation();\n };\n\n const overlayContent = (\n <div className=\"onboard-overlay-container\">\n <div\n style={{ height: coords.top, ...maskStyle }}\n className=\"onboard-overlay-mask onboard-mask-top\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{\n top: coords.top + coords.height,\n height: `calc(100vh - ${coords.top + coords.height}px)`,\n ...maskStyle,\n }}\n className=\"onboard-overlay-mask onboard-mask-bottom\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{ top: coords.top, height: coords.height, width: coords.left, ...maskStyle }}\n className=\"onboard-overlay-mask onboard-mask-left\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n <div\n style={{\n top: coords.top,\n height: coords.height,\n left: coords.left + coords.width,\n width: `calc(100% - ${coords.left + coords.width}px)`,\n ...maskStyle,\n }}\n className=\"onboard-overlay-mask\"\n onPointerDown={stopPropagation}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n />\n\n <div\n ref={tooltipRef}\n className=\"onboard-tooltip\"\n onPointerDown={handlePointerDown}\n style={{\n zIndex: 1000000,\n ...config.style?.container,\n top: position.top + dragOffset.y,\n left: position.left + dragOffset.x,\n transition:\n 'top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)',\n cursor: config.metadata.draggable ? 'grab' : 'auto',\n touchAction: 'none',\n }}\n onMouseDown={stopPropagation}\n onClick={stopPropagation}\n >\n <div className=\"onboard-tooltip-header\">\n <h3 className=\"onboard-tooltip-title\">{currentStep.title}</h3>\n <button\n onClick={(e) => {\n e.stopPropagation();\n finish();\n }}\n className=\"onboard-close-button\"\n >\n <XIcon />\n </button>\n </div>\n <p className=\"onboard-tooltip-description\">{currentStep.description}</p>\n\n <div className=\"onboard-tooltip-footer\">\n <button\n onClick={(e) => {\n e.stopPropagation();\n prevStep();\n }}\n disabled={isFirstStep}\n className=\"onboard-button-ghost\"\n style={{\n background: 'none',\n border: 'none',\n cursor: isFirstStep ? 'not-allowed' : 'pointer',\n ...config.style?.prev,\n }}\n >\n <ChevronLeftIcon />\n Prev\n </button>\n\n {isLastStep ? (\n <button\n onClick={(e) => {\n e.stopPropagation();\n finish();\n }}\n className=\"onboard-button-primary\"\n style={{ border: 'none', cursor: 'pointer', ...config.style?.finish }}\n >\n Finish\n </button>\n ) : (\n <button\n onClick={(e) => {\n e.stopPropagation();\n nextStep();\n }}\n className=\"onboard-button-primary\"\n style={{\n border: 'none',\n cursor: 'pointer',\n ...(isFirstStep ? config.style?.start : {}),\n ...(!isFirstStep ? config.style?.next : {}),\n }}\n >\n {isFirstStep && config.style?.start ? 'Start' : 'Next'}\n {!(isFirstStep && config.style?.start) && <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n </div>\n );\n\n return typeof document !== 'undefined' ? createPortal(overlayContent, document.body) : null;\n};"],"mappings":"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","names":["createContext","useContext","useEffect","useState","useCallback","useMemo","useRef","Cookies","useState","useEffect","useCallback","useRef","createPortal","jsx","jsxs","ChevronLeftIcon","ChevronRightIcon","XIcon","OnboardingOverlay","config","currentStep","nextStep","prevStep","finish","isFirstStep","isLastStep","useOnboarding","coords","setCoords","useState","position","setPosition","dragOffset","setDragOffset","isDragging","useRef","dragStart","tooltipRef","prevStepRef","setPrevStepRef","handlePointerMove","useCallback","e","newX","newY","handlePointerUp","handlePointerDown","calculateBestPosition","rect","spaceAbove","spaceBelow","spaceLeft","spaceRight","top","left","updateCoords","element","padding","paddedRect","newCoords","newPosition","prev","useEffect","observer","resizeObserver","maskStyle","stopPropagation","overlayContent","createPortal","Fragment","jsx","jsxs","OnboardingContext","createContext","COOKIE_NAME","OnboardingProvider","config","ssr","onNavigate","children","isMounted","setIsMounted","useState","state","setState","configRef","useRef","onNavigateRef","handleNavigation","useCallback","link","isMatch","step","path","pattern","useEffect","currentConfig","currentPath","matchedStepIndex","savedState","Cookies","parsed","targetUrl","prevStep","element","e","prev","currentStep","useMemo","isFirstStep","isLastStep","totalSteps","isLastMainStep","hasSubSteps","nextStep","stepObj","currentActiveStep","nextSubIndex","nextSubStep","nextIndex","nextStepObj","prevIndex","prevStepObj","prevSubStepIndex","finish","goToStep","stepIndex","subStepIndex","value","OnboardingOverlay","useOnboarding","context","useContext"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "onboard-engine",
3
- "version": "1.4.1",
3
+ "version": "1.4.2",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -28,13 +28,25 @@
28
28
  "prepublishOnly": "npm run build"
29
29
  },
30
30
  "private": false,
31
+ "description": "A lightweight, powerful onboarding and product tour engine for React applications.",
31
32
  "repository": {
32
33
  "type": "git",
33
34
  "url": "git+https://github.com/Forsrobin/onboard-engine.git"
34
35
  },
35
- "keywords": [],
36
- "author": "",
37
- "license": "ISC",
36
+ "keywords": [
37
+ "react",
38
+ "onboarding",
39
+ "product-tour",
40
+ "walkthrough",
41
+ "guide",
42
+ "user-onboarding",
43
+ "ui",
44
+ "ux",
45
+ "onboard-engine",
46
+ "nextjs"
47
+ ],
48
+ "author": "Robin Fors",
49
+ "license": "MIT",
38
50
  "type": "commonjs",
39
51
  "bugs": {
40
52
  "url": "https://github.com/Forsrobin/onboard-engine/issues"