flipper-ui 0.27.1 → 0.28.0

package/stories/AutoComplete.stories.js

@@ -1,119 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithSubheader = exports.OpeningWhenFocused = 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

@@ -1,55 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithChuildren = exports.Primary = 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

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithDot = exports.Secondary = exports.Primary = 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

@@ -1,23 +0,0 @@
-"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

@@ -1,34 +0,0 @@
-"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

@@ -1,122 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Small = exports.Selected = exports.Secondary = exports.Primary = exports.OutlinedSecondary = exports.OutlinedPrimary = exports.Medium = exports.Large = exports.Disabled = exports.Default = exports.DashedSecondary = exports.DashedPrimary = exports.ContainedSecondary = exports.ContainedPrimary = exports.AddIcon = 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); 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 _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/Chapter.stories.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithCustomStyle = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Chapter = _interopRequireDefault(require("../core/Chapter"));
-var _default = {
-  title: 'Chapter',
-  component: _Chapter["default"]
-};
-exports["default"] = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_Chapter["default"], args);
-};
-var Default = Template.bind({});
-exports.Default = Default;
-Default.args = {
-  variant: 'body1',
-  children: 'Chapter'
-};
-var WithCustomStyle = Template.bind({});
-exports.WithCustomStyle = WithCustomStyle;
-WithCustomStyle.args = {
-  style: {
-    'background-color': 'red'
-  },
-  variant: 'body1',
-  typoStyle: {
-    color: 'blue'
-  },
-  children: 'Chapter'
-};

package/stories/Checkbox.stories.js

@@ -1,91 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithoutLabel = exports.WithHelper = exports.SwitchWithHelper = exports.Switch = exports.Primary = 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'
-};

package/stories/Chip.stories.js

@@ -1,61 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithInitialsAvatar = exports.WithImageAvatar = exports.WithIconAvatar = exports.Squared = exports.SecondaryColor = exports.Default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _Chip = _interopRequireDefault(require("../core/Chip"));
-var _Avatar = _interopRequireDefault(require("../core/Avatar"));
-var _Face = _interopRequireDefault(require("@material-ui/icons/Face"));
-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 _default = {
-  title: 'Chip',
-  component: _Chip["default"],
-  argTypes: {
-    backgroundColor: {
-      control: 'color'
-    }
-  }
-};
-exports["default"] = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_Chip["default"], args);
-};
-var commonArgs = {
-  label: 'Hello darkness my old friend',
-  children: 'Chip'
-};
-var Default = Template.bind({});
-exports.Default = Default;
-Default.args = _objectSpread({}, commonArgs);
-var Squared = Template.bind({});
-exports.Squared = Squared;
-Squared.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
-  square: true
-});
-var WithInitialsAvatar = Template.bind({});
-exports.WithInitialsAvatar = WithInitialsAvatar;
-WithInitialsAvatar.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
-  avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, "HD")
-});
-var WithIconAvatar = Template.bind({});
-exports.WithIconAvatar = WithIconAvatar;
-WithIconAvatar.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
-  avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], null, /*#__PURE__*/_react["default"].createElement(_Face["default"], null))
-});
-var WithImageAvatar = Template.bind({});
-exports.WithImageAvatar = WithImageAvatar;
-WithImageAvatar.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
-  avatar: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
-    src: "https://picsum.photos/40"
-  })
-});
-var SecondaryColor = Template.bind({});
-exports.SecondaryColor = SecondaryColor;
-SecondaryColor.args = _objectSpread(_objectSpread({}, commonArgs), {}, {
-  color: 'secondary'
-});