flipper-ui 0.25.0 → 0.25.1

package/stories/Dialog.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.WithTypography = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Dialog = _interopRequireDefault(require("../core/Dialog"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _Typography = _interopRequireDefault(require("../core/Typography"));
+
+var _default = {
+  title: 'Dialog',
+  component: _Dialog["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, "Open dialog"), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+    open: open,
+    title: "My beautiful Dialog",
+    text: 'Isn\'t it?',
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    actions: /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return setOpen(false);
+      }
+    }, "Close dialog")
+  }));
+};
+
+exports.Default = Default;
+
+var WithTypography = function WithTypography() {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, "Open dialog"), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+    open: open,
+    title: /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      color: "primary"
+    }, "Title with Typography"),
+    text: "Simple Text",
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    actions: /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return setOpen(false);
+      }
+    }, "Close dialog")
+  }));
+};
+
+exports.WithTypography = WithTypography;

package/stories/Divider.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithSelectedFields = exports.WithDisabledFields = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Divider = _interopRequireDefault(require("../core/Divider"));
+
+var _List = _interopRequireDefault(require("../core/List"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _default = {
+  title: 'Divider',
+  component: _Divider["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "Banded penguin")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "Chinstrap penguin")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "Crested penguins")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null));
+};
+
+exports.Default = Default;
+
+var WithDisabledFields = function WithDisabledFields() {
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "Banded penguin")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    disabled: true
+  }, /*#__PURE__*/_react["default"].createElement("p", null, "Chinstrap penguin")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    disabled: true
+  }, /*#__PURE__*/_react["default"].createElement("p", null, "Crested penguins")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null));
+};
+
+exports.WithDisabledFields = WithDisabledFields;
+
+var WithSelectedFields = function WithSelectedFields() {
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    selected: true
+  }, /*#__PURE__*/_react["default"].createElement("p", null, "Banded penguin")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "Chinstrap penguin")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "Crested penguins")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null));
+};
+
+exports.WithSelectedFields = WithSelectedFields;

package/stories/Drawer.stories.js

@@ -0,0 +1,55 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Drawer = _interopRequireDefault(require("../core/Drawer"));
+
+var _List = _interopRequireDefault(require("../core/List"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _Backup = _interopRequireDefault(require("@material-ui/icons/Backup"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Drawer',
+  component: _Drawer["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      SetOpen = _useState2[1];
+
+  var handleClick = function handleClick() {
+    SetOpen(!open);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleClick,
+    disabled: open
+  }, "Open"), /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+    open: open,
+    onClick: handleClick
+  }, /*#__PURE__*/_react["default"].createElement(_List["default"], null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null)
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    icon: /*#__PURE__*/_react["default"].createElement(_Backup["default"], null)
+  }))));
+};
+
+exports.Default = Default;

package/stories/EditTable.stories.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithAutocomplete = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Avatar = _interopRequireDefault(require("../core/Avatar"));
+
+var _EditableTable = _interopRequireDefault(require("../core/EditableTable"));
+
+var _default = {
+  title: 'EditTable',
+  component: _Avatar["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_EditableTable["default"], {
+    paginationInfo: true,
+    noRowsExpand: true,
+    disableAddHeader: true,
+    onAddRow: function onAddRow(item) {
+      return Promise.resolve(console.log(item));
+    },
+    onRowClick: function onRowClick() {
+      return window.alert('hello');
+    },
+    title: "adicionar",
+    columns: [{
+      title: 'Leitura',
+      field: 'readAt',
+      initialEditValue: new Date(),
+      type: 'datetime',
+      cellStyle: {
+        textAlign: 'right'
+      },
+      headerStyle: {
+        textAlign: 'right'
+      }
+    }, {
+      title: 'Posição',
+      field: 'position',
+      type: 'numeric'
+    }, {
+      title: 'Origem',
+      field: 'origin',
+      editable: 'never',
+      initialEditValue: 'Manual'
+    }],
+    data: [{
+      readAt: new Date('07/01/2019 17:21'),
+      position: 7000,
+      origin: /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          maxWidth: '100px',
+          width: '80%',
+          backgroundColor: 'green',
+          borderRadius: 10,
+          textAlign: 'center'
+        }
+      }, "80%")
+    }, {
+      readAt: new Date('06/15/2019 16:01'),
+      position: 6740,
+      origin: 'Manual'
+    }, {
+      readAt: new Date('06/01/2019 19:22'),
+      position: 6450,
+      origin: 'S.O. 018774'
+    }, {
+      readAt: new Date('05/15/2019 14:07'),
+      position: 5600,
+      origin: 'S.0. 018774'
+    }, {
+      readAt: new Date('07/01/2019 19:22'),
+      position: 6451,
+      origin: 'S.O. 3'
+    }, {
+      readAt: new Date('05/12/2019 14:07'),
+      position: 8000,
+      origin: 'S.0. 018771'
+    }]
+  });
+};
+
+exports.Default = Default;
+
+var WithAutocomplete = function WithAutocomplete() {
+  return /*#__PURE__*/_react["default"].createElement(_EditableTable["default"], {
+    noHeader: true,
+    title: "adicionar",
+    autoCompleteSuggestions: [{
+      label: 'other values',
+      value: '123456'
+    }, {
+      label: 'only values',
+      value: '10000'
+    }, {
+      label: 'some values',
+      value: '5000'
+    }, {
+      label: 'any values',
+      value: '12'
+    }],
+    autoCompleteField: "listValues",
+    onUpdateRow: function onUpdateRow() {
+      return Promise.resolve();
+    },
+    onClickAdd: function onClickAdd() {
+      return window.alert('hello');
+    },
+    columns: [{
+      title: 'values',
+      field: 'listValues',
+      cellStyle: {
+        textAlign: 'right'
+      },
+      headerStyle: {
+        textAlign: 'right'
+      }
+    }, {
+      title: 'Posição',
+      field: 'position',
+      type: 'numeric'
+    }],
+    data: [{
+      listValues: 'some values',
+      autoComplete: {
+        value: '1',
+        label: 'some values'
+      },
+      position: 7000
+    }, {
+      listValues: 'any values',
+      autoComplete: {
+        value: '2',
+        label: 'any values'
+      },
+      position: 6740
+    }]
+  });
+};
+
+exports.WithAutocomplete = WithAutocomplete;

package/stories/ExpansionPanel.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Disabled = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ExpansionPanel = _interopRequireDefault(require("../core/ExpansionPanel"));
+
+var _Typography = _interopRequireDefault(require("../core/Typography"));
+
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'ExpansionPanel',
+  component: _ExpansionPanel["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  summary: 'Pulp Fiction',
+  onHelperClick: function onHelperClick() {
+    return window.alert('HELP!');
+  },
+  expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null),
+  actions: /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    color: "primary"
+  }, "Confirm"),
+  details: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    gutterBottom: true
+  }, "books about imaginary characters and events, produced in large quantities and intended to be read by many people but not considered to be of very good quality:"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "caption"
+  }, "She was reading a pulp fiction thriller with a lurid cover."))
+};
+var Disabled = Template.bind({});
+exports.Disabled = Disabled;
+Disabled.args = {
+  disabled: true,
+  summary: 'Dormammu',
+  details: 'I have come to bargain',
+  expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
+};

package/stories/Fab.stories.js

@@ -0,0 +1,28 @@
+"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 _Fab = _interopRequireDefault(require("../core/Fab"));
+
+var _default = {
+  title: 'Fab',
+  component: _Fab["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Fab["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  children: 'Fab'
+};

package/stories/Fade.stories.js

@@ -0,0 +1,54 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Fade = _interopRequireDefault(require("../core/Fade"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Fade',
+  component: _Fade["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)('Close'),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      label = _useState4[0],
+      setLabel = _useState4[1];
+
+  function handleClick() {
+    setOpen(!open);
+    label === 'Close' ? setLabel('Open') : setLabel('Close');
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    style: {
+      marginRight: '3em'
+    },
+    variant: "contained",
+    color: "primary",
+    onClick: handleClick
+  }, label), /*#__PURE__*/_react["default"].createElement(_Fade["default"], {
+    "in": open
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "I am open for discussions")));
+};
+
+exports.Default = Default;

package/stories/Grow.stories.js

@@ -0,0 +1,63 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Grow = _interopRequireDefault(require("../core/Grow"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Grow',
+  component: _Grow["default"],
+  argTypes: {
+    backgroundColor: {
+      control: 'color'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)('Close'),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      label = _useState4[0],
+      setLabel = _useState4[1];
+
+  function handleClick() {
+    setOpen(!open);
+    label === 'Close' ? setLabel('Open') : setLabel('Close');
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    color: "primary",
+    variant: "contained",
+    onClick: handleClick,
+    style: {
+      marginRight: '3em'
+    }
+  }, label), /*#__PURE__*/_react["default"].createElement(_Grow["default"], {
+    "in": open,
+    timeout: {
+      enter: 500,
+      exit: 500
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "I am open for discussions")));
+};
+
+exports.Default = Default;

package/stories/Header.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Secondary = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Header = _interopRequireDefault(require("../core/Header"));
+
+var _default = {
+  title: 'Header',
+  component: _Header["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Header["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  color: 'default',
+  children: 'Flipper UI'
+};
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  color: 'primary',
+  children: 'Flipper UI'
+};
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = {
+  color: 'secondary',
+  children: 'Flipper UI'
+};

package/stories/IconButton.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Disabled = exports.Secondary = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _IconButton = _interopRequireDefault(require("../core/IconButton"));
+
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+
+var _default = {
+  title: 'IconButton',
+  component: _IconButton["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_IconButton["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  children: /*#__PURE__*/_react["default"].createElement(_Add["default"], null)
+};
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  color: 'primary',
+  children: /*#__PURE__*/_react["default"].createElement(_Add["default"], null)
+};
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = {
+  color: 'secondary',
+  children: /*#__PURE__*/_react["default"].createElement(_Add["default"], null)
+};
+var Disabled = Template.bind({});
+exports.Disabled = Disabled;
+Disabled.args = {
+  disabled: true,
+  children: /*#__PURE__*/_react["default"].createElement(_Add["default"], null)
+};

package/stories/InputAdornment.stories.js

@@ -0,0 +1,28 @@
+"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 _InputAdornment = _interopRequireDefault(require("../core/InputAdornment"));
+
+var _default = {
+  title: 'InputAdornment',
+  component: _InputAdornment["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  children: 'InputAdornment'
+};