flipper-ui 0.25.0 → 0.25.1

package/stories/Tooltip.stories.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Disabled = exports.Positioned = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Tooltip = _interopRequireDefault(require("../core/Tooltip"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Tooltip',
+  component: _Tooltip["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  title: 'Tooltip',
+  children: /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined"
+  }, "Simple tooltip")
+};
+
+var Positioned = function Positioned() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "left-start"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    color: "secondary",
+    margin: 12
+  }, "left-start")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "left"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    color: "primary",
+    margin: 12
+  }, "left")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "left-end"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    margin: 12
+  }, "left-end")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "bottom-start"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    color: "primary",
+    margin: 12
+  }, "bottom-start")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "bottom"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    color: "secondary",
+    margin: 12
+  }, "bottom")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "bottom-end"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    color: "primary",
+    margin: 12
+  }, "bottom-end")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "right-start"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    margin: 12
+  }, "right-start")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "right"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    color: "primary",
+    margin: 12
+  }, "right")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "right-end"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    color: "secondary",
+    margin: 12
+  }, "right-end")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "top-start"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    margin: 12
+  }, "top-start")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "top"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    color: "secondary",
+    margin: 12
+  }, "top")), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: "Tooltip",
+    placement: "top-end"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined",
+    color: "primary",
+    margin: 12
+  }, "top-end")));
+};
+
+exports.Positioned = Positioned;
+var Disabled = Template.bind({});
+exports.Disabled = Disabled;
+Disabled.args = {
+  title: 'Tooltip',
+  children: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    disabled: true,
+    variant: "outlined"
+  }, "I'm a disabled element"))
+};

package/stories/Tree.stories.js

@@ -0,0 +1,45 @@
+"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 _Tree = _interopRequireDefault(require("../core/Tree"));
+
+var _default = {
+  title: 'Tree',
+  component: _Tree["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Tree["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  nodes: [{
+    id: 0,
+    name: 'Tree',
+    nodes: [{
+      id: 1,
+      name: 'Branch'
+    }, {
+      id: 2,
+      name: 'Branch'
+    }, {
+      id: 3,
+      name: 'Branch',
+      nodes: [{
+        id: 5,
+        name: 'Leaf'
+      }]
+    }]
+  }]
+};

package/stories/Typography.stories.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.Subtitle2 = exports.Subtitle1 = exports.Body2 = exports.Body1 = exports.Caption = exports.Button = exports.TextSecondary = exports.TextPrimary = exports.Secondary = exports.Primary = exports.ErrorText = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Typography = _interopRequireDefault(require("../core/Typography"));
+
+var _default = {
+  title: 'Typography',
+  component: _Typography["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Typography["default"], args, " ", args.children, " ");
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  children: 'This is a Typography text'
+};
+var ErrorText = Template.bind({});
+exports.ErrorText = ErrorText;
+ErrorText.args = {
+  color: 'error',
+  children: 'Text with error color'
+};
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  color: 'primary',
+  children: 'Text with primary color'
+};
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = {
+  color: 'secondary',
+  children: 'Text with secondary color'
+};
+var TextPrimary = Template.bind({});
+exports.TextPrimary = TextPrimary;
+TextPrimary.args = {
+  color: 'textPrimary',
+  children: 'Text with textPrimary color'
+};
+var TextSecondary = Template.bind({});
+exports.TextSecondary = TextSecondary;
+TextSecondary.args = {
+  color: 'textSecondary',
+  children: 'Text with textSecondary color'
+};
+var Button = Template.bind({});
+exports.Button = Button;
+Button.args = {
+  variant: 'button',
+  children: 'Button'
+};
+var Caption = Template.bind({});
+exports.Caption = Caption;
+Caption.args = {
+  variant: 'caption',
+  children: 'Caption'
+};
+var Body1 = Template.bind({});
+exports.Body1 = Body1;
+Body1.args = {
+  variant: 'body1',
+  children: 'Body1'
+};
+var Body2 = Template.bind({});
+exports.Body2 = Body2;
+Body2.args = {
+  variant: 'body2',
+  children: 'Body2'
+};
+var Subtitle1 = Template.bind({});
+exports.Subtitle1 = Subtitle1;
+Subtitle1.args = {
+  variant: 'subtitle1',
+  children: 'Subtitle1'
+};
+var Subtitle2 = Template.bind({});
+exports.Subtitle2 = Subtitle2;
+Subtitle2.args = {
+  variant: 'subtitle2',
+  children: 'Subtitle2'
+};
+var h1 = Template.bind({});
+exports.h1 = h1;
+h1.args = {
+  variant: 'h1',
+  children: 'h1'
+};
+var h2 = Template.bind({});
+exports.h2 = h2;
+h2.args = {
+  variant: 'h2',
+  children: 'h2'
+};
+var h3 = Template.bind({});
+exports.h3 = h3;
+h3.args = {
+  variant: 'h3',
+  children: 'h3'
+};
+var h4 = Template.bind({});
+exports.h4 = h4;
+h4.args = {
+  variant: 'h4',
+  children: 'h4'
+};
+var h5 = Template.bind({});
+exports.h5 = h5;
+h5.args = {
+  variant: 'h5',
+  children: 'h5'
+};
+var h6 = Template.bind({});
+exports.h6 = h6;
+h6.args = {
+  variant: 'h6',
+  children: 'h6'
+};

package/stories/Zooms.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 _Zoom = _interopRequireDefault(require("../core/Zoom"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Zoom',
+  component: _Zoom["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),
+      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(_Zoom["default"], {
+    "in": open
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "I am open for discussions")));
+};
+
+exports.Default = Default;

package/docz/Wrapper.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ThemeProvider = _interopRequireDefault(require("../core/ThemeProvider"));
-
-var fonts = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap';
-
-var Wrapper = function Wrapper(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("link", {
-    href: fonts,
-    rel: "stylesheet"
-  }), /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, children));
-};
-
-var _default = Wrapper;
-exports["default"] = _default;