flipper-ui 0.25.0 → 0.25.1

package/stories/Select.stories.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithClear = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Select = _interopRequireDefault(require("../core/Select"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _default = {
+  title: 'Select',
+  component: _Select["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)('3'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      select = _useState2[0],
+      setSelect = _useState2[1];
+
+  function handleChange(event) {
+    setSelect(event.target.value);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    value: select,
+    onChange: handleChange
+  }, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "0"
+  }, "Option 0"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "1"
+  }, "Option 1"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "2"
+  }, "Option 2"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "3"
+  }, "Option 3"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "4"
+  }, "Option 4"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "5"
+  }, "Option 5"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "6"
+  }, "Option 6"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "7"
+  }, "Option 7"));
+};
+
+exports.Default = Default;
+
+var WithClear = function WithClear() {
+  var _useState3 = (0, _react.useState)('3'),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      select = _useState4[0],
+      setSelect = _useState4[1];
+
+  function handleChange(event) {
+    setSelect(event.target.value);
+  }
+
+  var handleClear = function handleClear() {
+    setSelect('');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    hasClear: true,
+    onClear: handleClear,
+    value: select,
+    onChange: handleChange
+  }, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: ""
+  }), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "0"
+  }, "Option 0"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "1"
+  }, "Option 1"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "2"
+  }, "Option 2"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "3"
+  }, "Option 3"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "4"
+  }, "Option 4"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "5"
+  }, "Option 5"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "6"
+  }, "Option 6"), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    value: "7"
+  }, "Option 7"));
+};
+
+exports.WithClear = WithClear;

package/stories/Sidebar.stories.js

@@ -0,0 +1,43 @@
+"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 _Sidebar = _interopRequireDefault(require("../core/Sidebar"));
+
+var _List = _interopRequireDefault(require("../core/List"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _Backup = _interopRequireDefault(require("@material-ui/icons/Backup"));
+
+var _default = {
+  title: 'Sidebar',
+  component: _Sidebar["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Sidebar["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  title: 'My beautiful Sidebar"',
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__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)
+  }), /*#__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)
+  })))
+};

package/stories/Slide.stories.js

@@ -0,0 +1,62 @@
+"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 _Slide = _interopRequireDefault(require("../core/Slide"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Slide',
+  component: _Slide["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  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),
+      btnLabel = _useState4[0],
+      setBtnLabel = _useState4[1];
+
+  function handleClick() {
+    setOpen(!open);
+    btnLabel === 'Close' ? setBtnLabel('Open') : setBtnLabel('Close');
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    color: "primary",
+    variant: "contained",
+    style: {
+      marginRight: '3em'
+    },
+    onClick: handleClick
+  }, btnLabel), /*#__PURE__*/_react["default"].createElement(_Slide["default"], (0, _extends2["default"])({}, args, {
+    "in": open
+  })));
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  direction: 'left',
+  timeout: 300,
+  children: /*#__PURE__*/_react["default"].createElement("span", null, "Im not open for discussions.")
+};

package/stories/Slider.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithMarks = exports.FixedLabel = exports.Ranged = exports.Secondary = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Slider = _interopRequireDefault(require("../core/Slider"));
+
+var _default = {
+  title: 'Slider',
+  component: _Slider["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Slider["default"], args);
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Slider["default"], null);
+};
+
+exports.Default = Default;
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  children: 'Slider'
+};
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = {
+  color: 'secondary',
+  children: 'Slider'
+};
+var Ranged = Template.bind({});
+exports.Ranged = Ranged;
+Ranged.args = {
+  value: [20, 50],
+  children: 'Slider'
+};
+var FixedLabel = Template.bind({});
+exports.FixedLabel = FixedLabel;
+FixedLabel.args = {
+  valueLabelDisplay: 'on',
+  value: [20, 50],
+  children: 'Slider'
+};
+var WithMarks = Template.bind({});
+exports.WithMarks = WithMarks;
+WithMarks.args = {
+  marks: [{
+    value: 0,
+    label: 'Start'
+  }, {
+    value: 50,
+    label: 'You\'re half way'
+  }, {
+    value: 100,
+    label: 'Finish'
+  }],
+  valueLabelDisplay: 'on',
+  value: [20, 75],
+  children: 'Slider'
+};

package/stories/Snackbar.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Error = exports.Warning = exports.Success = 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 _Snackbar = _interopRequireDefault(require("../core/Snackbar"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Snackbar',
+  component: _Snackbar["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  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);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    disabled: btnState,
+    style: {
+      marginRight: '3em'
+    },
+    variant: "contained",
+    color: "primary",
+    onClick: handleClick
+  }, "Open"), /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], (0, _extends2["default"])({}, args, {
+    open: open,
+    onClose: handleClose
+  })));
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  anchorOrigin: {
+    horizontal: 'right',
+    vertical: 'bottom'
+  },
+  message: 'I give what I have got to give, I give what I need to live,\
+     I give what I have got to give, It is important if I wanna live!'
+};
+var Success = Template.bind({});
+exports.Success = Success;
+Success.args = {
+  variant: 'success',
+  message: 'In the town where I was born, Lived a man who sailed to sea',
+  children: 'Snackbar'
+};
+var Warning = Template.bind({});
+exports.Warning = Warning;
+Warning.args = {
+  variant: 'warning',
+  message: 'In the town where I was born, Lived a man who sailed to sea',
+  children: 'Snackbar'
+};
+var Error = Template.bind({});
+exports.Error = Error;
+Error.args = {
+  variant: 'error',
+  message: 'In the town where I was born, Lived a man who sailed to sea',
+  children: 'Snackbar'
+};
+/*
+export const WithLongDuration = Template.bind({})
+WithLongDuration.args = {
+    variant: 'info',
+    // transitionDuration: { enter: 0, exit: 200 },
+    message: 'In the town where I was born, Lived a man who sailed to sea',
+    children: 'Snackbar'
+}
+*/

package/stories/Stepper.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithIcon = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Stepper = _interopRequireDefault(require("../core/Stepper"));
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+var _default = {
+  title: 'Stepper',
+  component: _Stepper["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Stepper["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  active: 2,
+  steps: ['Name', 'Email', 'Password', 'Photo', 'Be happy!'],
+  children: 'Stepper'
+};
+var WithIcon = Template.bind({});
+exports.WithIcon = WithIcon;
+WithIcon.args = {
+  bottomLabel: true,
+  active: 2,
+  steps: [{
+    label: 'Name',
+    icon: /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)
+  }],
+  children: 'Stepper'
+};

package/stories/Table.stories.js

@@ -0,0 +1,32 @@
+"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 _Table = _interopRequireDefault(require("../core/Table"));
+
+var _TableHead = _interopRequireDefault(require("../core/TableHead"));
+
+var _TableBody = _interopRequireDefault(require("../core/TableBody"));
+
+var _TableRow = _interopRequireDefault(require("../core/TableRow"));
+
+var _TableCell = _interopRequireDefault(require("../core/TableCell"));
+
+var _default = {
+  title: 'Table',
+  component: _Table["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Table["default"], null, /*#__PURE__*/_react["default"].createElement(_TableHead["default"], null, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email"))), /*#__PURE__*/_react["default"].createElement(_TableBody["default"], null, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 1"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 1")), /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 2"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 2")), /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 3"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 3")), /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 4"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 4")), /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Name 5"), /*#__PURE__*/_react["default"].createElement(_TableCell["default"], null, "Email 5"))));
+};
+
+exports.Default = Default;

package/stories/Tabs.stories.js

@@ -0,0 +1,37 @@
+"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 _Tabs = _interopRequireDefault(require("../core/Tabs"));
+
+var _Tab = _interopRequireDefault(require("../core/Tab"));
+
+var _default = {
+  title: 'Tabs',
+  component: _Tabs["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Tabs["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  value: 0,
+  children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+    label: "Profile"
+  }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+    label: "Enterprise"
+  }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+    label: "Billing"
+  }))
+};

package/stories/TextField.stories.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withSelect = exports.withHelperButton = exports.withInputAdornment = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TextField = _interopRequireDefault(require("../core/TextField"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _InputAdornment = _interopRequireDefault(require("../core/InputAdornment"));
+
+var _default = {
+  title: 'TextField',
+  component: _TextField["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], args);
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    placeholder: "Description"
+  });
+};
+
+exports.Default = Default;
+var withInputAdornment = Template.bind({});
+exports.withInputAdornment = withInputAdornment;
+withInputAdornment.args = {
+  type: 'number',
+  label: 'Price',
+  InputProps: {
+    startAdornment: /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
+      position: "start"
+    }, "$")
+  },
+  InputLabelProps: {
+    shrink: true
+  }
+};
+var withHelperButton = Template.bind({});
+exports.withHelperButton = withHelperButton;
+withHelperButton.args = {
+  placeholder: 'Description',
+  onHelperClick: function onHelperClick() {
+    return window.alert('HELP!');
+  }
+};
+
+var withSelect = function withSelect() {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    select: true,
+    value: "reais"
+  }, [{
+    label: 'R$',
+    value: 'reais'
+  }, {
+    label: '$',
+    value: 'dollar'
+  }].map(function (_ref) {
+    var label = _ref.label,
+        value = _ref.value;
+    return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      key: value,
+      value: value
+    }, label);
+  })), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    select: true,
+    value: "fable"
+  }, [{
+    label: 'Elm',
+    value: 'elm'
+  }, {
+    label: 'ReasonML',
+    value: 'reasonml'
+  }, {
+    label: 'Purescript',
+    value: 'purescript'
+  }, {
+    label: 'Fable',
+    value: 'fable'
+  }].map(function (_ref2) {
+    var label = _ref2.label,
+        value = _ref2.value;
+    return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      key: value,
+      value: value
+    }, label);
+  })));
+};
+
+exports.withSelect = withSelect;