@stack-spot/portal-components 0.0.16 → 0.0.17

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepContainer.js","sourceRoot":"","sources":["../../../src/components/tour/StepContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAmB,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAUnC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC5G,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,EAAE,CAAA;IAChC,OAAO,MAAC,oBAAoB,iBAAY,QAAQ,aAC9C,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,GAAI,EAC9D,QAAQ,EACT,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,KAAM,CAAC,gBAAgB,IAAI,EAAE,CAAC,GAAI,IAC7C,CAAA;AACzB,CAAC,CAAA;AAID,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAInC;;;sBAGkB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;;;;0BAQpB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;MAC5C,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC;IAClD;aACS,IAAI,IAAI,MAAM;;KAEtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC;IAClD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC;IACjD;aACS,IAAI,IAAI,MAAM;;;KAGtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC;IACrD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;;CAET,CAAA"}

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

@@ -0,0 +1,13 @@
+import '@stack-spot/portal-theme/dist/theme.css';
+type CustomNavigationButton = {
+    text: string;
+    onClick?: () => void;
+};
+export type NavigationProps = {
+    stepKey: string;
+    nextButton?: CustomNavigationButton;
+    prevButton?: CustomNavigationButton;
+};
+export declare const StepNavigation: ({ stepKey, nextButton, prevButton }: NavigationProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StepNavigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAA;AAKhD,KAAK,sBAAsB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAA;AACpE,MAAM,MAAM,eAAe,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,sBAAsB,CAAC;IAAC,UAAU,CAAC,EAAE,sBAAsB,CAAA;CAAE,CAAA;AAE3H,eAAO,MAAM,cAAc,wCAAyC,eAAe,4CAsBlF,CAAA"}

package/dist/components/tour/StepNavigation.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Button, Flex, Text } from '@citric/core';
+import '@stack-spot/portal-theme/dist/theme.css';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useTour } from './context.js';
+import { finishTourStep } from './utils.js';
+export const StepNavigation = ({ stepKey, nextButton, prevButton }) => {
+    const { currentStep, steps, nextStep, prevStep } = useTour();
+    const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } });
+    return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", children: [_jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep >= 1 &&
+                        _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
+                                prevStep?.();
+                                prevButton?.onClick?.();
+                            }, size: "sm", colorScheme: "light", children: prevButton?.text || t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
+                            nextButton?.onClick?.();
+                            nextStep?.();
+                            finishTourStep(stepKey);
+                        }, size: "sm", colorScheme: "light", children: nextButton?.text || 'ok' })] })] });
+};
+//# sourceMappingURL=StepNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepNavigation.js","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAKxC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAmB,EAAE,EAAE;IACrF,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAA;IAC5D,MAAM,CAAC,GAAG,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;IAC5F,OAAO,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,cAAc,EAAC,eAAe,aACzF,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,aAAE,WAAW,GAAG,CAAC,OAAG,CAAC,CAAC,EAAE,OAAG,KAAK,CAAC,MAAM,IAAQ,EAC/G,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,aACrB,WAAW,IAAI,CAAC;wBACf,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;gCACnD,QAAQ,EAAE,EAAE,CAAA;gCACZ,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,GACpB,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACvB,QAAQ,EAAE,EAAE,CAAA;4BACZ,cAAc,CAAC,OAAO,CAAC,CAAA;wBACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,IAAI,GAClB,IACJ,IACF,CAAA;AACT,CAAC,CAAA"}

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

@@ -0,0 +1,7 @@
+type StepTitleProps = {
+    title: string;
+    onClose?: () => void;
+};
+export declare const StepTitle: ({ title, onClose }: StepTitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StepTitle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepTitle.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":"AAGA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,uBAAwB,cAAc,4CAQnD,CAAA"}

package/dist/components/tour/StepTitle.js

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Button, Flex, IconBox, Text } from '@citric/core';
+import { TimesMini } from '@citric/icons';
+export const StepTitle = ({ title, onClose }) => _jsxs(Flex, { w: 12, pl: 5, py: 3, flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "body2", colorScheme: "inverse.contrastText", weight: "medium", children: [" ", title, " "] }), _jsx(Button, { appearance: "text", size: "sm", onClick: () => onClose?.(), sx: { ':hover': { borderColor: 'transparent !important' } }, children: _jsx(IconBox, { size: "xs", colorIcon: "inverse.contrastText", children: _jsx(TimesMini, {}) }) })] });
+//# sourceMappingURL=StepTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepTitle.js","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAOzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAkB,EAAE,EAAE,CAC9D,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC7F,MAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,kBAAG,KAAK,SAAS,EAC5F,KAAC,MAAM,IAAC,UAAU,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,wBAAwB,EAAE,EAAE,YACzH,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,YACjD,KAAC,SAAS,KAAG,GACL,GACH,IACJ,CAAA"}

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { ReactourProps } from 'reactour';
+type TourConfig = Omit<ReactourProps, 'children'>;
+export declare const defaultTourConfig: TourConfig;
+export declare const TourProvider: ({ config, children }: {
+    config: TourConfig;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTour: () => {
+    currentStep: number;
+    nextStep: (() => void) | undefined;
+    prevStep: (() => void) | undefined;
+    steps: import("reactour").ReactourStep[];
+    finishStep: (stepKey: string) => void;
+};
+export {};
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/tour/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuC,MAAM,OAAO,CAAA;AACtE,OAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG9C,KAAK,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AAEjD,eAAO,MAAM,iBAAiB,EAAE,UAU9B,CAAA;AAOF,eAAO,MAAM,YAAY;YAAoC,UAAU;cAAY,SAAS;6CAkB3F,CAAA;AAED,eAAO,MAAM,OAAO;;;;;0BAOM,MAAM;CAK/B,CAAA"}

package/dist/components/tour/context.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import Tour from 'reactour';
+import { finishTourStep } from './utils.js';
+export const defaultTourConfig = Object.freeze({
+    steps: [],
+    isOpen: true,
+    onRequestClose: () => '',
+    showButtons: false,
+    showNavigation: false,
+    showNavigationNumber: false,
+    showNumber: false,
+    showCloseButton: false,
+    disableFocusLock: true,
+});
+const TourContext = createContext({
+    tourConfig: defaultTourConfig,
+    currentStep: 0,
+});
+export const TourProvider = ({ config, children }) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const tourConfig = {
+        ...config,
+        goToStep: currentStep,
+        update: `${currentStep}`,
+        nextStep: () => setCurrentStep(currentStep + 1),
+        prevStep: () => setCurrentStep(currentStep - 1),
+        isOpen: !!config.steps.length && (currentStep < config.steps.length),
+    };
+    return _jsxs(TourContext.Provider, { value: {
+            currentStep,
+            tourConfig,
+        }, children: [_jsx(Tour, { ...tourConfig }), children] });
+};
+export const useTour = () => {
+    const { currentStep, tourConfig: { nextStep, prevStep, steps } } = useContext(TourContext);
+    return {
+        currentStep,
+        nextStep,
+        prevStep,
+        steps,
+        finishStep: (stepKey) => {
+            finishTourStep(stepKey);
+            nextStep?.();
+        },
+    };
+};
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/tour/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtE,OAAO,IAAuB,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAIxC,MAAM,CAAC,MAAM,iBAAiB,GAAe,MAAM,CAAC,MAAM,CAAC;IACzD,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,IAAI;IACZ,cAAc,EAAE,GAAG,EAAE,CAAC,EAAE;IACxB,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,KAAK;IACrB,oBAAoB,EAAE,KAAK;IAC3B,UAAU,EAAE,KAAK;IACjB,eAAe,EAAE,KAAK;IACtB,gBAAgB,EAAE,IAAI;CACvB,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,aAAa,CAAkD;IACjF,UAAU,EAAE,iBAAiB;IAC7B,WAAW,EAAE,CAAC;CACf,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAA+C,EAAE,EAAE;IAChG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IACzD,MAAM,UAAU,GAAe;QAC7B,GAAG,MAAM;QACT,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,GAAG,WAAW,EAAE;QACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC;QAC/C,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC;QAC/C,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;KACrE,CAAA;IAED,OAAO,MAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE;YAClC,WAAW;YACX,UAAU;SACX,aACC,KAAC,IAAI,OAAK,UAAU,GAAI,EACvB,QAAQ,IACY,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAC1F,OAAO;QACL,WAAW;QACX,QAAQ;QACR,QAAQ;QACR,KAAK;QACL,UAAU,EAAE,CAAC,OAAe,EAAE,EAAE;YAC9B,cAAc,CAAC,OAAO,CAAC,CAAA;YACvB,QAAQ,EAAE,EAAE,CAAA;QACd,CAAC;KACF,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,9 @@
+import { ReactourProps, ReactourStep } from 'reactour';
+export { StepContainer } from './StepContainer.js';
+export { TourProvider, defaultTourConfig, useTour } from './context.js';
+export { isNewTourStep, tourStepBuilder } from './utils.js';
+export { ReactourStep as TourStep };
+export type TourProps = Partial<Omit<ReactourProps, 'children'>> & {
+    steps: ReactourStep[];
+};
+//# sourceMappingURL=index.d.ts.map

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":"AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,EAAE,YAAY,IAAI,QAAQ,EAAE,CAAA;AACnC,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,CAAA"}

package/dist/components/tour/index.js

@@ -0,0 +1,4 @@
+export { StepContainer } from './StepContainer.js';
+export { TourProvider, defaultTourConfig, useTour } from './context.js';
+export { 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":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ReactourStep } from 'reactour';
+import { NavigationProps } from './StepNavigation.js';
+export declare const finishTourStep: (key: string) => void;
+export declare const isNewTourStep: (step: ReactourStep) => boolean;
+export declare const hasFinishedTourStep: (key: string) => boolean;
+export declare const tourStepBuilder: ({ selector, position, title, content, style, customNavigation, ...rest }: ReactourStep & {
+    title: string;
+    selector: string;
+    content: ReactNode;
+    customNavigation?: NavigationProps | undefined;
+}) => 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":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAyBlD,eAAO,MAAM,cAAc,QAAS,MAAM,SAIzC,CAAA;AAED,eAAO,MAAM,aAAa,SAAU,YAAY,YAA6C,CAAA;AAC7F,eAAO,MAAM,mBAAmB,QAAS,MAAM,YAAkC,CAAA;AAEjF,eAAO,MAAM,eAAe;WAQD,MAAM;cAAY,MAAM;aAAW,SAAS;;MAAyC,YAkB9G,CAAA"}

package/dist/components/tour/utils.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { theme } from '@stack-spot/portal-theme';
+import { StepContainer } from './StepContainer.js';
+const TOUR_COOKIE = 'guided-tour-global';
+const DOMAIN_REGEX = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/);
+const portalUrl = new URL(location.href);
+const cookieDomain = DOMAIN_REGEX.exec(portalUrl.host)?.[0];
+const defaultCookieAttributes = `domain=${cookieDomain}; SameSite=Strict;`;
+const getCookies = () => document.cookie.split('; ').reduce((prev, current) => {
+    const [name, ...value] = current.split('=');
+    prev[name] = value.join('=');
+    return prev;
+}, {});
+const setCookie = (key, value) => {
+    document.cookie = `${key}=${value}; ${defaultCookieAttributes}`;
+};
+const getCookie = (key) => getCookies()[key];
+const getTourCookie = () => {
+    const currentTourObject = getCookie(TOUR_COOKIE);
+    return currentTourObject ? currentTourObject.split(',') : [];
+};
+export const finishTourStep = (key) => {
+    const tourObject = getTourCookie();
+    if (!tourObject.includes(key))
+        tourObject.push(key);
+    setCookie(TOUR_COOKIE, tourObject.toString());
+};
+export const isNewTourStep = (step) => !hasFinishedTourStep(`${step.selector}`);
+export const hasFinishedTourStep = (key) => getTourCookie().includes(key);
+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":"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"}

package/dist/hooks/service-now.js.map

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

package/dist/hooks/use-effect-once.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-effect-once.js","sourceRoot":"","sources":["../../src/hooks/use-effect-once.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEnD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAiC,EAAE,EAAE;IACjE,MAAM,QAAQ,GAAG,MAAM,CAA4B,MAAM,CAAC,CAAA;IAC1D,MAAM,SAAS,GAAG,MAAM,EAAuB,CAAA;IAC/C,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAClC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAEtC,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;QACzB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAA;IACzB,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,4CAA4C;QAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YAC1B,SAAS,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAA;YACtC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAA;QAC7B,CAAC;QAED,iDAAiD;QACjD,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAA;QAExB,OAAO,GAAG,EAAE;YACV,4DAA4D;YAC5D,qCAAqC;YACrC,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE,OAAM;YAE7B,kEAAkE;YAClE,IAAI,SAAS,CAAC,OAAO;gBAAE,SAAS,CAAC,OAAO,EAAE,CAAA;QAC5C,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC,CAAA"}
+{"version":3,"file":"use-effect-once.js","sourceRoot":"","sources":["../../src/hooks/use-effect-once.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEnD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAiC,EAAE,EAAE;IACjE,MAAM,QAAQ,GAAG,MAAM,CAA4B,MAAM,CAAC,CAAA;IAC1D,MAAM,SAAS,GAAG,MAAM,EAAuB,CAAA;IAC/C,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAClC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAEtC,IAAI,YAAY,CAAC,OAAO,EAAE;QACxB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAA;KACxB;IAED,SAAS,CAAC,GAAG,EAAE;QACb,4CAA4C;QAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YACzB,SAAS,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAA;YACtC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAA;SAC5B;QAED,iDAAiD;QACjD,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAA;QAExB,OAAO,GAAG,EAAE;YACV,4DAA4D;YAC5D,qCAAqC;YACrC,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE,OAAM;YAE7B,kEAAkE;YAClE,IAAI,SAAS,CAAC,OAAO;gBAAE,SAAS,CAAC,OAAO,EAAE,CAAA;QAC5C,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC,CAAA"}

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { BannerWarning } from './components/BannerWarning.js';
 export { BreadcrumbList } from './components/Breadcrumb/index.js';
 export { ChatBot } from './components/ChatBot.js';
 export { Login } from './components/Login.js';
+export * from './components/tour/index.js';
 export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect, } from './hooks/service-now.js';
 export { titleEffect, useTitleEffect } from './hooks/title.js';
 export { useEffectOnce } from './hooks/use-effect-once.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,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EACL,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,GAC/G,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,OAAO,EACL,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,GAC/G,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/index.js

@@ -2,6 +2,7 @@ export { BannerWarning } from './components/BannerWarning.js';
 export { BreadcrumbList } from './components/Breadcrumb/index.js';
 export { ChatBot } from './components/ChatBot.js';
 export { Login } from './components/Login.js';
+export * from './components/tour/index.js';
 export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect, } from './hooks/service-now.js';
 export { titleEffect, useTitleEffect } from './hooks/title.js';
 export { useEffectOnce } from './hooks/use-effect-once.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EACL,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,GAC/G,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,OAAO,EACL,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,GAC/G,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/layout/src/components/tour/PortalSwitcherStep.d.ts

@@ -0,0 +1,2 @@
+export declare const usePortalSwitcherStep: () => any;
+//# sourceMappingURL=PortalSwitcherStep.d.ts.map

package/dist/layout/src/components/tour/PortalSwitcherStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalSwitcherStep.d.ts","sourceRoot":"","sources":["../../../../../../layout/src/components/tour/PortalSwitcherStep.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,WAgBjC,CAAA"}

package/dist/layout/src/components/tour/PortalSwitcherStep.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+//@ts-nocheck
+import { Box, Image, Text } from '@citric/core';
+import { tourStepBuilder } from '@stack-spot/portal-components';
+import { useTranslate } from '@stack-spot/portal-translate';
+export const usePortalSwitcherStep = () => {
+    const t = useTranslate(translations);
+    return tourStepBuilder({
+        selector: '.portal-switcher',
+        title: t.title,
+        content: _jsxs(_Fragment, { children: [_jsx(Image, { src: "https://marketing.stackspot.com/switch-v2.gif", alt: t.imageAlt }), _jsx(Box, { px: 5, py: 3, children: _jsx(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: t.description }) })] }),
+        position: 'right',
+        style: {
+            width: '300px',
+        },
+    });
+};
+const translations = {
+    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',
+    },
+};
+//# sourceMappingURL=PortalSwitcherStep.js.map

package/dist/layout/src/components/tour/PortalSwitcherStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalSwitcherStep.js","sourceRoot":"","sources":["../../../../../../layout/src/components/tour/PortalSwitcherStep.tsx"],"names":[],"mappings":";AAAA,aAAa;AACb,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IACpC,OAAO,eAAe,CAAC;QACrB,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,OAAO,EAAE,8BACP,KAAC,KAAK,IAAC,GAAG,EAAC,+CAA+C,EAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,GAAI,EAC9E,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YACf,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,YAAE,CAAC,CAAC,WAAW,GAAQ,GACnF,IACL;QACH,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE;YACL,KAAK,EAAE,OAAO;SACf;KACF,CAAC,CAAA;AACJ,CAAC,CAAA;AAKD,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE;QACF,KAAK,EAAE,qCAAqC;QAC5C,WAAW,EAAE,8LAA8L;QAC3M,QAAQ,EAAE,oFAAoF;KAC/F;IACD,EAAE,EAAE;QACF,KAAK,EAAE,uCAAuC;QAC9C,WAAW,EAAE,wMAAwM;QACrN,QAAQ,EAAE,sFAAsF;KACjG;CACF,CAAA"}

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && tsc-esm-fix --target='dist'",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
   "peerDependencies": {
     "@citric/core": ">=6.0.0",
     "@citric/icons": ">=5.4.0",
@@ -15,11 +19,12 @@
     "styled-components": ">=6.1.10"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@types/reactour": "^1.18.5",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
-    "@types/lodash": "^4.14.202",
     "eslint": "^8.53.0",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.29.0",
@@ -32,11 +37,8 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "react-toastify": "^9.1.3",
-    "lodash": "^4.17.21"
-  },
-  "scripts": {
-    "build": "tsc && tsc-esm-fix --target='dist'",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "reactour": "^1.19.3"
   }
 }

package/src/components/tour/StepContainer.tsx

@@ -0,0 +1,67 @@
+import { theme } from '@stack-spot/portal-theme'
+import { ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { NavigationProps, StepNavigation } from './StepNavigation'
+import { StepTitle } from './StepTitle'
+import { useTour } from './context'
+
+interface StepContainerProps {
+  children: ReactNode,
+  stepKey: string,
+  title: string,
+  position: PointingArrowPosition,
+  customNavigation?: Omit<NavigationProps, 'stepKey'>,
+}
+
+export const StepContainer = ({ title, stepKey, customNavigation, position, children }: StepContainerProps) => {
+  const { finishStep } = useTour()
+  return <BoxWithPointingArrow $position={position}>
+    <StepTitle title={title} onClose={() => finishStep(stepKey)} />
+    {children}
+    <StepNavigation stepKey={stepKey} {...(customNavigation || {})} />
+  </BoxWithPointingArrow>
+}
+
+export type PointingArrowPosition = 'right' | 'top' | 'left' | 'bottom'
+
+const BoxWithPointingArrow = styled.div < {
+  $position: PointingArrowPosition,
+  $top?: string,
+  $right?: string,
+} > `
+  position: relative;
+  width: 100%;
+  background-color: ${theme.color.inverse[500]};
+  &::after {
+    content: '';
+    position: absolute;
+    border-width: 10px;
+    border-style: solid;
+    border-color: transparent;
+    margin-top: -5px;
+    border-right-color: ${theme.color.inverse[500]};
+    ${({ $position, $top }) => $position === 'right' ?
+    `
+      top: ${$top || '16px'};
+      left: -18px;
+    ` : ''}
+    ${({ $position, $right }) => $position === 'top' ?
+    `
+    bottom: 96%;
+    right: ${$right || '16px'};
+    transform: rotate(90deg);
+    ` : ''}
+    ${({ $position, $top }) => $position === 'left' ?
+    `
+      top: ${$top || '16px'};
+      right: -18px;
+      transform: rotate(180deg);
+    ` : ''}
+    ${({ $position, $right }) => $position === 'bottom' ?
+    `
+    top: -13px;
+    right: ${$right || '16px'};
+    transform: rotate(90deg);
+    ` : ''}
+  }
+`

package/src/components/tour/StepNavigation.tsx

@@ -0,0 +1,32 @@
+import { Button, Flex, Text } from '@citric/core'
+import '@stack-spot/portal-theme/dist/theme.css'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { useTour } from './context'
+import { finishTourStep } from './utils'
+
+type CustomNavigationButton = { text: string, onClick?: () => void }
+export type NavigationProps = { stepKey: string, nextButton?: CustomNavigationButton, prevButton?: CustomNavigationButton }
+
+export const StepNavigation = ({ stepKey, nextButton, prevButton }: NavigationProps) => {
+  const { currentStep, steps, nextStep, prevStep } = useTour()
+  const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } })
+  return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between">
+    <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
+    <Flex sx={{ gap: '8px' }}>
+      {currentStep >= 1 &&
+        <Button sx={{ paddingInline: '20px' }} onClick={() => {
+          prevStep?.()
+          prevButton?.onClick?.()
+        }} size="sm" colorScheme="light">
+          {prevButton?.text || t.back}
+        </Button>}
+      <Button sx={{ paddingInline: '20px' }} onClick={() => {
+        nextButton?.onClick?.()
+        nextStep?.()
+        finishTourStep(stepKey)
+      }} size="sm" colorScheme="light">
+        {nextButton?.text || 'ok'}
+      </Button>
+    </Flex>
+  </Flex>
+}

package/src/components/tour/StepTitle.tsx

@@ -0,0 +1,17 @@
+import { Button, Flex, IconBox, Text } from '@citric/core'
+import { TimesMini } from '@citric/icons'
+
+type StepTitleProps = {
+  title: string,
+  onClose?: () => void,
+}
+
+export const StepTitle = ({ title, onClose }: StepTitleProps) =>
+  <Flex w={12} pl={5} py={3} flexWrap="nowrap" justifyContent="space-between" alignItems="center">
+    <Text appearance="body2" colorScheme="inverse.contrastText" weight="medium"> {title} </Text>
+    <Button appearance="text" size="sm" onClick={() => onClose?.()} sx={{ ':hover': { borderColor: 'transparent !important' } }}>
+      <IconBox size="xs" colorIcon="inverse.contrastText">
+        <TimesMini />
+      </IconBox>
+    </Button>
+  </Flex>

package/src/components/tour/context.tsx

@@ -0,0 +1,56 @@
+import { ReactNode, createContext, useContext, useState } from 'react'
+import Tour, { ReactourProps } from 'reactour'
+import { finishTourStep } from './utils'
+
+type TourConfig = Omit<ReactourProps, 'children'>
+
+export const defaultTourConfig: TourConfig = Object.freeze({
+  steps: [],
+  isOpen: true,
+  onRequestClose: () => '',
+  showButtons: false,
+  showNavigation: false,
+  showNavigationNumber: false,
+  showNumber: false,
+  showCloseButton: false,
+  disableFocusLock: true,
+})
+
+const TourContext = createContext<{ tourConfig: TourConfig, currentStep: number }>({
+  tourConfig: defaultTourConfig,
+  currentStep: 0,
+})
+
+export const TourProvider = ({ config, children }: { config: TourConfig, children: ReactNode }) => {
+  const [currentStep, setCurrentStep] = useState<number>(0)
+  const tourConfig: TourConfig = {
+    ...config,
+    goToStep: currentStep,
+    update: `${currentStep}`,
+    nextStep: () => setCurrentStep(currentStep + 1),
+    prevStep: () => setCurrentStep(currentStep - 1),
+    isOpen: !!config.steps.length && (currentStep < config.steps.length),
+  }
+
+  return <TourContext.Provider value={{
+    currentStep,
+    tourConfig,
+  }}>
+    <Tour {...tourConfig} />
+    {children}
+  </TourContext.Provider>
+}
+
+export const useTour = () => {
+  const { currentStep, tourConfig: { nextStep, prevStep, steps } } = useContext(TourContext)
+  return {
+    currentStep,
+    nextStep,
+    prevStep,
+    steps,
+    finishStep: (stepKey: string) => {
+      finishTourStep(stepKey)
+      nextStep?.()
+    },
+  }
+}

package/src/components/tour/index.ts

@@ -0,0 +1,7 @@
+import { ReactourProps, ReactourStep } from 'reactour'
+
+export { StepContainer } from './StepContainer'
+export { TourProvider, defaultTourConfig, useTour } from './context'
+export { isNewTourStep, tourStepBuilder } from './utils'
+export { ReactourStep as TourStep }
+export type TourProps = Partial<Omit<ReactourProps, 'children'>> & { steps: ReactourStep[] }