tour-guider - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var e=require("react");exports.MyComponent=({text:t})=>e.createElement("div",{className:"my-component"},t),exports.useGuideHook=t=>{const[s,o]=e.useState(t);return{state:s,handleChange:e=>{o(e)}}};
+"use strict";var e=require("react");let t={};function o(e={}){t={animate:!0,allowClose:!0,overlayOpacity:.7,smoothScroll:!1,disableActiveInteraction:!1,showProgress:!1,stagePadding:10,stageRadius:5,popoverOffset:10,showButtons:["next","previous","close"],disableButtons:[],overlayColor:"#000",...e}}function n(e){return e?t[e]:t}function i(e,t,o,n){return(e/=n/2)<1?o/2*e*e+t:-o/2*(--e*(e-2)-1)+t}function r(e){const t='a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])';return e.flatMap((e=>{const o=e.matches(t),n=Array.from(e.querySelectorAll(t));return[...o?[e]:[],...n]})).filter((e=>"none"!==getComputedStyle(e).pointerEvents&&function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}(e)))}function s(e){if(!e||function(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}(e))return;const t=n("smoothScroll");e.scrollIntoView({behavior:!t||l(e)?"auto":"smooth",inline:"center",block:"center"})}function l(e){if(!e||!e.parentElement)return;const t=e.parentElement;return t.scrollHeight>t.clientHeight}let d={};function a(e,t){d[e]=t}function p(e){return e?d[e]:d}function c(){d={}}let v={};function u(e,t){v[e]=t}function m(e){var t;null==(t=v[e])||t.call(v)}function h(e){if(!e)return;const t=e.getBoundingClientRect(),o={x:t.x,y:t.y,width:t.width,height:t.height};a("__activeStagePosition",o),g(o)}function w(e){const t=function(e){const t=window.innerWidth,o=window.innerHeight,i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.classList.add("driver-overlay","driver-overlay-animated"),i.setAttribute("viewBox",`0 0 ${t} ${o}`),i.setAttribute("xmlSpace","preserve"),i.setAttribute("xmlnsXlink","http://www.w3.org/1999/xlink"),i.setAttribute("version","1.1"),i.setAttribute("preserveAspectRatio","xMinYMin slice"),i.style.fillRule="evenodd",i.style.clipRule="evenodd",i.style.strokeLinejoin="round",i.style.strokeMiterlimit="2",i.style.zIndex="10000",i.style.position="fixed",i.style.top="0",i.style.left="0",i.style.width="100%",i.style.height="100%";const r=document.createElementNS("http://www.w3.org/2000/svg","path");return r.setAttribute("d",f(e)),r.style.fill=n("overlayColor")||"rgb(0,0,0)",r.style.opacity=`${n("overlayOpacity")}`,r.style.pointerEvents="auto",r.style.cursor="auto",i.appendChild(r),i}(e);document.body.appendChild(t),k(t,(e=>{"path"===e.target.tagName&&m("overlayClick")})),a("__overlaySvg",t)}function g(e){const t=p("__overlaySvg");if(!t)return void w(e);const o=t.firstElementChild;if("path"!==(null==o?void 0:o.tagName))throw new Error("no path element found in stage svg");o.setAttribute("d",f(e))}function f(e){const t=window.innerWidth,o=window.innerHeight,i=n("stagePadding")||0,r=n("stageRadius")||0,s=e.width+2*i,l=e.height+2*i,d=Math.min(r,s/2,l/2),a=Math.floor(Math.max(d,0)),p=s-2*a,c=l-2*a;return`M${t},0L0,0L0,${o}L${t},${o}L${t},0Z\n    M${e.x-i+a},${e.y-i} h${p} a${a},${a} 0 0 1 ${a},${a} v${c} a${a},${a} 0 0 1 -${a},${a} h-${p} a${a},${a} 0 0 1 -${a},-${a} v-${c} a${a},${a} 0 0 1 ${a},-${a} z`}function y(e){const{element:t}=e;let o="string"==typeof t?document.querySelector(t):t;o||(o=function(){const e=document.getElementById("driver-dummy-element");if(e)return e;let t=document.createElement("div");return t.id="driver-dummy-element",t.style.width="0",t.style.height="0",t.style.pointerEvents="none",t.style.opacity="0",t.style.position="fixed",t.style.top="50%",t.style.left="50%",document.body.appendChild(t),t}()),function(e,t){const o=Date.now(),r=p("__activeStep"),l=p("__activeElement")||e,d=!l||l===e,c="driver-dummy-element"===e.id,v="driver-dummy-element"===l.id,u=n("animate"),m=t.onHighlightStarted||n("onHighlightStarted"),w=(null==t?void 0:t.onHighlighted)||n("onHighlighted"),f=(null==r?void 0:r.onDeselected)||n("onDeselected"),y=n(),x=p();!d&&f&&f(v?void 0:l,r,{config:y,state:x}),m&&m(c?void 0:e,t,{config:y,state:x});const b=!d&&u;let C=!1;(function(){const e=p("popover");e&&(e.wrapper.style.display="none")})(),a("previousStep",r),a("previousElement",l),a("activeStep",t),a("activeElement",e);const _=()=>{if(p("__transitionCallback")!==_)return;const s=Date.now()-o,d=400-s<=200;t.popover&&d&&!C&&b&&(E(e,t),C=!0),n("animate")&&s<400?function(e,t,o,n){let r=p("__activeStagePosition");const s=r||o.getBoundingClientRect(),l=n.getBoundingClientRect();r={x:i(e,s.x,l.x-s.x,t),y:i(e,s.y,l.y-s.y,t),width:i(e,s.width,l.width-s.width,t),height:i(e,s.height,l.height-s.height,t)},g(r),a("__activeStagePosition",r)}(s,400,l,e):(h(e),w&&w(c?void 0:e,t,{config:n(),state:p()}),a("__transitionCallback",void 0),a("__previousStep",r),a("__previousElement",l),a("__activeStep",t),a("__activeElement",e)),window.requestAnimationFrame(_)};a("__transitionCallback",_),window.requestAnimationFrame(_),s(e),!b&&t.popover&&E(e,t),l.classList.remove("driver-active-element","driver-no-interaction"),l.removeAttribute("aria-haspopup"),l.removeAttribute("aria-expanded"),l.removeAttribute("aria-controls"),n("disableActiveInteraction")&&e.classList.add("driver-no-interaction"),e.classList.add("driver-active-element"),e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","true"),e.setAttribute("aria-controls","driver-popover-content")}(o,e)}function x(){const e=p("__activeElement"),t=p("__activeStep");e&&(h(e),function(){const e=p("__activeStagePosition"),t=p("__overlaySvg");if(!e)return;if(!t)return void console.warn("No stage svg found.");const o=window.innerWidth,n=window.innerHeight;t.setAttribute("viewBox",`0 0 ${o} ${n}`)}(),P(e,t))}function b(){const e=p("__resizeTimeout");e&&window.cancelAnimationFrame(e),a("__resizeTimeout",window.requestAnimationFrame(x))}function C(e){var t;if(!p("isInitialized")||"Tab"!==e.key&&9!==e.keyCode)return;const o=p("__activeElement"),n=null==(t=p("popover"))?void 0:t.wrapper,i=r([...n?[n]:[],...o?[o]:[]]),s=i[0],l=i[i.length-1];if(e.preventDefault(),e.shiftKey){const e=i[i.indexOf(document.activeElement)-1]||l;null==e||e.focus()}else{const e=i[i.indexOf(document.activeElement)+1]||s;null==e||e.focus()}}function _(e){var t;(null==(t=n("allowKeyboardControl"))||t)&&("Escape"===e.key?m("escapePress"):"ArrowRight"===e.key?m("arrowRightPress"):"ArrowLeft"===e.key&&m("arrowLeftPress"))}function k(e,t,o){const n=(t,n)=>{const i=t.target;e.contains(i)&&((!o||o(i))&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation()),null==n||n(t))};document.addEventListener("pointerdown",n,!0),document.addEventListener("mousedown",n,!0),document.addEventListener("pointerup",n,!0),document.addEventListener("mouseup",n,!0),document.addEventListener("click",(e=>{n(e,t)}),!0)}function E(e,t){var o,i;let l=p("popover");l&&document.body.removeChild(l.wrapper),l=function(){const e=document.createElement("div");e.classList.add("driver-popover");const t=document.createElement("div");t.classList.add("driver-popover-arrow");const o=document.createElement("header");o.id="driver-popover-title",o.classList.add("driver-popover-title"),o.style.display="none",o.innerText="Popover Title";const n=document.createElement("div");n.id="driver-popover-description",n.classList.add("driver-popover-description"),n.style.display="none",n.innerText="Popover description is here";const i=document.createElement("button");i.type="button",i.classList.add("driver-popover-close-btn"),i.setAttribute("aria-label","Close"),i.innerHTML="&times;";const r=document.createElement("footer");r.classList.add("driver-popover-footer");const s=document.createElement("span");s.classList.add("driver-popover-progress-text"),s.innerText="";const l=document.createElement("span");l.classList.add("driver-popover-navigation-btns");const d=document.createElement("button");d.type="button",d.classList.add("driver-popover-prev-btn"),d.innerHTML="&larr; Previous";const a=document.createElement("button");return a.type="button",a.classList.add("driver-popover-next-btn"),a.innerHTML="Next &rarr;",l.appendChild(d),l.appendChild(a),r.appendChild(s),r.appendChild(l),e.appendChild(i),e.appendChild(t),e.appendChild(o),e.appendChild(n),e.appendChild(r),{wrapper:e,arrow:t,title:o,description:n,footer:r,previousButton:d,nextButton:a,closeButton:i,footerButtons:l,progress:s}}(),document.body.appendChild(l.wrapper);const{title:d,description:c,showButtons:v,disableButtons:u,showProgress:h,nextBtnText:w=n("nextBtnText")||"Next &rarr;",prevBtnText:g=n("prevBtnText")||"&larr; Previous",progressText:f=n("progressText")||"{current} of {total}"}=t.popover||{};l.nextButton.innerHTML=w,l.previousButton.innerHTML=g,l.progress.innerHTML=f,d?(l.title.innerHTML=d,l.title.style.display="block"):l.title.style.display="none",c?(l.description.innerHTML=c,l.description.style.display="block"):l.description.style.display="none";const y=v||n("showButtons"),x=h||n("showProgress")||!1,b=(null==y?void 0:y.includes("next"))||(null==y?void 0:y.includes("previous"))||x;l.closeButton.style.display=y.includes("close")?"block":"none",b?(l.footer.style.display="flex",l.progress.style.display=x?"block":"none",l.nextButton.style.display=y.includes("next")?"block":"none",l.previousButton.style.display=y.includes("previous")?"block":"none"):l.footer.style.display="none";const C=u||n("disableButtons")||[];null!=C&&C.includes("next")&&(l.nextButton.disabled=!0,l.nextButton.classList.add("driver-popover-btn-disabled")),null!=C&&C.includes("previous")&&(l.previousButton.disabled=!0,l.previousButton.classList.add("driver-popover-btn-disabled")),null!=C&&C.includes("close")&&(l.closeButton.disabled=!0,l.closeButton.classList.add("driver-popover-btn-disabled"));const _=l.wrapper;_.style.display="block",_.style.left="",_.style.top="",_.style.bottom="",_.style.right="",_.id="driver-popover-content",_.setAttribute("role","dialog"),_.setAttribute("aria-labelledby","driver-popover-title"),_.setAttribute("aria-describedby","driver-popover-description");l.arrow.className="driver-popover-arrow";const E=(null==(o=t.popover)?void 0:o.popoverClass)||n("popoverClass")||"";_.className=`driver-popover ${E}`.trim(),k(l.wrapper,(o=>{var i,r,s;const l=o.target,d=(null==(i=t.popover)?void 0:i.onNextClick)||n("onNextClick"),a=(null==(r=t.popover)?void 0:r.onPrevClick)||n("onPrevClick"),c=(null==(s=t.popover)?void 0:s.onCloseClick)||n("onCloseClick");return l.classList.contains("driver-popover-next-btn")?d?d(e,t,{config:n(),state:p()}):m("nextClick"):l.classList.contains("driver-popover-prev-btn")?a?a(e,t,{config:n(),state:p()}):m("prevClick"):l.classList.contains("driver-popover-close-btn")?c?c(e,t,{config:n(),state:p()}):m("closeClick"):void 0}),(e=>!(null!=l&&l.description.contains(e))&&!(null!=l&&l.title.contains(e))&&"string"==typeof e.className&&e.className.includes("driver-popover"))),a("popover",l);const L=(null==(i=t.popover)?void 0:i.onPopoverRender)||n("onPopoverRender");L&&L(l,{config:n(),state:p()}),P(e,t),s(_);const B=r([_,...e.classList.contains("driver-dummy-element")?[]:[e]]);B.length>0&&B[0].focus()}function L(){const e=p("popover");if(null==e||!e.wrapper)return;const t=e.wrapper.getBoundingClientRect(),o=n("stagePadding")||0,i=n("popoverOffset")||0;return{width:t.width+o+i,height:t.height+o+i,realWidth:t.width,realHeight:t.height}}function B(e,t){const{elementDimensions:o,popoverDimensions:n,popoverPadding:i,popoverArrowDimensions:r}=t;return"start"===e?Math.max(Math.min(o.top-i,window.innerHeight-n.realHeight-r.width),r.width):"end"===e?Math.max(Math.min(o.top-(null==n?void 0:n.realHeight)+o.height+i,window.innerHeight-(null==n?void 0:n.realHeight)-r.width),r.width):"center"===e?Math.max(Math.min(o.top+o.height/2-(null==n?void 0:n.realHeight)/2,window.innerHeight-(null==n?void 0:n.realHeight)-r.width),r.width):0}function $(e,t){const{elementDimensions:o,popoverDimensions:n,popoverPadding:i,popoverArrowDimensions:r}=t;return"start"===e?Math.max(Math.min(o.left-i,window.innerWidth-n.realWidth-r.width),r.width):"end"===e?Math.max(Math.min(o.left-(null==n?void 0:n.realWidth)+o.width+i,window.innerWidth-(null==n?void 0:n.realWidth)-r.width),r.width):"center"===e?Math.max(Math.min(o.left+o.width/2-(null==n?void 0:n.realWidth)/2,window.innerWidth-(null==n?void 0:n.realWidth)-r.width),r.width):0}function P(e,t){const o=p("popover");if(!o)return;const{align:i="start",side:r="left"}=(null==t?void 0:t.popover)||{},s=i,l="driver-dummy-element"===e.id?"over":r,d=n("stagePadding")||0,a=L(),c=o.arrow.getBoundingClientRect(),v=e.getBoundingClientRect(),u=v.top-a.height;let m=u>=0;const h=window.innerHeight-(v.bottom+a.height);let w=h>=0;const g=v.left-a.width;let f=g>=0;const y=window.innerWidth-(v.right+a.width);let x=y>=0;const b=!(m||w||f||x);let C=l;if("top"===l&&m?x=f=w=!1:"bottom"===l&&w?x=f=m=!1:"left"===l&&f?x=m=w=!1:"right"===l&&x&&(f=m=w=!1),"over"===l){const e=window.innerWidth/2-a.realWidth/2,t=window.innerHeight/2-a.realHeight/2;o.wrapper.style.left=`${e}px`,o.wrapper.style.right="auto",o.wrapper.style.top=`${t}px`,o.wrapper.style.bottom="auto"}else if(b){const e=window.innerWidth/2-(null==a?void 0:a.realWidth)/2,t=10;o.wrapper.style.left=`${e}px`,o.wrapper.style.right="auto",o.wrapper.style.bottom=`${t}px`,o.wrapper.style.top="auto"}else if(f){const e=Math.min(g,window.innerWidth-(null==a?void 0:a.realWidth)-c.width),t=B(s,{elementDimensions:v,popoverDimensions:a,popoverPadding:d,popoverArrowDimensions:c});o.wrapper.style.left=`${e}px`,o.wrapper.style.top=`${t}px`,o.wrapper.style.bottom="auto",o.wrapper.style.right="auto",C="left"}else if(x){const e=Math.min(y,window.innerWidth-(null==a?void 0:a.realWidth)-c.width),t=B(s,{elementDimensions:v,popoverDimensions:a,popoverPadding:d,popoverArrowDimensions:c});o.wrapper.style.right=`${e}px`,o.wrapper.style.top=`${t}px`,o.wrapper.style.bottom="auto",o.wrapper.style.left="auto",C="right"}else if(m){const e=Math.min(u,window.innerHeight-a.realHeight-c.width);let t=$(s,{elementDimensions:v,popoverDimensions:a,popoverPadding:d,popoverArrowDimensions:c});o.wrapper.style.top=`${e}px`,o.wrapper.style.left=`${t}px`,o.wrapper.style.bottom="auto",o.wrapper.style.right="auto",C="top"}else if(w){const e=Math.min(h,window.innerHeight-(null==a?void 0:a.realHeight)-c.width);let t=$(s,{elementDimensions:v,popoverDimensions:a,popoverPadding:d,popoverArrowDimensions:c});o.wrapper.style.left=`${t}px`,o.wrapper.style.bottom=`${e}px`,o.wrapper.style.top="auto",o.wrapper.style.right="auto",C="bottom"}b?o.arrow.classList.add("driver-popover-arrow-none"):function(e,t,o){const n=p("popover");if(!n)return;const i=o.getBoundingClientRect(),r=L(),s=n.arrow,l=r.width,d=window.innerWidth,a=i.width,c=i.left,v=r.height,u=window.innerHeight,m=i.top,h=i.height;s.className="driver-popover-arrow";let w=t,g=e;"top"===t?(c+a<=0?(w="right",g="end"):c+a-l<=0&&(w="top",g="start"),c>=d?(w="left",g="end"):c+l>=d&&(w="top",g="end")):"bottom"===t?(c+a<=0?(w="right",g="start"):c+a-l<=0&&(w="bottom",g="start"),c>=d?(w="left",g="start"):c+l>=d&&(w="bottom",g="end")):"left"===t?(m+h<=0?(w="bottom",g="end"):m+h-v<=0&&(w="left",g="start"),m>=u?(w="top",g="end"):m+v>=u&&(w="left",g="end")):"right"===t&&(m+h<=0?(w="bottom",g="start"):m+h-v<=0&&(w="right",g="start"),m>=u?(w="top",g="start"):m+v>=u&&(w="right",g="end")),w?(s.classList.add(`driver-popover-arrow-side-${w}`),s.classList.add(`driver-popover-arrow-align-${g}`)):s.classList.add("driver-popover-arrow-none")}(s,C,e)}function A(e={}){function t(){n("allowClose")&&h()}function i(){const e=p("activeIndex"),t=n("steps")||[];if(void 0===e)return;const o=e+1;t[o]?m(o):h()}function r(){const e=p("activeIndex"),t=n("steps")||[];if(void 0===e)return;const o=e-1;t[o]?m(o):h()}function s(){var e;if(p("__transitionCallback"))return;const t=p("activeIndex"),o=p("__activeStep"),i=p("__activeElement");if(void 0===t||void 0===o||void 0===p("activeIndex"))return;const s=(null==(e=o.popover)?void 0:e.onPrevClick)||n("onPrevClick");if(s)return s(i,o,{config:n(),state:p()});r()}function l(){var e;if(p("__transitionCallback"))return;const t=p("activeIndex"),o=p("__activeStep"),r=p("__activeElement");if(void 0===t||void 0===o)return;const s=(null==(e=o.popover)?void 0:e.onNextClick)||n("onNextClick");if(s)return s(r,o,{config:n(),state:p()});i()}function d(){p("isInitialized")||(a("isInitialized",!0),document.body.classList.add("driver-active",n("animate")?"driver-fade":"driver-simple"),window.addEventListener("keyup",_,!1),window.addEventListener("keydown",C,!1),window.addEventListener("resize",b),window.addEventListener("scroll",b),u("overlayClick",t),u("escapePress",t),u("arrowLeftPress",s),u("arrowRightPress",l))}function m(e=0){var t,o,i,r,s,l,d,p;const c=n("steps");if(!c)return console.error("No steps to drive through"),void h();if(!c[e])return void h();a("__activeOnDestroyed",document.activeElement),a("activeIndex",e);const v=c[e],u=c[e+1],w=c[e-1],g=(null==(t=v.popover)?void 0:t.doneBtnText)||n("doneBtnText")||"Done",f=n("allowClose"),x=void 0!==(null==(o=v.popover)?void 0:o.showProgress)?null==(i=v.popover)?void 0:i.showProgress:n("showProgress"),b=((null==(r=v.popover)?void 0:r.progressText)||n("progressText")||"{{current}} of {{total}}").replace("{{current}}",`${e+1}`).replace("{{total}}",`${c.length}`),C=(null==(s=v.popover)?void 0:s.showButtons)||n("showButtons"),_=["next","previous",...f?["close"]:[]].filter((e=>!(null!=C&&C.length)||C.includes(e))),k=(null==(l=v.popover)?void 0:l.onNextClick)||n("onNextClick"),E=(null==(d=v.popover)?void 0:d.onPrevClick)||n("onPrevClick"),L=(null==(p=v.popover)?void 0:p.onCloseClick)||n("onCloseClick");y({...v,popover:{showButtons:_,nextBtnText:u?void 0:g,disableButtons:[...w?[]:["previous"]],showProgress:x,progressText:b,onNextClick:k||(()=>{u?m(e+1):h()}),onPrevClick:E||(()=>{m(e-1)}),onCloseClick:L||(()=>{h()}),...(null==v?void 0:v.popover)||{}}})}function h(e=!0){const t=p("__activeElement"),o=p("__activeStep"),i=p("__activeOnDestroyed"),r=n("onDestroyStarted");if(e&&r){return void r(!t||"driver-dummy-element"===(null==t?void 0:t.id)?void 0:t,o,{config:n(),state:p()})}const s=(null==o?void 0:o.onDeselected)||n("onDeselected"),l=n("onDestroyed");if(document.body.classList.remove("driver-active","driver-fade","driver-simple"),window.removeEventListener("keyup",_),window.removeEventListener("resize",b),window.removeEventListener("scroll",b),function(){var e;const t=p("popover");t&&(null==(e=t.wrapper.parentElement)||e.removeChild(t.wrapper))}(),function(){var e;null==(e=document.getElementById("driver-dummy-element"))||e.remove(),document.querySelectorAll(".driver-active-element").forEach((e=>{e.classList.remove("driver-active-element","driver-no-interaction"),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-controls")}))}(),function(){const e=p("__overlaySvg");e&&e.remove()}(),v={},c(),t&&o){const e="driver-dummy-element"===t.id;s&&s(e?void 0:t,o,{config:n(),state:p()}),l&&l(e?void 0:t,o,{config:n(),state:p()})}i&&i.focus()}return o(e),{isActive:()=>p("isInitialized")||!1,refresh:b,drive:(e=0)=>{d(),m(e)},setConfig:o,setSteps:e=>{c(),o({...n(),steps:e})},getConfig:n,getState:p,getActiveIndex:()=>p("activeIndex"),isFirstStep:()=>0===p("activeIndex"),isLastStep:()=>{const e=n("steps")||[],t=p("activeIndex");return void 0!==t&&t===e.length-1},getActiveStep:()=>p("activeStep"),getActiveElement:()=>p("activeElement"),getPreviousElement:()=>p("previousElement"),getPreviousStep:()=>p("previousStep"),moveNext:i,movePrevious:r,moveTo:function(e){(n("steps")||[])[e]?m(e):h()},hasNextStep:()=>{const e=n("steps")||[],t=p("activeIndex");return void 0!==t&&e[t+1]},hasPreviousStep:()=>{const e=n("steps")||[],t=p("activeIndex");return void 0!==t&&e[t-1]},highlight:e=>{d(),y({...e,popover:e.popover?{showButtons:[],showProgress:!1,progressText:"",...e.popover}:void 0})},destroy:()=>{h(!1)}}}exports.MyComponent=({text:t})=>e.createElement("div",{className:"my-component"},t),exports.useGuideHook=()=>A({showProgress:!0,nextBtnText:"—›",prevBtnText:"‹—",doneBtnText:"✕",animate:!1,steps:[{element:"#navbar-middle-menu",popover:{title:"Explore Tomato",description:"Click on the menu items to exlore our website .",side:"bottom",align:"center",popoverClass:"driverjs-theme"}},{element:"#view-all-menu",popover:{title:"Food Menu",description:"Click here to check our food categories .",side:"right",align:"center",popoverClass:"driverjs-theme"}},{element:"#explore-menu-list",popover:{title:"Food Options",description:"Click on your favourite food to check all the food items related to that category .",side:"top",align:"center",popoverClass:"driverjs-theme"}},{element:"#add-food-item",popover:{title:"Add Your favourite food",description:"Click here to add your favourite food on your cart list .",side:"bottom",align:"start",popoverClass:"driverjs-theme"}},{element:"#check-cart-items",popover:{title:"Cart Items",description:"Click here to check the food items you added in your cart list .",side:"bottom",align:"end",popoverClass:"driverjs-theme"}},{element:"#sig-in",popover:{title:"Sign in",description:"But to order any food you have to sign in .",side:"bottom",align:"end",popoverClass:"driverjs-theme"}}]}).drive();

package.json

 {
   "name": "tour-guider",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A website onboarding guide library",
@@ -13,6 +13,13 @@ "main": "dist/index.js",
   },
-  "keywords": ["react","website","onboarding","tour","guide"],
+  "keywords": [
+    "react",
+    "website",
+    "onboarding",
+    "tour",
+    "guide"
+  ],
   "author": "Md Asif Momin",
   "license": "MIT",
   "dependencies": {
+    "driver.js": "^1.3.1",
     "react": "^18.3.1",
@@ -19,0 +26,0 @@ "react-dom": "^18.3.1"

src/hooks/useGuideHook.ts

@@ -1,13 +0,95 @@
-import { useState } from 'react';
+// import { useState } from 'react';
 
-const useGuideHook = (initialState: string) => {
-  const [state, setState] = useState(initialState);
+// const useGuideHook = (initialState: string) => {
+//   const [state, setState] = useState(initialState);
 
-  const handleChange = (newValue: string) => {
-    setState(newValue);
-  };
+//   const handleChange = (newValue: string) => {
+//     setState(newValue);
+//   };
 
-  return { state, handleChange };
+//   return { state, handleChange };
+// };
+
+// export default useGuideHook;
+
+import { driver } from "driver.js";
+import 'driver.js/dist/driver.css';
+import '../styles/styles.css';
+
+const useGuideHook = () => {
+  const driverObj = driver({
+    showProgress: true,  // for showing the numbers
+    nextBtnText: '—›',
+    prevBtnText: '‹—',
+    doneBtnText: '✕',
+    animate: false,
+    steps: [
+      {
+        element: '#navbar-middle-menu',
+        popover: {
+          title: 'Explore Tomato',
+          description: 'Click on the menu items to exlore our website .',
+          side: "bottom",
+          align: 'center',
+          popoverClass: 'driverjs-theme'
+        },
+
+      },
+      {
+        element: '#view-all-menu',
+        popover: {
+          title: 'Food Menu',
+          description: 'Click here to check our food categories .',
+          side: "right",
+          align: 'center',
+          popoverClass: 'driverjs-theme'
+        },
+
+      },
+      {
+        element: '#explore-menu-list',
+        popover: {
+          title: 'Food Options',
+          description: 'Click on your favourite food to check all the food items related to that category .',
+          side: "top",
+          align: 'center',
+          popoverClass: 'driverjs-theme'
+        }
+      },
+      {
+        element: '#add-food-item',
+        popover: {
+          title: 'Add Your favourite food',
+          description: 'Click here to add your favourite food on your cart list .',
+          side: "bottom",
+          align: 'start',
+          popoverClass: 'driverjs-theme'
+        }
+      },
+      {
+        element: '#check-cart-items',
+        popover: {
+          title: 'Cart Items',
+          description: 'Click here to check the food items you added in your cart list .',
+          side: "bottom",
+          align: 'end',
+          popoverClass: 'driverjs-theme'
+        }
+      },
+      {
+        element: '#sig-in',
+        popover: {
+          title: 'Sign in',
+          description: 'But to order any food you have to sign in .',
+          side: "bottom",
+          align: 'end',
+          popoverClass: 'driverjs-theme'
+        }
+      },
+    ]
+  });
+
+  return driverObj.drive();
 };
 
 export default useGuideHook;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39280

increased by800.09%

Lines of code

309

increased by267.86%

Worsened metrics

Dependency count

5

increased by25%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addeddriver.js@^1.3.1

• + Addeddriver.js@1.3.1(transitive)