flipper-ui 0.25.0 → 0.25.1

package/stories/Chip.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SecondaryColor = exports.WithImageAvatar = exports.WithIconAvatar = exports.WithInitialsAvatar = exports.Squared = exports.Default = 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); 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: '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'
+});

package/stories/ChipField.stories.js

@@ -0,0 +1,60 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ChipField = _interopRequireDefault(require("../core/ChipField"));
+
+var _default = {
+  title: 'ChipField',
+  component: _ChipField["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)([{
+    value: 'alpha'
+  }]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var handleRemove = function handleRemove(value) {
+    return setState(state.filter(function (item) {
+      return item.value !== value;
+    }));
+  };
+
+  var handleAdd = function handleAdd(item) {
+    return setState([{
+      value: item
+    }].concat((0, _toConsumableArray2["default"])(state)));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_ChipField["default"], (0, _extends2["default"])({}, args, {
+    onDelete: handleRemove,
+    values: state,
+    onAdd: handleAdd
+  }));
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  variant: 'outlined',
+  label: 'chips'
+};

package/stories/Collapse.stories.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Closed = exports.Open = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Collapse = _interopRequireDefault(require("../core/Collapse"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Collapse',
+  component: _Collapse["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], args);
+};
+
+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),
+      buttonLabel = _useState4[0],
+      setButtonLabel = _useState4[1];
+
+  function handleClick() {
+    setOpen(!open);
+    !open ? setButtonLabel('Close') : setButtonLabel('Open');
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+    "in": open
+  }, " I am open for discussions "), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    size: "small",
+    color: "primary",
+    style: {
+      marginTop: '3em'
+    },
+    onClick: handleClick
+  }, buttonLabel));
+};
+
+exports.Default = Default;
+var Open = Template.bind({});
+exports.Open = Open;
+Open.args = {
+  "in": true,
+  children: 'I am open for discussions'
+};
+var Closed = Template.bind({});
+exports.Closed = Closed;
+Closed.args = {
+  "in": false,
+  children: 'I\'m not open for discussions. Please don\'t insist.'
+};

package/stories/Container.stories.js

@@ -0,0 +1,24 @@
+"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 _Container = _interopRequireDefault(require("../core/Container"));
+
+var _default = {
+  title: 'Container',
+  component: _Container["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Container["default"], null, "I am a Container");
+};
+
+exports.Default = Default;

package/stories/Content.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 _Content = _interopRequireDefault(require("../core/Content"));
+
+var _default = {
+  title: 'Content',
+  component: _Content["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Content["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  children: 'I am used to show Content'
+};