@bigbinary/neeto-molecules 1.1.10 → 1.1.11

package/dist/ToggleFeatureCard/index.js

@@ -0,0 +1,148 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useRef, useState, useEffect } from "react";
+import classnames from "classnames";
+import { useFormikContext } from "formik";
+import { slugify } from "@bigbinary/neeto-commons-frontend/pure";
+import { useHotKeys, useOnClickOutside } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Edit, Close } from "@bigbinary/neeto-icons";
+import { Typography, Label, Button } from "@bigbinary/neetoui";
+import { Input } from "@bigbinary/neetoui/formik";
+import { isEmpty } from "ramda";
+import { useTranslation } from "react-i18next";
+import { SIZES } from "./constants";
+import useScrollIntoView from "./hooks/useScrollIntoView";
+import "./toggleFeatureCard.scss";
+import TooltipSwitch from "./ToolTipSwitch";
+var ToggleFeatureCard = function ToggleFeatureCard(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? null : _ref$description,
+    _ref$switchName = _ref.switchName,
+    switchName = _ref$switchName === void 0 ? "switch" : _ref$switchName,
+    _ref$titleDataCy = _ref.titleDataCy,
+    titleDataCy = _ref$titleDataCy === void 0 ? "" : _ref$titleDataCy,
+    _ref$switchDataCy = _ref.switchDataCy,
+    switchDataCy = _ref$switchDataCy === void 0 ? "" : _ref$switchDataCy,
+    _ref$descriptionDataC = _ref.descriptionDataCy,
+    descriptionDataCy = _ref$descriptionDataC === void 0 ? "" : _ref$descriptionDataC,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    inputProps = _ref.inputProps,
+    switchProps = _ref.switchProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var cardRef = useRef();
+  var id = slugify(title);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values,
+    submitCount = _useFormikContext.submitCount,
+    errors = _useFormikContext.errors,
+    initialValues = _useFormikContext.initialValues;
+  useEffect(function () {
+    if (submitCount >= 1 && isEmpty(errors)) {
+      setIsEditing(false);
+    }
+  }, [submitCount]);
+  useEffect(function () {
+    if (!isEmpty(errors)) {
+      setIsEditing(true);
+    }
+  }, [values, errors]);
+  var _useState3 = useState(location.hash.split("#")[1] === id),
+    _useState4 = _slicedToArray(_useState3, 2),
+    shouldHighlight = _useState4[0],
+    setShouldHighlight = _useState4[1];
+  var hasInput = (values === null || values === void 0 ? void 0 : values[switchName]) && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.name);
+  var enabledCondition = values === null || values === void 0 ? void 0 : values[switchName];
+  var handleInputReset = function handleInputReset() {
+    setIsEditing(false);
+    hasInput && setFieldValue(inputProps === null || inputProps === void 0 ? void 0 : inputProps.name, initialValues === null || initialValues === void 0 ? void 0 : initialValues[inputProps === null || inputProps === void 0 ? void 0 : inputProps.name]);
+  };
+  useOnClickOutside(cardRef, function () {
+    return setShouldHighlight(false);
+  });
+  useScrollIntoView({
+    elementId: id,
+    trigger: shouldHighlight
+  });
+  var inputRef = useHotKeys("enter", function () {
+    return setIsEditing(false);
+  }, {
+    mode: "scoped"
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "toggle-feature-card",
+    id: id,
+    ref: cardRef,
+    className: classnames("neeto-ui-bg-white  neeto-ui-rounded-lg flex flex-col space-y-2 border p-4", {
+      "neeto-ui-border-gray-300": !shouldHighlight
+    }, {
+      "toggle-feature-card--highlighted": shouldHighlight
+    })
+  }, /*#__PURE__*/React.createElement(Label, {
+    className: "flex flex-row items-center gap-2"
+  }, /*#__PURE__*/React.createElement(TooltipSwitch, _extends({}, _objectSpread({
+    enabledCondition: enabledCondition,
+    isDisabled: isDisabled,
+    switchDataCy: switchDataCy
+  }, switchProps), {
+    name: switchName
+  })), /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    "data-cy": titleDataCy,
+    "data-testid": "toggle-feature-card-title",
+    style: "h4",
+    weight: "semibold"
+  }, title)), /*#__PURE__*/React.createElement(Typography, {
+    className: "mb-4 whitespace-pre-line",
+    "data-cy": descriptionDataCy,
+    "data-testid": "toggle-feature-card-description",
+    style: "body2"
+  }, description), hasInput && !isEditing && /*#__PURE__*/React.createElement("div", {
+    className: "m-0 flex flex-row items-center space-x-2"
+  }, inputProps === null || inputProps === void 0 ? void 0 : inputProps.display, /*#__PURE__*/React.createElement(Button, {
+    "data-cy": inputProps === null || inputProps === void 0 ? void 0 : inputProps.editButtonDataCy,
+    "data-testid": "toggle-feature-card-input-display-edit",
+    icon: Edit,
+    size: "small",
+    style: "text",
+    type: "button",
+    tooltipProps: {
+      content: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.editButtonTooltip) || t("neetoMolecules.toggleFeatureCard.input.editButtonDefaultTooltip"),
+      position: "right"
+    },
+    onClick: function onClick() {
+      return setIsEditing(true);
+    }
+  })), hasInput && isEditing && /*#__PURE__*/React.createElement(Input, _extends({
+    autoFocus: true,
+    "data-cy": inputProps === null || inputProps === void 0 ? void 0 : inputProps.dataCy,
+    "data-testid": "toggle-feature-card-input-field",
+    label: inputProps === null || inputProps === void 0 ? void 0 : inputProps.label,
+    name: inputProps === null || inputProps === void 0 ? void 0 : inputProps.name,
+    placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder,
+    ref: inputRef,
+    size: "medium",
+    suffix: /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "toggle-feature-card-input-reset",
+      icon: Close,
+      size: "small",
+      style: "text",
+      type: "button",
+      onClick: handleInputReset
+    })
+  }, inputProps)), children);
+};
+export default ToggleFeatureCard;

package/dist/ToggleFeatureCard/toggleFeatureCard.scss

@@ -0,0 +1,4 @@
+.toggle-feature-card--highlighted {
+  border-color: rgb(var(--neeto-ui-primary-800)) !important;
+  box-shadow: 0px 0px 0px 1px rgb(var(--neeto-ui-primary-800));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "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>",
@@ -9,10 +9,10 @@
     "prepare": "husky install",
     "sync_with_wheel": "./.scripts/sync_with_wheel.sh",
     "test": "TZ=UTC jest --runInBand",
-    "bundle": "NODE_ENV=production rollup -c rollup.config.js && yarn build:jsdoc",
+    "bundle": "bash ./.scripts/bundle.sh",
     "build": "NODE_ENV=production build-storybook",
     "serve": "node .storybook/db",
-    "watch": "rollup -c rollup.config.js --watch",
+    "watch": "babel src/components --out-dir dist --copy-files --watch",
     "storybook": "(trap 'kill 0' SIGINT; node .storybook/db & NODE_ENV=development start-storybook -p 6006)",
     "build:jsdoc": "node ./.scripts/jsdoc-builder.mjs"
   },
@@ -33,12 +33,30 @@
   },
   "exports": {
     "./*": {
-      "import": "./dist/*.js",
+      "import": "./dist/*/index.js",
       "require": "./dist/*.cjs.js",
       "types": "./types/*.d.ts"
     }
   },
+  "dependencies": {
+    "@rails/activestorage": "^7.0.5",
+    "countries-list": "^2.6.1",
+    "framer-motion": "^4.1.17",
+    "ip-num": "^1.5.0",
+    "libphonenumber-js": "^1.10.26",
+    "mousetrap": "^1.6.5",
+    "mousetrap-global-bind": "^1.1.0",
+    "papaparse": "^5.4.0",
+    "platform": "1.3.6",
+    "prismjs": "^1.29.0",
+    "qrcode.react": "^3.1.0",
+    "react-dropzone": "^11.2.4",
+    "react-transition-group": "^4.4.5",
+    "react-window": "^1.8.9",
+    "zustand": "^4.1.2"
+  },
   "devDependencies": {
+    "@babel/cli": "^7.23.0",
     "@babel/core": "^7.19.1",
     "@babel/eslint-parser": "7.17.0",
     "@babel/plugin-transform-runtime": "^7.19.1",
@@ -62,12 +80,6 @@
     "@fullcalendar/react": "^6.1.8",
     "@fullcalendar/timegrid": "^6.1.8",
     "@honeybadger-io/react": "2.0.1",
-    "@rails/activestorage": "^7.0.5",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "6.5.16",
     "@storybook/addon-postcss": "^2.0.0",
@@ -75,7 +87,6 @@
     "@storybook/manager-webpack5": "6.5.16",
     "@storybook/preset-scss": "1.0.3",
     "@storybook/react": "6.5.16",
-    "@svgr/rollup": "^6.2.1",
     "@svgr/webpack": "^6.5.1",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@testing-library/jest-dom": "5.16.2",
@@ -88,14 +99,16 @@
     "babel-jest": "27.0.6",
     "babel-loader": "^8.2.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-js-logger": "1.0.17",
     "babel-plugin-macros": "3.1.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-preset-react": "6.24.1",
     "babel-preset-typescript": "^7.0.0-alpha.19",
-    "countries-list": "^2.6.1",
     "css-loader": "4.3.0",
+    "cssnano": "^6.0.1",
     "dayjs": "1.11.1",
     "eslint": "8.14.0",
     "eslint-config-prettier": "8.5.0",
@@ -109,53 +122,35 @@
     "eslint-plugin-react-hooks": "4.5.0",
     "eslint-plugin-unused-imports": "2.0.0",
     "formik": "2.4.5",
-    "framer-motion": "^4.1.17",
     "husky": "^7.0.4",
     "i18next": "^22.5.1",
-    "ip-num": "^1.5.0",
     "jest": "27.5.1",
     "js-logger": "^1.6.1",
     "json-server": "0.17.1",
-    "libphonenumber-js": "^1.10.26",
     "lint-staged": "^12.3.7",
     "mixpanel-browser": "^2.45.0",
-    "mousetrap": "^1.6.5",
-    "mousetrap-global-bind": "^1.1.0",
     "nock": "^13.3.3",
-    "papaparse": "^5.4.0",
-    "platform": "1.3.6",
     "postcss": "^8.4.17",
     "postcss-import": "^15.0.0",
     "postcss-loader": "^7.0.1",
     "postcss-preset-env": "7.8.2",
     "prettier": "2.6.2",
     "prettier-plugin-tailwindcss": "0.1.10",
-    "prismjs": "^1.29.0",
-    "qrcode.react": "^3.1.0",
     "ramda": "^0.29.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^11.2.4",
     "react-helmet": "^6.1.0",
     "react-i18next": "^12.3.1",
     "react-query": "^3.39.2",
     "react-router-dom": "^5.3.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.0.8",
-    "react-transition-group": "^4.4.5",
-    "react-window": "^1.8.9",
-    "rollup": "^2.76.0",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-cleaner": "^1.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-styles": "^4.0.0",
     "sass": "^1.58.1",
     "sass-loader": "10.0.2",
     "storybook-dark-mode": "^2.1.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "yup": "^0.32.11",
-    "zustand": "^4.1.2"
+    "yup": "^0.32.11"
   },
   "peerDependencies": {
     "@bigbinary/neeto-commons-frontend": "latest",
@@ -171,17 +166,15 @@
     "@fullcalendar/react": "^6.1.8",
     "@fullcalendar/timegrid": "^6.1.8",
     "@honeybadger-io/react": "2.0.1",
-    "@svgr/webpack": "^6.5.1",
     "antd": "5.9.2",
     "axios": "^0.27.2",
     "dayjs": "1.11.1",
-    "dotenv-webpack": "^8.0.1",
     "formik": "2.4.5",
     "i18next": "^22.5.1",
     "js-logger": "^1.6.1",
-    "mixpanel-browser": "^2.45.0",
     "ramda": "^0.29.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-i18next": "^12.3.1",
     "react-query": "^3.39.2",