@bigbinary/neeto-molecules 3.5.7 → 3.5.8

package/dist/Onboarding.js

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useMemo, useRef, useState, useEffect } from 'react';
 import classnames from 'classnames';
-import { capitalize, noop } from '@bigbinary/neeto-cist';
+import { capitalize, findIndexBy, noop } from '@bigbinary/neeto-cist';
 import Stepper from '@bigbinary/neetoui/Stepper';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
@@ -52,12 +52,17 @@ var CompletedScreen = withT(function (_ref) {
   });
 });
 
+var GENERAL_ONBOARDING_STEPS = {
+  WELCOME: "welcome",
+  HELP: "help",
+  FINISH: "finish"
+};
+
 var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:15vh 32px 32px;width:100%}.neeto-molecules-onboarding__container{display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative;width:100%}.neeto-molecules-onboarding__stepper-wrapper{background-color:rgb(var(--neeto-ui-white));border-bottom:1px solid rgb(var(--neeto-ui-gray-200));display:flex;flex-shrink:0;padding:8px 16px;width:100%}@media (min-width:1024px){.neeto-molecules-onboarding__stepper-wrapper{justify-content:center}}.neeto-molecules-onboarding__content{flex-grow:1;min-height:0;overflow-y:auto;width:100%}.neeto-molecules-onboarding__content--forward{animation:slideInRight .4s ease backwards}.neeto-molecules-onboarding__content--backward{animation:slideInLeft .4s ease backwards}@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}";
 n(css,{});
 
 var HelpScreen = function HelpScreen(_ref) {
   var setCurrentStep = _ref.setCurrentStep,
-    currentStep = _ref.currentStep,
     helpScreenClassName = _ref.helpScreenClassName;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -96,7 +101,7 @@ var HelpScreen = function HelpScreen(_ref) {
       iconPosition: "right",
       label: t("neetoMolecules.onboarding.helpScreen.continueButton"),
       onClick: function onClick() {
-        return setCurrentStep(currentStep + 1);
+        return setCurrentStep(GENERAL_ONBOARDING_STEPS.FINISH);
       }
     })]
   });
@@ -106,6 +111,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName) {
   var helpStep = {
+    key: GENERAL_ONBOARDING_STEPS.HELP,
     label: t("neetoMolecules.onboarding.helpLabel"),
     element: /*#__PURE__*/jsx(HelpScreen, {
       currentStep: currentStep,
@@ -123,7 +129,7 @@ var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentS
 var WelcomeScreen = withT(function (_ref) {
   var t = _ref.t,
     setCurrentStep = _ref.setCurrentStep,
-    currentStep = _ref.currentStep;
+    nextStep = _ref.nextStep;
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-molecules-onboarding__wrapper",
     "data-testid": "onboarding-welcome-wrapper",
@@ -153,7 +159,7 @@ var WelcomeScreen = withT(function (_ref) {
       icon: RightArrow,
       label: t("neetoMolecules.onboarding.getStarted"),
       onClick: function onClick() {
-        return setCurrentStep(currentStep + 1);
+        return setCurrentStep(nextStep);
       }
     })]
   });
@@ -161,7 +167,7 @@ var WelcomeScreen = withT(function (_ref) {
 
 var Onboarding = function Onboarding(_ref) {
   var _ref$currentStep = _ref.currentStep,
-    currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
+    currentStep = _ref$currentStep === void 0 ? GENERAL_ONBOARDING_STEPS.WELCOME : _ref$currentStep,
     _ref$setCurrentStep = _ref.setCurrentStep,
     setCurrentStep = _ref$setCurrentStep === void 0 ? noop : _ref$setCurrentStep,
     _ref$onboardingSteps = _ref.onboardingSteps,
@@ -187,19 +193,20 @@ var Onboarding = function Onboarding(_ref) {
     setDirection(currentStep > prevStep.current ? "forward" : "backward");
     prevStep.current = currentStep;
   }, [currentStep]);
-  if (currentStep === 0) {
+  if (currentStep === GENERAL_ONBOARDING_STEPS.WELCOME) {
     return /*#__PURE__*/jsx(WelcomeScreen, {
       currentStep: currentStep,
-      setCurrentStep: setCurrentStep
+      setCurrentStep: setCurrentStep,
+      nextStep: steps[0].key
     });
   }
-  if (currentStep === steps.length + 1) {
+  if (currentStep === GENERAL_ONBOARDING_STEPS.FINISH) {
     return /*#__PURE__*/jsx(CompletedScreen, {
       completeButtonProps: completeButtonProps
     });
   }
   var handleStepChange = function handleStepChange(index) {
-    return setCurrentStep(index + 1);
+    return setCurrentStep(steps[index].key);
   };
   var isStepperVisible = steps.length > 1;
   return /*#__PURE__*/jsxs("div", {
@@ -210,7 +217,9 @@ var Onboarding = function Onboarding(_ref) {
       className: "neeto-molecules-onboarding__stepper-wrapper",
       children: /*#__PURE__*/jsx(Stepper, {
         steps: steps,
-        activeIndex: currentStep - 1,
+        activeIndex: findIndexBy({
+          key: currentStep
+        }, steps),
         setActiveIndex: disableStepClick ? noop : handleStepChange
       })
     }), steps.map(function (step, index) {
@@ -218,7 +227,7 @@ var Onboarding = function Onboarding(_ref) {
         className: classnames("neeto-molecules-onboarding__content", {
           "neeto-molecules-onboarding__content--forward overflow-x-hidden": isAnimated && direction === "forward",
           "neeto-molecules-onboarding__content--backward overflow-x-hidden": isAnimated && direction === "backward",
-          hidden: currentStep - 1 !== index
+          hidden: currentStep !== step.key
         }),
         children: step === null || step === void 0 ? void 0 : step.element
       }, index);

package/dist/Onboarding.js.map

@@ -1 +1 @@
-{"version":3,"file":"Onboarding.js","sources":["../src/components/Onboarding/CompletedScreen.jsx","../src/components/Onboarding/HelpScreen.jsx","../src/components/Onboarding/utils.jsx","../src/components/Onboarding/WelcomeScreen.jsx","../src/components/Onboarding/index.jsx"],"sourcesContent":["import { capitalize } from \"neetocist\";\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\n\nconst CompletedScreen = withT(({ t, completeButtonProps }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-congratulations-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-emoji\"\n        style=\"h1\"\n      >\n        🎉\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-title\"\n        data-testid=\"onboarding-congratulations-title\"\n        style=\"h1\"\n      >\n        <span className=\"neeto-ui-text-success-500\">\n          {t(\"neetoMolecules.onboarding.congratulations\")}\n        </span>\n        <br />\n        {t(\"neetoMolecules.onboarding.readyToUse\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-congratulations-button\"\n      data-testid=\"onboarding-congratulations-button\"\n      label={t(\"neetoMolecules.onboarding.helpScreen.startUsingButton\", {\n        appName: globalProps.appName,\n      })}\n      {...completeButtonProps}\n    />\n  </div>\n));\n\nexport default CompletedScreen;\n","import classNames from \"classnames\";\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport { useTranslation } from \"react-i18next\";\n\nconst HelpScreen = ({ setCurrentStep, currentStep, helpScreenClassName }) => {\n  const { t } = useTranslation();\n  const { isSize } = useBreakpoints();\n\n  return (\n    <div\n      className={classNames(\n        \"mx-auto w-full max-w-2xl space-y-6 p-4\",\n        helpScreenClassName\n      )}\n    >\n      <div className=\"space-y-3\">\n        <Typography\n          component=\"h1\"\n          data-cy=\"onboarding-help-title\"\n          data-testid=\"onboarding-help-title\"\n          style=\"h2\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.title\")}\n        </Typography>\n        <Typography\n          data-cy=\"onboarding-help-description\"\n          data-testid=\"onboarding-help-description\"\n          lineHeight=\"normal\"\n          style=\"body1\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.description\")}\n        </Typography>\n        <div className=\"w-full\">\n          {isSize(\"mobile\") ? (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg\"\n            />\n          ) : (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg\"\n            />\n          )}\n        </div>\n      </div>\n      <Button\n        data-cy=\"onboarding-help-button\"\n        data-testid=\"onboarding-help-button\"\n        icon={RightArrow}\n        iconPosition=\"right\"\n        label={t(\"neetoMolecules.onboarding.helpScreen.continueButton\")}\n        onClick={() => setCurrentStep(currentStep + 1)}\n      />\n    </div>\n  );\n};\n\nexport default HelpScreen;\n","import { t } from \"i18next\";\n\nimport HelpScreen from \"./HelpScreen\";\n\nexport const createSteps = (\n  onboardingSteps,\n  setCurrentStep,\n  currentStep,\n  helpScreenClassName\n) => {\n  const helpStep = {\n    label: t(\"neetoMolecules.onboarding.helpLabel\"),\n    element: (\n      <HelpScreen {...{ currentStep, helpScreenClassName, setCurrentStep }} />\n    ),\n  };\n\n  return onboardingSteps\n    .concat(helpStep)\n    .map((step, idx) => ({ ...step, id: idx + 1 }));\n};\n","import { capitalize } from \"neetocist\";\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\n\nconst WelcomeScreen = withT(({ t, setCurrentStep, currentStep }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-welcome-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-title\"\n        data-testid=\"onboarding-welcome-title\"\n        style=\"h1\"\n      >\n        {t(\"neetoMolecules.onboarding.helpScreen.welcomeToTitle\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-description\"\n        data-testid=\"onboarding-welcome-description\"\n        lineHeight=\"normal\"\n        style=\"body1\"\n      >\n        {t(\"neetoMolecules.onboarding.letUsCustomize\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-welcome-button\"\n      data-testid=\"onboarding-welcome-button\"\n      icon={RightArrow}\n      label={t(\"neetoMolecules.onboarding.getStarted\")}\n      onClick={() => setCurrentStep(currentStep + 1)}\n    />\n  </div>\n));\n\nexport default WelcomeScreen;\n","import { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport classNames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { Stepper } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport CompletedScreen from \"./CompletedScreen\";\nimport \"./onboarding.scss\";\nimport { createSteps } from \"./utils\";\nimport WelcomeScreen from \"./WelcomeScreen\";\n\nconst Onboarding = ({\n  currentStep = 0,\n  setCurrentStep = noop,\n  onboardingSteps = [],\n  completeButtonProps = {},\n  helpScreenClassName = \"\",\n  isAnimated = true,\n  disableStepClick = false,\n}) => {\n  const steps = useMemo(\n    () =>\n      createSteps(\n        onboardingSteps,\n        setCurrentStep,\n        currentStep,\n        helpScreenClassName\n      ),\n    [onboardingSteps]\n  );\n\n  const prevStep = useRef(currentStep);\n  const [direction, setDirection] = useState(\"\");\n\n  useEffect(() => {\n    if (currentStep === prevStep.current) return;\n\n    setDirection(currentStep > prevStep.current ? \"forward\" : \"backward\");\n    prevStep.current = currentStep;\n  }, [currentStep]);\n\n  if (currentStep === 0) {\n    return <WelcomeScreen {...{ currentStep, setCurrentStep }} />;\n  }\n\n  if (currentStep === steps.length + 1) {\n    return <CompletedScreen {...{ completeButtonProps }} />;\n  }\n\n  const handleStepChange = index => setCurrentStep(index + 1);\n\n  const isStepperVisible = steps.length > 1;\n\n  return (\n    <div\n      className={classNames(\"neeto-molecules-onboarding__container\", {\n        \"neeto-molecules-onboarding__wrapper\": !isStepperVisible,\n      })}\n    >\n      {isStepperVisible && (\n        <div className=\"neeto-molecules-onboarding__stepper-wrapper\">\n          <Stepper\n            {...{ steps }}\n            activeIndex={currentStep - 1}\n            setActiveIndex={disableStepClick ? noop : handleStepChange}\n          />\n        </div>\n      )}\n      {steps.map((step, index) => (\n        <div\n          key={index}\n          className={classNames(\"neeto-molecules-onboarding__content\", {\n            \"neeto-molecules-onboarding__content--forward overflow-x-hidden\":\n              isAnimated && direction === \"forward\",\n            \"neeto-molecules-onboarding__content--backward overflow-x-hidden\":\n              isAnimated && direction === \"backward\",\n            hidden: currentStep - 1 !== index,\n          })}\n        >\n          {step?.element}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nOnboarding.propTypes = {\n  /**\n   * To specify the current step of the onboarding\n   */\n  currentStep: PropTypes.number,\n  /**\n   * List of Custom components for the onboarding\n   */\n  onboardingSteps: PropTypes.array,\n  /**\n   * Props for the complete button\n   */\n  completeButtonProps: PropTypes.object,\n  /**\n   * To set the step of the onboarding\n   */\n  setCurrentStep: PropTypes.func,\n  /**\n   * To pass additional classes to the help screen\n   */\n  helpScreenClassName: PropTypes.string,\n  /**\n   * A boolean value to enable or disable the animation for the stepper.\n   */\n  isAnimated: PropTypes.bool,\n};\n\nexport default Onboarding;\n"],"names":["CompletedScreen","withT","_ref","t","completeButtonProps","_jsxs","className","children","_jsx","Typography","style","appName","capitalize","globalProps","Button","_objectSpread","label","HelpScreen","setCurrentStep","currentStep","helpScreenClassName","_useTranslation","useTranslation","_useBreakpoints","useBreakpoints","isSize","classNames","component","lineHeight","alt","src","icon","RightArrow","iconPosition","onClick","createSteps","onboardingSteps","helpStep","element","concat","map","step","idx","id","WelcomeScreen","Onboarding","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","_ref$helpScreenClassN","_ref$isAnimated","isAnimated","_ref$disableStepClick","disableStepClick","steps","useMemo","prevStep","useRef","_useState","useState","_useState2","_slicedToArray","direction","setDirection","useEffect","current","length","handleStepChange","index","isStepperVisible","Stepper","activeIndex","setActiveIndex","hidden"],"mappings":"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"}
+{"version":3,"file":"Onboarding.js","sources":["../src/components/Onboarding/CompletedScreen.jsx","../src/components/Onboarding/constants.js","../src/components/Onboarding/HelpScreen.jsx","../src/components/Onboarding/utils.jsx","../src/components/Onboarding/WelcomeScreen.jsx","../src/components/Onboarding/index.jsx"],"sourcesContent":["import { capitalize } from \"neetocist\";\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\n\nconst CompletedScreen = withT(({ t, completeButtonProps }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-congratulations-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-emoji\"\n        style=\"h1\"\n      >\n        🎉\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-title\"\n        data-testid=\"onboarding-congratulations-title\"\n        style=\"h1\"\n      >\n        <span className=\"neeto-ui-text-success-500\">\n          {t(\"neetoMolecules.onboarding.congratulations\")}\n        </span>\n        <br />\n        {t(\"neetoMolecules.onboarding.readyToUse\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-congratulations-button\"\n      data-testid=\"onboarding-congratulations-button\"\n      label={t(\"neetoMolecules.onboarding.helpScreen.startUsingButton\", {\n        appName: globalProps.appName,\n      })}\n      {...completeButtonProps}\n    />\n  </div>\n));\n\nexport default CompletedScreen;\n","export const GENERAL_ONBOARDING_STEPS = {\n  WELCOME: \"welcome\",\n  HELP: \"help\",\n  FINISH: \"finish\",\n};\n","import classNames from \"classnames\";\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { GENERAL_ONBOARDING_STEPS } from \"./constants\";\n\nconst HelpScreen = ({ setCurrentStep, helpScreenClassName }) => {\n  const { t } = useTranslation();\n  const { isSize } = useBreakpoints();\n\n  return (\n    <div\n      className={classNames(\n        \"mx-auto w-full max-w-2xl space-y-6 p-4\",\n        helpScreenClassName\n      )}\n    >\n      <div className=\"space-y-3\">\n        <Typography\n          component=\"h1\"\n          data-cy=\"onboarding-help-title\"\n          data-testid=\"onboarding-help-title\"\n          style=\"h2\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.title\")}\n        </Typography>\n        <Typography\n          data-cy=\"onboarding-help-description\"\n          data-testid=\"onboarding-help-description\"\n          lineHeight=\"normal\"\n          style=\"body1\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.description\")}\n        </Typography>\n        <div className=\"w-full\">\n          {isSize(\"mobile\") ? (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg\"\n            />\n          ) : (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg\"\n            />\n          )}\n        </div>\n      </div>\n      <Button\n        data-cy=\"onboarding-help-button\"\n        data-testid=\"onboarding-help-button\"\n        icon={RightArrow}\n        iconPosition=\"right\"\n        label={t(\"neetoMolecules.onboarding.helpScreen.continueButton\")}\n        onClick={() => setCurrentStep(GENERAL_ONBOARDING_STEPS.FINISH)}\n      />\n    </div>\n  );\n};\n\nexport default HelpScreen;\n","import { t } from \"i18next\";\n\nimport { GENERAL_ONBOARDING_STEPS } from \"./constants\";\nimport HelpScreen from \"./HelpScreen\";\n\nexport const createSteps = (\n  onboardingSteps,\n  setCurrentStep,\n  currentStep,\n  helpScreenClassName\n) => {\n  const helpStep = {\n    key: GENERAL_ONBOARDING_STEPS.HELP,\n    label: t(\"neetoMolecules.onboarding.helpLabel\"),\n    element: (\n      <HelpScreen {...{ currentStep, helpScreenClassName, setCurrentStep }} />\n    ),\n  };\n\n  return onboardingSteps\n    .concat(helpStep)\n    .map((step, idx) => ({ ...step, id: idx + 1 }));\n};\n","import { capitalize } from \"neetocist\";\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\n\nconst WelcomeScreen = withT(({ t, setCurrentStep, nextStep }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-welcome-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-title\"\n        data-testid=\"onboarding-welcome-title\"\n        style=\"h1\"\n      >\n        {t(\"neetoMolecules.onboarding.helpScreen.welcomeToTitle\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-description\"\n        data-testid=\"onboarding-welcome-description\"\n        lineHeight=\"normal\"\n        style=\"body1\"\n      >\n        {t(\"neetoMolecules.onboarding.letUsCustomize\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-welcome-button\"\n      data-testid=\"onboarding-welcome-button\"\n      icon={RightArrow}\n      label={t(\"neetoMolecules.onboarding.getStarted\")}\n      onClick={() => setCurrentStep(nextStep)}\n    />\n  </div>\n));\n\nexport default WelcomeScreen;\n","import { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport classNames from \"classnames\";\nimport { findIndexBy, noop } from \"neetocist\";\nimport { Stepper } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport CompletedScreen from \"./CompletedScreen\";\nimport { GENERAL_ONBOARDING_STEPS } from \"./constants\";\nimport \"./onboarding.scss\";\nimport { createSteps } from \"./utils\";\nimport WelcomeScreen from \"./WelcomeScreen\";\n\nconst Onboarding = ({\n  currentStep = GENERAL_ONBOARDING_STEPS.WELCOME,\n  setCurrentStep = noop,\n  onboardingSteps = [],\n  completeButtonProps = {},\n  helpScreenClassName = \"\",\n  isAnimated = true,\n  disableStepClick = false,\n}) => {\n  const steps = useMemo(\n    () =>\n      createSteps(\n        onboardingSteps,\n        setCurrentStep,\n        currentStep,\n        helpScreenClassName\n      ),\n    [onboardingSteps]\n  );\n\n  const prevStep = useRef(currentStep);\n\n  const [direction, setDirection] = useState(\"\");\n\n  useEffect(() => {\n    if (currentStep === prevStep.current) return;\n\n    setDirection(currentStep > prevStep.current ? \"forward\" : \"backward\");\n    prevStep.current = currentStep;\n  }, [currentStep]);\n\n  if (currentStep === GENERAL_ONBOARDING_STEPS.WELCOME) {\n    return (\n      <WelcomeScreen\n        {...{ currentStep, setCurrentStep }}\n        nextStep={steps[0].key}\n      />\n    );\n  }\n\n  if (currentStep === GENERAL_ONBOARDING_STEPS.FINISH) {\n    return <CompletedScreen {...{ completeButtonProps }} />;\n  }\n\n  const handleStepChange = index => setCurrentStep(steps[index].key);\n\n  const isStepperVisible = steps.length > 1;\n\n  return (\n    <div\n      className={classNames(\"neeto-molecules-onboarding__container\", {\n        \"neeto-molecules-onboarding__wrapper\": !isStepperVisible,\n      })}\n    >\n      {isStepperVisible && (\n        <div className=\"neeto-molecules-onboarding__stepper-wrapper\">\n          <Stepper\n            {...{ steps }}\n            activeIndex={findIndexBy({ key: currentStep }, steps)}\n            setActiveIndex={disableStepClick ? noop : handleStepChange}\n          />\n        </div>\n      )}\n      {steps.map((step, index) => (\n        <div\n          key={index}\n          className={classNames(\"neeto-molecules-onboarding__content\", {\n            \"neeto-molecules-onboarding__content--forward overflow-x-hidden\":\n              isAnimated && direction === \"forward\",\n            \"neeto-molecules-onboarding__content--backward overflow-x-hidden\":\n              isAnimated && direction === \"backward\",\n            hidden: currentStep !== step.key,\n          })}\n        >\n          {step?.element}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nOnboarding.propTypes = {\n  /**\n   * To specify the current step of the onboarding\n   */\n  currentStep: PropTypes.number,\n  /**\n   * List of Custom components for the onboarding\n   */\n  onboardingSteps: PropTypes.array,\n  /**\n   * Props for the complete button\n   */\n  completeButtonProps: PropTypes.object,\n  /**\n   * To set the step of the onboarding\n   */\n  setCurrentStep: PropTypes.func,\n  /**\n   * To pass additional classes to the help screen\n   */\n  helpScreenClassName: PropTypes.string,\n  /**\n   * A boolean value to enable or disable the animation for the stepper.\n   */\n  isAnimated: PropTypes.bool,\n};\n\nexport default Onboarding;\n"],"names":["CompletedScreen","withT","_ref","t","completeButtonProps","_jsxs","className","children","_jsx","Typography","style","appName","capitalize","globalProps","Button","_objectSpread","label","GENERAL_ONBOARDING_STEPS","WELCOME","HELP","FINISH","HelpScreen","setCurrentStep","helpScreenClassName","_useTranslation","useTranslation","_useBreakpoints","useBreakpoints","isSize","classNames","component","lineHeight","alt","src","icon","RightArrow","iconPosition","onClick","createSteps","onboardingSteps","currentStep","helpStep","key","element","concat","map","step","idx","id","WelcomeScreen","nextStep","Onboarding","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","_ref$helpScreenClassN","_ref$isAnimated","isAnimated","_ref$disableStepClick","disableStepClick","steps","useMemo","prevStep","useRef","_useState","useState","_useState2","_slicedToArray","direction","setDirection","useEffect","current","handleStepChange","index","isStepperVisible","length","Stepper","activeIndex","findIndexBy","setActiveIndex","hidden"],"mappings":"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"}

package/dist/cjs/Onboarding.js

@@ -66,12 +66,17 @@ var CompletedScreen = withT__default["default"](function (_ref) {
   });
 });
 
+var GENERAL_ONBOARDING_STEPS = {
+  WELCOME: "welcome",
+  HELP: "help",
+  FINISH: "finish"
+};
+
 var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:15vh 32px 32px;width:100%}.neeto-molecules-onboarding__container{display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative;width:100%}.neeto-molecules-onboarding__stepper-wrapper{background-color:rgb(var(--neeto-ui-white));border-bottom:1px solid rgb(var(--neeto-ui-gray-200));display:flex;flex-shrink:0;padding:8px 16px;width:100%}@media (min-width:1024px){.neeto-molecules-onboarding__stepper-wrapper{justify-content:center}}.neeto-molecules-onboarding__content{flex-grow:1;min-height:0;overflow-y:auto;width:100%}.neeto-molecules-onboarding__content--forward{animation:slideInRight .4s ease backwards}.neeto-molecules-onboarding__content--backward{animation:slideInLeft .4s ease backwards}@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}";
 injectCss.n(css,{});
 
 var HelpScreen = function HelpScreen(_ref) {
   var setCurrentStep = _ref.setCurrentStep,
-    currentStep = _ref.currentStep,
     helpScreenClassName = _ref.helpScreenClassName;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -110,7 +115,7 @@ var HelpScreen = function HelpScreen(_ref) {
       iconPosition: "right",
       label: t("neetoMolecules.onboarding.helpScreen.continueButton"),
       onClick: function onClick() {
-        return setCurrentStep(currentStep + 1);
+        return setCurrentStep(GENERAL_ONBOARDING_STEPS.FINISH);
       }
     })]
   });
@@ -120,6 +125,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName) {
   var helpStep = {
+    key: GENERAL_ONBOARDING_STEPS.HELP,
     label: i18next.t("neetoMolecules.onboarding.helpLabel"),
     element: /*#__PURE__*/jsxRuntime.jsx(HelpScreen, {
       currentStep: currentStep,
@@ -137,7 +143,7 @@ var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentS
 var WelcomeScreen = withT__default["default"](function (_ref) {
   var t = _ref.t,
     setCurrentStep = _ref.setCurrentStep,
-    currentStep = _ref.currentStep;
+    nextStep = _ref.nextStep;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-molecules-onboarding__wrapper",
     "data-testid": "onboarding-welcome-wrapper",
@@ -167,7 +173,7 @@ var WelcomeScreen = withT__default["default"](function (_ref) {
       icon: RightArrow__default["default"],
       label: t("neetoMolecules.onboarding.getStarted"),
       onClick: function onClick() {
-        return setCurrentStep(currentStep + 1);
+        return setCurrentStep(nextStep);
       }
     })]
   });
@@ -175,7 +181,7 @@ var WelcomeScreen = withT__default["default"](function (_ref) {
 
 var Onboarding = function Onboarding(_ref) {
   var _ref$currentStep = _ref.currentStep,
-    currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
+    currentStep = _ref$currentStep === void 0 ? GENERAL_ONBOARDING_STEPS.WELCOME : _ref$currentStep,
     _ref$setCurrentStep = _ref.setCurrentStep,
     setCurrentStep = _ref$setCurrentStep === void 0 ? neetoCist.noop : _ref$setCurrentStep,
     _ref$onboardingSteps = _ref.onboardingSteps,
@@ -201,19 +207,20 @@ var Onboarding = function Onboarding(_ref) {
     setDirection(currentStep > prevStep.current ? "forward" : "backward");
     prevStep.current = currentStep;
   }, [currentStep]);
-  if (currentStep === 0) {
+  if (currentStep === GENERAL_ONBOARDING_STEPS.WELCOME) {
     return /*#__PURE__*/jsxRuntime.jsx(WelcomeScreen, {
       currentStep: currentStep,
-      setCurrentStep: setCurrentStep
+      setCurrentStep: setCurrentStep,
+      nextStep: steps[0].key
     });
   }
-  if (currentStep === steps.length + 1) {
+  if (currentStep === GENERAL_ONBOARDING_STEPS.FINISH) {
     return /*#__PURE__*/jsxRuntime.jsx(CompletedScreen, {
       completeButtonProps: completeButtonProps
     });
   }
   var handleStepChange = function handleStepChange(index) {
-    return setCurrentStep(index + 1);
+    return setCurrentStep(steps[index].key);
   };
   var isStepperVisible = steps.length > 1;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -224,7 +231,9 @@ var Onboarding = function Onboarding(_ref) {
       className: "neeto-molecules-onboarding__stepper-wrapper",
       children: /*#__PURE__*/jsxRuntime.jsx(Stepper__default["default"], {
         steps: steps,
-        activeIndex: currentStep - 1,
+        activeIndex: neetoCist.findIndexBy({
+          key: currentStep
+        }, steps),
         setActiveIndex: disableStepClick ? neetoCist.noop : handleStepChange
       })
     }), steps.map(function (step, index) {
@@ -232,7 +241,7 @@ var Onboarding = function Onboarding(_ref) {
         className: classnames__default["default"]("neeto-molecules-onboarding__content", {
           "neeto-molecules-onboarding__content--forward overflow-x-hidden": isAnimated && direction === "forward",
           "neeto-molecules-onboarding__content--backward overflow-x-hidden": isAnimated && direction === "backward",
-          hidden: currentStep - 1 !== index
+          hidden: currentStep !== step.key
         }),
         children: step === null || step === void 0 ? void 0 : step.element
       }, index);

package/dist/cjs/Onboarding.js.map

@@ -1 +1 @@
-{"version":3,"file":"Onboarding.js","sources":["../../src/components/Onboarding/CompletedScreen.jsx","../../src/components/Onboarding/HelpScreen.jsx","../../src/components/Onboarding/utils.jsx","../../src/components/Onboarding/WelcomeScreen.jsx","../../src/components/Onboarding/index.jsx"],"sourcesContent":["import { capitalize } from \"neetocist\";\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\n\nconst CompletedScreen = withT(({ t, completeButtonProps }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-congratulations-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-emoji\"\n        style=\"h1\"\n      >\n        🎉\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-title\"\n        data-testid=\"onboarding-congratulations-title\"\n        style=\"h1\"\n      >\n        <span className=\"neeto-ui-text-success-500\">\n          {t(\"neetoMolecules.onboarding.congratulations\")}\n        </span>\n        <br />\n        {t(\"neetoMolecules.onboarding.readyToUse\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-congratulations-button\"\n      data-testid=\"onboarding-congratulations-button\"\n      label={t(\"neetoMolecules.onboarding.helpScreen.startUsingButton\", {\n        appName: globalProps.appName,\n      })}\n      {...completeButtonProps}\n    />\n  </div>\n));\n\nexport default CompletedScreen;\n","import classNames from \"classnames\";\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport { useTranslation } from \"react-i18next\";\n\nconst HelpScreen = ({ setCurrentStep, currentStep, helpScreenClassName }) => {\n  const { t } = useTranslation();\n  const { isSize } = useBreakpoints();\n\n  return (\n    <div\n      className={classNames(\n        \"mx-auto w-full max-w-2xl space-y-6 p-4\",\n        helpScreenClassName\n      )}\n    >\n      <div className=\"space-y-3\">\n        <Typography\n          component=\"h1\"\n          data-cy=\"onboarding-help-title\"\n          data-testid=\"onboarding-help-title\"\n          style=\"h2\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.title\")}\n        </Typography>\n        <Typography\n          data-cy=\"onboarding-help-description\"\n          data-testid=\"onboarding-help-description\"\n          lineHeight=\"normal\"\n          style=\"body1\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.description\")}\n        </Typography>\n        <div className=\"w-full\">\n          {isSize(\"mobile\") ? (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg\"\n            />\n          ) : (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg\"\n            />\n          )}\n        </div>\n      </div>\n      <Button\n        data-cy=\"onboarding-help-button\"\n        data-testid=\"onboarding-help-button\"\n        icon={RightArrow}\n        iconPosition=\"right\"\n        label={t(\"neetoMolecules.onboarding.helpScreen.continueButton\")}\n        onClick={() => setCurrentStep(currentStep + 1)}\n      />\n    </div>\n  );\n};\n\nexport default HelpScreen;\n","import { t } from \"i18next\";\n\nimport HelpScreen from \"./HelpScreen\";\n\nexport const createSteps = (\n  onboardingSteps,\n  setCurrentStep,\n  currentStep,\n  helpScreenClassName\n) => {\n  const helpStep = {\n    label: t(\"neetoMolecules.onboarding.helpLabel\"),\n    element: (\n      <HelpScreen {...{ currentStep, helpScreenClassName, setCurrentStep }} />\n    ),\n  };\n\n  return onboardingSteps\n    .concat(helpStep)\n    .map((step, idx) => ({ ...step, id: idx + 1 }));\n};\n","import { capitalize } from \"neetocist\";\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\n\nconst WelcomeScreen = withT(({ t, setCurrentStep, currentStep }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-welcome-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-title\"\n        data-testid=\"onboarding-welcome-title\"\n        style=\"h1\"\n      >\n        {t(\"neetoMolecules.onboarding.helpScreen.welcomeToTitle\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-description\"\n        data-testid=\"onboarding-welcome-description\"\n        lineHeight=\"normal\"\n        style=\"body1\"\n      >\n        {t(\"neetoMolecules.onboarding.letUsCustomize\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-welcome-button\"\n      data-testid=\"onboarding-welcome-button\"\n      icon={RightArrow}\n      label={t(\"neetoMolecules.onboarding.getStarted\")}\n      onClick={() => setCurrentStep(currentStep + 1)}\n    />\n  </div>\n));\n\nexport default WelcomeScreen;\n","import { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport classNames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { Stepper } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport CompletedScreen from \"./CompletedScreen\";\nimport \"./onboarding.scss\";\nimport { createSteps } from \"./utils\";\nimport WelcomeScreen from \"./WelcomeScreen\";\n\nconst Onboarding = ({\n  currentStep = 0,\n  setCurrentStep = noop,\n  onboardingSteps = [],\n  completeButtonProps = {},\n  helpScreenClassName = \"\",\n  isAnimated = true,\n  disableStepClick = false,\n}) => {\n  const steps = useMemo(\n    () =>\n      createSteps(\n        onboardingSteps,\n        setCurrentStep,\n        currentStep,\n        helpScreenClassName\n      ),\n    [onboardingSteps]\n  );\n\n  const prevStep = useRef(currentStep);\n  const [direction, setDirection] = useState(\"\");\n\n  useEffect(() => {\n    if (currentStep === prevStep.current) return;\n\n    setDirection(currentStep > prevStep.current ? \"forward\" : \"backward\");\n    prevStep.current = currentStep;\n  }, [currentStep]);\n\n  if (currentStep === 0) {\n    return <WelcomeScreen {...{ currentStep, setCurrentStep }} />;\n  }\n\n  if (currentStep === steps.length + 1) {\n    return <CompletedScreen {...{ completeButtonProps }} />;\n  }\n\n  const handleStepChange = index => setCurrentStep(index + 1);\n\n  const isStepperVisible = steps.length > 1;\n\n  return (\n    <div\n      className={classNames(\"neeto-molecules-onboarding__container\", {\n        \"neeto-molecules-onboarding__wrapper\": !isStepperVisible,\n      })}\n    >\n      {isStepperVisible && (\n        <div className=\"neeto-molecules-onboarding__stepper-wrapper\">\n          <Stepper\n            {...{ steps }}\n            activeIndex={currentStep - 1}\n            setActiveIndex={disableStepClick ? noop : handleStepChange}\n          />\n        </div>\n      )}\n      {steps.map((step, index) => (\n        <div\n          key={index}\n          className={classNames(\"neeto-molecules-onboarding__content\", {\n            \"neeto-molecules-onboarding__content--forward overflow-x-hidden\":\n              isAnimated && direction === \"forward\",\n            \"neeto-molecules-onboarding__content--backward overflow-x-hidden\":\n              isAnimated && direction === \"backward\",\n            hidden: currentStep - 1 !== index,\n          })}\n        >\n          {step?.element}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nOnboarding.propTypes = {\n  /**\n   * To specify the current step of the onboarding\n   */\n  currentStep: PropTypes.number,\n  /**\n   * List of Custom components for the onboarding\n   */\n  onboardingSteps: PropTypes.array,\n  /**\n   * Props for the complete button\n   */\n  completeButtonProps: PropTypes.object,\n  /**\n   * To set the step of the onboarding\n   */\n  setCurrentStep: PropTypes.func,\n  /**\n   * To pass additional classes to the help screen\n   */\n  helpScreenClassName: PropTypes.string,\n  /**\n   * A boolean value to enable or disable the animation for the stepper.\n   */\n  isAnimated: PropTypes.bool,\n};\n\nexport default Onboarding;\n"],"names":["CompletedScreen","withT","_ref","t","completeButtonProps","_jsxs","className","children","_jsx","Typography","style","appName","capitalize","globalProps","Button","_objectSpread","label","HelpScreen","setCurrentStep","currentStep","helpScreenClassName","_useTranslation","useTranslation","_useBreakpoints","useBreakpoints","isSize","classNames","component","lineHeight","alt","src","icon","RightArrow","iconPosition","onClick","createSteps","onboardingSteps","helpStep","element","concat","map","step","idx","id","WelcomeScreen","Onboarding","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","_ref$helpScreenClassN","_ref$isAnimated","isAnimated","_ref$disableStepClick","disableStepClick","steps","useMemo","prevStep","useRef","_useState","useState","_useState2","_slicedToArray","direction","setDirection","useEffect","current","length","handleStepChange","index","isStepperVisible","Stepper","activeIndex","setActiveIndex","hidden"],"mappings":"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"}
+{"version":3,"file":"Onboarding.js","sources":["../../src/components/Onboarding/CompletedScreen.jsx","../../src/components/Onboarding/constants.js","../../src/components/Onboarding/HelpScreen.jsx","../../src/components/Onboarding/utils.jsx","../../src/components/Onboarding/WelcomeScreen.jsx","../../src/components/Onboarding/index.jsx"],"sourcesContent":["import { capitalize } from \"neetocist\";\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\n\nconst CompletedScreen = withT(({ t, completeButtonProps }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-congratulations-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-emoji\"\n        style=\"h1\"\n      >\n        🎉\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-title\"\n        data-testid=\"onboarding-congratulations-title\"\n        style=\"h1\"\n      >\n        <span className=\"neeto-ui-text-success-500\">\n          {t(\"neetoMolecules.onboarding.congratulations\")}\n        </span>\n        <br />\n        {t(\"neetoMolecules.onboarding.readyToUse\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-congratulations-button\"\n      data-testid=\"onboarding-congratulations-button\"\n      label={t(\"neetoMolecules.onboarding.helpScreen.startUsingButton\", {\n        appName: globalProps.appName,\n      })}\n      {...completeButtonProps}\n    />\n  </div>\n));\n\nexport default CompletedScreen;\n","export const GENERAL_ONBOARDING_STEPS = {\n  WELCOME: \"welcome\",\n  HELP: \"help\",\n  FINISH: \"finish\",\n};\n","import classNames from \"classnames\";\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { GENERAL_ONBOARDING_STEPS } from \"./constants\";\n\nconst HelpScreen = ({ setCurrentStep, helpScreenClassName }) => {\n  const { t } = useTranslation();\n  const { isSize } = useBreakpoints();\n\n  return (\n    <div\n      className={classNames(\n        \"mx-auto w-full max-w-2xl space-y-6 p-4\",\n        helpScreenClassName\n      )}\n    >\n      <div className=\"space-y-3\">\n        <Typography\n          component=\"h1\"\n          data-cy=\"onboarding-help-title\"\n          data-testid=\"onboarding-help-title\"\n          style=\"h2\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.title\")}\n        </Typography>\n        <Typography\n          data-cy=\"onboarding-help-description\"\n          data-testid=\"onboarding-help-description\"\n          lineHeight=\"normal\"\n          style=\"body1\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.description\")}\n        </Typography>\n        <div className=\"w-full\">\n          {isSize(\"mobile\") ? (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg\"\n            />\n          ) : (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg\"\n            />\n          )}\n        </div>\n      </div>\n      <Button\n        data-cy=\"onboarding-help-button\"\n        data-testid=\"onboarding-help-button\"\n        icon={RightArrow}\n        iconPosition=\"right\"\n        label={t(\"neetoMolecules.onboarding.helpScreen.continueButton\")}\n        onClick={() => setCurrentStep(GENERAL_ONBOARDING_STEPS.FINISH)}\n      />\n    </div>\n  );\n};\n\nexport default HelpScreen;\n","import { t } from \"i18next\";\n\nimport { GENERAL_ONBOARDING_STEPS } from \"./constants\";\nimport HelpScreen from \"./HelpScreen\";\n\nexport const createSteps = (\n  onboardingSteps,\n  setCurrentStep,\n  currentStep,\n  helpScreenClassName\n) => {\n  const helpStep = {\n    key: GENERAL_ONBOARDING_STEPS.HELP,\n    label: t(\"neetoMolecules.onboarding.helpLabel\"),\n    element: (\n      <HelpScreen {...{ currentStep, helpScreenClassName, setCurrentStep }} />\n    ),\n  };\n\n  return onboardingSteps\n    .concat(helpStep)\n    .map((step, idx) => ({ ...step, id: idx + 1 }));\n};\n","import { capitalize } from \"neetocist\";\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\n\nconst WelcomeScreen = withT(({ t, setCurrentStep, nextStep }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-welcome-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-title\"\n        data-testid=\"onboarding-welcome-title\"\n        style=\"h1\"\n      >\n        {t(\"neetoMolecules.onboarding.helpScreen.welcomeToTitle\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-description\"\n        data-testid=\"onboarding-welcome-description\"\n        lineHeight=\"normal\"\n        style=\"body1\"\n      >\n        {t(\"neetoMolecules.onboarding.letUsCustomize\", {\n          appName: capitalize(globalProps.appName),\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-welcome-button\"\n      data-testid=\"onboarding-welcome-button\"\n      icon={RightArrow}\n      label={t(\"neetoMolecules.onboarding.getStarted\")}\n      onClick={() => setCurrentStep(nextStep)}\n    />\n  </div>\n));\n\nexport default WelcomeScreen;\n","import { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport classNames from \"classnames\";\nimport { findIndexBy, noop } from \"neetocist\";\nimport { Stepper } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport CompletedScreen from \"./CompletedScreen\";\nimport { GENERAL_ONBOARDING_STEPS } from \"./constants\";\nimport \"./onboarding.scss\";\nimport { createSteps } from \"./utils\";\nimport WelcomeScreen from \"./WelcomeScreen\";\n\nconst Onboarding = ({\n  currentStep = GENERAL_ONBOARDING_STEPS.WELCOME,\n  setCurrentStep = noop,\n  onboardingSteps = [],\n  completeButtonProps = {},\n  helpScreenClassName = \"\",\n  isAnimated = true,\n  disableStepClick = false,\n}) => {\n  const steps = useMemo(\n    () =>\n      createSteps(\n        onboardingSteps,\n        setCurrentStep,\n        currentStep,\n        helpScreenClassName\n      ),\n    [onboardingSteps]\n  );\n\n  const prevStep = useRef(currentStep);\n\n  const [direction, setDirection] = useState(\"\");\n\n  useEffect(() => {\n    if (currentStep === prevStep.current) return;\n\n    setDirection(currentStep > prevStep.current ? \"forward\" : \"backward\");\n    prevStep.current = currentStep;\n  }, [currentStep]);\n\n  if (currentStep === GENERAL_ONBOARDING_STEPS.WELCOME) {\n    return (\n      <WelcomeScreen\n        {...{ currentStep, setCurrentStep }}\n        nextStep={steps[0].key}\n      />\n    );\n  }\n\n  if (currentStep === GENERAL_ONBOARDING_STEPS.FINISH) {\n    return <CompletedScreen {...{ completeButtonProps }} />;\n  }\n\n  const handleStepChange = index => setCurrentStep(steps[index].key);\n\n  const isStepperVisible = steps.length > 1;\n\n  return (\n    <div\n      className={classNames(\"neeto-molecules-onboarding__container\", {\n        \"neeto-molecules-onboarding__wrapper\": !isStepperVisible,\n      })}\n    >\n      {isStepperVisible && (\n        <div className=\"neeto-molecules-onboarding__stepper-wrapper\">\n          <Stepper\n            {...{ steps }}\n            activeIndex={findIndexBy({ key: currentStep }, steps)}\n            setActiveIndex={disableStepClick ? noop : handleStepChange}\n          />\n        </div>\n      )}\n      {steps.map((step, index) => (\n        <div\n          key={index}\n          className={classNames(\"neeto-molecules-onboarding__content\", {\n            \"neeto-molecules-onboarding__content--forward overflow-x-hidden\":\n              isAnimated && direction === \"forward\",\n            \"neeto-molecules-onboarding__content--backward overflow-x-hidden\":\n              isAnimated && direction === \"backward\",\n            hidden: currentStep !== step.key,\n          })}\n        >\n          {step?.element}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nOnboarding.propTypes = {\n  /**\n   * To specify the current step of the onboarding\n   */\n  currentStep: PropTypes.number,\n  /**\n   * List of Custom components for the onboarding\n   */\n  onboardingSteps: PropTypes.array,\n  /**\n   * Props for the complete button\n   */\n  completeButtonProps: PropTypes.object,\n  /**\n   * To set the step of the onboarding\n   */\n  setCurrentStep: PropTypes.func,\n  /**\n   * To pass additional classes to the help screen\n   */\n  helpScreenClassName: PropTypes.string,\n  /**\n   * A boolean value to enable or disable the animation for the stepper.\n   */\n  isAnimated: PropTypes.bool,\n};\n\nexport default Onboarding;\n"],"names":["CompletedScreen","withT","_ref","t","completeButtonProps","_jsxs","className","children","_jsx","Typography","style","appName","capitalize","globalProps","Button","_objectSpread","label","GENERAL_ONBOARDING_STEPS","WELCOME","HELP","FINISH","HelpScreen","setCurrentStep","helpScreenClassName","_useTranslation","useTranslation","_useBreakpoints","useBreakpoints","isSize","classNames","component","lineHeight","alt","src","icon","RightArrow","iconPosition","onClick","createSteps","onboardingSteps","currentStep","helpStep","key","element","concat","map","step","idx","id","WelcomeScreen","nextStep","Onboarding","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","_ref$helpScreenClassN","_ref$isAnimated","isAnimated","_ref$disableStepClick","disableStepClick","steps","useMemo","prevStep","useRef","_useState","useState","_useState2","_slicedToArray","direction","setDirection","useEffect","current","handleStepChange","index","isStepperVisible","length","Stepper","activeIndex","findIndexBy","setActiveIndex","hidden"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "3.5.7",
+  "version": "3.5.8",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/types/Onboarding.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 interface OnboardingComponent {
+  key: string;
   element: React.ReactNode;
   label: string;
 }
@@ -44,6 +45,7 @@ interface OnboardingComponent {
  *         }}
  *         onboardingSteps={[
  *           {
+ *             key: "custom-component",
  *             label: "Custom Component",
  *             element: <CustomComponent />,
  *           },
@@ -57,7 +59,7 @@ interface OnboardingComponent {
 const Onboarding: React.FC<{
   currentStep: number;
   completeButtonProps: Object;
-  setCurrentStep: React.Dispatch<React.SetStateAction<number>>;
+  setCurrentStep: React.Dispatch<React.SetStateAction<string>>;
   onboardingSteps?: OnboardingComponent[];
   helpScreenClassName?: string;
   isAnimated?: boolean;