@stack-spot/portal-layout 1.1.2 → 2.0.1

package/dist/components/tour/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tour/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAChC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC9F,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/tour/index.js

@@ -0,0 +1,5 @@
+export { StepContainer } from './StepContainer.js';
+export { useTour } from './hook.js';
+export { WelcomeTour, tourManager } from './manager.js';
+export { hasFinishedTourStep, isNewTourStep, tourStepBuilder } from './utils.js';
+//# sourceMappingURL=index.js.map

package/dist/components/tour/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tour/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAChC,OAAO,EAA4C,WAAW,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC9F,OAAO,EAAqB,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/tour/manager.d.ts

@@ -0,0 +1,32 @@
+import WelcomeTour, { ReactourProps, ReactourStep } from 'reactour';
+import { StackspotTourStep } from './utils.js';
+export type TourConfig = Omit<ReactourProps, 'children'>;
+export type TourStep = ReactourStep;
+export type TourConfigExtra = TourConfig & {
+    currentStep: number;
+    finishStep: (stepSelector: string) => void;
+    addStep: (step: StackspotTourStep) => void;
+};
+type TourConfigListener = (config: TourConfigExtra) => void;
+/**
+ * TourManager: provides state management for React Tour.
+ */
+declare class TourManager {
+    private _steps;
+    private _currentStep;
+    private observers;
+    get config(): TourConfigExtra;
+    get currentStep(): number;
+    get steps(): ReactourStep[];
+    addStep(step: StackspotTourStep): void;
+    addRawStep(step: TourStep): void;
+    nextStep(): void;
+    prevStep(): void;
+    finishStep(stepSelector: string): void;
+    subscribe(updateFn: TourConfigListener): () => void;
+    private pullListener;
+    private notify;
+}
+declare const tourManager: TourManager;
+export { TourConfigListener, WelcomeTour, tourManager };
+//# sourceMappingURL=manager.d.ts.map

package/dist/components/tour/manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../../../src/components/tour/manager.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,iBAAiB,EAAkD,MAAM,SAAS,CAAA;AAE3F,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AACxD,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAA;AAkBnC,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC5C,CAAA;AAED,KAAK,kBAAkB,GAAG,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAA;AAG3D;;GAEG;AACH,cAAM,WAAW;IAEf,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,YAAY,CAAI;IACxB,OAAO,CAAC,SAAS,CAA2B;IAE5C,IAAI,MAAM,IAAI,eAAe,CAc5B;IAED,IAAI,WAAW,WAEd;IAED,IAAI,KAAK,mBAER;IAED,OAAO,CAAC,IAAI,EAAE,iBAAiB;IAI/B,UAAU,CAAC,IAAI,EAAE,QAAQ;IAQzB,QAAQ;IAKR,QAAQ;IAKR,UAAU,CAAC,YAAY,EAAE,MAAM;IAK/B,SAAS,CAAC,QAAQ,EAAE,kBAAkB;IAMtC,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,MAAM;CAIf;AAED,QAAA,MAAM,WAAW,aAAoB,CAAA;AAErC,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/tour/manager.js

@@ -0,0 +1,98 @@
+import WelcomeTour from 'reactour';
+import { finishTourStep, isNewTourStep, tourStepBuilder } from './utils.js';
+/**
+ * Tutorial: the default configuration for a React Tour.
+ */
+const defaultTourConfig = Object.freeze({
+    steps: [],
+    isOpen: true,
+    onRequestClose: () => '',
+    showButtons: false,
+    showNavigation: false,
+    showNavigationNumber: false,
+    showNumber: false,
+    showCloseButton: false,
+    disableFocusLock: true,
+});
+/**
+ * TourManager: provides state management for React Tour.
+ */
+class TourManager {
+    constructor() {
+        Object.defineProperty(this, "_steps", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "_currentStep", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "observers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+    }
+    get config() {
+        const config = {
+            ...defaultTourConfig,
+            goToStep: this._currentStep,
+            update: `${this._currentStep}`,
+            steps: this._steps,
+            isOpen: !!this._steps.length && (this._currentStep < this._steps.length),
+            currentStep: this._currentStep,
+            nextStep: () => this.nextStep(),
+            prevStep: () => this.prevStep(),
+            finishStep: (stepSelector) => this.finishStep(stepSelector),
+            addStep: (step) => this.addStep(step),
+        };
+        return config;
+    }
+    get currentStep() {
+        return this._currentStep;
+    }
+    get steps() {
+        return this._steps;
+    }
+    addStep(step) {
+        this.addRawStep(tourStepBuilder(step));
+    }
+    addRawStep(step) {
+        const stepAlreadyAdded = this._steps.some(it => it.selector == step.selector);
+        if (!stepAlreadyAdded && isNewTourStep(step)) {
+            this._steps = [...this._steps, step];
+            this.notify();
+        }
+    }
+    nextStep() {
+        this._currentStep = this._currentStep + 1;
+        this.notify();
+    }
+    prevStep() {
+        this._currentStep = this._currentStep - 1;
+        this.notify();
+    }
+    finishStep(stepSelector) {
+        finishTourStep(stepSelector);
+        this.nextStep();
+    }
+    subscribe(updateFn) {
+        this.observers.push(updateFn);
+        this.notify();
+        return () => this.pullListener(updateFn);
+    }
+    pullListener(updateFn) {
+        this.observers = this.observers.filter((obs) => obs !== updateFn);
+    }
+    notify() {
+        this.observers.forEach((updateFn) => updateFn(this.config));
+    }
+}
+const tourManager = new TourManager();
+export { WelcomeTour, tourManager };
+//# sourceMappingURL=manager.js.map

package/dist/components/tour/manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"manager.js","sourceRoot":"","sources":["../../../src/components/tour/manager.tsx"],"names":[],"mappings":"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"}

package/dist/components/tour/utils.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { ReactourStep } from 'reactour';
+import { NavigationProps } from './StepNavigation.js';
+/**
+ * Tutorial: marks the tour step as finished. This sets a cookie, preventing the tour from showing again.
+ * @param key the identifier for the step to mark as finished.
+ */
+export declare const finishTourStep: (key: string) => void;
+/**
+ * Tutorial: verifies if the React Tour step has not finished yet.
+ *
+ * A step has not finished if the array stored as a cookie doesn't include the string value of `step.selector`.
+ * @param step the step config.
+ * @returns true if the step has not yet been marked as finished. False otherwise.
+ */
+export declare const isNewTourStep: (step: ReactourStep) => boolean;
+/**
+ * Tutorial: verifies if the key passed as parameter refers to a React Tour step that has already finished.
+ *
+ * The key refers to a finished step if the array stored as a cookie includes it.
+ * If the cookie is set to 'disabled', then the step will be considered finished.Particularly useful in scenarios like e2e tests.
+ * @param key the step's identifier to check.
+ * @returns true if the key refers to a finished step. False otherwise.
+ */
+export declare const hasFinishedTourStep: (key: string) => boolean;
+export interface StackspotTourStep extends ReactourStep {
+    /**
+     * The step's title.
+     */
+    title: string;
+    /**
+     * The unique identifier for the step (key).
+     */
+    selector: string;
+    /**
+     * The step's content.
+     */
+    content: ReactNode;
+    /**
+     * A set of properties for customizing the next and previous buttons.
+     */
+    customNavigation?: NavigationProps;
+}
+/**
+ * Tutorial: utility for building a React Tour step. This already includes some default configuration for tours in Stackspot.
+ * @param options the options for building the step: {@link StackspotTourStep}.
+ * @returns the React Tour step.
+ */
+export declare const tourStepBuilder: ({ selector, position, title, content, style, customNavigation, ...rest }: StackspotTourStep) => ReactourStep;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/tour/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAYlD;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAS,MAAM,SAIzC,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,SAAU,YAAY,YAA6C,CAAA;AAE7F;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,YAG9C,CAAA;AAED,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,eAAe,CAAC;CACpC;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,6EAQzB,iBAAiB,KAAG,YAkBrB,CAAA"}

package/dist/components/tour/utils.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getCookie, setCookie } from '@stack-spot/portal-components';
+import { theme } from '@stack-spot/portal-theme';
+import { StepContainer } from './StepContainer.js';
+const TOUR_COOKIE = 'guided-tour-global';
+const defaultExpires = new Date();
+defaultExpires.setFullYear(new Date().getFullYear() + 1);
+const getTourCookie = () => {
+    const currentTourObject = getCookie(TOUR_COOKIE);
+    return currentTourObject ? currentTourObject.split(',') : [];
+};
+/**
+ * Tutorial: marks the tour step as finished. This sets a cookie, preventing the tour from showing again.
+ * @param key the identifier for the step to mark as finished.
+ */
+export const finishTourStep = (key) => {
+    const finishedTours = getTourCookie();
+    if (!finishedTours.includes(key))
+        finishedTours.push(key);
+    setCookie(TOUR_COOKIE, finishedTours.toString(), { expires: defaultExpires.toUTCString() });
+};
+/**
+ * Tutorial: verifies if the React Tour step has not finished yet.
+ *
+ * A step has not finished if the array stored as a cookie doesn't include the string value of `step.selector`.
+ * @param step the step config.
+ * @returns true if the step has not yet been marked as finished. False otherwise.
+ */
+export const isNewTourStep = (step) => !hasFinishedTourStep(`${step.selector}`);
+/**
+ * Tutorial: verifies if the key passed as parameter refers to a React Tour step that has already finished.
+ *
+ * The key refers to a finished step if the array stored as a cookie includes it.
+ * If the cookie is set to 'disabled', then the step will be considered finished.Particularly useful in scenarios like e2e tests.
+ * @param key the step's identifier to check.
+ * @returns true if the key refers to a finished step. False otherwise.
+ */
+export const hasFinishedTourStep = (key) => {
+    const tourCookie = getTourCookie();
+    return tourCookie.includes(key) || tourCookie[0] === 'disabled';
+};
+/**
+ * Tutorial: utility for building a React Tour step. This already includes some default configuration for tours in Stackspot.
+ * @param options the options for building the step: {@link StackspotTourStep}.
+ * @returns the React Tour step.
+ */
+export const tourStepBuilder = ({ selector, position, title, content, style, customNavigation, ...rest }) => ({
+    selector,
+    content: (_jsx(StepContainer, { stepKey: selector, position: position, title: title, customNavigation: customNavigation, children: content })),
+    position,
+    style: {
+        backgroundColor: theme.color.inverse[500],
+        width: '256px',
+        padding: 0,
+        top: ['right', 'left'].includes(position) ? '-3px' : '0',
+        ...(style || {}),
+    },
+    ...(rest || {}),
+});
+//# sourceMappingURL=utils.js.map

package/dist/components/tour/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAGhD,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGtE,MAAM,WAAW,GAAG,oBAAoB,CAAA;AAExC,MAAM,cAAc,GAAG,IAAI,IAAI,EAAE,CAAA;AACjC,cAAc,CAAC,WAAW,CAAC,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAA;AAExD,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,iBAAiB,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;IAChD,OAAO,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AAC9D,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,EAAE;IAC5C,MAAM,aAAa,GAAa,aAAa,EAAE,CAAA;IAC/C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACzD,SAAS,CAAC,WAAW,EAAE,aAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;AAC7F,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAkB,EAAE,EAAE,CAAC,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;AAE7F;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;IACjD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,OAAO,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAA;AACjE,CAAC,CAAA;AAqBD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,KAAK,EACL,gBAAgB,EAChB,GAAG,IAAI,EACW,EAAgB,EAAE,CAAC,CAAC;IACtC,QAAQ;IACR,OAAO,EAAE,CAAC,KAAC,aAAa,IACtB,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAiC,EAC3C,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,YACjC,OAAO,GACM,CAAC;IACjB,QAAQ;IACR,KAAK,EAAE;QACL,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACzC,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,CAAC;QACV,GAAG,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAiC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;QACjF,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;KACjB;IACD,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;CAChB,CAAC,CAAA"}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
 export { MenuSections } from './components/menu/MenuSections.js';
 export * from './components/menu/types.js';
+export * from './components/tour/index.js';
 export * from './components/types.js';
 export * from './elements.js';
 export * from './errors.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA"}

package/dist/index.js

@@ -7,6 +7,7 @@ export { PortalSwitcher } from './components/PortalSwitcher.js';
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent.js';
 export { MenuSections } from './components/menu/MenuSections.js';
 export * from './components/menu/types.js';
+export * from './components/tour/index.js';
 export * from './components/types.js';
 export * from './elements.js';
 export * from './errors.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA"}

package/dist/layout.css

@@ -27,7 +27,7 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
-  background: var(--light-400);
+  background: var(--light-300);
   font: var(--font);
   color: var(--light-contrastText);
 }

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "1.1.2",
+  "version": "2.0.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rimraf dist && tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "check-tree-shaking": "agadoo"
   },
   "peerDependencies": {
     "@citric/core": "^6.0.0",
@@ -14,7 +15,7 @@
     "@citric/ui": "^5.7.2 || ^6.0.0",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.0.0",
-    "@stack-spot/portal-components": "^1.0.0",
+    "@stack-spot/portal-components": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.10"
@@ -24,6 +25,7 @@
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
+    "@types/reactour": "^1.18.5",
     "agadoo": "^3.0.0",
     "cpy-cli": "^5.0.0",
     "eslint": "^8.53.0",
@@ -42,6 +44,7 @@
     "styled-components": "6.1.10"
   },
   "dependencies": {
-    "react-toastify": "^10.0.5"
+    "react-toastify": "^10.0.5",
+    "reactour": "^1.19.4"
   }
 }

package/readme.md

@@ -10,6 +10,7 @@ Implements the general layout for a Stackspot web application.
 - Right panel: a floating panel that shows like a modal, but is fixed to the right side of the window.
 - Bottom dialog: a floating fixed panel fixed to the bottom of the window.
 - Toaster: a floating set of cards at the top right corner used to show notifications.
+- Tour: component associated floating cards used to present new features to users.
 
 The overlay components (modal, right panel, bottom dialog and toaster) are controlled imperatively through the overlay object. Example:
 `overlay.showModal(options)`.
@@ -57,6 +58,7 @@ const MyApp = () => {
 }
 ```
 
+
 The Header and Menu in a layout are highly customizable. Check the code documentation for more details!
 
 ## Modal and right panel pitfalls

package/src/Layout.tsx

@@ -1,8 +1,8 @@
-import { TourProps, TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components/Tour'
 import { CSSToCitricAdapter, WithStyle, listToClass } from '@stack-spot/portal-theme'
 import '@stack-spot/portal-theme/dist/theme.css'
 import { ReactElement, ReactNode, useEffect } from 'react'
 import { overlay } from './LayoutOverlayManager'
+import { WelcomeTour } from './WelcomeTour'
 import { Header, HeaderProps } from './components/Header'
 import { Toaster } from './components/Toaster'
 import { ErrorBoundary } from './components/error/ErrorBoundary'
@@ -11,7 +11,6 @@ import { SilentErrorBoundary } from './components/error/SilentErrorBoundary'
 import { MenuContent } from './components/menu/MenuContent'
 import { MenuSections } from './components/menu/MenuSections'
 import { MenuProps } from './components/menu/types'
-import { usePortalSwitcherStep } from './components/tour/PortalSwitcherStep'
 import { elementIds, getLayoutElements } from './elements'
 import './layout.css'
 
@@ -40,10 +39,6 @@ interface Props extends WithStyle {
    * A function to run whenever an error is catch by an error boundary.
    */
   onError?: ErrorHandler,
-  /**
-   * The options for the React Tour's tutorial.
-   */
-  tourProps?: TourProps,
 }
 
 interface RawProps extends WithStyle {
@@ -75,10 +70,6 @@ interface RawProps extends WithStyle {
    * A function to run whenever an error is catch by an error boundary.
    */
   onError?: ErrorHandler,
-  /**
-   * The options for the React Tour's tutorial.
-   */
-  tourProps?: TourProps,
 }
 
 /**
@@ -86,7 +77,7 @@ interface RawProps extends WithStyle {
  * @param props the component's props {@link RawProps}.
  */
 export const RawLayout = (
-  { menuSections, menuContent, header, children, tourProps,
+  { menuSections, menuContent, header, children,
     extra, errorDescriptor, onError, className, style }:
     RawProps,
 ) => {
@@ -94,7 +85,6 @@ export const RawLayout = (
   const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
   const { layout } = getLayoutElements()
   const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
-  const portalSwitcherStep = usePortalSwitcherStep()
 
   const classes = [
     menuContent && !isCompactedOnlyIcons ? 'menu-content-visible' : undefined,
@@ -103,12 +93,6 @@ export const RawLayout = (
     isCompactedOnlyIcons ? 'menu-compact' : undefined,
   ]
 
-  const tourPropsWithDefaults = { ...defaultTourConfig, ...(tourProps || {}) }
-  tourPropsWithDefaults.steps = [
-    portalSwitcherStep,
-    ...tourPropsWithDefaults.steps,
-  ].filter(isNewTourStep)
-
   useEffect(() => {
     if (errorDescriptor) ErrorManager.setDescriptionFunction(errorDescriptor)
     if (onError) ErrorManager.setErrorHandler(onError)
@@ -116,28 +100,27 @@ export const RawLayout = (
 
   return (
     <CSSToCitricAdapter>
-      <TourProvider config={tourPropsWithDefaults} >
-        <div id={elementIds.layout} className={listToClass(classes)} style={style}>
-          {header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
-          {extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
-          <aside id={elementIds.menu}>
-            <nav role="menubar" id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
-            {menuSections &&
-              <nav role="menubar" id={elementIds.menuSections}><SilentErrorBoundary>{menuSections}</SilentErrorBoundary></nav>}
-          </aside>
-          {children && <div id={elementIds.page}>
-            <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>
-          </div>}
-          <div id={elementIds.bottomDialog} role="dialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
-          <div id={elementIds.backdrop}>
-            <div id={elementIds.rightPanel} aria-modal role="dialog"><ErrorBoundary>{rightPanel}</ErrorBoundary></div>
-            <div id={elementIds.modal} aria-modal role="dialog"><ErrorBoundary>{modal}</ErrorBoundary></div>
-          </div>
-          <Toaster />
-          <div id={elementIds.accessibilityAnnouncer} aria-atomic aria-live="assertive">
-          </div>
+      <WelcomeTour />
+      <div id={elementIds.layout} className={listToClass(classes)} style={style}>
+        {header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
+        {extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
+        <aside id={elementIds.menu}>
+          <nav role="menubar" id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
+          {menuSections &&
+            <nav role="menubar" id={elementIds.menuSections}><SilentErrorBoundary>{menuSections}</SilentErrorBoundary></nav>}
+        </aside>
+        {children && <div id={elementIds.page}>
+          <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>
+        </div>}
+        <div id={elementIds.bottomDialog} role="dialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
+        <div id={elementIds.backdrop}>
+          <div id={elementIds.rightPanel} aria-modal role="dialog"><ErrorBoundary>{rightPanel}</ErrorBoundary></div>
+          <div id={elementIds.modal} aria-modal role="dialog"><ErrorBoundary>{modal}</ErrorBoundary></div>
+        </div>
+        <Toaster />
+        <div id={elementIds.accessibilityAnnouncer} aria-atomic aria-live="assertive">
         </div>
-      </TourProvider>
+      </div>
     </CSSToCitricAdapter>
   )
 }
@@ -151,7 +134,7 @@ const MenuContentRenderer = ({ content }: Required<Pick<Props['menu'], 'content'
  * Renders the layout with a menu and header that follow the config objects passed as parameter.
  * @param props the component's props {@link Props}.
  */
-export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps }: Props) => (
+export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style }: Props) => (
   <RawLayout
     header={<Header {...header} />}
     menuSections={menu.sections ? <MenuSections {...menu} /> : undefined}
@@ -164,7 +147,6 @@ export const Layout = ({ menu, header, children, extra, errorDescriptor, onError
     extra={extra}
     className={className}
     style={style}
-    tourProps={tourProps}
   >
     {children}
   </RawLayout>

package/src/WelcomeTour.tsx

@@ -0,0 +1,8 @@
+import { WelcomeTour as WelcomeTourComponent, useTour } from './components/tour'
+
+export const WelcomeTour = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { currentStep, addStep, finishStep, ...tourConfig } = useTour()
+
+  return <WelcomeTourComponent {...tourConfig} />
+}

package/src/components/PortalSwitcher.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, IconBox, Text } from '@citric/core'
+import { Box, Button, Flex, IconBox, Image, Text } from '@citric/core'
 import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
 import { SelectionList } from '@stack-spot/portal-components/SelectionList'
 import { AI, EDP, HUB, Logo } from '@stack-spot/portal-components/svg'
@@ -7,6 +7,7 @@ import { useTranslate } from '@stack-spot/portal-translate'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components'
 import { announce } from '../utils'
+import { useTour } from './tour'
 import { PortalAcronym } from './types'
 
 const Logos: Record<PortalAcronym, ReactNode> = {
@@ -98,6 +99,7 @@ export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
   const [visible, setVisible] = useState<boolean>(false)
   const t = useTranslate(translations)
   const currentPortal = portals?.find(portal => location.href.startsWith(portal.url))
+  usePortalSwitcherTourStep()
 
   return <PortalSwitcherBox>
     {currentPortal ?
@@ -159,3 +161,42 @@ const translations = {
     selected: 'selecionado',
   },
 }
+
+
+/**
+ * Tutorial: a React hook for retrieving the React Tour step that explains how the portal switcher works. The portal switcher is a component
+ * at the top left corner of the layout (header) that allows the user to switch between the different Stackspot portals.
+ * @returns the React Tour step for the PortalSwitcher.
+ */
+export const usePortalSwitcherTourStep = () => {
+  const t = useTranslate(tourTranslations)
+  const { addStep } = useTour()
+
+  addStep({
+    selector: '.portal-switcher',
+    title: t.title,
+    content: <>
+      <Image src="https://marketing.stackspot.com/switch-v2.gif" alt={t.imageAlt} />
+      <Box px={5} py={3}>
+        <Text appearance="microtext1" colorScheme="inverse.contrastText">{t.description}</Text>
+      </Box>
+    </>,
+    position: 'right',
+    style: {
+      width: '300px',
+    },
+  })
+}
+
+const tourTranslations = {
+  en: {
+    title: 'Expand Your Horizons with Stackspot',
+    description: 'Easily switch between EDP and AI to enhance your projects. Access a wide range of resources with just one click and take your projects to a new level of efficiency. Start your journey now!',
+    imageAlt: 'GIF describing how to use product switcher and navigate between AI and EDP portals',
+  },
+  pt: {
+    title: 'Expanda Seus Horizontes com Stackspot',
+    description: 'Troque facilmente entre EDP e AI para aprimorar seus projetos. Acesse uma ampla gama de recursos com apenas um clique e leve seus projetos para um novo nível de eficiência. Comece sua jornada agora!',
+    imageAlt: 'GIF mostrando como usar o alternador de produtos e navegar entre os portais AI e EDP',
+  },
+}

package/src/components/error/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/ErrorFeedback'
+import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/error'
 import { Component } from 'react'
 import { ErrorManager } from './ErrorManager'
 

package/src/components/error/ErrorManager.ts

@@ -1,4 +1,4 @@
-import { ErrorDescription } from '@stack-spot/portal-components/ErrorFeedback'
+import { ErrorDescription } from '@stack-spot/portal-components/error'
 
 export type DescriptionFn = (error: any) => ErrorDescription
 export type ErrorHandler = (error: any) => void

package/src/components/error/SilentErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { ErrorDescription } from '@stack-spot/portal-components/ErrorFeedback'
+import { ErrorDescription } from '@stack-spot/portal-components/error'
 import { theme } from '@stack-spot/portal-theme'
 import { Component } from 'react'
 import { ErrorManager } from './ErrorManager'