@bigbinary/neeto-molecules 1.19.5 → 1.19.7

package/README.md

@@ -69,6 +69,7 @@ https://neeto-molecules.neeto.com/
 - [ShareViaEmail](./docs/components/ShareViaEmail.md)
 - [ShareViaLink](./docs/components/ShareViaLink.md)
 - [Sidebar](./docs/components/Sidebar.md)
+- [StickyRibbonsContainer](./docs/components/StickyRibbonsContainer.md)
 - [SubHeader](./docs/components/SubHeader.md)
 - [SuffixedInput](./docs/components/SuffixedInput.md)
 - [TableWrapper](./docs/components/TableWrapper.md)

package/dist/DocumentEditor.js

@@ -19,7 +19,7 @@ var DEFAULT_EDITOR_PROPS = {
   addons: []
 };
 
-var css = "@media screen and (max-width:768px){.neeto-molecules-document__wrapper{width:100%}}.neeto-molecules-document__wrapper .neeto-molecules-document__container{margin:0 auto;max-width:768px!important}.neeto-molecules-document__wrapper .neeto-molecules-document-editor__menubar{position:sticky;top:0;width:100%;z-index:20}.neeto-molecules-document__wrapper .neeto-molecules-document__title{margin:24px 0 0;width:100%}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input{padding:0!important}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea{color:rgb(var(--neeto-ui-black));font-size:42px;font-weight:700;line-height:48px;max-height:none;resize:none}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea::-moz-placeholder{color:rgb(var(--neeto-ui-gray-300))}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea::placeholder{color:rgb(var(--neeto-ui-gray-300))}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea{font-size:36px}}.neeto-molecules-document__wrapper .neeto-molecules-editor-content__error{margin:12px auto}.neeto-molecules-document__wrapper .ProseMirror{max-height:none;overflow-y:hidden}.neeto-molecules-document__wrapper .neeto-editor-fixed-menu{border:thin solid rgb(var(--neeto-ui-gray-200));border-left:none;border-right:none}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item{padding:6px}}.neeto-molecules-document__wrapper .neeto-editor-fixed-menu__wrapper{margin:0 auto;max-width:868px;padding:0 8px}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-editor-fixed-menu__wrapper{overflow-x:auto;padding:0 16px}}.neeto-molecules-document__wrapper .editor-content__wrapper{border:none!important;padding:12px 16px 0!important;width:100%!important}.neeto-molecules-document__wrapper .editor-content-attachments{border:none;margin:12px auto 0;max-width:768px!important;padding-left:16px;padding-right:16px}.neeto-molecules-document__wrapper .editor-content-attachments--no-attachments{display:none!important}.neeto-molecules-document__wrapper .neeto-editor-character-count{margin:0 auto;max-width:768px!important;padding-left:16px;padding-right:16px}.neeto-molecules-document__wrapper .ne-attachments__wrapper{width:100%}.editor-content__wrapper.neeto-editor{padding:0 16px}.editor-content__wrapper.neeto-editor h1{font-size:var(--neeto-ui-text-h1);margin:2rem 0 .25rem}.editor-content__wrapper.neeto-editor h2{font-size:var(--neeto-ui-text-h2);margin:1.5rem 0 .25rem}.editor-content__wrapper.neeto-editor h3{font-size:var(--neeto-ui-text-h3);margin:1rem 0 .25rem}.editor-content__wrapper.neeto-editor h4{font-size:var(--neeto-ui-text-h4);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h5{font-size:var(--neeto-ui-text-h5);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h6{font-size:var(--neeto-ui-text-h6);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h1,.editor-content__wrapper.neeto-editor h2,.editor-content__wrapper.neeto-editor h3,.editor-content__wrapper.neeto-editor h4,.editor-content__wrapper.neeto-editor h5,.editor-content__wrapper.neeto-editor h6{font-weight:var(--neeto-ui-font-semibold)}.editor-content__wrapper.neeto-editor p{font-size:var(--neeto-ui-text-body1);line-height:var(--neeto-ui-leading-normal)}.editor-content__wrapper.neeto-editor ol,.editor-content__wrapper.neeto-editor ul{margin-bottom:1rem;padding-left:24px}.editor-content__wrapper.neeto-editor ol li,.editor-content__wrapper.neeto-editor ul li{margin-bottom:.5rem}.editor-content__wrapper.neeto-editor ol li p,.editor-content__wrapper.neeto-editor ul li p{margin-bottom:0}.editor-content__wrapper.neeto-editor ol li:last-child,.editor-content__wrapper.neeto-editor ul li:last-child{margin-bottom:.5rem}.editor-content__wrapper.neeto-editor .neeto-editor-table{margin:8px 0 0}.editor-content__wrapper.neeto-editor .neeto-editor-table table{border-radius:0}.editor-content__wrapper.neeto-editor .neeto-editor-table p{margin-bottom:0}.editor-content__wrapper.neeto-editor .neeto-editor-table .neeto-editor-table__add-column,.editor-content__wrapper.neeto-editor .neeto-editor-table .neeto-editor-table__add-row{visibility:hidden}.editor-content__wrapper.neeto-editor .neeto-editor-table:hover .neeto-editor-table__add-column,.editor-content__wrapper.neeto-editor .neeto-editor-table:hover .neeto-editor-table__add-row{visibility:visible}ins{background-color:#c1f4cb!important;text-decoration:none!important}del{background-color:#faa!important}";
+var css = "@media screen and (max-width:768px){.neeto-molecules-document__wrapper{width:100%}}.neeto-molecules-document__wrapper .neeto-molecules-document__container{margin:0 auto;max-width:768px!important}.neeto-molecules-document__wrapper .neeto-molecules-document-editor__menubar{position:sticky;top:0;width:100%;z-index:20}.neeto-molecules-document__wrapper .neeto-molecules-document__title{margin:24px 0 0;width:100%}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input{padding:0!important}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea{color:rgb(var(--neeto-ui-black));font-size:42px;font-weight:700;line-height:48px;max-height:none;resize:none}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea::-moz-placeholder{color:rgb(var(--neeto-ui-gray-300))}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea::placeholder{color:rgb(var(--neeto-ui-gray-300))}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea{font-size:36px}}.neeto-molecules-document__wrapper .neeto-molecules-editor-content__error{margin:12px auto}.neeto-molecules-document__wrapper .ProseMirror{max-height:none;overflow-y:hidden}.neeto-molecules-document__wrapper .neeto-editor-fixed-menu{border:thin solid rgb(var(--neeto-ui-gray-200));border-left:none;border-right:none}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item{padding:6px}}.neeto-molecules-document__wrapper .neeto-editor-fixed-menu__wrapper{margin:0 auto;max-width:868px}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-editor-fixed-menu__wrapper{overflow-x:auto}}.neeto-molecules-document__wrapper .editor-content__wrapper{border:none!important;padding:12px 16px 0!important;width:100%!important}.neeto-molecules-document__wrapper .editor-content-attachments{border:none;margin:12px auto 0;max-width:768px!important;padding-left:16px;padding-right:16px}.neeto-molecules-document__wrapper .editor-content-attachments--no-attachments{display:none!important}.neeto-molecules-document__wrapper .neeto-editor-character-count{margin:0 auto;max-width:768px!important;padding-left:16px;padding-right:16px}.neeto-molecules-document__wrapper .ne-attachments__wrapper{width:100%}.editor-content__wrapper.neeto-editor{padding:0 16px}.editor-content__wrapper.neeto-editor h1{font-size:var(--neeto-ui-text-h1);margin:2rem 0 .25rem}.editor-content__wrapper.neeto-editor h2{font-size:var(--neeto-ui-text-h2);margin:1.5rem 0 .25rem}.editor-content__wrapper.neeto-editor h3{font-size:var(--neeto-ui-text-h3);margin:1rem 0 .25rem}.editor-content__wrapper.neeto-editor h4{font-size:var(--neeto-ui-text-h4);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h5{font-size:var(--neeto-ui-text-h5);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h6{font-size:var(--neeto-ui-text-h6);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h1,.editor-content__wrapper.neeto-editor h2,.editor-content__wrapper.neeto-editor h3,.editor-content__wrapper.neeto-editor h4,.editor-content__wrapper.neeto-editor h5,.editor-content__wrapper.neeto-editor h6{font-weight:var(--neeto-ui-font-semibold)}.editor-content__wrapper.neeto-editor p{font-size:var(--neeto-ui-text-body1);line-height:var(--neeto-ui-leading-normal)}.editor-content__wrapper.neeto-editor ol,.editor-content__wrapper.neeto-editor ul{margin-bottom:1rem;padding-left:24px}.editor-content__wrapper.neeto-editor ol li,.editor-content__wrapper.neeto-editor ul li{margin-bottom:.5rem}.editor-content__wrapper.neeto-editor ol li p,.editor-content__wrapper.neeto-editor ul li p{margin-bottom:0}.editor-content__wrapper.neeto-editor ol li:last-child,.editor-content__wrapper.neeto-editor ul li:last-child{margin-bottom:.5rem}.editor-content__wrapper.neeto-editor .neeto-editor-table{margin:8px 0 0}.editor-content__wrapper.neeto-editor .neeto-editor-table table{border-radius:0}.editor-content__wrapper.neeto-editor .neeto-editor-table p{margin-bottom:0}.editor-content__wrapper.neeto-editor .neeto-editor-table .neeto-editor-table__add-column,.editor-content__wrapper.neeto-editor .neeto-editor-table .neeto-editor-table__add-row{visibility:hidden}.editor-content__wrapper.neeto-editor .neeto-editor-table:hover .neeto-editor-table__add-column,.editor-content__wrapper.neeto-editor .neeto-editor-table:hover .neeto-editor-table__add-row{visibility:visible}ins{background-color:#c1f4cb!important;text-decoration:none!important}del{background-color:#faa!important}";
 n(css,{});
 
 var useEditor = function useEditor(_ref) {

package/dist/Onboarding.js

@@ -1,4 +1,5 @@
-import React__default, { useMemo } from 'react';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default, { useMemo, useState } from 'react';
 import classnames from 'classnames';
 import { noop } from '@bigbinary/neeto-cist';
 import { Typography, Button, Stepper } from '@bigbinary/neetoui';
@@ -42,7 +43,7 @@ var CompletedScreen = withT(function (_ref) {
   }, completeButtonProps)));
 });
 
-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%}";
+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) {
@@ -141,7 +142,6 @@ var WelcomeScreen = withT(function (_ref) {
 });
 
 var Onboarding = function Onboarding(_ref) {
-  var _steps;
   var _ref$currentStep = _ref.currentStep,
     currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
     _ref$setCurrentStep = _ref.setCurrentStep,
@@ -151,10 +151,16 @@ var Onboarding = function Onboarding(_ref) {
     _ref$completeButtonPr = _ref.completeButtonProps,
     completeButtonProps = _ref$completeButtonPr === void 0 ? {} : _ref$completeButtonPr,
     _ref$helpScreenClassN = _ref.helpScreenClassName,
-    helpScreenClassName = _ref$helpScreenClassN === void 0 ? "" : _ref$helpScreenClassN;
+    helpScreenClassName = _ref$helpScreenClassN === void 0 ? "" : _ref$helpScreenClassN,
+    _ref$isAnimated = _ref.isAnimated,
+    isAnimated = _ref$isAnimated === void 0 ? true : _ref$isAnimated;
   var steps = useMemo(function () {
     return createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName);
   }, [onboardingSteps]);
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    direction = _useState2[0],
+    setDirection = _useState2[1];
   if (currentStep === 0) {
     return /*#__PURE__*/React__default.createElement(WelcomeScreen, {
       currentStep: currentStep,
@@ -167,7 +173,9 @@ var Onboarding = function Onboarding(_ref) {
     });
   }
   var handleStepChange = function handleStepChange(index) {
-    return setCurrentStep(index + 1);
+    var nextStep = index + 1;
+    setDirection(currentStep > nextStep ? "backward" : "forward");
+    setCurrentStep(nextStep);
   };
   var isStepperVisible = steps.length > 1;
   return /*#__PURE__*/React__default.createElement("div", {
@@ -180,9 +188,16 @@ var Onboarding = function Onboarding(_ref) {
     steps: steps,
     activeIndex: currentStep - 1,
     setActiveIndex: handleStepChange
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-onboarding__content"
-  }, (_steps = steps[currentStep - 1]) === null || _steps === void 0 ? void 0 : _steps.element));
+  })), steps.map(function (step, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      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
+      })
+    }, step === null || step === void 0 ? void 0 : step.element);
+  }));
 };
 
 export { Onboarding as default };

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 React from \"react\";\n\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: 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 React from \"react\";\n\nimport 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 React from \"react\";\n\nimport { 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 React from \"react\";\n\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: 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: 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 React, { useMemo } 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}) => {\n  const steps = useMemo(\n    () =>\n      createSteps(\n        onboardingSteps,\n        setCurrentStep,\n        currentStep,\n        helpScreenClassName\n      ),\n    [onboardingSteps]\n  );\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={handleStepChange}\n          />\n        </div>\n      )}\n      <div className=\"neeto-molecules-onboarding__content\">\n        {steps[currentStep - 1]?.element}\n      </div>\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\nexport default Onboarding;\n"],"names":["CompletedScreen","withT","_ref","t","completeButtonProps","React","createElement","className","Typography","style","appName","globalProps","Button","_extends","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","_objectSpread","id","WelcomeScreen","Onboarding","_steps","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","_ref$helpScreenClassN","steps","useMemo","length","handleStepChange","index","isStepperVisible","Stepper","activeIndex","setActiveIndex"],"mappings":"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"}
+{"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 React from \"react\";\n\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: 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 React from \"react\";\n\nimport 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 React from \"react\";\n\nimport { 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 React from \"react\";\n\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: 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: 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 React, { useMemo, 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}) => {\n  const steps = useMemo(\n    () =>\n      createSteps(\n        onboardingSteps,\n        setCurrentStep,\n        currentStep,\n        helpScreenClassName\n      ),\n    [onboardingSteps]\n  );\n  const [direction, setDirection] = useState(\"\");\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 => {\n    const nextStep = index + 1;\n    setDirection(currentStep > nextStep ? \"backward\" : \"forward\");\n    setCurrentStep(nextStep);\n  };\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={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","React","createElement","className","Typography","style","appName","globalProps","Button","_extends","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","_objectSpread","id","WelcomeScreen","Onboarding","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","_ref$helpScreenClassN","_ref$isAnimated","isAnimated","steps","useMemo","_useState","useState","_useState2","_slicedToArray","direction","setDirection","length","handleStepChange","index","nextStep","isStepperVisible","Stepper","activeIndex","setActiveIndex","key","hidden"],"mappings":"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"}

package/dist/StickyRibbonsContainer.js

@@ -0,0 +1,78 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import { useLocalStorage } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { EditorContent } from '@bigbinary/neeto-editor';
+import { Tag } from '@bigbinary/neetoui';
+import { pluck } from 'ramda';
+import { n } from './inject-css-c86de496.js';
+import { useQuery } from 'react-query';
+import axios from 'axios';
+import { BASE_API_V1_URL } from '@bigbinary/neeto-commons-frontend/constants';
+
+var QUERY_KEYS = {
+  APP_STICKY_RIBBONS_LIST: "APP_STICKY_RIBBONS_LIST"
+};
+var STICKY_RIBBON_KIND_TO_STYLE = {
+  info: "info",
+  warning: "warning",
+  error: "danger"
+};
+var STICKY_RIBBONS_LOCAL_STORAGE_KEY = "dismissedStickyRibbons";
+
+var css = ".neeto-molecules-sticky-ribbon{border-radius:0}";
+n(css,{});
+
+var fetchStickyRibbons = function fetchStickyRibbons() {
+  return axios.get("".concat(BASE_API_V1_URL, "/sticky_ribbons"));
+};
+var stickyRibbonsApi = {
+  fetchStickyRibbons: fetchStickyRibbons
+};
+
+var APP_STICKY_RIBBONS_LIST = QUERY_KEYS.APP_STICKY_RIBBONS_LIST;
+var useFetchStickyRibbons = function useFetchStickyRibbons() {
+  return useQuery([APP_STICKY_RIBBONS_LIST], stickyRibbonsApi.fetchStickyRibbons);
+};
+
+var StickyRibbonsContainer = function StickyRibbonsContainer() {
+  var _useLocalStorage = useLocalStorage(STICKY_RIBBONS_LOCAL_STORAGE_KEY, []),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    dismissedRibbons = _useLocalStorage2[0],
+    setDismissedRibbons = _useLocalStorage2[1];
+  var _useFetchStickyRibbon = useFetchStickyRibbons(),
+    _useFetchStickyRibbon2 = _useFetchStickyRibbon.data,
+    _useFetchStickyRibbon3 = _useFetchStickyRibbon2 === void 0 ? {} : _useFetchStickyRibbon2,
+    _useFetchStickyRibbon4 = _useFetchStickyRibbon3.stickyRibbons,
+    stickyRibbons = _useFetchStickyRibbon4 === void 0 ? [] : _useFetchStickyRibbon4;
+  var handleDismiss = function handleDismiss(ribbonId) {
+    var validRibbonIds = pluck("id", stickyRibbons);
+    var updatedDismissedRibbons = dismissedRibbons.filter(function (id) {
+      return validRibbonIds.includes(id);
+    });
+    setDismissedRibbons([].concat(_toConsumableArray(updatedDismissedRibbons), [ribbonId]));
+  };
+  var visibleRibbons = stickyRibbons.filter(function (ribbon) {
+    return !dismissedRibbons.includes(ribbon.id);
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, visibleRibbons.map(function (_ref) {
+    var id = _ref.id,
+      kind = _ref.kind,
+      message = _ref.message;
+    return /*#__PURE__*/React__default.createElement(Tag, {
+      className: "neeto-molecules-sticky-ribbon w-full p-2.5 text-center",
+      key: id,
+      size: "large",
+      style: STICKY_RIBBON_KIND_TO_STYLE[kind],
+      onClose: function onClose() {
+        return handleDismiss(id);
+      }
+    }, /*#__PURE__*/React__default.createElement(EditorContent, {
+      className: "w-full",
+      content: message
+    }));
+  }));
+};
+
+export { StickyRibbonsContainer as default };
+//# sourceMappingURL=StickyRibbonsContainer.js.map

package/dist/StickyRibbonsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyRibbonsContainer.js","sources":["../src/components/StickyRibbonsContainer/constants.js","../src/components/StickyRibbonsContainer/api.js","../src/components/StickyRibbonsContainer/useStickyRibbonsApi.js","../src/components/StickyRibbonsContainer/index.jsx"],"sourcesContent":["export const QUERY_KEYS = {\n  APP_STICKY_RIBBONS_LIST: \"APP_STICKY_RIBBONS_LIST\",\n};\n\nexport const STICKY_RIBBON_KIND_TO_STYLE = {\n  info: \"info\",\n  warning: \"warning\",\n  error: \"danger\",\n};\n\nexport const STICKY_RIBBONS_LOCAL_STORAGE_KEY = \"dismissedStickyRibbons\";\n","import axios from \"axios\";\nimport { BASE_API_V1_URL } from \"neetocommons/constants\";\n\nconst fetchStickyRibbons = () => axios.get(`${BASE_API_V1_URL}/sticky_ribbons`);\n\nconst stickyRibbonsApi = { fetchStickyRibbons };\n\nexport default stickyRibbonsApi;\n","import { useQuery } from \"react-query\";\n\nimport stickyRibbonsApi from \"./api\";\nimport { QUERY_KEYS } from \"./constants\";\n\nconst { APP_STICKY_RIBBONS_LIST } = QUERY_KEYS;\n\nconst useFetchStickyRibbons = () =>\n  useQuery([APP_STICKY_RIBBONS_LIST], stickyRibbonsApi.fetchStickyRibbons);\n\nexport { useFetchStickyRibbons };\n","import React from \"react\";\n\nimport { useLocalStorage } from \"neetocommons/react-utils\";\nimport { EditorContent } from \"neetoeditor\";\nimport { Tag } from \"neetoui\";\nimport { pluck } from \"ramda\";\n\nimport {\n  STICKY_RIBBONS_LOCAL_STORAGE_KEY,\n  STICKY_RIBBON_KIND_TO_STYLE,\n} from \"./constants\";\nimport \"./sticky-ribbons.scss\";\nimport { useFetchStickyRibbons } from \"./useStickyRibbonsApi\";\n\nconst StickyRibbonsContainer = () => {\n  const [dismissedRibbons, setDismissedRibbons] = useLocalStorage(\n    STICKY_RIBBONS_LOCAL_STORAGE_KEY,\n    []\n  );\n\n  const { data: { stickyRibbons = [] } = {} } = useFetchStickyRibbons();\n\n  const handleDismiss = ribbonId => {\n    const validRibbonIds = pluck(\"id\", stickyRibbons);\n    const updatedDismissedRibbons = dismissedRibbons.filter(id =>\n      validRibbonIds.includes(id)\n    );\n\n    setDismissedRibbons([...updatedDismissedRibbons, ribbonId]);\n  };\n\n  const visibleRibbons = stickyRibbons.filter(\n    ribbon => !dismissedRibbons.includes(ribbon.id)\n  );\n\n  return (\n    <>\n      {visibleRibbons.map(({ id, kind, message }) => (\n        <Tag\n          className=\"neeto-molecules-sticky-ribbon w-full p-2.5 text-center\"\n          key={id}\n          size=\"large\"\n          style={STICKY_RIBBON_KIND_TO_STYLE[kind]}\n          onClose={() => handleDismiss(id)}\n        >\n          <EditorContent className=\"w-full\" content={message} />\n        </Tag>\n      ))}\n    </>\n  );\n};\n\nexport default StickyRibbonsContainer;\n"],"names":["QUERY_KEYS","APP_STICKY_RIBBONS_LIST","STICKY_RIBBON_KIND_TO_STYLE","info","warning","error","STICKY_RIBBONS_LOCAL_STORAGE_KEY","fetchStickyRibbons","axios","get","concat","BASE_API_V1_URL","stickyRibbonsApi","useFetchStickyRibbons","useQuery","StickyRibbonsContainer","_useLocalStorage","useLocalStorage","_useLocalStorage2","_slicedToArray","dismissedRibbons","setDismissedRibbons","_useFetchStickyRibbon","_useFetchStickyRibbon2","data","_useFetchStickyRibbon3","_useFetchStickyRibbon4","stickyRibbons","handleDismiss","ribbonId","validRibbonIds","pluck","updatedDismissedRibbons","filter","id","includes","_toConsumableArray","visibleRibbons","ribbon","React","createElement","Fragment","map","_ref","kind","message","Tag","className","key","size","style","onClose","EditorContent","content"],"mappings":"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"}

package/dist/cjs/DocumentEditor.js

@@ -30,7 +30,7 @@ var DEFAULT_EDITOR_PROPS = {
   addons: []
 };
 
-var css = "@media screen and (max-width:768px){.neeto-molecules-document__wrapper{width:100%}}.neeto-molecules-document__wrapper .neeto-molecules-document__container{margin:0 auto;max-width:768px!important}.neeto-molecules-document__wrapper .neeto-molecules-document-editor__menubar{position:sticky;top:0;width:100%;z-index:20}.neeto-molecules-document__wrapper .neeto-molecules-document__title{margin:24px 0 0;width:100%}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input{padding:0!important}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea{color:rgb(var(--neeto-ui-black));font-size:42px;font-weight:700;line-height:48px;max-height:none;resize:none}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea::-moz-placeholder{color:rgb(var(--neeto-ui-gray-300))}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea::placeholder{color:rgb(var(--neeto-ui-gray-300))}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea{font-size:36px}}.neeto-molecules-document__wrapper .neeto-molecules-editor-content__error{margin:12px auto}.neeto-molecules-document__wrapper .ProseMirror{max-height:none;overflow-y:hidden}.neeto-molecules-document__wrapper .neeto-editor-fixed-menu{border:thin solid rgb(var(--neeto-ui-gray-200));border-left:none;border-right:none}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item{padding:6px}}.neeto-molecules-document__wrapper .neeto-editor-fixed-menu__wrapper{margin:0 auto;max-width:868px;padding:0 8px}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-editor-fixed-menu__wrapper{overflow-x:auto;padding:0 16px}}.neeto-molecules-document__wrapper .editor-content__wrapper{border:none!important;padding:12px 16px 0!important;width:100%!important}.neeto-molecules-document__wrapper .editor-content-attachments{border:none;margin:12px auto 0;max-width:768px!important;padding-left:16px;padding-right:16px}.neeto-molecules-document__wrapper .editor-content-attachments--no-attachments{display:none!important}.neeto-molecules-document__wrapper .neeto-editor-character-count{margin:0 auto;max-width:768px!important;padding-left:16px;padding-right:16px}.neeto-molecules-document__wrapper .ne-attachments__wrapper{width:100%}.editor-content__wrapper.neeto-editor{padding:0 16px}.editor-content__wrapper.neeto-editor h1{font-size:var(--neeto-ui-text-h1);margin:2rem 0 .25rem}.editor-content__wrapper.neeto-editor h2{font-size:var(--neeto-ui-text-h2);margin:1.5rem 0 .25rem}.editor-content__wrapper.neeto-editor h3{font-size:var(--neeto-ui-text-h3);margin:1rem 0 .25rem}.editor-content__wrapper.neeto-editor h4{font-size:var(--neeto-ui-text-h4);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h5{font-size:var(--neeto-ui-text-h5);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h6{font-size:var(--neeto-ui-text-h6);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h1,.editor-content__wrapper.neeto-editor h2,.editor-content__wrapper.neeto-editor h3,.editor-content__wrapper.neeto-editor h4,.editor-content__wrapper.neeto-editor h5,.editor-content__wrapper.neeto-editor h6{font-weight:var(--neeto-ui-font-semibold)}.editor-content__wrapper.neeto-editor p{font-size:var(--neeto-ui-text-body1);line-height:var(--neeto-ui-leading-normal)}.editor-content__wrapper.neeto-editor ol,.editor-content__wrapper.neeto-editor ul{margin-bottom:1rem;padding-left:24px}.editor-content__wrapper.neeto-editor ol li,.editor-content__wrapper.neeto-editor ul li{margin-bottom:.5rem}.editor-content__wrapper.neeto-editor ol li p,.editor-content__wrapper.neeto-editor ul li p{margin-bottom:0}.editor-content__wrapper.neeto-editor ol li:last-child,.editor-content__wrapper.neeto-editor ul li:last-child{margin-bottom:.5rem}.editor-content__wrapper.neeto-editor .neeto-editor-table{margin:8px 0 0}.editor-content__wrapper.neeto-editor .neeto-editor-table table{border-radius:0}.editor-content__wrapper.neeto-editor .neeto-editor-table p{margin-bottom:0}.editor-content__wrapper.neeto-editor .neeto-editor-table .neeto-editor-table__add-column,.editor-content__wrapper.neeto-editor .neeto-editor-table .neeto-editor-table__add-row{visibility:hidden}.editor-content__wrapper.neeto-editor .neeto-editor-table:hover .neeto-editor-table__add-column,.editor-content__wrapper.neeto-editor .neeto-editor-table:hover .neeto-editor-table__add-row{visibility:visible}ins{background-color:#c1f4cb!important;text-decoration:none!important}del{background-color:#faa!important}";
+var css = "@media screen and (max-width:768px){.neeto-molecules-document__wrapper{width:100%}}.neeto-molecules-document__wrapper .neeto-molecules-document__container{margin:0 auto;max-width:768px!important}.neeto-molecules-document__wrapper .neeto-molecules-document-editor__menubar{position:sticky;top:0;width:100%;z-index:20}.neeto-molecules-document__wrapper .neeto-molecules-document__title{margin:24px 0 0;width:100%}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input{padding:0!important}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea{color:rgb(var(--neeto-ui-black));font-size:42px;font-weight:700;line-height:48px;max-height:none;resize:none}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea::-moz-placeholder{color:rgb(var(--neeto-ui-gray-300))}.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea::placeholder{color:rgb(var(--neeto-ui-gray-300))}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-molecules-document__title .neeto-ui-input textarea{font-size:36px}}.neeto-molecules-document__wrapper .neeto-molecules-editor-content__error{margin:12px auto}.neeto-molecules-document__wrapper .ProseMirror{max-height:none;overflow-y:hidden}.neeto-molecules-document__wrapper .neeto-editor-fixed-menu{border:thin solid rgb(var(--neeto-ui-gray-200));border-left:none;border-right:none}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item{padding:6px}}.neeto-molecules-document__wrapper .neeto-editor-fixed-menu__wrapper{margin:0 auto;max-width:868px}@media screen and (max-width:768px){.neeto-molecules-document__wrapper .neeto-editor-fixed-menu__wrapper{overflow-x:auto}}.neeto-molecules-document__wrapper .editor-content__wrapper{border:none!important;padding:12px 16px 0!important;width:100%!important}.neeto-molecules-document__wrapper .editor-content-attachments{border:none;margin:12px auto 0;max-width:768px!important;padding-left:16px;padding-right:16px}.neeto-molecules-document__wrapper .editor-content-attachments--no-attachments{display:none!important}.neeto-molecules-document__wrapper .neeto-editor-character-count{margin:0 auto;max-width:768px!important;padding-left:16px;padding-right:16px}.neeto-molecules-document__wrapper .ne-attachments__wrapper{width:100%}.editor-content__wrapper.neeto-editor{padding:0 16px}.editor-content__wrapper.neeto-editor h1{font-size:var(--neeto-ui-text-h1);margin:2rem 0 .25rem}.editor-content__wrapper.neeto-editor h2{font-size:var(--neeto-ui-text-h2);margin:1.5rem 0 .25rem}.editor-content__wrapper.neeto-editor h3{font-size:var(--neeto-ui-text-h3);margin:1rem 0 .25rem}.editor-content__wrapper.neeto-editor h4{font-size:var(--neeto-ui-text-h4);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h5{font-size:var(--neeto-ui-text-h5);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h6{font-size:var(--neeto-ui-text-h6);margin:.75rem 0 .25rem}.editor-content__wrapper.neeto-editor h1,.editor-content__wrapper.neeto-editor h2,.editor-content__wrapper.neeto-editor h3,.editor-content__wrapper.neeto-editor h4,.editor-content__wrapper.neeto-editor h5,.editor-content__wrapper.neeto-editor h6{font-weight:var(--neeto-ui-font-semibold)}.editor-content__wrapper.neeto-editor p{font-size:var(--neeto-ui-text-body1);line-height:var(--neeto-ui-leading-normal)}.editor-content__wrapper.neeto-editor ol,.editor-content__wrapper.neeto-editor ul{margin-bottom:1rem;padding-left:24px}.editor-content__wrapper.neeto-editor ol li,.editor-content__wrapper.neeto-editor ul li{margin-bottom:.5rem}.editor-content__wrapper.neeto-editor ol li p,.editor-content__wrapper.neeto-editor ul li p{margin-bottom:0}.editor-content__wrapper.neeto-editor ol li:last-child,.editor-content__wrapper.neeto-editor ul li:last-child{margin-bottom:.5rem}.editor-content__wrapper.neeto-editor .neeto-editor-table{margin:8px 0 0}.editor-content__wrapper.neeto-editor .neeto-editor-table table{border-radius:0}.editor-content__wrapper.neeto-editor .neeto-editor-table p{margin-bottom:0}.editor-content__wrapper.neeto-editor .neeto-editor-table .neeto-editor-table__add-column,.editor-content__wrapper.neeto-editor .neeto-editor-table .neeto-editor-table__add-row{visibility:hidden}.editor-content__wrapper.neeto-editor .neeto-editor-table:hover .neeto-editor-table__add-column,.editor-content__wrapper.neeto-editor .neeto-editor-table:hover .neeto-editor-table__add-row{visibility:visible}ins{background-color:#c1f4cb!important;text-decoration:none!important}del{background-color:#faa!important}";
 injectCss.n(css,{});
 
 var useEditor = function useEditor(_ref) {

package/dist/cjs/Onboarding.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var classnames = require('classnames');
 var neetoCist = require('@bigbinary/neeto-cist');
@@ -16,6 +17,7 @@ var reactI18next = require('react-i18next');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
@@ -53,7 +55,7 @@ var CompletedScreen = withT__default["default"](function (_ref) {
   }, completeButtonProps)));
 });
 
-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%}";
+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) {
@@ -152,7 +154,6 @@ var WelcomeScreen = withT__default["default"](function (_ref) {
 });
 
 var Onboarding = function Onboarding(_ref) {
-  var _steps;
   var _ref$currentStep = _ref.currentStep,
     currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
     _ref$setCurrentStep = _ref.setCurrentStep,
@@ -162,10 +163,16 @@ var Onboarding = function Onboarding(_ref) {
     _ref$completeButtonPr = _ref.completeButtonProps,
     completeButtonProps = _ref$completeButtonPr === void 0 ? {} : _ref$completeButtonPr,
     _ref$helpScreenClassN = _ref.helpScreenClassName,
-    helpScreenClassName = _ref$helpScreenClassN === void 0 ? "" : _ref$helpScreenClassN;
+    helpScreenClassName = _ref$helpScreenClassN === void 0 ? "" : _ref$helpScreenClassN,
+    _ref$isAnimated = _ref.isAnimated,
+    isAnimated = _ref$isAnimated === void 0 ? true : _ref$isAnimated;
   var steps = React.useMemo(function () {
     return createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName);
   }, [onboardingSteps]);
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    direction = _useState2[0],
+    setDirection = _useState2[1];
   if (currentStep === 0) {
     return /*#__PURE__*/React__default["default"].createElement(WelcomeScreen, {
       currentStep: currentStep,
@@ -178,7 +185,9 @@ var Onboarding = function Onboarding(_ref) {
     });
   }
   var handleStepChange = function handleStepChange(index) {
-    return setCurrentStep(index + 1);
+    var nextStep = index + 1;
+    setDirection(currentStep > nextStep ? "backward" : "forward");
+    setCurrentStep(nextStep);
   };
   var isStepperVisible = steps.length > 1;
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -191,9 +200,16 @@ var Onboarding = function Onboarding(_ref) {
     steps: steps,
     activeIndex: currentStep - 1,
     setActiveIndex: handleStepChange
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-molecules-onboarding__content"
-  }, (_steps = steps[currentStep - 1]) === null || _steps === void 0 ? void 0 : _steps.element));
+  })), steps.map(function (step, index) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: index,
+      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
+      })
+    }, step === null || step === void 0 ? void 0 : step.element);
+  }));
 };
 
 module.exports = Onboarding;

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 React from \"react\";\n\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: 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 React from \"react\";\n\nimport 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 React from \"react\";\n\nimport { 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 React from \"react\";\n\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: 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: 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 React, { useMemo } 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}) => {\n  const steps = useMemo(\n    () =>\n      createSteps(\n        onboardingSteps,\n        setCurrentStep,\n        currentStep,\n        helpScreenClassName\n      ),\n    [onboardingSteps]\n  );\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={handleStepChange}\n          />\n        </div>\n      )}\n      <div className=\"neeto-molecules-onboarding__content\">\n        {steps[currentStep - 1]?.element}\n      </div>\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\nexport default Onboarding;\n"],"names":["CompletedScreen","withT","_ref","t","completeButtonProps","React","createElement","className","Typography","style","appName","globalProps","Button","_extends","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","_objectSpread","id","WelcomeScreen","Onboarding","_steps","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","_ref$helpScreenClassN","steps","useMemo","length","handleStepChange","index","isStepperVisible","Stepper","activeIndex","setActiveIndex"],"mappings":"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"}
+{"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 React from \"react\";\n\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: 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 React from \"react\";\n\nimport 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 React from \"react\";\n\nimport { 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 React from \"react\";\n\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: 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: 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 React, { useMemo, 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}) => {\n  const steps = useMemo(\n    () =>\n      createSteps(\n        onboardingSteps,\n        setCurrentStep,\n        currentStep,\n        helpScreenClassName\n      ),\n    [onboardingSteps]\n  );\n  const [direction, setDirection] = useState(\"\");\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 => {\n    const nextStep = index + 1;\n    setDirection(currentStep > nextStep ? \"backward\" : \"forward\");\n    setCurrentStep(nextStep);\n  };\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={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","React","createElement","className","Typography","style","appName","globalProps","Button","_extends","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","_objectSpread","id","WelcomeScreen","Onboarding","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","_ref$helpScreenClassN","_ref$isAnimated","isAnimated","steps","useMemo","_useState","useState","_useState2","_slicedToArray","direction","setDirection","length","handleStepChange","index","nextStep","isStepperVisible","Stepper","activeIndex","setActiveIndex","key","hidden"],"mappings":"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"}

package/dist/cjs/StickyRibbonsContainer.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var neetoEditor = require('@bigbinary/neeto-editor');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+var injectCss = require('./inject-css-80a5faa3.js');
+var reactQuery = require('react-query');
+var axios = require('axios');
+var constants = require('@bigbinary/neeto-commons-frontend/constants');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+
+var QUERY_KEYS = {
+  APP_STICKY_RIBBONS_LIST: "APP_STICKY_RIBBONS_LIST"
+};
+var STICKY_RIBBON_KIND_TO_STYLE = {
+  info: "info",
+  warning: "warning",
+  error: "danger"
+};
+var STICKY_RIBBONS_LOCAL_STORAGE_KEY = "dismissedStickyRibbons";
+
+var css = ".neeto-molecules-sticky-ribbon{border-radius:0}";
+injectCss.n(css,{});
+
+var fetchStickyRibbons = function fetchStickyRibbons() {
+  return axios__default["default"].get("".concat(constants.BASE_API_V1_URL, "/sticky_ribbons"));
+};
+var stickyRibbonsApi = {
+  fetchStickyRibbons: fetchStickyRibbons
+};
+
+var APP_STICKY_RIBBONS_LIST = QUERY_KEYS.APP_STICKY_RIBBONS_LIST;
+var useFetchStickyRibbons = function useFetchStickyRibbons() {
+  return reactQuery.useQuery([APP_STICKY_RIBBONS_LIST], stickyRibbonsApi.fetchStickyRibbons);
+};
+
+var StickyRibbonsContainer = function StickyRibbonsContainer() {
+  var _useLocalStorage = reactUtils.useLocalStorage(STICKY_RIBBONS_LOCAL_STORAGE_KEY, []),
+    _useLocalStorage2 = _slicedToArray__default["default"](_useLocalStorage, 2),
+    dismissedRibbons = _useLocalStorage2[0],
+    setDismissedRibbons = _useLocalStorage2[1];
+  var _useFetchStickyRibbon = useFetchStickyRibbons(),
+    _useFetchStickyRibbon2 = _useFetchStickyRibbon.data,
+    _useFetchStickyRibbon3 = _useFetchStickyRibbon2 === void 0 ? {} : _useFetchStickyRibbon2,
+    _useFetchStickyRibbon4 = _useFetchStickyRibbon3.stickyRibbons,
+    stickyRibbons = _useFetchStickyRibbon4 === void 0 ? [] : _useFetchStickyRibbon4;
+  var handleDismiss = function handleDismiss(ribbonId) {
+    var validRibbonIds = ramda.pluck("id", stickyRibbons);
+    var updatedDismissedRibbons = dismissedRibbons.filter(function (id) {
+      return validRibbonIds.includes(id);
+    });
+    setDismissedRibbons([].concat(_toConsumableArray__default["default"](updatedDismissedRibbons), [ribbonId]));
+  };
+  var visibleRibbons = stickyRibbons.filter(function (ribbon) {
+    return !dismissedRibbons.includes(ribbon.id);
+  });
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, visibleRibbons.map(function (_ref) {
+    var id = _ref.id,
+      kind = _ref.kind,
+      message = _ref.message;
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+      className: "neeto-molecules-sticky-ribbon w-full p-2.5 text-center",
+      key: id,
+      size: "large",
+      style: STICKY_RIBBON_KIND_TO_STYLE[kind],
+      onClose: function onClose() {
+        return handleDismiss(id);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(neetoEditor.EditorContent, {
+      className: "w-full",
+      content: message
+    }));
+  }));
+};
+
+module.exports = StickyRibbonsContainer;
+//# sourceMappingURL=StickyRibbonsContainer.js.map

package/dist/cjs/StickyRibbonsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyRibbonsContainer.js","sources":["../../src/components/StickyRibbonsContainer/constants.js","../../src/components/StickyRibbonsContainer/api.js","../../src/components/StickyRibbonsContainer/useStickyRibbonsApi.js","../../src/components/StickyRibbonsContainer/index.jsx"],"sourcesContent":["export const QUERY_KEYS = {\n  APP_STICKY_RIBBONS_LIST: \"APP_STICKY_RIBBONS_LIST\",\n};\n\nexport const STICKY_RIBBON_KIND_TO_STYLE = {\n  info: \"info\",\n  warning: \"warning\",\n  error: \"danger\",\n};\n\nexport const STICKY_RIBBONS_LOCAL_STORAGE_KEY = \"dismissedStickyRibbons\";\n","import axios from \"axios\";\nimport { BASE_API_V1_URL } from \"neetocommons/constants\";\n\nconst fetchStickyRibbons = () => axios.get(`${BASE_API_V1_URL}/sticky_ribbons`);\n\nconst stickyRibbonsApi = { fetchStickyRibbons };\n\nexport default stickyRibbonsApi;\n","import { useQuery } from \"react-query\";\n\nimport stickyRibbonsApi from \"./api\";\nimport { QUERY_KEYS } from \"./constants\";\n\nconst { APP_STICKY_RIBBONS_LIST } = QUERY_KEYS;\n\nconst useFetchStickyRibbons = () =>\n  useQuery([APP_STICKY_RIBBONS_LIST], stickyRibbonsApi.fetchStickyRibbons);\n\nexport { useFetchStickyRibbons };\n","import React from \"react\";\n\nimport { useLocalStorage } from \"neetocommons/react-utils\";\nimport { EditorContent } from \"neetoeditor\";\nimport { Tag } from \"neetoui\";\nimport { pluck } from \"ramda\";\n\nimport {\n  STICKY_RIBBONS_LOCAL_STORAGE_KEY,\n  STICKY_RIBBON_KIND_TO_STYLE,\n} from \"./constants\";\nimport \"./sticky-ribbons.scss\";\nimport { useFetchStickyRibbons } from \"./useStickyRibbonsApi\";\n\nconst StickyRibbonsContainer = () => {\n  const [dismissedRibbons, setDismissedRibbons] = useLocalStorage(\n    STICKY_RIBBONS_LOCAL_STORAGE_KEY,\n    []\n  );\n\n  const { data: { stickyRibbons = [] } = {} } = useFetchStickyRibbons();\n\n  const handleDismiss = ribbonId => {\n    const validRibbonIds = pluck(\"id\", stickyRibbons);\n    const updatedDismissedRibbons = dismissedRibbons.filter(id =>\n      validRibbonIds.includes(id)\n    );\n\n    setDismissedRibbons([...updatedDismissedRibbons, ribbonId]);\n  };\n\n  const visibleRibbons = stickyRibbons.filter(\n    ribbon => !dismissedRibbons.includes(ribbon.id)\n  );\n\n  return (\n    <>\n      {visibleRibbons.map(({ id, kind, message }) => (\n        <Tag\n          className=\"neeto-molecules-sticky-ribbon w-full p-2.5 text-center\"\n          key={id}\n          size=\"large\"\n          style={STICKY_RIBBON_KIND_TO_STYLE[kind]}\n          onClose={() => handleDismiss(id)}\n        >\n          <EditorContent className=\"w-full\" content={message} />\n        </Tag>\n      ))}\n    </>\n  );\n};\n\nexport default StickyRibbonsContainer;\n"],"names":["QUERY_KEYS","APP_STICKY_RIBBONS_LIST","STICKY_RIBBON_KIND_TO_STYLE","info","warning","error","STICKY_RIBBONS_LOCAL_STORAGE_KEY","fetchStickyRibbons","axios","get","concat","BASE_API_V1_URL","stickyRibbonsApi","useFetchStickyRibbons","useQuery","StickyRibbonsContainer","_useLocalStorage","useLocalStorage","_useLocalStorage2","_slicedToArray","dismissedRibbons","setDismissedRibbons","_useFetchStickyRibbon","_useFetchStickyRibbon2","data","_useFetchStickyRibbon3","_useFetchStickyRibbon4","stickyRibbons","handleDismiss","ribbonId","validRibbonIds","pluck","updatedDismissedRibbons","filter","id","includes","_toConsumableArray","visibleRibbons","ribbon","React","createElement","Fragment","map","_ref","kind","message","Tag","className","key","size","style","onClose","EditorContent","content"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.19.5",
+  "version": "1.19.7",
   "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

@@ -60,5 +60,6 @@ const Onboarding: React.FC<{
   setCurrentStep: React.Dispatch<React.SetStateAction<number>>;
   onboardingSteps?: OnboardingComponent[];
   helpScreenClassName?: string;
+  isAnimated?: boolean;
 }>;
 export default Onboarding;

package/types/StickyRibbonsContainer.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+/**
+ *
+ * A container that displays the sticky ribbons configured for the current neeto
+ *
+ * application in neetoTower, if any. The sticky ribbons will be automatically
+ *
+ * fetched from neetoTower and displayed within the container.
+ *
+ * @example 
+ *
+ * import StickyRibbonsContainer from "@bigbinary/neeto-molecules/StickyRibbonsContainer";
+ * 
+ * const Main = () => (
+ *   <>
+ *     <ToastContainer />
+ *     <StickyRibbonsContainer />
+ *     <Switch>
+ *       <Route />
+ *     </Switch>
+ *   </>
+ * );
+ * @endexample
+*/
+const StickyRibbonsContainer: React.FC<{}>;
+export default StickyRibbonsContainer;