flipper-ui 0.25.0 → 0.25.1

package/stories/AutoComplete.stories.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithSubheader = exports.OpeningWhenFocused = exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AutoComplete = _interopRequireDefault(require("../core/AutoComplete"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _TextField = _interopRequireDefault(require("../core/TextField"));
+
+var _Typography = _interopRequireDefault(require("../core/Typography"));
+
+var _default = {
+  title: 'AutoComplete',
+  component: _AutoComplete["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  suggestions: [{
+    value: 'rock',
+    label: 'Rock'
+  }, {
+    value: 'pop',
+    label: 'Pop'
+  }, {
+    value: 'classic',
+    label: 'Classic'
+  }],
+  renderInput: function renderInput(props) {
+    return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+      fullWidth: true,
+      placeholder: "Music genres"
+    }, props));
+  },
+  renderSuggestion: function renderSuggestion(item, props, selected) {
+    return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({
+      key: item,
+      selected: selected
+    }, props), item.label);
+  },
+  onChange: function onChange() {
+    return null;
+  }
+};
+
+var OpeningWhenFocused = function OpeningWhenFocused() {
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+    openOnFocus: true,
+    value: {
+      value: 'classic',
+      label: 'Classic'
+    },
+    suggestions: [{
+      value: 'rock',
+      label: 'Rock'
+    }, {
+      value: 'pop',
+      label: 'Pop'
+    }, {
+      value: 'classic',
+      label: 'Classic'
+    }],
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+        fullWidth: true,
+        placeholder: "Music genres"
+      }, props));
+    },
+    renderSuggestion: function renderSuggestion(item, props, selected) {
+      return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({
+        selected: selected
+      }, props), item.label);
+    },
+    onChange: function onChange() {
+      return null;
+    }
+  });
+};
+
+exports.OpeningWhenFocused = OpeningWhenFocused;
+
+var WithSubheader = function WithSubheader() {
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+    openOnFocus: true,
+    suggestions: [{
+      label: 'Genres',
+      subheader: true
+    }, {
+      value: 'rock',
+      label: 'Rock'
+    }, {
+      value: 'pop',
+      label: 'Pop'
+    }, {
+      value: 'classic',
+      label: 'Classic'
+    }],
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+        fullWidth: true,
+        placeholder: "Music genres"
+      }, props));
+    },
+    renderSuggestion: function renderSuggestion(item, props, selected) {
+      return item.subheader ? /*#__PURE__*/_react["default"].createElement(_ListItem["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "caption"
+      }, item.label)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({}, props, {
+        selected: selected
+      }), item.label || item);
+    },
+    onChange: function onChange() {
+      return null;
+    }
+  });
+};
+
+exports.WithSubheader = WithSubheader;

package/stories/AutoCompleteLab.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+
+var _AutoComplete = _interopRequireDefault(require("../core/AutoComplete"));
+
+var _TextField = _interopRequireDefault(require("../core/TextField"));
+
+var _lab = require("@material-ui/lab");
+
+var _default = {
+  title: 'AutoCompleteLab',
+  component: _AutoComplete["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_lab.Autocomplete, {
+    options: [{
+      label: 'Anemone',
+      value: 'forget-me-not'
+    }, {
+      label: 'Forget me not',
+      value: 'anemone'
+    }, {
+      label: 'Snapdragon',
+      value: 'snapdragon'
+    }, {
+      label: 'Sunflower',
+      value: 'sunflower'
+    }, {
+      label: 'Rose',
+      value: 'rose'
+    }],
+    getOptionLabel: function getOptionLabel(option) {
+      return option.label;
+    },
+    style: {
+      width: 300
+    },
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({}, props, {
+        label: "Flowers",
+        placeholder: "Flowers",
+        variant: "outlined",
+        fullWidth: true
+      }));
+    },
+    onChange: function onChange() {
+      return null;
+    }
+  });
+};
+
+exports.Default = Default;

package/stories/Avatar.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithChuildren = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Avatar = _interopRequireDefault(require("../core/Avatar"));
+
+var _default = {
+  title: 'Avatar',
+  component: _Avatar["default"],
+  argTypes: {
+    backgroundColor: {
+      control: 'color'
+    },
+    children: {
+      control: 'text'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Avatar["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  primary: true
+};
+var WithChuildren = Template.bind({});
+exports.WithChuildren = WithChuildren;
+WithChuildren.args = {
+  children: 'W',
+  primary: true
+};

package/stories/Badge.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithDot = exports.Secondary = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Badge = _interopRequireDefault(require("../core/Badge"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Badge',
+  component: _Badge["default"],
+  argTypes: {
+    backgroundColor: {
+      control: 'color'
+    },
+    counter: {
+      control: 'number'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Badge["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  counter: 2,
+  children: 'Badge'
+};
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  counter: 2,
+  color: 'primary',
+  children: 'Badge'
+};
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = {
+  counter: 150,
+  color: 'secondary',
+  children: /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined"
+  }, "Try changing the counter to Zero")
+};
+var WithDot = Template.bind({});
+exports.WithDot = WithDot;
+WithDot.args = {
+  counter: 1,
+  variant: 'dot',
+  color: 'primary',
+  children: 'Badge'
+};

package/stories/Box.stories.js

@@ -0,0 +1,29 @@
+"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 _Box = _interopRequireDefault(require("../core/Box"));
+
+var _default = {
+  title: 'Box',
+  component: _Box["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  margin: 25,
+  children: 'Open the box and think outside of it.'
+};

package/stories/Breadcrumb.stories.js

@@ -0,0 +1,41 @@
+"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 _Link = _interopRequireDefault(require("../core/Link"));
+
+var _Breadcrumb = _interopRequireDefault(require("../core/Breadcrumb"));
+
+var _default = {
+  title: 'Breadcrumb',
+  component: _Breadcrumb["default"],
+  argTypes: {
+    backgroundColor: {
+      control: 'color'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Breadcrumb["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  children: /*#__PURE__*/_react["default"].createElement(_Breadcrumb["default"], null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    color: "inherit",
+    href: "#"
+  }, "Flipper-ui"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    color: "inherit",
+    href: "#"
+  }, "Breadcrumb"))
+};

package/stories/Button.stories.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Disabled = exports.Large = exports.Medium = exports.Small = exports.AddIcon = exports.DashedSecondary = exports.DashedPrimary = exports.Selected = exports.OutlinedSecondary = exports.OutlinedPrimary = exports.ContainedSecondary = exports.ContainedPrimary = exports.Secondary = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+
+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: 'Button',
+  component: _Button["default"],
+  argTypes: {
+    backgroundColor: {
+      control: 'color'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], args);
+};
+
+var commonArgs = {
+  margin: 12,
+  children: 'Button'
+};
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = _objectSpread({}, commonArgs);
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  color: 'primary'
+});
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  color: 'secondary'
+});
+var ContainedPrimary = Template.bind({});
+exports.ContainedPrimary = ContainedPrimary;
+ContainedPrimary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'contained',
+  color: 'primary'
+});
+var ContainedSecondary = Template.bind({});
+exports.ContainedSecondary = ContainedSecondary;
+ContainedSecondary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'contained',
+  color: 'secondary'
+});
+var OutlinedPrimary = Template.bind({});
+exports.OutlinedPrimary = OutlinedPrimary;
+OutlinedPrimary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'outlined',
+  color: 'primary'
+});
+var OutlinedSecondary = Template.bind({});
+exports.OutlinedSecondary = OutlinedSecondary;
+OutlinedSecondary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'outlined',
+  color: 'secondary'
+});
+var Selected = Template.bind({});
+exports.Selected = Selected;
+Selected.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'contained',
+  color: 'primary',
+  selected: true
+});
+var DashedPrimary = Template.bind({});
+exports.DashedPrimary = DashedPrimary;
+DashedPrimary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'dashed',
+  color: 'primary'
+});
+var DashedSecondary = Template.bind({});
+exports.DashedSecondary = DashedSecondary;
+DashedSecondary.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'dashed',
+  color: 'secondary'
+});
+var AddIcon = Template.bind({});
+exports.AddIcon = AddIcon;
+AddIcon.args = {
+  variant: 'fab',
+  color: 'primary',
+  margin: 12,
+  children: /*#__PURE__*/_react["default"].createElement(_Add["default"], null)
+};
+var Small = Template.bind({});
+exports.Small = Small;
+Small.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  size: 'small',
+  variant: 'contained',
+  color: 'primary'
+});
+var Medium = Template.bind({});
+exports.Medium = Medium;
+Medium.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  size: 'medium',
+  variant: 'contained',
+  color: 'primary'
+});
+var Large = Template.bind({});
+exports.Large = Large;
+Large.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  size: 'large',
+  variant: 'contained',
+  color: 'primary'
+});
+var Disabled = Template.bind({});
+exports.Disabled = Disabled;
+Disabled.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
+  variant: 'contained',
+  color: 'primary',
+  disabled: true
+});

package/stories/Card.stories.js

@@ -0,0 +1,43 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireWildcard(require("../core/Card"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Card',
+  component: _Card["default"],
+  argTypes: {
+    backgroundColor: {
+      control: 'color'
+    }
+  }
+};
+exports["default"] = _default;
+var url = 'https://media2.s-nbcnews.com/j/newscms/2018_20/1339477' + '/puppy-cute-today-180515-main_a936531048fdb698635dd1b418abdee9.fit-760w.jpg';
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Card["default"], null, /*#__PURE__*/_react["default"].createElement(_Card.CardActionArea, null, /*#__PURE__*/_react["default"].createElement(_Card.CardMedia, {
+    image: url,
+    title: "Puppies",
+    style: {
+      height: '256px'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Card.CardContent, null, "...look, a beautiful person over here")), /*#__PURE__*/_react["default"].createElement(_Card.CardActions, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    size: "small",
+    color: "primary"
+  }, "Confirm")));
+};
+
+exports.Default = Default;

package/stories/Checkbox.stories.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SwitchWithHelper = exports.Switch = exports.WithoutLabel = exports.Primary = exports.WithHelper = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = _interopRequireDefault(require("../core/Checkbox"));
+
+var _default = {
+  title: 'Checkbox',
+  component: _Checkbox["default"],
+  argTypes: {
+    backgroundColor: {
+      control: 'color'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], args);
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+    label: "I agree with the terms",
+    name: "terms",
+    onChange: function onChange() {
+      return alert('You clicked on the checkbox!');
+    }
+  });
+};
+
+exports.Default = Default;
+var WithHelper = Template.bind({});
+exports.WithHelper = WithHelper;
+WithHelper.args = {
+  label: 'I agree with the terms',
+  name: 'terms',
+  onChange: function onChange() {
+    return alert('You clicked on the checkbox!');
+  },
+  onHelperClick: function onHelperClick() {
+    return alert('Do you need help?');
+  },
+  children: 'Checkbox'
+};
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  label: 'I agree with the terms',
+  name: 'terms',
+  onChange: function onChange() {
+    return alert('You clicked on the checkbox!');
+  },
+  color: 'primary',
+  children: 'Checkbox'
+};
+var WithoutLabel = Template.bind({});
+exports.WithoutLabel = WithoutLabel;
+WithoutLabel.args = {
+  name: 'terms',
+  onChange: function onChange() {
+    return alert('You clicked on the checkbox!');
+  },
+  children: 'Checkbox'
+};
+var Switch = Template.bind({});
+exports.Switch = Switch;
+Switch.args = {
+  label: 'Bluetooth',
+  name: 'bluetooth',
+  type: 'switch',
+  onChange: function onChange() {
+    return alert('You clicked on the switcher!');
+  },
+  children: 'Checkbox'
+};
+var SwitchWithHelper = Template.bind({});
+exports.SwitchWithHelper = SwitchWithHelper;
+SwitchWithHelper.args = {
+  id: 'with-helper',
+  label: 'Bluetooth',
+  name: 'bluetooth',
+  type: 'switch',
+  onChange: function onChange() {
+    return alert('You clicked on the switcher!');
+  },
+  onHelperClick: function onHelperClick() {
+    return alert('Do you need help?');
+  },
+  children: 'Checkbox'
+};