@bigbinary/neeto-molecules 1.1.4 → 1.1.5

package/README.md

@@ -55,6 +55,7 @@ https://neeto-molecules.neeto.com/
 - [Breadcrumbs](./docs/components.md#Breadcrumbs)
 - [Security](./docs/components.md#Security)
 - [SendToFields](./docs/components.md#SendToFieldsComponent)
+- [ConfirmationModal](./docs/components.md#ConfirmationModal)
 
 ## Installation Instructions
 

package/dist/ConfirmationModal.cjs.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var React = require('react');
+var neetoui = require('@bigbinary/neetoui');
+var formik = require('@bigbinary/neetoui/formik');
+var ramda = require('ramda');
+var i18next = require('i18next');
+var yup = require('yup');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+
+var INITIAL_VALUES = {
+  confirmationText: ""
+};
+
+var deletionValidationSchema = function deletionValidationSchema(confirmationText) {
+  var errorMessage = i18next.t("neetoMolecules.confirmationModal.required", {
+    confirmationText: confirmationText
+  });
+  return yup__namespace.object({
+    confirmationText: yup__namespace.string().required(errorMessage).oneOf([confirmationText], errorMessage)
+  });
+};
+
+var ConfirmationModal = function ConfirmationModal(_ref) {
+  var buttonLabel = _ref.buttonLabel,
+    confirmationText = _ref.confirmationText,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? true : _ref$isOpen,
+    _ref$isSubmitting = _ref.isSubmitting,
+    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit;
+  var formikProps = {
+    initialValues: INITIAL_VALUES,
+    validationSchema: deletionValidationSchema(confirmationText),
+    onSubmit: onSubmit
+  };
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    "data-testid": "confirmation-modal"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h2"
+  }, title)), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, {
+    className: "space-y-4"
+  }, ramda.type(description) === "String" ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, description) : description, /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+    className: "flex items-start space-x-1",
+    formikProps: formikProps
+  }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+    className: "flex-auto",
+    "data-testid": "confirmation-modal-input",
+    name: "confirmationText"
+  }), /*#__PURE__*/React__default["default"].createElement(formik.Button, {
+    label: buttonLabel,
+    loading: isSubmitting,
+    style: "danger"
+  }))));
+};
+
+module.exports = ConfirmationModal;
+//# sourceMappingURL=ConfirmationModal.cjs.js.map

package/dist/ConfirmationModal.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationModal.cjs.js","sources":["../src/components/ConfirmationModal/constants.js","../src/components/ConfirmationModal/utils.js","../src/components/ConfirmationModal/index.jsx"],"sourcesContent":["export const INITIAL_VALUES = { confirmationText: \"\" };\n","import { t } from \"i18next\";\nimport * as yup from \"yup\";\n\nexport const deletionValidationSchema = confirmationText => {\n  const errorMessage = t(\"neetoMolecules.confirmationModal.required\", {\n    confirmationText,\n  });\n\n  return yup.object({\n    confirmationText: yup\n      .string()\n      .required(errorMessage)\n      .oneOf([confirmationText], errorMessage),\n  });\n};\n","import React from \"react\";\n\nimport { Modal, Typography } from \"neetoui\";\nimport { Button, Form, Input } from \"neetoui/formik\";\nimport PropTypes from \"prop-types\";\nimport { type } from \"ramda\";\n\nimport { INITIAL_VALUES } from \"./constants\";\nimport { deletionValidationSchema } from \"./utils\";\n\nconst ConfirmationModal = ({\n  buttonLabel,\n  confirmationText,\n  description = \"\",\n  isOpen = true,\n  isSubmitting = false,\n  title = \"\",\n  onClose,\n  onSubmit,\n}) => {\n  const formikProps = {\n    initialValues: INITIAL_VALUES,\n    validationSchema: deletionValidationSchema(confirmationText),\n    onSubmit,\n  };\n\n  return (\n    <Modal {...{ isOpen, onClose }} data-testid=\"confirmation-modal\">\n      <Modal.Header>\n        <Typography style=\"h2\">{title}</Typography>\n      </Modal.Header>\n      <Modal.Body className=\"space-y-4\">\n        {type(description) === \"String\" ? (\n          <Typography>{description}</Typography>\n        ) : (\n          description\n        )}\n        <Form className=\"flex items-start space-x-1\" {...{ formikProps }}>\n          <Input\n            className=\"flex-auto\"\n            data-testid=\"confirmation-modal-input\"\n            name=\"confirmationText\"\n          />\n          <Button label={buttonLabel} loading={isSubmitting} style=\"danger\" />\n        </Form>\n      </Modal.Body>\n    </Modal>\n  );\n};\n\nConfirmationModal.propTypes = {\n  /**\n   * Label of the action button in the Modal\n   */\n  buttonLabel: PropTypes.string,\n  /**\n   * Text that is expected to be entered by the user\n   */\n  confirmationText: PropTypes.string,\n  /**\n   * Modal description\n   */\n  description: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n    PropTypes.string,\n  ]),\n  /**\n   * To be passed to loading prop of the action button\n   */\n  isSubmitting: PropTypes.bool,\n  /**\n   * To specify whether the modal should be opened or closed.\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Title of the modal\n   */\n  title: PropTypes.string,\n  /**\n   * Handler function that is invoked when the close button is clicked\n   */\n  onClose: PropTypes.func,\n  /**\n   * Handler function that is invoked when the action button is clicked\n   */\n  onSubmit: PropTypes.func,\n};\n\nexport default ConfirmationModal;\n"],"names":["INITIAL_VALUES","confirmationText","deletionValidationSchema","errorMessage","t","yup","object","string","required","oneOf","ConfirmationModal","_ref","buttonLabel","_ref$description","description","_ref$isOpen","isOpen","_ref$isSubmitting","isSubmitting","_ref$title","title","onClose","onSubmit","formikProps","initialValues","validationSchema","React","createElement","Modal","Header","Typography","style","Body","className","type","Form","Input","name","Button","label","loading"],"mappings":"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"}

package/dist/ConfirmationModal.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Modal, Typography } from '@bigbinary/neetoui';
+import { Form, Input, Button } from '@bigbinary/neetoui/formik';
+import { type } from 'ramda';
+import { t } from 'i18next';
+import * as yup from 'yup';
+
+var INITIAL_VALUES = {
+  confirmationText: ""
+};
+
+var deletionValidationSchema = function deletionValidationSchema(confirmationText) {
+  var errorMessage = t("neetoMolecules.confirmationModal.required", {
+    confirmationText: confirmationText
+  });
+  return yup.object({
+    confirmationText: yup.string().required(errorMessage).oneOf([confirmationText], errorMessage)
+  });
+};
+
+var ConfirmationModal = function ConfirmationModal(_ref) {
+  var buttonLabel = _ref.buttonLabel,
+    confirmationText = _ref.confirmationText,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? true : _ref$isOpen,
+    _ref$isSubmitting = _ref.isSubmitting,
+    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit;
+  var formikProps = {
+    initialValues: INITIAL_VALUES,
+    validationSchema: deletionValidationSchema(confirmationText),
+    onSubmit: onSubmit
+  };
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    "data-testid": "confirmation-modal"
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2"
+  }, title)), /*#__PURE__*/React.createElement(Modal.Body, {
+    className: "space-y-4"
+  }, type(description) === "String" ? /*#__PURE__*/React.createElement(Typography, null, description) : description, /*#__PURE__*/React.createElement(Form, {
+    className: "flex items-start space-x-1",
+    formikProps: formikProps
+  }, /*#__PURE__*/React.createElement(Input, {
+    className: "flex-auto",
+    "data-testid": "confirmation-modal-input",
+    name: "confirmationText"
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: buttonLabel,
+    loading: isSubmitting,
+    style: "danger"
+  }))));
+};
+
+export { ConfirmationModal as default };
+//# sourceMappingURL=ConfirmationModal.js.map

package/dist/ConfirmationModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationModal.js","sources":["../src/components/ConfirmationModal/constants.js","../src/components/ConfirmationModal/utils.js","../src/components/ConfirmationModal/index.jsx"],"sourcesContent":["export const INITIAL_VALUES = { confirmationText: \"\" };\n","import { t } from \"i18next\";\nimport * as yup from \"yup\";\n\nexport const deletionValidationSchema = confirmationText => {\n  const errorMessage = t(\"neetoMolecules.confirmationModal.required\", {\n    confirmationText,\n  });\n\n  return yup.object({\n    confirmationText: yup\n      .string()\n      .required(errorMessage)\n      .oneOf([confirmationText], errorMessage),\n  });\n};\n","import React from \"react\";\n\nimport { Modal, Typography } from \"neetoui\";\nimport { Button, Form, Input } from \"neetoui/formik\";\nimport PropTypes from \"prop-types\";\nimport { type } from \"ramda\";\n\nimport { INITIAL_VALUES } from \"./constants\";\nimport { deletionValidationSchema } from \"./utils\";\n\nconst ConfirmationModal = ({\n  buttonLabel,\n  confirmationText,\n  description = \"\",\n  isOpen = true,\n  isSubmitting = false,\n  title = \"\",\n  onClose,\n  onSubmit,\n}) => {\n  const formikProps = {\n    initialValues: INITIAL_VALUES,\n    validationSchema: deletionValidationSchema(confirmationText),\n    onSubmit,\n  };\n\n  return (\n    <Modal {...{ isOpen, onClose }} data-testid=\"confirmation-modal\">\n      <Modal.Header>\n        <Typography style=\"h2\">{title}</Typography>\n      </Modal.Header>\n      <Modal.Body className=\"space-y-4\">\n        {type(description) === \"String\" ? (\n          <Typography>{description}</Typography>\n        ) : (\n          description\n        )}\n        <Form className=\"flex items-start space-x-1\" {...{ formikProps }}>\n          <Input\n            className=\"flex-auto\"\n            data-testid=\"confirmation-modal-input\"\n            name=\"confirmationText\"\n          />\n          <Button label={buttonLabel} loading={isSubmitting} style=\"danger\" />\n        </Form>\n      </Modal.Body>\n    </Modal>\n  );\n};\n\nConfirmationModal.propTypes = {\n  /**\n   * Label of the action button in the Modal\n   */\n  buttonLabel: PropTypes.string,\n  /**\n   * Text that is expected to be entered by the user\n   */\n  confirmationText: PropTypes.string,\n  /**\n   * Modal description\n   */\n  description: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n    PropTypes.string,\n  ]),\n  /**\n   * To be passed to loading prop of the action button\n   */\n  isSubmitting: PropTypes.bool,\n  /**\n   * To specify whether the modal should be opened or closed.\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Title of the modal\n   */\n  title: PropTypes.string,\n  /**\n   * Handler function that is invoked when the close button is clicked\n   */\n  onClose: PropTypes.func,\n  /**\n   * Handler function that is invoked when the action button is clicked\n   */\n  onSubmit: PropTypes.func,\n};\n\nexport default ConfirmationModal;\n"],"names":["INITIAL_VALUES","confirmationText","deletionValidationSchema","errorMessage","t","yup","object","string","required","oneOf","ConfirmationModal","_ref","buttonLabel","_ref$description","description","_ref$isOpen","isOpen","_ref$isSubmitting","isSubmitting","_ref$title","title","onClose","onSubmit","formikProps","initialValues","validationSchema","React","createElement","Modal","Header","Typography","style","Body","className","type","Form","Input","name","Button","label","loading"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "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/src/translations/en.json

@@ -552,6 +552,9 @@
       "errors": {
         "invalidCsv": "Invalid csv, email column not found"
       }
+    },
+    "confirmationModal": {
+      "required": "Enter \"{{confirmationText}}\" to confirm"
     }
   }
 }

package/types/ConfirmationModal.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+/**
+ *
+ * When users have to delete an entity that is integral to the app, it is
+ *
+ * considered a best practice to add an extra step to confirm if they want to
+ *
+ * delete the entity. This modal contains an input field where you can ask the user
+ *
+ * to enter something in order to confirm if they want to delete that component. It
+ *
+ * can also be used to stress on the fact that the deletion is irreversible. This
+ *
+ * modal can be used for any other operations apart from deletion. You can see a
+ *
+ * similar modal being used by GitHub when you delete a repository. GitHub asks you
+ *
+ * to confirm the deletion by prompting you to enter the name of the repository in
+ *
+ * an input field.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import ConfirmationModal from "@bigbinary/neeto-molecules/ConfirmationModal";
+ * 
+ * import { deleteProject } from "apis/projectApi.js";
+ * 
+ * const SendToFieldsComponent = ({ project }) => {
+ *   const [isDeleting, setIsDeleting] = useState(false);
+ *   const [showModal, setShowModal] = useState(false);
+ * 
+ *   return (
+ *     <ConfirmationModal
+ *       buttonLabel="Delete Project"
+ *       confirmationText={project.name}
+ *       description="Once the project is deleted it cannot be restored. If you want to proceed, enter the name of the project below"
+ *       isOpen={showModal}
+ *       isSubmitting={isDeleting}
+ *       title="Confirm project deletion"
+ *       onClose={() => setShowModal(false)}
+ *       onSubmit={async () => {
+ *         setIsDeleting(true);
+ *         await deleteProject(project.name);
+ *         setShowModal(false);
+ *         setIsDeleting(false);
+ *       }}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+const ConfirmationModal: React.FC<{
+  buttonLabel: string;
+  confirmationText: string;
+  description?: React.ReactNode | React.ReactNode[] | string;
+  isOpen?: boolean;
+  isSubmitting?: boolean;
+  title?: string;
+  onClose: Function;
+  onSubmit: Function;
+}>;
+export default ConfirmationModal;