flipper-ui 0.27.1 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.27.1",
+    "version": "0.28.0",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",
@@ -9,7 +9,8 @@
         "url": "https://github.com/nginformatica/flipper-ui.git"
     },
     "scripts": {
-        "test": "jest --coverage",
+        "test": "jest --silent --passWithNoTests --noStackTrace --runInBand",
+        "test:ci": "yarn test --coverage",
         "start": "start-storybook -p 6006",
         "clean": "rm -rf ./dist/*",
         "copy:package": "cp package.json dist/",
@@ -17,16 +18,14 @@
         "build": "yarn clean && yarn build:ts && yarn build:babel",
         "build:link": "yarn build && yarn copy:package && yarn publish:yalc",
         "build:ts": "tsc --emitDeclarationOnly",
-        "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx\"",
+        "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx\" --ignore \"**/*.spec.tsx\" --ignore \"**/*.stories.tsx\"",
         "lint": "eslint -c .eslintrc.json 'src/**/*.{ts,tsx}'",
         "lint:fix": "eslint -c .eslintrc.json --fix 'src/**/*.{ts,tsx}'",
         "predeploy": "yarn build && yarn storybook:build",
         "docs:build": "build-storybook -o docs",
         "type-check": "tsc --noEmit",
         "deploy": "gh-pages -d docs",
-        "release": "yarn build && node pre-publish.js && npm publish ./dist --access public",
-        "cy:run": "cypress run --component",
-        "cy:open": "cypress open --component"
+        "release": "yarn build && node pre-publish.js && npm publish ./dist --access public"
     },
     "author": "NG Informática",
     "license": "MIT",
@@ -40,10 +39,11 @@
         "faker": "5.5.3",
         "material-table": "1.69.3",
         "material-ui-chip-input": "2.0.0-beta.2",
-        "nginformatica-styleguide": "^1.0.2",
+        "nginformatica-styleguide": "1.0.2",
         "ramda": "0.25.0",
+        "react-loading-skeleton": "3.2.0",
         "react-number-format": "4.4.1",
-        "sprintf-js": "^1.1.2",
+        "sprintf-js": "1.1.2",
         "uuid": "9.0.0"
     },
     "devDependencies": {
@@ -53,27 +53,23 @@
         "@babel/preset-env": "7.20.2",
         "@babel/preset-react": "7.18.6",
         "@babel/preset-typescript": "7.18.6",
-        "@cypress/code-coverage": "3.10.0",
-        "@cypress/react": "6.2.0",
         "@storybook/addon-actions": "6.5.13",
         "@storybook/addon-essentials": "6.5.13",
         "@storybook/addon-links": "6.5.13",
         "@storybook/builder-webpack5": "6.5.13",
         "@storybook/manager-webpack5": "6.5.13",
         "@storybook/react": "6.5.13",
-        "@testing-library/cypress": "8.0.3",
-        "@testing-library/react": "^14.0.0",
-        "@testing-library/user-event": "^14.4.3",
-        "@types/cypress-cucumber-preprocessor": "4.0.1",
+        "@testing-library/react": "14.0.0",
+        "@testing-library/user-event": "14.4.3",
         "@types/faker": "5.5.3",
         "@types/history": "4.7.11",
-        "@types/jest": "^29.5.0",
+        "@types/jest": "29.5.0",
         "@types/node": "10.9.4",
         "@types/ramda": "0.25.36",
         "@types/react": "18.0.26",
         "@types/react-router": "5.1.2",
         "@types/react-router-dom": "5.1.2",
-        "@types/sprintf-js": "^1.1.2",
+        "@types/sprintf-js": "1.1.2",
         "@types/styled-components": "4.4.2",
         "@types/uuid": "8.3.4",
         "@typescript-eslint/eslint-plugin": "5.44.0",
@@ -81,15 +77,10 @@
         "babel-loader": "8.2.5",
         "babel-plugin-transform-class-properties": "6.24.1",
         "babel-plugin-transform-imports": "2.0.0",
-        "cypress": "12.0.2",
-        "cypress-cucumber-preprocessor": "4.3.1",
-        "cypress-plugin-tab": "^1.0.5",
-        "cypress-real-events": "^1.7.4",
-        "cypress-wait-until": "^1.7.2",
+        "canvas": "2.11.2",
         "date-fns": "2.4.1",
         "eslint": "8.28.0",
         "eslint-config-prettier": "8.5.0",
-        "eslint-plugin-cypress": "2.12.1",
         "eslint-plugin-import": "2.26.0",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "eslint-plugin-prettier": "4.2.1",
@@ -99,8 +90,9 @@
         "eslint-plugin-storybook": "0.6.7",
         "fs-extra": "7.0.0",
         "gh-pages": "2.0.0",
-        "jest": "^29.5.0",
-        "jest-environment-jsdom": "^29.5.0",
+        "identity-obj-proxy": "3.0.0",
+        "jest": "29.5.0",
+        "jest-environment-jsdom": "29.5.0",
         "node-fetch": "2.6.7",
         "node-polyfill-webpack-plugin": "2.0.1",
         "prettier": "2.8.0",
@@ -109,9 +101,9 @@
         "react-router": "5.1.2",
         "react-router-dom": "5.1.2",
         "styled-components": "5.0.0",
-        "ts-jest": "^29.1.0",
-        "ts-loader": "^9.4.2",
-        "typescript": "^4.3.0",
+        "ts-jest": "29.1.0",
+        "ts-loader": "9.4.2",
+        "typescript": "4.9.5",
         "webpack": "5"
     },
     "peerDependencies": {
@@ -124,9 +116,5 @@
             "!dist/",
             "!/node_modules/"
         ]
-    },
-    "cypress-cucumber-preprocessor": {
-        "nonGlobalStepDefinitions": true,
-        "moduleResolution": "node"
     }
 }

package/test/mocks/data-table-hidden-mock.d.ts

@@ -0,0 +1,2 @@
+declare const Default: () => JSX.Element;
+export default Default;

package/test/mocks/data-table-hidden-mock.js

@@ -0,0 +1,299 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _Button = _interopRequireDefault(require("@/core/Button"));
+var _DataTable = require("@/core/DataTable");
+var _DataTable2 = _interopRequireDefault(require("@/core/DataTable/DataTable"));
+var _types = require("@/core/DataTable/types");
+var _Typography = _interopRequireDefault(require("@/core/Typography"));
+var _icons = require("@/icons");
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
+var Default = function Default() {
+  var controllerRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    errors = _useState2[0],
+    setErrors = _useState2[1];
+  var randomId = function randomId() {
+    return Math.random().toString(36).substr(0, 12);
+  };
+  var _useState3 = (0, _react.useState)([{
+      id: 1,
+      name: 'PowerBI',
+      rowMode: _types.RowMode.Hide,
+      key: '123',
+      secret: '456'
+    }, {
+      id: 2,
+      name: 'External API',
+      rowMode: _types.RowMode.Hide,
+      key: '123',
+      secret: '456'
+    }, {
+      id: 3,
+      name: 'Sass',
+      rowMode: _types.RowMode.Hide,
+      key: '123',
+      secret: '456'
+    }]),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    data = _useState4[0],
+    setData = _useState4[1];
+  var handleAdd = function handleAdd() {
+    var _controllerRef$curren;
+    (_controllerRef$curren = controllerRef.current) === null || _controllerRef$curren === void 0 ? void 0 : _controllerRef$curren.addRow({
+      id: randomId()
+    });
+  };
+  var handleEdit = function handleEdit(id) {
+    return function () {
+      var _controllerRef$curren2;
+      (_controllerRef$curren2 = controllerRef.current) === null || _controllerRef$curren2 === void 0 ? void 0 : _controllerRef$curren2.editRow(id);
+    };
+  };
+  var handleHide = function handleHide(id) {
+    return function () {
+      var _controllerRef$curren3;
+      (_controllerRef$curren3 = controllerRef.current) === null || _controllerRef$curren3 === void 0 ? void 0 : _controllerRef$curren3.hideRow(id);
+    };
+  };
+  var handleDelete = function handleDelete(id) {
+    return function () {
+      var _controllerRef$curren4;
+      (_controllerRef$curren4 = controllerRef.current) === null || _controllerRef$curren4 === void 0 ? void 0 : _controllerRef$curren4.pushRowView(id, 'confirmDelete');
+    };
+  };
+  var handleView = function handleView(id) {
+    return function () {
+      var _controllerRef$curren5;
+      (_controllerRef$curren5 = controllerRef.current) === null || _controllerRef$curren5 === void 0 ? void 0 : _controllerRef$curren5.viewRow(id);
+    };
+  };
+  var isNullable = function isNullable(x) {
+    return x == null;
+  };
+  var isEmpty = function isEmpty(x) {
+    return x.trim().length === 0;
+  };
+  var handleErrors = function handleErrors(id) {
+    var nextItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var isPartial = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var errorFields = [{
+      field: 'name',
+      isErrorIf: [isEmpty]
+    }].filter(function (_ref) {
+      var field = _ref.field,
+        isErrorIf = _ref.isErrorIf;
+      // @ts-ignore
+      var value = nextItem[field];
+      if (isNullable(value)) {
+        if (isPartial) {
+          return false;
+        }
+        return true;
+      }
+      return isErrorIf.some(function (cond) {
+        return cond(value);
+      });
+    }).map(function (_ref2) {
+      var field = _ref2.field;
+      return field;
+    });
+    setErrors(function (errors) {
+      return _objectSpread(_objectSpread({}, errors), {}, (0, _defineProperty2["default"])({}, id, new Set(errorFields)));
+    });
+    return errorFields.length > 0;
+  };
+  var handleSave = function handleSave(id) {
+    var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return function () {
+      var _controllerRef$curren6, _controllerRef$curren7;
+      var nextItem = (_controllerRef$curren6 = controllerRef.current) === null || _controllerRef$curren6 === void 0 ? void 0 : _controllerRef$curren6.getEditedRowData(id);
+      if (!nextItem) {
+        return;
+      }
+      if (handleErrors(id, nextItem, !isNew)) {
+        return;
+      }
+      if (isNew) {
+        setData(function (data) {
+          return [_objectSpread(_objectSpread({}, nextItem), {}, {
+            key: (0, _uuid.v4)(),
+            secret: (0, _uuid.v4)()
+          })].concat((0, _toConsumableArray2["default"])(data));
+        });
+      } else {
+        setData(function (data) {
+          return data.map(function (item) {
+            if (item.id === id) {
+              return _objectSpread(_objectSpread({}, item), nextItem);
+            }
+            return item;
+          });
+        });
+      }
+      (_controllerRef$curren7 = controllerRef.current) === null || _controllerRef$curren7 === void 0 ? void 0 : _controllerRef$curren7.viewRow(id);
+    };
+  };
+  var columns = [{
+    title: 'Name',
+    field: 'name',
+    type: 'text',
+    editable: true
+  }, {
+    title: 'Key',
+    field: 'key',
+    type: 'text',
+    editable: false,
+    renderCell: function renderCell(_ref3) {
+      var rowMode = _ref3.rowMode,
+        _ref3$isNew = _ref3.isNew,
+        isNew = _ref3$isNew === void 0 ? false : _ref3$isNew,
+        value = _ref3.value;
+      if (isNew) {
+        return null;
+      }
+      if (rowMode === _types.RowMode.Hide) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "********");
+      }
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value);
+    }
+  }, {
+    title: 'Secret',
+    field: 'secret',
+    type: 'text',
+    editable: false,
+    renderCell: function renderCell(_ref4) {
+      var rowMode = _ref4.rowMode,
+        _ref4$isNew = _ref4.isNew,
+        isNew = _ref4$isNew === void 0 ? false : _ref4$isNew,
+        value = _ref4.value;
+      if (isNew) {
+        return null;
+      }
+      if (rowMode === _types.RowMode.Hide) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "********");
+      }
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value);
+    }
+  }, {
+    title: 'Actions',
+    type: 'actions',
+    align: 'center',
+    cellStyle: {
+      width: '60px'
+    },
+    renderCell: function renderCell(_ref5) {
+      var id = _ref5.data.id,
+        rowMode = _ref5.rowMode,
+        _ref5$isNew = _ref5.isNew,
+        isNew = _ref5$isNew === void 0 ? false : _ref5$isNew;
+      if (rowMode === _types.RowMode.View) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Show",
+          onClick: handleView(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Visibility, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Edit",
+          onClick: handleEdit(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Edit, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Delete",
+          onClick: handleDelete(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Delete, null)));
+      }
+      if (rowMode === _types.RowMode.Hide) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Show",
+          onClick: handleHide(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.VisibilityOff, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Edit",
+          onClick: handleEdit(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Edit, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+          label: "Delete",
+          onClick: handleDelete(id)
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Delete, null)));
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+        label: "Save",
+        onClick: handleSave(id, isNew)
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Save, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+        label: "Cancel",
+        onClick: handleView(id)
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Cancel, null)));
+    }
+  }];
+  var rowViews = {
+    confirmDelete: function confirmDelete(_ref6) {
+      var data = _ref6.data;
+      return /*#__PURE__*/_react["default"].createElement("td", {
+        colSpan: 5
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          padding: '16px',
+          justifyContent: 'space-between'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Confirm Delete \"", data.name, "\"?"), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+        label: "CheckIcon",
+        onClick: function onClick() {
+          var _controllerRef$curren8;
+          (_controllerRef$curren8 = controllerRef.current) === null || _controllerRef$curren8 === void 0 ? void 0 : _controllerRef$curren8.popRowView(data.id);
+          setData(function (dataList) {
+            return dataList.filter(function (item) {
+              return item.id !== data.id;
+            });
+          });
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Check, null)), /*#__PURE__*/_react["default"].createElement(_DataTable.DataTableAction, {
+        label: "CancelIcon",
+        onClick: function onClick() {
+          var _controllerRef$curren9;
+          (_controllerRef$curren9 = controllerRef.current) === null || _controllerRef$curren9 === void 0 ? void 0 : _controllerRef$curren9.popRowView(data.id);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Cancel, null)))));
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleAdd
+  }, "Add Row"), /*#__PURE__*/_react["default"].createElement(_DataTable2["default"], {
+    hidden: true,
+    data: data,
+    controllerRef: controllerRef,
+    errors: errors,
+    pagination: {
+      disabled: true
+    },
+    rowViews: rowViews,
+    columns: columns
+  }));
+};
+var _default = Default;
+exports["default"] = _default;

package/test/mocks/data-table-mock.d.ts

@@ -0,0 +1,2 @@
+declare const Default: () => JSX.Element;
+export default Default;