flipper-ui 0.25.0 → 0.25.3

package/stories/InputBase.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputBase = _interopRequireDefault(require("../core/InputBase"));
+
+var _default = {
+  title: 'InputBase',
+  component: _InputBase["default"],
+  argTypes: {
+    placeholder: {
+      control: 'text'
+    },
+    value: {
+      control: 'text'
+    },
+    fullWidth: {
+      control: 'boolean'
+    },
+    autoComplete: {
+      control: 'text'
+    },
+    autoFocus: {
+      control: 'boolean'
+    },
+    error: {
+      control: 'boolean'
+    },
+    inputProps: {
+      control: 'object'
+    },
+    readonly: {
+      control: 'boolean'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_InputBase["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  placeholder: 'InputBase'
+};

package/stories/Line.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineWithWidthProp = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Line = _interopRequireDefault(require("../core/Line"));
+
+var _default = {
+  title: 'Line',
+  component: _Line["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Line["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  primary: true
+};
+var LineWithWidthProp = Template.bind({});
+exports.LineWithWidthProp = LineWithWidthProp;
+LineWithWidthProp.args = {
+  width: '100%'
+};

package/stories/List.stories.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithAvatar = exports.WithIcons = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _List = _interopRequireDefault(require("../core/List"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _Backup = _interopRequireDefault(require("@material-ui/icons/Backup"));
+
+var _Avatar = _interopRequireDefault(require("../core/Avatar"));
+
+var _default = {
+  title: 'List',
+  component: _List["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  title: 'My beautiful list"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 1"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 2"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 3"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 4"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 5"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 6"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    selected: true,
+    title: "Item 7"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    title: "Item 8"
+  }))
+};
+var WithIcons = Template.bind({});
+exports.WithIcons = WithIcons;
+WithIcons.args = {
+  title: 'My beautiful list"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 1"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 2"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 3"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 4"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 5"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 6"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 7"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Item 8"
+  }))
+};
+var WithAvatar = Template.bind({});
+exports.WithAvatar = WithAvatar;
+WithAvatar.args = {
+  title: 'My beautiful list"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "1"),
+    title: "Person 1"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "2"),
+    title: "Person 2"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "3"),
+    title: "Person 3"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "4"),
+    title: "Person 4"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "5"),
+    title: "Person 5"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "6"),
+    title: "Person 6"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "7"),
+    title: "Person 7"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "8"),
+    title: "Person 8"
+  }))
+};

package/stories/MaskField.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MaskFieldWithInputAdornment = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputAdornment = _interopRequireDefault(require("../core/InputAdornment"));
+
+var _MaskField = _interopRequireDefault(require("../core/MaskField"));
+
+var _default = {
+  title: 'MaskField',
+  component: _MaskField["default"],
+  argTypes: {
+    helperText: {
+      control: 'text'
+    },
+    value: {
+      control: 'text' || 'number'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_MaskField["default"], args);
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_MaskField["default"], {
+    placeholder: "Description"
+  });
+};
+
+exports.Default = Default;
+var MaskFieldWithInputAdornment = Template.bind({});
+exports.MaskFieldWithInputAdornment = MaskFieldWithInputAdornment;
+MaskFieldWithInputAdornment.args = {
+  fixedDecimalScale: true,
+  decimalScale: 2,
+  label: 'Price',
+  decimalSeparator: ',',
+  thousandSeparator: '.',
+  InputProps: {
+    startAdornment: /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
+      position: "start"
+    }, "$")
+  },
+  InputLabelProps: {
+    shrink: true
+  },
+  children: /*#__PURE__*/_react["default"].createElement(_MaskField["default"], null)
+};

package/stories/Menu.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Menu = _interopRequireDefault(require("../core/Menu"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _Backup = _interopRequireDefault(require("@material-ui/icons/Backup"));
+
+var _default = {
+  title: 'Menu',
+  component: _Menu["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  function handleClick() {
+    setOpen(!open);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleClick
+  }, "Menu"), /*#__PURE__*/_react["default"].createElement(_Menu["default"], (0, _extends2["default"])({}, args, {
+    open: open,
+    onClick: handleClick
+  })));
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  style: {
+    margin: '3em'
+  },
+  title: 'My beautiful Menu"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 1"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 2"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 3"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 4"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 5"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 6"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 7"
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null),
+    title: "Menu 8"
+  }))
+};

package/stories/Node.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Node = _interopRequireDefault(require("../core/Node"));
+
+var _default = {
+  title: 'Node',
+  component: _Node["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Node["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  id: '1',
+  name: 'Branch',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Node["default"], {
+    id: "2",
+    name: "I am a Node 1"
+  }), /*#__PURE__*/_react["default"].createElement(_Node["default"], {
+    id: "3",
+    name: "I am a Node 2"
+  }), /*#__PURE__*/_react["default"].createElement(_Node["default"], {
+    id: "4",
+    name: "I am a Node 3"
+  }))
+};

package/stories/Pagination.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Pagination = _interopRequireDefault(require("../core/Pagination"));
+
+var _default = {
+  title: 'Pagination',
+  component: _Pagination["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Pagination["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  pages: 5,
+  active: 3,
+  onNext: function onNext() {
+    return alert('Next page');
+  },
+  onPrevious: function onPrevious() {
+    return alert('Previous page');
+  },
+  onNavigate: function onNavigate(page) {
+    return alert('You tried to navigate to page ' + page);
+  },
+  children: 'Pagination'
+};

package/stories/Paper.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MaxEletavion = exports.Elevated = exports.NoElevated = exports.Square = exports.Default = exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Paper = _interopRequireDefault(require("../core/Paper"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var _default = {
+  title: 'Paper',
+  component: _Paper["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Paper["default"], args);
+};
+
+var defaultArgs = {
+  padding: 24,
+  margin: 24
+};
+
+var argsWithChildren = _objectSpread(_objectSpread({}, defaultArgs), {}, {
+  children: 'I am a Paper.'
+});
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Paper["default"], {
+    style: _objectSpread({}, defaultArgs)
+  }, "I am a Paper.");
+};
+
+exports.Default = Default;
+var Square = Template.bind({});
+exports.Square = Square;
+Square.args = _objectSpread(_objectSpread({}, argsWithChildren), {}, {
+  square: true
+});
+var NoElevated = Template.bind({});
+exports.NoElevated = NoElevated;
+NoElevated.args = _objectSpread(_objectSpread({}, argsWithChildren), {}, {
+  elevation: 0
+});
+var Elevated = Template.bind({});
+exports.Elevated = Elevated;
+Elevated.args = _objectSpread(_objectSpread({}, argsWithChildren), {}, {
+  elevation: 12
+});
+var MaxEletavion = Template.bind({});
+exports.MaxEletavion = MaxEletavion;
+MaxEletavion.args = _objectSpread(_objectSpread({}, argsWithChildren), {}, {
+  elevation: 24
+});

package/stories/PinInput.stories.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Large = exports.Default = exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _PinInput = _interopRequireDefault(require("../core/PinInput"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _default = {
+  title: 'PinInput',
+  component: _PinInput["default"]
+};
+exports["default"] = _default;
+var PIN_LENGTH = 6;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(new Array(PIN_LENGTH)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      pin = _useState2[0],
+      setPin = _useState2[1];
+
+  var onPinChanged = function onPinChanged(pinEntry, index) {
+    var newPin = (0, _toConsumableArray2["default"])(pin);
+    newPin[index] = pinEntry;
+    setPin(newPin);
+  };
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      hasError = _useState4[0],
+      setHasError = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isValidating = _useState6[0],
+      setIsValidating = _useState6[1];
+
+  var handleValidation = function handleValidation() {
+    setIsValidating(true);
+
+    if (pin.join('') !== '123123') {
+      setHasError(true);
+      setPin(new Array(PIN_LENGTH));
+    } else {
+      setHasError(false);
+      alert('PIN is correct');
+    }
+
+    setIsValidating(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "Valid pin: 123123"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_PinInput["default"], {
+    pin: pin,
+    setPin: setPin,
+    onPinChanged: onPinChanged,
+    pinLength: PIN_LENGTH,
+    validationResult: hasError,
+    isValidating: isValidating,
+    size: "small"
+  }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: function onClick() {
+      handleValidation();
+    }
+  }, "Validate"));
+};
+
+exports.Default = Default;
+
+var Large = function Large() {
+  var _useState7 = (0, _react.useState)(new Array(PIN_LENGTH)),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      pin = _useState8[0],
+      setPin = _useState8[1];
+
+  var onPinChanged = function onPinChanged(pinEntry, index) {
+    var newPin = (0, _toConsumableArray2["default"])(pin);
+    newPin[index] = pinEntry;
+    setPin(newPin);
+  };
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      hasError = _useState10[0],
+      setHasError = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isValidating = _useState12[0],
+      setIsValidating = _useState12[1];
+
+  var handleValidation = function handleValidation() {
+    setIsValidating(true);
+
+    if (pin.join('') !== '123123') {
+      setPin(new Array(PIN_LENGTH));
+      setHasError(true);
+    } else {
+      setHasError(false);
+      alert('PIN is correct');
+    }
+
+    setIsValidating(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "Valid pin: 123123"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_PinInput["default"], {
+    pin: pin,
+    setPin: setPin,
+    onPinChanged: onPinChanged,
+    pinLength: PIN_LENGTH,
+    validationResult: hasError,
+    isValidating: isValidating,
+    size: "large"
+  }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: function onClick() {
+      handleValidation();
+    }
+  }, "Validate"));
+};
+
+exports.Large = Large;