@equinor/subsurface-app-management 1.1.4 → 1.1.5

package/dist/providers/TutorialProvider/TutorialProvider.d.ts

@@ -30,6 +30,17 @@ interface TutorialProviderProps {
     overrideEnvironmentName?: EnvironmentType;
     customStepComponents?: CustomTutorialComponent[];
     tutorials?: Tutorial[];
+    ignoredQueryKeys?: string[];
 }
+/**
+ * Tutorial provider expects to be within a QueryClientProvider
+ * @param children Expects to wrap the application globally, typically in a providers file with multiple providers
+ * @param overrideAppName Overrides the "NAME" env variable, which is used to fetch the relevant tutorials for your app
+ * @param overrideEnvironmentName Overrides the "ENVIRONMENT_NAME" env variable, which is used for the possibility to hide tutorials in "production"
+ * @param customStepComponents Adds custom steps components with a key that can be used to link it to a step in a tutorial
+ * @param tutorials Passing tutorial object directly. This does not replace any tutorials found from API call, but rather is appended to them
+ * @param ignoredQueryKeys An array of query keys TutorialProviders will not wait to finish loading before looking for elements to highlight
+ * @constructor
+ */
 export declare const TutorialProvider: FC<TutorialProviderProps>;
 export {};

package/dist/providers/TutorialProvider/TutorialProvider.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{createContext as r,useState as o,useRef as i,useMemo as n,useCallback as s,useEffect as l}from"react";import{useSearchParams as a}from"react-router-dom";import{TUTORIAL_SEARCH_PARAM_KEY as m}from"./TutorialProvider.const.js";import{getAllElementsToHighlight as u}from"./TutorialProvider.utils.js";import c from"./TutorialProviderInner.js";import{getAppName as d,getEnvironmentName as p}from"../../utils/environment.js";const h=r(void 0),v=({children:r,overrideAppName:v,overrideEnvironmentName:f,customStepComponents:g,tutorials:E})=>{const[T,w]=o(void 0),[y,N]=o(!1),[P,S]=a(),[k,j]=o(void 0),[C,A]=o(0),[x,I]=o(void 0),[F,H]=o(window.innerWidth),L=i(null),M=v??d(import.meta.env.VITE_NAME),V=f??p(import.meta.env.VITE_ENVIRONMENT_NAME),W=n((()=>{if(T)return T.steps.at(C)}),[T,C]),_=n((()=>!!T&&C>=T?.steps.length-1),[T,C]),z=s((()=>{P.delete(m),S(P),j(void 0)}),[P,S]);return l((()=>{if(k)return;const e=P.get(m);e&&j(e)}),[P,k]),l((()=>{const e=()=>{H(window.innerWidth)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),l((()=>{if(!T||y)return;const e=u(T);e.every((e=>null!==e))?I(e):(async()=>{await new Promise((e=>setTimeout(e,300)));const e=u(T);e.every((e=>null!==e))?I(e):(console.error("Could not find all elements to highlight for the tutorial. \n This is a list of elements that were found for each step: ",e),N(!0))})().catch((e=>{console.error("Error trying to get elements to highlight",e)}))}),[T,C,y,k]),l((()=>{if(!T||y)return;const e=T.steps.filter((e=>void 0!==e.key&&null!==e.key)).map((e=>e.key));if(0===e.length)return;const t=g?.map((e=>e.key));if(!t||0===t.length)return console.error("Could not find any custom components passed to the TutorialProvider \nExpected these keys for the active tutorial: ",e),void N(!0);e.map((e=>e&&t?.includes(e))).some((e=>!0!==e))&&(console.error("Could not find the custom components related to the active tutorial. \n The active tutorial expected to find these keys:  ",e,"\n However in the custom components we only found these keys: ",t),N(!0))}),[T,g,y]),e(h.Provider,{value:{currentStepObject:W,activeTutorial:T,setActiveTutorial:w,currentStep:C,setCurrentStep:A,allElementsToHighlight:x,setAllElementsToHighlight:I,customStepComponents:g,isLastStep:_,dialogRef:L,clearSearchParam:z,shortNameFromParams:k,setShortNameFromParams:j,tutorialsFromProps:E??[],tutorialError:y,setTutorialError:N,viewportWidth:F,appName:M,environmentName:V},children:[t(c,{}),r]})};export{h as TutorialContext,v as TutorialProvider};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{createContext as r,useState as o,useRef as i,useMemo as n,useCallback as s,useEffect as a}from"react";import{useSearchParams as l}from"react-router-dom";import{useIsFetching as m}from"@tanstack/react-query";import{TUTORIAL_SEARCH_PARAM_KEY as u}from"./TutorialProvider.const.js";import{getAllElementsToHighlight as c}from"./TutorialProvider.utils.js";import d from"./TutorialProviderInner.js";import{getAppName as p,getEnvironmentName as h}from"../../utils/environment.js";const v=r(void 0),f=({children:r,overrideAppName:f,overrideEnvironmentName:y,customStepComponents:g,tutorials:E,ignoredQueryKeys:T})=>{const[w,N]=o(void 0),[P,k]=o(!1),[S,j]=l(),[C,A]=o(void 0),[x,I]=o(0),[F,H]=o(void 0),[L,M]=o(window.innerWidth),V=m({predicate:e=>!T?.some((t=>e.queryKey.includes(t)))})>0,W=i(null),_=f??p(import.meta.env.VITE_NAME),q=y??h(import.meta.env.VITE_ENVIRONMENT_NAME),z=n((()=>{if(w)return w.steps.at(x)}),[w,x]),K=n((()=>!!w&&x>=w?.steps.length-1),[w,x]),O=s((()=>{S.delete(u),j(S),A(void 0)}),[S,j]);return a((()=>{if(C)return;const e=S.get(u);e&&A(e)}),[S,C]),a((()=>{const e=()=>{M(window.innerWidth)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),a((()=>{if(!w||P||V)return;const e=c(w);e.every((e=>null!==e))?H(e):(async()=>{await new Promise((e=>setTimeout(e,300)));const e=c(w);e.every((e=>null!==e))?H(e):(console.error("Could not find all elements to highlight for the tutorial. \n This is a list of elements that were found for each step: ",e),k(!0))})().catch((e=>{console.error("Error trying to get elements to highlight",e)}))}),[w,x,P,C,V]),a((()=>{if(!w||P||V)return;const e=w.steps.filter((e=>void 0!==e.key&&null!==e.key)).map((e=>e.key));if(0===e.length)return;const t=g?.map((e=>e.key));if(!t||0===t.length)return console.error("Could not find any custom components passed to the TutorialProvider \nExpected these keys for the active tutorial: ",e),void k(!0);e.map((e=>e&&t?.includes(e))).some((e=>!0!==e))&&(console.error("Could not find the custom components related to the active tutorial. \n The active tutorial expected to find these keys:  ",e,"\n However in the custom components we only found these keys: ",t),k(!0))}),[w,V,g,P]),e(v.Provider,{value:{currentStepObject:z,activeTutorial:w,setActiveTutorial:N,currentStep:x,setCurrentStep:I,allElementsToHighlight:F,setAllElementsToHighlight:H,customStepComponents:g,isLastStep:K,dialogRef:W,clearSearchParam:O,shortNameFromParams:C,setShortNameFromParams:A,tutorialsFromProps:E??[],tutorialError:P,setTutorialError:k,viewportWidth:L,appName:_,environmentName:q},children:[t(d,{}),r]})};export{v as TutorialContext,f as TutorialProvider};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/subsurface-app-management",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "React Typescript components/hooks to communicate with equinor/sam",
   "types": "dist/index.d.ts",
   "type": "module",