@homefile/components-v2 1.0.2 → 1.0.4

package/dist/components/tour/HomeBoardTour.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HomeBoardTour = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var i18next_1 = require("i18next");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var utils_1 = require("../../utils");
-var HomeBoardTour = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    var _v = _a.currentStep, currentStep = _v === void 0 ? 'homeboard' : _v, _w = _a.bubbleWidth, bubbleWidth = _w === void 0 ? '300px' : _w, handleClose = _a.handleClose, handleStep = _a.handleStep, meetStepUrl = _a.meetStepUrl, _x = _a.isActive, isActive = _x === void 0 ? false : _x;
-    var _y = (0, react_1.useState)(0), counter = _y[0], setCounter = _y[1];
-    var componentIds = [
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { t } from 'i18next';
+import { Bubble, BubbleText, MeetStep } from '..';
+import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { appBarHeight, arrowSize, distanceFromEdgeArrowToBorder, firstBubbleHeight, firstBubbleWidth, getDistanceFromArrow, getMiddleAnchorPosition, getXPosition, getYPosition, } from '../../utils';
+export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px', handleClose, handleStep, meetStepUrl, isActive = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const [counter, setCounter] = useState(0);
+    const componentIds = [
         'backToLaunchpad',
         'editHomeIcon',
         'addFolders',
@@ -25,139 +21,138 @@ var HomeBoardTour = function (_a) {
         'viewReceipts',
         'addCatalog',
     ];
-    var coordinates = (0, hooks_1.useComponentCoordinates)(componentIds).coordinates;
-    (0, hooks_1.useComponentStyles)(componentIds, currentStep);
-    var _z = (0, hooks_1.useWindowDimensions)().windowDimensions, width = _z.width, height = _z.height;
-    var parsedBubbleWidth = Number(bubbleWidth.replace('px', ''));
-    var panelBubbleArrowSize = 500 + parsedBubbleWidth + utils_1.arrowSize;
-    var halfBubbleWidth = parsedBubbleWidth / 2;
-    var bubbleArrowWidth = parsedBubbleWidth + utils_1.arrowSize + 30;
-    var steps = {
+    const { coordinates } = useComponentCoordinates(componentIds);
+    useComponentStyles(componentIds, currentStep);
+    const { windowDimensions: { width, height }, } = useWindowDimensions();
+    const parsedBubbleWidth = Number(bubbleWidth.replace('px', ''));
+    const panelBubbleArrowSize = 500 + parsedBubbleWidth + arrowSize;
+    const halfBubbleWidth = parsedBubbleWidth / 2;
+    const bubbleArrowWidth = parsedBubbleWidth + arrowSize + 30;
+    const steps = {
         homeboard: {
             arrowBottom: 'bottom',
             arrowLeft: 'left',
             arrowRight: 'right',
             arrowTop: 'top',
-            leftRef: (0, utils_1.getMiddleAnchorPosition)(width, utils_1.firstBubbleWidth),
-            topRef: (0, utils_1.getMiddleAnchorPosition)(height, utils_1.firstBubbleHeight),
+            leftRef: getMiddleAnchorPosition(width, firstBubbleWidth),
+            topRef: getMiddleAnchorPosition(height, firstBubbleHeight),
             hideFooter: true,
             hideHeader: true,
-            component: ((0, jsx_runtime_1.jsx)(components_1.MeetStep, { description: (0, i18next_1.t)('tour.steps.meet.homeboardDescription'), nextButtonLabel: (0, i18next_1.t)('tour.steps.meet.homeboardLabel'), onClick: function () { return setCounter(counter + 1); }, onSkip: handleClose, title: (0, i18next_1.t)('tour.steps.meet.homeboardTitle'), tutorialUrl: meetStepUrl })),
+            component: (_jsx(MeetStep, { description: t('tour.steps.meet.homeboardDescription'), nextButtonLabel: t('tour.steps.meet.homeboardLabel'), onClick: () => setCounter(counter + 1), onSkip: handleClose, title: t('tour.steps.meet.homeboardTitle'), tutorialUrl: meetStepUrl })),
         },
         // Reference component id -> HomeBoard/HomeHeader
         backToLaunchpad: {
             arrowLeft: 'left-top',
-            leftRef: ((_b = coordinates.backToLaunchpad) === null || _b === void 0 ? void 0 : _b.x) + (0, utils_1.getDistanceFromArrow)(36),
-            topRef: (0, utils_1.getYPosition)((_c = coordinates.backToLaunchpad) === null || _c === void 0 ? void 0 : _c.y, utils_1.distanceFromEdgeArrowToBorder),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.backToLaunchpad.title'), description: (0, i18next_1.t)('tour.steps.backToLaunchpad.description') })),
+            leftRef: ((_a = coordinates.backToLaunchpad) === null || _a === void 0 ? void 0 : _a.x) + getDistanceFromArrow(36),
+            topRef: getYPosition((_b = coordinates.backToLaunchpad) === null || _b === void 0 ? void 0 : _b.y, distanceFromEdgeArrowToBorder),
+            component: (_jsx(BubbleText, { title: t('tour.steps.backToLaunchpad.title'), description: t('tour.steps.backToLaunchpad.description') })),
         },
         // Reference component id -> HomeBoard/HomeCard
         editHomeIcon: {
             arrowLeft: 'left-top',
-            leftRef: ((_d = coordinates.editHomeIcon) === null || _d === void 0 ? void 0 : _d.x) + (0, utils_1.getDistanceFromArrow)(30),
-            topRef: (0, utils_1.getYPosition)((_e = coordinates.editHomeIcon) === null || _e === void 0 ? void 0 : _e.y, utils_1.distanceFromEdgeArrowToBorder),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.editHomeIcon.title'), description: (0, i18next_1.t)('tour.steps.editHomeIcon.description') })),
+            leftRef: ((_c = coordinates.editHomeIcon) === null || _c === void 0 ? void 0 : _c.x) + getDistanceFromArrow(30),
+            topRef: getYPosition((_d = coordinates.editHomeIcon) === null || _d === void 0 ? void 0 : _d.y, distanceFromEdgeArrowToBorder),
+            component: (_jsx(BubbleText, { title: t('tour.steps.editHomeIcon.title'), description: t('tour.steps.editHomeIcon.description') })),
         },
         // Reference component id -> FolderSharing/FolderSharing
         addFolders: {
             arrowRight: 'right-top',
-            leftRef: ((_f = coordinates.addFolders) === null || _f === void 0 ? void 0 : _f.x) - bubbleArrowWidth,
-            topRef: (0, utils_1.getYPosition)((_g = coordinates.addFolders) === null || _g === void 0 ? void 0 : _g.y, utils_1.distanceFromEdgeArrowToBorder),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.addFolders.title'), description: (0, i18next_1.t)('tour.steps.addFolders.description') })),
+            leftRef: ((_e = coordinates.addFolders) === null || _e === void 0 ? void 0 : _e.x) - bubbleArrowWidth,
+            topRef: getYPosition((_f = coordinates.addFolders) === null || _f === void 0 ? void 0 : _f.y, distanceFromEdgeArrowToBorder),
+            component: (_jsx(BubbleText, { title: t('tour.steps.addFolders.title'), description: t('tour.steps.addFolders.description') })),
         },
         nameFolder: {
             arrowRight: 'right-top',
-            leftRef: (0, utils_1.getXPosition)(width, panelBubbleArrowSize),
-            topRef: (0, utils_1.getYPosition)(height, height - 16),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.nameFolder.title'), description: (0, i18next_1.t)('tour.steps.nameFolder.description') })),
+            leftRef: getXPosition(width, panelBubbleArrowSize),
+            topRef: getYPosition(height, height - 16),
+            component: (_jsx(BubbleText, { title: t('tour.steps.nameFolder.title'), description: t('tour.steps.nameFolder.description') })),
         },
         addFiles: {
             arrowRight: 'right-top',
-            leftRef: (0, utils_1.getXPosition)(width, panelBubbleArrowSize),
-            topRef: (0, utils_1.getYPosition)(height, height - 290),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.addFiles.title'), description: (0, i18next_1.t)('tour.steps.addFiles.description') })),
+            leftRef: getXPosition(width, panelBubbleArrowSize),
+            topRef: getYPosition(height, height - 290),
+            component: (_jsx(BubbleText, { title: t('tour.steps.addFiles.title'), description: t('tour.steps.addFiles.description') })),
         },
         editFile: {
             arrowRight: 'right-top',
-            leftRef: (0, utils_1.getXPosition)(width, panelBubbleArrowSize - 80),
-            topRef: (0, utils_1.getYPosition)(height, height - 360),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.editFile.title'), description: (0, i18next_1.t)('tour.steps.editFile.description') })),
+            leftRef: getXPosition(width, panelBubbleArrowSize - 80),
+            topRef: getYPosition(height, height - 360),
+            component: (_jsx(BubbleText, { title: t('tour.steps.editFile.title'), description: t('tour.steps.editFile.description') })),
         },
         // Reference component id -> appBar/PeopleConnected
         shareWithOthers: {
             arrowTop: 'top',
-            leftRef: (0, utils_1.getXPosition)(((_h = coordinates.shareWithOthers) === null || _h === void 0 ? void 0 : _h.x) + 25, halfBubbleWidth),
-            topRef: ((_j = coordinates.shareWithOthers) === null || _j === void 0 ? void 0 : _j.y) + utils_1.appBarHeight,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.shareWithOthers.title'), description: (0, i18next_1.t)('tour.steps.shareWithOthers.description') })),
+            leftRef: getXPosition(((_g = coordinates.shareWithOthers) === null || _g === void 0 ? void 0 : _g.x) + 25, halfBubbleWidth),
+            topRef: ((_h = coordinates.shareWithOthers) === null || _h === void 0 ? void 0 : _h.y) + appBarHeight,
+            component: (_jsx(BubbleText, { title: t('tour.steps.shareWithOthers.title'), description: t('tour.steps.shareWithOthers.description') })),
         },
         // Reference component id -> appBar/ContactList
         viewContacts: {
             arrowTop: 'top',
-            leftRef: (0, utils_1.getXPosition)(((_k = coordinates.viewContacts) === null || _k === void 0 ? void 0 : _k.x) + 28, halfBubbleWidth),
-            topRef: ((_l = coordinates.shareWithOthers) === null || _l === void 0 ? void 0 : _l.y) + utils_1.appBarHeight,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.viewContacts.title'), description: (0, i18next_1.t)('tour.steps.viewContacts.description') })),
+            leftRef: getXPosition(((_j = coordinates.viewContacts) === null || _j === void 0 ? void 0 : _j.x) + 28, halfBubbleWidth),
+            topRef: ((_k = coordinates.shareWithOthers) === null || _k === void 0 ? void 0 : _k.y) + appBarHeight,
+            component: (_jsx(BubbleText, { title: t('tour.steps.viewContacts.title'), description: t('tour.steps.viewContacts.description') })),
         },
         // Reference component id -> appBar/TutorialsButton
         feedback: {
             arrowTop: 'top',
-            leftRef: (0, utils_1.getXPosition)(((_m = coordinates.feedback) === null || _m === void 0 ? void 0 : _m.x) + 14, halfBubbleWidth),
-            topRef: ((_o = coordinates.feedback) === null || _o === void 0 ? void 0 : _o.y) + utils_1.appBarHeight,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.feedback.title'), description: (0, i18next_1.t)('tour.steps.feedback.description') })),
+            leftRef: getXPosition(((_l = coordinates.feedback) === null || _l === void 0 ? void 0 : _l.x) + 14, halfBubbleWidth),
+            topRef: ((_m = coordinates.feedback) === null || _m === void 0 ? void 0 : _m.y) + appBarHeight,
+            component: (_jsx(BubbleText, { title: t('tour.steps.feedback.title'), description: t('tour.steps.feedback.description') })),
         },
         // Reference component id -> appBar/StorageUsed
         storageUsed: {
             arrowTop: 'top',
-            leftRef: (0, utils_1.getXPosition)(((_p = coordinates.storageUsed) === null || _p === void 0 ? void 0 : _p.x) + 30, halfBubbleWidth),
-            topRef: ((_q = coordinates.shareWithOthers) === null || _q === void 0 ? void 0 : _q.y) + utils_1.appBarHeight,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.storageUsed.title'), description: (0, i18next_1.t)('tour.steps.storageUsed.description') })),
+            leftRef: getXPosition(((_o = coordinates.storageUsed) === null || _o === void 0 ? void 0 : _o.x) + 30, halfBubbleWidth),
+            topRef: ((_p = coordinates.shareWithOthers) === null || _p === void 0 ? void 0 : _p.y) + appBarHeight,
+            component: (_jsx(BubbleText, { title: t('tour.steps.storageUsed.title'), description: t('tour.steps.storageUsed.description') })),
         },
         // Reference component id -> appBar/UserProfile
         profile: {
             arrowTop: 'top-right',
-            leftRef: (0, utils_1.getXPosition)(((_r = coordinates.profile) === null || _r === void 0 ? void 0 : _r.x) + 20, parsedBubbleWidth),
-            topRef: ((_s = coordinates.shareWithOthers) === null || _s === void 0 ? void 0 : _s.y) + utils_1.appBarHeight,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.profile.title'), description: (0, i18next_1.t)('tour.steps.profile.description') })),
+            leftRef: getXPosition(((_q = coordinates.profile) === null || _q === void 0 ? void 0 : _q.x) + 20, parsedBubbleWidth),
+            topRef: ((_r = coordinates.shareWithOthers) === null || _r === void 0 ? void 0 : _r.y) + appBarHeight,
+            component: (_jsx(BubbleText, { title: t('tour.steps.profile.title'), description: t('tour.steps.profile.description') })),
         },
         // Reference component id -> receipts/autofiler/AutofilerHeader
         forwardReceipts: {
-            leftRef: (0, utils_1.getMiddleAnchorPosition)(width, parsedBubbleWidth),
-            topRef: (0, utils_1.getMiddleAnchorPosition)(height, 215),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.forwardReceipts.title'), description: (0, i18next_1.t)('tour.steps.forwardReceipts.description') })),
+            leftRef: getMiddleAnchorPosition(width, parsedBubbleWidth),
+            topRef: getMiddleAnchorPosition(height, 215),
+            component: (_jsx(BubbleText, { title: t('tour.steps.forwardReceipts.title'), description: t('tour.steps.forwardReceipts.description') })),
         },
         // Reference component id -> receipts/autofiler/ReceiptAutofiler
         viewReceipts: {
-            leftRef: (0, utils_1.getMiddleAnchorPosition)(width, parsedBubbleWidth),
-            topRef: (0, utils_1.getMiddleAnchorPosition)(height, 215),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.viewReceipts.title'), description: (0, i18next_1.t)('tour.steps.viewReceipts.description') })),
+            leftRef: getMiddleAnchorPosition(width, parsedBubbleWidth),
+            topRef: getMiddleAnchorPosition(height, 215),
+            component: (_jsx(BubbleText, { title: t('tour.steps.viewReceipts.title'), description: t('tour.steps.viewReceipts.description') })),
         },
         // Reference component id -> appBar/ContactList
         addCatalog: {
             arrowRight: 'right-top',
-            leftRef: (0, utils_1.getXPosition)(((_t = coordinates.viewContacts) === null || _t === void 0 ? void 0 : _t.x) + 28, halfBubbleWidth),
-            topRef: ((_u = coordinates.viewContacts) === null || _u === void 0 ? void 0 : _u.y) + 40,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.addCatalog.title'), description: (0, i18next_1.t)('tour.steps.addCatalog.description') })),
+            leftRef: getXPosition(((_s = coordinates.viewContacts) === null || _s === void 0 ? void 0 : _s.x) + 28, halfBubbleWidth),
+            topRef: ((_t = coordinates.viewContacts) === null || _t === void 0 ? void 0 : _t.y) + 40,
+            component: (_jsx(BubbleText, { title: t('tour.steps.addCatalog.title'), description: t('tour.steps.addCatalog.description') })),
         },
         partnerCatalog: {
             arrowRight: 'right-top',
-            leftRef: (0, utils_1.getXPosition)(width, panelBubbleArrowSize + 200),
-            topRef: (0, utils_1.getYPosition)(height, height - 300),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.partnerCatalog.title'), description: (0, i18next_1.t)('tour.steps.partnerCatalog.description') })),
+            leftRef: getXPosition(width, panelBubbleArrowSize + 200),
+            topRef: getYPosition(height, height - 300),
+            component: (_jsx(BubbleText, { title: t('tour.steps.partnerCatalog.title'), description: t('tour.steps.partnerCatalog.description') })),
         },
         addHouseholdItem: {
             arrowRight: 'right-top',
-            leftRef: (0, utils_1.getXPosition)(width, panelBubbleArrowSize + 30),
-            topRef: (0, utils_1.getYPosition)(height, height - 100),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.addHouseholdItem.title'), description: (0, i18next_1.t)('tour.steps.addHouseholdItem.description') })),
+            leftRef: getXPosition(width, panelBubbleArrowSize + 30),
+            topRef: getYPosition(height, height - 100),
+            component: (_jsx(BubbleText, { title: t('tour.steps.addHouseholdItem.title'), description: t('tour.steps.addHouseholdItem.description') })),
         },
         customizeItems: {
             arrowRight: 'right-top',
-            leftRef: (0, utils_1.getXPosition)(width, panelBubbleArrowSize + 30),
-            topRef: (0, utils_1.getYPosition)(height, height - 400),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.customizeItems.title'), description: (0, i18next_1.t)('tour.steps.customizeItems.description') })),
+            leftRef: getXPosition(width, panelBubbleArrowSize + 30),
+            topRef: getYPosition(height, height - 400),
+            component: (_jsx(BubbleText, { title: t('tour.steps.customizeItems.title'), description: t('tour.steps.customizeItems.description') })),
         },
     };
     if (!isActive)
         return null;
-    return ((0, jsx_runtime_1.jsx)(components_1.Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
+    return (_jsx(Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
 };
-exports.HomeBoardTour = HomeBoardTour;

package/dist/components/tour/LaunchpadTour.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LaunchpadTour = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var i18next_1 = require("i18next");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var utils_1 = require("../../utils");
-var LaunchpadTour = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    var _v = _a.currentStep, currentStep = _v === void 0 ? 'launchpad' : _v, handleStep = _a.handleStep, handleClose = _a.handleClose, meetStepUrl = _a.meetStepUrl, _w = _a.isActive, isActive = _w === void 0 ? false : _w;
-    var _x = (0, react_1.useState)(0), counter = _x[0], setCounter = _x[1];
-    var componentIds = [
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { t } from 'i18next';
+import { Bubble, BubbleText, HelpIconStep, MeetStep } from '..';
+import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { appBarHeight, getDistanceFromArrow, getMiddleAnchorPosition, getXPosition, getYPosition, firstBubbleHeight, firstBubbleWidth, } from '../../utils';
+export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClose, meetStepUrl, isActive = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const [counter, setCounter] = useState(0);
+    const componentIds = [
         'addHomeButton',
         'assignReceipts',
         'homeCard',
@@ -23,90 +19,90 @@ var LaunchpadTour = function (_a) {
         'viewHome',
         'forwardReceipts',
     ];
-    var coordinates = (0, hooks_1.useComponentCoordinates)(componentIds).coordinates;
-    (0, hooks_1.useComponentStyles)(componentIds, currentStep);
-    var _y = (0, hooks_1.useWindowDimensions)().windowDimensions, width = _y.width, height = _y.height;
-    var cardSize = 220;
-    var steps = {
+    const { coordinates } = useComponentCoordinates(componentIds);
+    useComponentStyles(componentIds, currentStep);
+    const { windowDimensions: { width, height }, } = useWindowDimensions();
+    const cardSize = 220;
+    const steps = {
         launchpad: {
             arrowBottom: 'bottom',
             arrowLeft: 'left',
             arrowRight: 'right',
             arrowTop: 'top',
-            leftRef: (0, utils_1.getMiddleAnchorPosition)(width, utils_1.firstBubbleWidth),
-            topRef: (0, utils_1.getMiddleAnchorPosition)(height, utils_1.firstBubbleHeight),
+            leftRef: getMiddleAnchorPosition(width, firstBubbleWidth),
+            topRef: getMiddleAnchorPosition(height, firstBubbleHeight),
             hideFooter: true,
             hideHeader: true,
-            component: ((0, jsx_runtime_1.jsx)(components_1.MeetStep, { description: (0, i18next_1.t)('tour.steps.meet.launchpadDescription'), nextButtonLabel: (0, i18next_1.t)('tour.steps.meet.launchpadLabel'), onClick: function () { return setCounter(counter + 1); }, onSkip: handleClose, title: (0, i18next_1.t)('tour.steps.meet.launchpadTitle'), tutorialUrl: meetStepUrl })),
+            component: (_jsx(MeetStep, { description: t('tour.steps.meet.launchpadDescription'), nextButtonLabel: t('tour.steps.meet.launchpadLabel'), onClick: () => setCounter(counter + 1), onSkip: handleClose, title: t('tour.steps.meet.launchpadTitle'), tutorialUrl: meetStepUrl })),
         },
         // Reference component id -> myHomes/headers/MyHomesHeader
         addHomeButton: {
             arrowLeft: 'left-top',
-            leftRef: ((_b = coordinates.addHomeButton) === null || _b === void 0 ? void 0 : _b.x) + (0, utils_1.getDistanceFromArrow)(160),
-            topRef: (0, utils_1.getYPosition)((_c = coordinates.addHomeButton) === null || _c === void 0 ? void 0 : _c.y, 10),
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.addHomeButton.title'), description: (0, i18next_1.t)('tour.steps.addHomeButton.description') })),
+            leftRef: ((_a = coordinates.addHomeButton) === null || _a === void 0 ? void 0 : _a.x) + getDistanceFromArrow(160),
+            topRef: getYPosition((_b = coordinates.addHomeButton) === null || _b === void 0 ? void 0 : _b.y, 10),
+            component: (_jsx(BubbleText, { title: t('tour.steps.addHomeButton.title'), description: t('tour.steps.addHomeButton.description') })),
         },
         addressLines: {
             arrowLeft: 'left-top',
-            leftRef: (0, utils_1.getXPosition)(width, width - 550),
+            leftRef: getXPosition(width, width - 550),
             topRef: 100,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.addressLines.title'), description: (0, i18next_1.t)('tour.steps.addressLines.description') })),
+            component: (_jsx(BubbleText, { title: t('tour.steps.addressLines.title'), description: t('tour.steps.addressLines.description') })),
         },
         // Reference component id -> MyHomes
         homeCard: {
             arrowLeft: 'left-top',
-            leftRef: ((_d = coordinates.homeCard) === null || _d === void 0 ? void 0 : _d.x) + 240,
-            topRef: ((_e = coordinates.homeCard) === null || _e === void 0 ? void 0 : _e.y) + 60,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.homeCard.title'), description: (0, i18next_1.t)('tour.steps.homeCard.description') })),
+            leftRef: ((_c = coordinates.homeCard) === null || _c === void 0 ? void 0 : _c.x) + 240,
+            topRef: ((_d = coordinates.homeCard) === null || _d === void 0 ? void 0 : _d.y) + 60,
+            component: (_jsx(BubbleText, { title: t('tour.steps.homeCard.title'), description: t('tour.steps.homeCard.description') })),
         },
         // Reference component id -> MyHomes / MyHomeCard (style)
         role: {
             arrowLeft: 'left-top',
-            leftRef: ((_f = coordinates.homeCard) === null || _f === void 0 ? void 0 : _f.x) + 80,
-            topRef: ((_g = coordinates.homeCard) === null || _g === void 0 ? void 0 : _g.y) - 20,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.role.title'), description: (0, i18next_1.t)('tour.steps.role.description') })),
+            leftRef: ((_e = coordinates.homeCard) === null || _e === void 0 ? void 0 : _e.x) + 80,
+            topRef: ((_f = coordinates.homeCard) === null || _f === void 0 ? void 0 : _f.y) - 20,
+            component: (_jsx(BubbleText, { title: t('tour.steps.role.title'), description: t('tour.steps.role.description') })),
         },
         // Reference component id -> MyHomes / MyHomeCard (style)
         homePicture: {
             arrowLeft: 'left-top',
-            leftRef: ((_h = coordinates.homeCard) === null || _h === void 0 ? void 0 : _h.x) + cardSize,
-            topRef: ((_j = coordinates.homeCard) === null || _j === void 0 ? void 0 : _j.y) + 10,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.homePicture.title'), description: (0, i18next_1.t)('tour.steps.homePicture.description') })),
+            leftRef: ((_g = coordinates.homeCard) === null || _g === void 0 ? void 0 : _g.x) + cardSize,
+            topRef: ((_h = coordinates.homeCard) === null || _h === void 0 ? void 0 : _h.y) + 10,
+            component: (_jsx(BubbleText, { title: t('tour.steps.homePicture.title'), description: t('tour.steps.homePicture.description') })),
         },
         // Reference component id -> MyHomes / ContainerHeader (style)
         removeHome: {
             arrowLeft: 'left-top',
-            leftRef: ((_k = coordinates.homeCard) === null || _k === void 0 ? void 0 : _k.x) + cardSize,
-            topRef: ((_l = coordinates.homeCard) === null || _l === void 0 ? void 0 : _l.y) - 18,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.removeHome.title'), description: (0, i18next_1.t)('tour.steps.removeHome.description') })),
+            leftRef: ((_j = coordinates.homeCard) === null || _j === void 0 ? void 0 : _j.x) + cardSize,
+            topRef: ((_k = coordinates.homeCard) === null || _k === void 0 ? void 0 : _k.y) - 18,
+            component: (_jsx(BubbleText, { title: t('tour.steps.removeHome.title'), description: t('tour.steps.removeHome.description') })),
         },
         // Reference component -> MyHomes
         viewHome: {
             arrowLeft: 'left-top',
-            leftRef: ((_m = coordinates.homeCard) === null || _m === void 0 ? void 0 : _m.x) + cardSize,
-            topRef: ((_o = coordinates.homeCard) === null || _o === void 0 ? void 0 : _o.y) + 160,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.viewHome.title'), description: (0, i18next_1.t)('tour.steps.viewHome.description') })),
+            leftRef: ((_l = coordinates.homeCard) === null || _l === void 0 ? void 0 : _l.x) + cardSize,
+            topRef: ((_m = coordinates.homeCard) === null || _m === void 0 ? void 0 : _m.y) + 160,
+            component: (_jsx(BubbleText, { title: t('tour.steps.viewHome.title'), description: t('tour.steps.viewHome.description') })),
         },
         // Reference component -> subscription/Subscription
         trackStorage: {
             arrowRight: 'right-top',
-            leftRef: ((_p = coordinates.trackStorage) === null || _p === void 0 ? void 0 : _p.x) - 350,
-            topRef: ((_q = coordinates.trackStorage) === null || _q === void 0 ? void 0 : _q.y) + 40,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.trackStorage.title'), description: (0, i18next_1.t)('tour.steps.trackStorage.description') })),
+            leftRef: ((_o = coordinates.trackStorage) === null || _o === void 0 ? void 0 : _o.x) - 350,
+            topRef: ((_p = coordinates.trackStorage) === null || _p === void 0 ? void 0 : _p.y) + 40,
+            component: (_jsx(BubbleText, { title: t('tour.steps.trackStorage.title'), description: t('tour.steps.trackStorage.description') })),
         },
         // Reference component id -> receipts/autofiler/ForwardReceipts
         forwardReceipts: {
             arrowRight: 'right-top',
-            leftRef: ((_r = coordinates.forwardReceipts) === null || _r === void 0 ? void 0 : _r.x) - 350,
-            topRef: (_s = coordinates.forwardReceipts) === null || _s === void 0 ? void 0 : _s.y,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.assignReceipts.title'), description: (0, i18next_1.t)('tour.steps.assignReceipts.description') })),
+            leftRef: ((_q = coordinates.forwardReceipts) === null || _q === void 0 ? void 0 : _q.x) - 350,
+            topRef: (_r = coordinates.forwardReceipts) === null || _r === void 0 ? void 0 : _r.y,
+            component: (_jsx(BubbleText, { title: t('tour.steps.assignReceipts.title'), description: t('tour.steps.assignReceipts.description') })),
         },
         // Reference component id -> appBar/TutorialsButton
         feedback: {
             arrowTop: 'top-right',
-            leftRef: ((_t = coordinates.feedback) === null || _t === void 0 ? void 0 : _t.x) - 225,
-            topRef: ((_u = coordinates.feedback) === null || _u === void 0 ? void 0 : _u.y) + utils_1.appBarHeight,
-            component: ((0, jsx_runtime_1.jsx)(components_1.HelpIconStep, { handleClose: function () {
+            leftRef: ((_s = coordinates.feedback) === null || _s === void 0 ? void 0 : _s.x) - 225,
+            topRef: ((_t = coordinates.feedback) === null || _t === void 0 ? void 0 : _t.y) + appBarHeight,
+            component: (_jsx(HelpIconStep, { handleClose: () => {
                     handleClose();
                     setCounter(0);
                 } })),
@@ -114,6 +110,5 @@ var LaunchpadTour = function (_a) {
     };
     if (!isActive)
         return null;
-    return ((0, jsx_runtime_1.jsx)(components_1.Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
+    return (_jsx(Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
 };
-exports.LaunchpadTour = LaunchpadTour;

package/dist/components/tour/RoomsBoardTour.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RoomsBoardTour = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var i18next_1 = require("i18next");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var utils_1 = require("../../utils");
-var RoomsBoardTour = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var _p = _a.currentStep, currentStep = _p === void 0 ? 'addRooms' : _p, handleClose = _a.handleClose, handleStep = _a.handleStep, meetStepUrl = _a.meetStepUrl, _q = _a.isActive, isActive = _q === void 0 ? false : _q;
-    var _r = (0, react_1.useState)(0), counter = _r[0], setCounter = _r[1];
-    var componentIds = [
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { t } from 'i18next';
+import { Bubble, BubbleText, MeetStep } from '..';
+import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { getMiddleAnchorPosition, firstBubbleWidth, firstBubbleHeight, } from '../../utils';
+export const RoomsBoardTour = ({ currentStep = 'addRooms', handleClose, handleStep, meetStepUrl, isActive = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const [counter, setCounter] = useState(0);
+    const componentIds = [
         'customizeRoomName',
         'trackRoomValue',
         'organizeByGroup',
@@ -19,72 +15,71 @@ var RoomsBoardTour = function (_a) {
         'addItemToGroup',
         'addingItems',
     ];
-    var coordinates = (0, hooks_1.useComponentCoordinates)(componentIds).coordinates;
-    (0, hooks_1.useComponentStyles)(componentIds, currentStep);
-    var _s = (0, hooks_1.useWindowDimensions)().windowDimensions, width = _s.width, height = _s.height;
-    var steps = {
+    const { coordinates } = useComponentCoordinates(componentIds);
+    useComponentStyles(componentIds, currentStep);
+    const { windowDimensions: { width, height }, } = useWindowDimensions();
+    const steps = {
         addRooms: {
             arrowBottom: 'bottom',
             arrowLeft: 'left',
             arrowRight: 'right',
             arrowTop: 'top',
-            leftRef: (0, utils_1.getMiddleAnchorPosition)(width, utils_1.firstBubbleWidth),
-            topRef: (0, utils_1.getMiddleAnchorPosition)(height, utils_1.firstBubbleHeight),
+            leftRef: getMiddleAnchorPosition(width, firstBubbleWidth),
+            topRef: getMiddleAnchorPosition(height, firstBubbleHeight),
             hideFooter: true,
             hideHeader: true,
-            component: ((0, jsx_runtime_1.jsx)(components_1.MeetStep, { description: (0, i18next_1.t)('tour.steps.meet.roomDescription'), nextButtonLabel: (0, i18next_1.t)('tour.steps.meet.roomLabel'), onClick: function () { return setCounter(counter + 1); }, onSkip: handleClose, title: (0, i18next_1.t)('tour.steps.meet.roomTitle'), tutorialUrl: meetStepUrl })),
+            component: (_jsx(MeetStep, { description: t('tour.steps.meet.roomDescription'), nextButtonLabel: t('tour.steps.meet.roomLabel'), onClick: () => setCounter(counter + 1), onSkip: handleClose, title: t('tour.steps.meet.roomTitle'), tutorialUrl: meetStepUrl })),
         },
         // Reference component id -> room/RoomHeader
         customizeRoomName: {
             arrowLeft: 'left-top',
-            leftRef: ((_b = coordinates.customizeRoomName) === null || _b === void 0 ? void 0 : _b.x) + 70,
-            topRef: ((_c = coordinates.customizeRoomName) === null || _c === void 0 ? void 0 : _c.y) - 26,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.customizeRoomName.title'), description: (0, i18next_1.t)('tour.steps.customizeRoomName.description') })),
+            leftRef: ((_a = coordinates.customizeRoomName) === null || _a === void 0 ? void 0 : _a.x) + 70,
+            topRef: ((_b = coordinates.customizeRoomName) === null || _b === void 0 ? void 0 : _b.y) - 26,
+            component: (_jsx(BubbleText, { title: t('tour.steps.customizeRoomName.title'), description: t('tour.steps.customizeRoomName.description') })),
         },
         // Reference component id -> room/RoomHeader
         trackRoomValue: {
             arrowRight: 'right-top',
-            leftRef: ((_d = coordinates.trackRoomValue) === null || _d === void 0 ? void 0 : _d.x) - 380,
-            topRef: ((_e = coordinates.trackRoomValue) === null || _e === void 0 ? void 0 : _e.y) - 20,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.trackRoomValue.title'), description: (0, i18next_1.t)('tour.steps.trackRoomValue.description') })),
+            leftRef: ((_c = coordinates.trackRoomValue) === null || _c === void 0 ? void 0 : _c.x) - 380,
+            topRef: ((_d = coordinates.trackRoomValue) === null || _d === void 0 ? void 0 : _d.y) - 20,
+            component: (_jsx(BubbleText, { title: t('tour.steps.trackRoomValue.title'), description: t('tour.steps.trackRoomValue.description') })),
         },
         creatingGroups: {
             arrowRight: 'right-top',
             leftRef: width - 680,
             topRef: 50,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.creatingGroups.title'), description: (0, i18next_1.t)('tour.steps.creatingGroups.description') })),
+            component: (_jsx(BubbleText, { title: t('tour.steps.creatingGroups.title'), description: t('tour.steps.creatingGroups.description') })),
         },
         // Reference component id -> rooms/GroupCardHeader
         organizeByGroup: {
             arrowLeft: 'left-top',
-            leftRef: ((_f = coordinates.organizeByGroup) === null || _f === void 0 ? void 0 : _f.x) + 240,
-            topRef: ((_g = coordinates.organizeByGroup) === null || _g === void 0 ? void 0 : _g.y) - 10,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.organizeByGroup.title'), description: (0, i18next_1.t)('tour.steps.organizeByGroup.description') })),
+            leftRef: ((_e = coordinates.organizeByGroup) === null || _e === void 0 ? void 0 : _e.x) + 240,
+            topRef: ((_f = coordinates.organizeByGroup) === null || _f === void 0 ? void 0 : _f.y) - 10,
+            component: (_jsx(BubbleText, { title: t('tour.steps.organizeByGroup.title'), description: t('tour.steps.organizeByGroup.description') })),
         },
         // Reference component id -> rooms/GroupCardHeader
         trackGroupValue: {
             arrowTop: 'top-right',
-            leftRef: ((_h = coordinates.trackGroupValue) === null || _h === void 0 ? void 0 : _h.x) - 220,
-            topRef: ((_j = coordinates.trackGroupValue) === null || _j === void 0 ? void 0 : _j.y) + 100,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.trackGroupValue.title'), description: (0, i18next_1.t)('tour.steps.trackGroupValue.description') })),
+            leftRef: ((_g = coordinates.trackGroupValue) === null || _g === void 0 ? void 0 : _g.x) - 220,
+            topRef: ((_h = coordinates.trackGroupValue) === null || _h === void 0 ? void 0 : _h.y) + 100,
+            component: (_jsx(BubbleText, { title: t('tour.steps.trackGroupValue.title'), description: t('tour.steps.trackGroupValue.description') })),
         },
         // Reference component id ->rooms/GroupsHeader
         addItemToGroup: {
             arrowRight: 'right-top',
-            leftRef: ((_k = coordinates.addItemToGroup) === null || _k === void 0 ? void 0 : _k.x) - 360,
-            topRef: ((_l = coordinates.addItemToGroup) === null || _l === void 0 ? void 0 : _l.y) - 23,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.addItemToGroup.title'), description: (0, i18next_1.t)('tour.steps.addItemToGroup.description') })),
+            leftRef: ((_j = coordinates.addItemToGroup) === null || _j === void 0 ? void 0 : _j.x) - 360,
+            topRef: ((_k = coordinates.addItemToGroup) === null || _k === void 0 ? void 0 : _k.y) - 23,
+            component: (_jsx(BubbleText, { title: t('tour.steps.addItemToGroup.title'), description: t('tour.steps.addItemToGroup.description') })),
         },
         // Reference component id -> rooms/GroupsHeader
         addingItems: {
             arrowRight: 'right-top',
-            leftRef: ((_m = coordinates.addingItems) === null || _m === void 0 ? void 0 : _m.x) - 360,
-            topRef: ((_o = coordinates.addingItems) === null || _o === void 0 ? void 0 : _o.y) - 13,
-            component: ((0, jsx_runtime_1.jsx)(components_1.BubbleText, { title: (0, i18next_1.t)('tour.steps.addingItems.title'), description: (0, i18next_1.t)('tour.steps.addingItems.description') })),
+            leftRef: ((_l = coordinates.addingItems) === null || _l === void 0 ? void 0 : _l.x) - 360,
+            topRef: ((_m = coordinates.addingItems) === null || _m === void 0 ? void 0 : _m.y) - 13,
+            component: (_jsx(BubbleText, { title: t('tour.steps.addingItems.title'), description: t('tour.steps.addingItems.description') })),
         },
     };
     if (!isActive)
         return null;
-    return ((0, jsx_runtime_1.jsx)(components_1.Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
+    return (_jsx(Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
 };
-exports.RoomsBoardTour = RoomsBoardTour;

package/dist/components/tour/index.js

@@ -1,26 +1,10 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Bubble"), exports);
-__exportStar(require("./BubbleArrow"), exports);
-__exportStar(require("./BubbleFooter"), exports);
-__exportStar(require("./BubbleHead"), exports);
-__exportStar(require("./BubbleOverlay"), exports);
-__exportStar(require("./BubbleText"), exports);
-__exportStar(require("./HomeBoardTour"), exports);
-__exportStar(require("./LaunchpadTour"), exports);
-__exportStar(require("./RoomsBoardTour"), exports);
-__exportStar(require("./steps"), exports);
+export * from './Bubble';
+export * from './BubbleArrow';
+export * from './BubbleFooter';
+export * from './BubbleHead';
+export * from './BubbleOverlay';
+export * from './BubbleText';
+export * from './HomeBoardTour';
+export * from './LaunchpadTour';
+export * from './RoomsBoardTour';
+export * from './steps';