@bigbinary/neeto-integrations-frontend 1.1.1 → 1.2.1

package/README.md

@@ -1,5 +1,8 @@
 @bigbinary/neeto-integrations-frontend
 
+![npm](https://img.shields.io/npm/v/@bigbinary/neeto-integrations-frontend?color=greenyellow)
+![npm](https://img.shields.io/npm/dw/@bigbinary/neeto-integrations-frontend?color=greenyellow)
+
 UI for integrations for all neeto products.
 
 ## Installation
@@ -12,6 +15,12 @@ yarn add @bigbinary/neeto-integrations-frontend
 
 Available components:
 
+Available components:
+
+- [Connect](./docs/connect/README.md)
+- [Finish](./docs/finish/README.md)
+- [Demo](./docs/demo/README.md)
+
 View the [example app](./example/src/App.jsx) to see usage.
 
 ## Development
@@ -44,3 +53,37 @@ will run the example app using webpack.
    are in watch mode and the changes are bundled automatically). Restart
    webpack-dev-server in host if changes are not applied.
 8. Video explanation on how to use yalc: https://vimeo.com/722958162/9e931b640c
+
+# Building and releasing.
+
+The `@bigbinary/neeto-integrations-frontend` package gets published to NPM when
+we merge a PR with `patch`, `minor` or `major` label to the `main` branch. The
+`patch` label is used for bug fixes, `minor` label is used for new features and
+`major` label is used for breaking changes. You can checkout the
+`Create and publish releases` workflow in GitHub Actions to get a live update.
+
+In case if you missed to add the label, you can manually publish the package.
+For that first you need to create a PR to update the version number in the
+`package.json` file and merge it to the `main` branch. After merging the PR, you
+need to create a
+[new github release](https://github.com/bigbinary/neeto-integrations-frontend/releases/new)
+from main branch. Whenever a new release is created with a new version number,
+the github actions will automatically publish the built package to npm. You can
+checkout the `Publish to npm` workflow in GitHub Actions to get a live update.
+
+Please note that before publishing the package, you need to verify the
+functionality in some of the neeto web-apps locally using `yalc` package
+manager. The usage of yalc is explained in this video:
+https://youtu.be/QBiYGP0Rhe0
+
+# Product integrations
+
+| Projects     | IntegrationsFrontend |
+| ------------ | :------------------: |
+| neetoChat    |  :white_check_mark:  |
+| neetoDesk    |  :white_check_mark:  |
+| neetoForm    |  :white_check_mark:  |
+| neetoInvoice |  :white_check_mark:  |
+| neetoBugtrap |  :white_check_mark:  |
+| neetoMonitor |  :white_check_mark:  |
+| neetoCal     |  :white_check_mark:  |

package/dist/index.cjs.js

@@ -3647,6 +3647,10 @@ var demo = {
 	subtitle: "Watch the following video to understand how you can utilize this integration:",
 	iFrameTitle: "Watch this video to utilize the integration"
 };
+var walkthroughModal = {
+	header: "Check how it behaves",
+	"continue": "Continue"
+};
 var zapier = {
 	apiKeys: "API Keys",
 	copyApiKey: "Copy API Key to Clipboard",
@@ -3668,6 +3672,7 @@ var zapier = {
 var en = {
 	common: common,
 	demo: demo,
+	walkthroughModal: walkthroughModal,
 	zapier: zapier
 };
 
@@ -3800,8 +3805,9 @@ var Modal = function Modal(_ref) {
     steps = _ref$steps === void 0 ? {} : _ref$steps,
     children = _ref.children;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
-    className: "w-screen-imp neeto-ui-h-screen neeto-ui-flex neeto-ui-transform-none neeto-ui-flex-col neeto-ui-rounded-none",
+    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-transform-none w-screen overflow-y-auto",
     isOpen: isOpen,
+    size: "fullScreen",
     onClose: onClose
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(Stepper, {
     steps: steps
@@ -4090,6 +4096,39 @@ Finish.prototypes = {
   secondaryButtonProps: propTypes.exports.object
 };
 
+var WalkthroughModal = function WalkthroughModal(_ref) {
+  var _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? pure.noop : _ref$isOpen,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? pure.noop : _ref$onClose,
+    _ref$videoUrl = _ref.videoUrl,
+    videoUrl = _ref$videoUrl === void 0 ? "" : _ref$videoUrl,
+    children = _ref.children;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
+    isOpen: isOpen,
+    size: "large",
+    onClose: onClose
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h2",
+    weight: "semibold"
+  }, t("walkthroughModal.header"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full py-10"
+  }, /*#__PURE__*/React__default["default"].createElement("video", {
+    autoPlay: true,
+    controls: true,
+    muted: true,
+    className: "cursor-pointer",
+    id: "walkthrough-video"
+  }, /*#__PURE__*/React__default["default"].createElement("source", {
+    src: videoUrl
+  })), children)), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    label: t("walkthroughModal.continue"),
+    onClick: onClose
+  })));
+};
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -4432,7 +4471,7 @@ function n(n, r) {
   }
 }
 
-var css = ".w-screen-imp{width:100vw!important}.intrinsic-container{height:0;overflow:hidden;position:relative}.intrinsic-container-16x9{padding-bottom:56.25%}.intrinsic-container-4x3{padding-bottom:75%}.intrinsic-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}";
+var css = ".intrinsic-container{height:0;overflow:hidden;position:relative}.intrinsic-container-16x9{padding-bottom:56.25%}.intrinsic-container-4x3{padding-bottom:75%}.intrinsic-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}";
 n(css,{});
 
 exports.Card = Card;
@@ -4440,5 +4479,6 @@ exports.Connect = Connect;
 exports.Demo = Demo;
 exports.Finish = Finish;
 exports.Modal = Modal;
+exports.WalkthroughModal = WalkthroughModal;
 exports.ZapierForm = ZapierForm;
 //# sourceMappingURL=index.cjs.js.map