flipper-ui 0.35.0 → 0.35.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.35.0",
+    "version": "0.35.2",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -14,7 +14,7 @@
         "start": "storybook dev -p 6006",
         "build": "yarn clean && yarn build:ts && yarn build:babel",
         "build:ts": "tsc --emitDeclarationOnly",
-        "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx\" --ignore \"**/*.spec.tsx\" --ignore \"**/*.stories.tsx\"",
+        "build:babel": "babel src --out-dir dist --extensions '.ts,.tsx' --ignore '**/*.stories.tsx' --ignore '**/*.spec.tsx' --ignore 'src/test/**'",
         "build:link": "yarn build && yarn copy:package && yarn publish:yalc",
         "docs:build": "storybook build -o docs",
         "copy:package": "cp package.json dist/",
@@ -30,69 +30,70 @@
         "test": "jest --verbose --silent --passWithNoTests --noStackTrace --runInBand --updateSnapshot"
     },
     "dependencies": {
-        "@emotion/react": "11.13.3",
-        "@emotion/styled": "11.13.0",
-        "@mui/icons-material": "6.1.6",
-        "@mui/material": "6.1.6",
-        "@mui/system": "6.1.6",
-        "@mui/x-date-pickers": "7.22.2",
-        "date-fns": "4.1.0",
+        "@emotion/react": "11.14.0",
+        "@emotion/styled": "11.14.0",
+        "@mui/icons-material": "6.2.0",
+        "@mui/material": "6.2.0",
+        "@mui/system": "6.2.0",
+        "@mui/x-date-pickers": "7.23.2",
         "ramda": "0.30.1",
         "react-loading-skeleton": "3.5.0",
         "react-number-format": "5.4.2"
     },
     "devDependencies": {
-        "@babel/cli": "7.25.9",
+        "@babel/cli": "7.26.4",
         "@babel/core": "7.26.0",
         "@babel/plugin-transform-runtime": "7.25.9",
         "@babel/preset-env": "7.26.0",
-        "@babel/preset-react": "7.25.9",
+        "@babel/preset-react": "7.26.3",
         "@babel/preset-typescript": "7.26.0",
-        "@faker-js/faker": "9.2.0",
-        "@storybook/addon-essentials": "8.4.2",
+        "@faker-js/faker": "9.3.0",
+        "@storybook/addon-essentials": "8.4.7",
         "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-        "@storybook/blocks": "8.4.2",
-        "@storybook/react": "8.4.2",
-        "@storybook/react-webpack5": "8.4.2",
-        "@stylistic/eslint-plugin": "2.10.1",
+        "@storybook/blocks": "8.4.7",
+        "@storybook/react": "8.4.7",
+        "@storybook/react-webpack5": "8.4.7",
+        "@stylistic/eslint-plugin": "2.12.1",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.6.3",
-        "@testing-library/react": "16.0.1",
+        "@testing-library/react": "16.1.0",
         "@testing-library/user-event": "14.5.2",
         "@types/jest": "29.5.14",
-        "@types/node": "22.9.0",
+        "@types/node": "22.10.2",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.14.0",
-        "@typescript-eslint/parser": "8.14.0",
+        "@typescript-eslint/eslint-plugin": "8.18.0",
+        "@typescript-eslint/parser": "8.18.0",
         "babel-loader": "9.2.1",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
-        "eslint": "9.14.0",
+        "date-fns": "4.1.0",
+        "eslint": "9.17.0",
         "eslint-config-prettier": "9.1.0",
-        "eslint-import-resolver-typescript": "3.6.3",
+        "eslint-import-resolver-typescript": "3.7.0",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.2.1",
         "eslint-plugin-react": "7.37.2",
-        "eslint-plugin-react-hooks": "5.0.0",
+        "eslint-plugin-react-hooks": "5.1.0",
         "fs-extra": "11.2.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
-        "prettier": "3.3.3",
+        "prettier": "3.4.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "storybook": "8.4.2",
+        "storybook": "8.4.7",
         "styled-components": "6.1.13",
         "ts-jest": "29.2.5",
         "ts-loader": "9.5.1",
-        "typescript": "5.6.3",
-        "typescript-eslint": "8.14.0",
+        "typescript": "5.7.2",
+        "typescript-eslint": "8.18.0",
         "uuid": "11.0.3",
-        "webpack": "5.96.1"
+        "webpack": "5.97.1"
     },
     "peerDependencies": {
+        "date-fns": "^4.0.0",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "styled-components": "^6.0.0"

package/test/mocks/chip-field-mock.js

@@ -1,26 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MultipleField = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _chipField = _interopRequireDefault(require("../../core/inputs/chip-field"));
-var MultipleField = exports.MultipleField = function MultipleField(_ref) {
-  var onChange = _ref.onChange;
-  return /*#__PURE__*/_react["default"].createElement(_chipField["default"], {
-    label: "Emails *",
-    list: [{
-      value: 'email@1.com',
-      label: 'email@1.com'
-    }, {
-      value: 'email@2.com',
-      label: 'email@2.com'
-    }],
-    error: false,
-    disabled: false,
-    value: [],
-    onChange: onChange
-  });
-};

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

@@ -1,303 +0,0 @@
-"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 _Save2 = _interopRequireDefault(require("@mui/icons-material/Save"));
-var _VisibilityOff2 = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
-var _Delete2 = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _Edit2 = _interopRequireDefault(require("@mui/icons-material/Edit"));
-var _Visibility2 = _interopRequireDefault(require("@mui/icons-material/Visibility"));
-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 _Cancel2 = _interopRequireDefault(require("@mui/icons-material/Cancel"));
-var _Check2 = _interopRequireDefault(require("@mui/icons-material/Check"));
-var _react = _interopRequireWildcard(require("react"));
-var _uuid = require("uuid");
-var _dataTable = require("../../core/data-display/data-table");
-var _dataTable2 = require("../../core/data-display/data-table/data-table");
-var _types = require("../../core/data-display/data-table/types");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var rows = function rows(data, setData, controllerRef) {
-  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("div", null, "Confirm Delete \"", data.name, "\"?"), /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_dataTable.DataTableAction, {
-    label: "CheckIcon",
-    onClick: function onClick() {
-      controllerRef.current.popRowView(data.id);
-      setData(function (dataList) {
-        return dataList.filter(function (item) {
-          return item.id !== data.id;
-        });
-      });
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_Check2["default"], null)), /*#__PURE__*/_react["default"].createElement(_dataTable.DataTableAction, {
-    label: "CancelIcon",
-    onClick: function onClick() {
-      controllerRef.current.popRowView(data.id);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_Cancel2["default"], null)))));
-};
-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 || _controllerRef$curren.addRow({
-      id: randomId()
-    });
-  };
-  var handleEdit = function handleEdit(id) {
-    return function () {
-      var _controllerRef$curren2;
-      (_controllerRef$curren2 = controllerRef.current) === null || _controllerRef$curren2 === 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 || _controllerRef$curren3.hideRow(id);
-    };
-  };
-  var handleDelete = function handleDelete(id) {
-    return function () {
-      var _controllerRef$curren4;
-      (_controllerRef$curren4 = controllerRef.current) === null || _controllerRef$curren4 === 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 || _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;
-      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 || _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(_Visibility2["default"], null)), /*#__PURE__*/_react["default"].createElement(_dataTable.DataTableAction, {
-          label: "Edit",
-          onClick: handleEdit(id)
-        }, /*#__PURE__*/_react["default"].createElement(_Edit2["default"], null)), /*#__PURE__*/_react["default"].createElement(_dataTable.DataTableAction, {
-          label: "Delete",
-          onClick: handleDelete(id)
-        }, /*#__PURE__*/_react["default"].createElement(_Delete2["default"], 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(_VisibilityOff2["default"], null)), /*#__PURE__*/_react["default"].createElement(_dataTable.DataTableAction, {
-          label: "Edit",
-          onClick: handleEdit(id)
-        }, /*#__PURE__*/_react["default"].createElement(_Edit2["default"], null)), /*#__PURE__*/_react["default"].createElement(_dataTable.DataTableAction, {
-          label: "Delete",
-          onClick: handleDelete(id)
-        }, /*#__PURE__*/_react["default"].createElement(_Delete2["default"], 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(_Save2["default"], null)), /*#__PURE__*/_react["default"].createElement(_dataTable.DataTableAction, {
-        label: "Cancel",
-        onClick: handleView(id)
-      }, /*#__PURE__*/_react["default"].createElement(_Cancel2["default"], null)));
-    }
-  }];
-  var rowViews = {
-    confirmDelete: function confirmDelete(_ref6) {
-      var data = _ref6.data;
-      // @ts-expect-error TODO: fix controller type
-      return rows(data, setData, controllerRef);
-    }
-  };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
-    onClick: handleAdd
-  }, "Add Row"), /*#__PURE__*/_react["default"].createElement(_dataTable2.DataTable, {
-    hidden: true,
-    data: data,
-    controllerRef: controllerRef,
-    errors: errors,
-    pagination: {
-      disabled: true
-    },
-    rowViews: rowViews,
-    columns: columns
-  }));
-};
-var _default = exports["default"] = Default;