flipper-ui 0.27.2 → 0.28.0

package/test/mocks/snackbar-mock.js

@@ -0,0 +1,63 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("@/index");
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+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; }
+var Default = function Default(_ref) {
+  var snackProps = _ref.snackProps,
+    withAction = _ref.withAction;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    btnState = _useState2[0],
+    setBtnState = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  function handleClick() {
+    setOpen(!open);
+    setBtnState(true);
+  }
+  function handleClose() {
+    setOpen(!open);
+    setBtnState(false);
+  }
+  var Action = function Action() {
+    return /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      key: "close",
+      role: "close-icon-button",
+      "aria-label": "Close",
+      color: "inherit",
+      onClick: (snackProps === null || snackProps === void 0 ? void 0 : snackProps.onClose) || handleClose
+    }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null));
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_index.Button, {
+    disabled: btnState,
+    "data-testid": "snackbar-button",
+    style: {
+      marginRight: '3em'
+    },
+    variant: "contained",
+    color: "primary",
+    onClick: handleClick
+  }, "Open"), /*#__PURE__*/_react["default"].createElement(_index.Snackbar, {
+    message: snackProps === null || snackProps === void 0 ? void 0 : snackProps.message,
+    autoHide: snackProps === null || snackProps === void 0 ? void 0 : snackProps.autoHide,
+    action: withAction ? /*#__PURE__*/_react["default"].createElement(Action, null) : undefined,
+    open: open,
+    onClick: snackProps === null || snackProps === void 0 ? void 0 : snackProps.onClick,
+    onClose: (snackProps === null || snackProps === void 0 ? void 0 : snackProps.onClose) || handleClose
+  }));
+};
+var _default = Default;
+exports["default"] = _default;

package/test/mocks/step-card-mock.d.ts

@@ -0,0 +1,8 @@
+import { IStepCardProps } from '@/core/StepCard';
+interface IProps {
+    initialLoading?: boolean;
+    blockInitialLoading?: boolean;
+    stepProps: Partial<IStepCardProps>;
+}
+declare const Default: ({ stepProps, initialLoading, blockInitialLoading }: IProps) => JSX.Element;
+export default Default;

package/test/mocks/step-card-mock.js

@@ -0,0 +1,40 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _StepCard = _interopRequireDefault(require("@/core/StepCard"));
+var React = _interopRequireWildcard(require("react"));
+var _excluded = ["percentage", "summary", "title"];
+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; }
+var Default = function Default(_ref) {
+  var stepProps = _ref.stepProps,
+    initialLoading = _ref.initialLoading,
+    blockInitialLoading = _ref.blockInitialLoading;
+  var percentage = stepProps.percentage,
+    summary = stepProps.summary,
+    title = stepProps.title,
+    rest = (0, _objectWithoutProperties2["default"])(stepProps, _excluded);
+  var _React$useState = React.useState(initialLoading !== null && initialLoading !== void 0 ? initialLoading : false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    loading = _React$useState2[0],
+    setLoading = _React$useState2[1];
+  setTimeout(function () {
+    setLoading(false);
+  }, 1500);
+  return /*#__PURE__*/React.createElement(_StepCard["default"], (0, _extends2["default"])({
+    percentage: percentage || 0,
+    summary: summary || '',
+    title: title || '',
+    loading: blockInitialLoading ? undefined : loading
+  }, rest));
+};
+var _default = Default;
+exports["default"] = _default;

package/test/mocks/text-field-mock.d.ts

@@ -0,0 +1,7 @@
+import { TextFieldProps } from '@/core/TextField';
+interface IProps {
+    initialOption?: string;
+    inputProps?: TextFieldProps;
+}
+declare const Default: ({ inputProps, initialOption }: IProps) => JSX.Element;
+export default Default;

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

@@ -0,0 +1,59 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _ListItem = _interopRequireDefault(require("@/core/ListItem"));
+var _TextField = _interopRequireDefault(require("@/core/TextField"));
+var React = _interopRequireWildcard(require("react"));
+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; }
+var LIST = [{
+  label: null,
+  value: ''
+}, {
+  label: 'Elm',
+  value: 'elm'
+}, {
+  label: 'ReasonML',
+  value: 'reasonml'
+}, {
+  label: 'Purescript',
+  value: 'purescript'
+}, {
+  label: 'Fable',
+  value: 'fable'
+}];
+var Default = function Default(_ref) {
+  var inputProps = _ref.inputProps,
+    initialOption = _ref.initialOption;
+  var _React$useState = React.useState(initialOption ? initialOption : ''),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  var handleChange = function handleChange(event) {
+    setValue(event.target.value);
+  };
+  var handleClear = function handleClear() {
+    setValue('');
+  };
+  return /*#__PURE__*/React.createElement(_TextField["default"], (0, _extends2["default"])({
+    value: value,
+    onChange: handleChange,
+    onClear: handleClear
+  }, inputProps), inputProps !== null && inputProps !== void 0 && inputProps.select ? LIST.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
+    return /*#__PURE__*/React.createElement(_ListItem["default"], {
+      key: value,
+      value: value
+    }, label);
+  }) : undefined);
+};
+var _default = Default;
+exports["default"] = _default;

package/test/util.d.ts

@@ -0,0 +1,14 @@
+type DragOptions = {
+    to?: {
+        x: number;
+        y: number;
+    } | Element;
+    delta?: {
+        x: number;
+        y: number;
+    };
+    steps?: number;
+    duration?: number;
+};
+export default function drag(element: Element, { to: inTo, delta, steps, duration }?: DragOptions): Promise<void>;
+export {};

package/test/util.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = drag;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _dom = require("@testing-library/dom");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+function isElement(obj) {
+  if ((0, _typeof2["default"])(obj) !== 'object') {
+    return false;
+  }
+  var prototypeStr, prototype;
+  do {
+    prototype = Object.getPrototypeOf(obj);
+    // to work in iframe
+    prototypeStr = Object.prototype.toString.call(prototype);
+    // '[object Document]' is used to detect document
+    if (prototypeStr === '[object Element]' || prototypeStr === '[object Document]') {
+      return true;
+    }
+    obj = prototype;
+    // null is the terminal of object
+  } while (prototype !== null);
+  return false;
+}
+function getElementClientCenter(element) {
+  var _element$getBoundingC = element.getBoundingClientRect(),
+    left = _element$getBoundingC.left,
+    top = _element$getBoundingC.top,
+    width = _element$getBoundingC.width,
+    height = _element$getBoundingC.height;
+  return {
+    x: left + width / 2,
+    y: top + height / 2
+  };
+}
+var getCoords = function getCoords(charlie) {
+  return isElement(charlie) ? getElementClientCenter(charlie) : charlie;
+};
+var sleep = function sleep(ms) {
+  return new Promise(function (resolve) {
+    setTimeout(resolve, ms);
+  });
+};
+function drag(_x) {
+  return _drag.apply(this, arguments);
+}
+function _drag() {
+  _drag = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(element) {
+    var _ref,
+      inTo,
+      delta,
+      _ref$steps,
+      steps,
+      _ref$duration,
+      duration,
+      from,
+      to,
+      step,
+      current,
+      i,
+      _args = arguments;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _ref = _args.length > 1 && _args[1] !== undefined ? _args[1] : {}, inTo = _ref.to, delta = _ref.delta, _ref$steps = _ref.steps, steps = _ref$steps === void 0 ? 20 : _ref$steps, _ref$duration = _ref.duration, duration = _ref$duration === void 0 ? 500 : _ref$duration;
+            from = getElementClientCenter(element);
+            to = delta ? {
+              x: from.x + delta.x,
+              y: from.y + delta.y
+            } : getCoords(inTo);
+            step = {
+              x: ((to === null || to === void 0 ? void 0 : to.x) || 0 - from.x) / steps,
+              y: ((to === null || to === void 0 ? void 0 : to.y) || 0 - from.y) / steps
+            };
+            current = {
+              clientX: from.x,
+              clientY: from.y
+            };
+            _dom.fireEvent.mouseEnter(element, current);
+            _dom.fireEvent.mouseOver(element, current);
+            _dom.fireEvent.mouseMove(element, current);
+            _dom.fireEvent.mouseDown(element, current);
+            i = 0;
+          case 10:
+            if (!(i < steps)) {
+              _context.next = 19;
+              break;
+            }
+            current.clientX += step.x;
+            current.clientY += step.y;
+            _context.next = 15;
+            return sleep(duration / steps);
+          case 15:
+            _dom.fireEvent.mouseMove(element, current);
+          case 16:
+            i++;
+            _context.next = 10;
+            break;
+          case 19:
+            _dom.fireEvent.mouseUp(element, current);
+          case 20:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _drag.apply(this, arguments);
+}

package/core/Button.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _excluded = ["children", "margin", "padding", "style", "variant"];
-var _templateObject;
-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 StyledButton = (0, _styledComponents["default"])(_Button["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    border-style: ", ";\n    opacity: ", ";\n"])), function (props) {
-  return props.dashed === 'true' ? 'dashed !important' : 'initial';
-}, function (props) {
-  return props.selected ? 0.5 : 1;
-});
-var Button = function Button(_ref) {
-  var children = _ref.children,
-    margin = _ref.margin,
-    padding = _ref.padding,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    variant = _ref.variant,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({}, otherProps, {
-    dashed: variant === 'dashed' ? 'true' : 'false',
-    variant: variant === 'dashed' ? 'outlined' : variant,
-    style: _objectSpread({
-      margin: margin,
-      padding: padding
-    }, style)
-  }), children);
-};
-var _default = Button;
-exports["default"] = _default;

package/core/Container.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _excluded = ["children", "padding", "margin", "style"];
-var _templateObject;
-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 StyledContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n"])));
-var Container = function Container(_ref) {
-  var children = _ref.children,
-    padding = _ref.padding,
-    margin = _ref.margin,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(StyledContainer, (0, _extends2["default"])({
-    style: _objectSpread({
-      padding: padding,
-      margin: margin
-    }, style)
-  }, otherProps), children);
-};
-var _default = Container;
-exports["default"] = _default;

package/core/Line.d.ts

@@ -1,7 +0,0 @@
-import { DefaultProps } from './types';
-interface LineProps extends DefaultProps {
-    primary?: boolean;
-    width?: string;
-}
-declare const Line: ({ padding, margin, style, ...otherProps }: LineProps) => JSX.Element;
-export default Line;

package/core/Line.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _colors = require("../colors");
-var _excluded = ["padding", "margin", "style"];
-var _templateObject;
-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 StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    border: 1px solid\n        ", ";\n"])), function (props) {
-  return props.primary ? _colors.primary.normal : _colors.background.normal;
-});
-var Line = function Line(_ref) {
-  var padding = _ref.padding,
-    margin = _ref.margin,
-    style = _ref.style,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(StyledLine, (0, _extends2["default"])({
-    style: _objectSpread({
-      padding: padding,
-      margin: margin
-    }, style)
-  }, otherProps));
-};
-var _default = Line;
-exports["default"] = _default;