@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/DynamicFieldset/Fieldset.js

@@ -1,143 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
-import dotProp from "dot-prop-immutable";
-import { FormElementMessage } from "../FormElementMessage";
-import styled from "@emotion/styled";
-var DynamicFieldsetRow = /*#__PURE__*/styled("div", {
-  target: "eqcnudi0",
-  label: "DynamicFieldsetRow"
-})({
-  paddingBottom: 10,
-  "> .mdc-layout-grid": {
-    padding: 0
-  }
-});
-
-var Fieldset = /*#__PURE__*/function (_React$Component) {
-  _inherits(Fieldset, _React$Component);
-
-  var _super = _createSuper(Fieldset);
-
-  function Fieldset() {
-    var _this;
-
-    _classCallCheck(this, Fieldset);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "header", null);
-
-    _defineProperty(_assertThisInitialized(_this), "rows", null);
-
-    _defineProperty(_assertThisInitialized(_this), "empty", null);
-
-    _defineProperty(_assertThisInitialized(_this), "actions", {
-      add: function add() {
-        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-        return function () {
-          return _this.addData(index);
-        };
-      },
-      remove: function remove() {
-        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-        return function () {
-          return _this.removeData(index);
-        };
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "removeData", function (index) {
-      var _this$props = _this.props,
-          value = _this$props.value,
-          onChange = _this$props.onChange;
-      onChange(dotProp.delete(value, index));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "addData", function () {
-      var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-      var _this$props2 = _this.props,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange;
-
-      if (index < 0) {
-        onChange([].concat(_toConsumableArray(value), [{}]));
-      } else {
-        onChange([].concat(_toConsumableArray(value.slice(0, index + 1)), [{}], _toConsumableArray(value.slice(index + 1))));
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderHeader", function (cb) {
-      _this.header = cb();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderRow", function (cb) {
-      var value = _this.props.value;
-      _this.rows = value.map(function (record, index) {
-        return /*#__PURE__*/React.createElement(DynamicFieldsetRow, {
-          key: index
-        }, cb({
-          data: record,
-          index: index
-        }));
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderEmpty", function (cb) {
-      _this.empty = cb();
-    });
-
-    return _this;
-  }
-
-  _createClass(Fieldset, [{
-    key: "renderComponent",
-    value: function renderComponent() {
-      var value = this.props.value;
-      var children = this.props.children;
-      children({
-        actions: this.actions,
-        header: this.renderHeader,
-        row: this.renderRow,
-        empty: this.renderEmpty
-      });
-
-      if (value.length) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, this.header, this.rows);
-      }
-
-      return this.empty;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          description = _this$props3.description,
-          _this$props3$validati = _this$props3.validation,
-          validation = _this$props3$validati === void 0 ? {
-        isValid: null
-      } : _this$props3$validati;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderComponent(), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
-    }
-  }]);
-
-  return Fieldset;
-}(React.Component);
-
-_defineProperty(Fieldset, "defaultProps", {
-  value: [],
-  description: null
-});
-
-export default Fieldset;

package/Elevation/Elevation.stories.d.ts

@@ -1 +0,0 @@
-export {};

package/Elevation/Elevation.stories.js

@@ -1,29 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./../Elevation/README.md";
-import { withKnobs, boolean, select } from "@storybook/addon-knobs";
-import { Elevation } from "./Elevation";
-var story = storiesOf("Components/Elevation", module);
-story.addDecorator(withKnobs);
-story.add("usage", function () {
-  var transition = boolean("Transition", true);
-  var z = select("Z (elevation height)", _toConsumableArray(Array(25).keys()), 1);
-  var style = {
-    padding: 20,
-    backgroundColor: "white"
-  };
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
-    title: "An area with applied elevation"
-  }, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Elevation, {
-    z: z,
-    transition: transition
-  }, /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, "This is an elevated content."))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Elevation z={".concat(z, "} transition={").concat(transition, "}>\n                            <div>This is an elevated content.</div>\n                        </Elevation>\n                    "))));
-}, {
-  info: {
-    propTables: [Elevation]
-  }
-});

package/Elevation/README.md

@@ -1,15 +0,0 @@
-# Elevation
-
-### Design
-
-<a href="https://material.io/develop/web/components/elevation/" target="_blank">https://material.io/develop/web/components/elevation/</a>
-
-### Description
-
-`Elevation` component visually raises any content by applying shadow.
-
-### Import
-
-```js
-import { Elevation } from "@webiny/ui/Elevation";
-```

package/FullName/README.md

@@ -1,11 +0,0 @@
-# FullName
-
-### Description
-
-Use `FullName` component to display first name and last name of users.
-
-### Import
-
-```js
-import { FullName } from "@webiny/ui/FullName";
-```

package/Grid/Grid.stories.d.ts

@@ -1 +0,0 @@
-export {};

package/Grid/Grid.stories.js

@@ -1,31 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
-import readme from "./../Grid/README.md";
-import { Grid, Cell } from "./Grid";
-var story = storiesOf("Components/Grid", module);
-story.add("usage", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
-    title: "A simple grid."
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
-    span: 3,
-    tablet: 6,
-    phone: 12
-  }, "Apples"), /*#__PURE__*/React.createElement(Cell, {
-    span: 3,
-    tablet: 6,
-    phone: 12
-  }, "Oranges"), /*#__PURE__*/React.createElement(Cell, {
-    span: 3,
-    tablet: 6,
-    phone: 12
-  }, "Bananas"), /*#__PURE__*/React.createElement(Cell, {
-    span: 3,
-    tablet: 6,
-    phone: 12
-  }, "Strawberries"))));
-}, {
-  info: {
-    propTables: [Grid, Cell]
-  }
-});

package/Grid/README.md

@@ -1,15 +0,0 @@
-# Grid
-
-### Design
-
-<a href="https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins" target="_blank">https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins</a>
-
-### Description
-
-Use `Grid` and `Cell` components to display content and UI in an organized and responsive way.
-
-### Import
-
-```js
-import `{ Grid, Cell }` from "@webiny/ui/Grid";
-```

package/Icon/Icon.stories.d.ts

@@ -1 +0,0 @@
-export {};

package/Icon/Icon.stories.js

@@ -1,27 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
-import readme from "./../Icon/README.md";
-import { ReactComponent as AutoRenewIcon } from "@svgr/webpack!./svg/baseline-autorenew-24px.svg";
-import { ReactComponent as CloudDoneIcon } from "@svgr/webpack!./svg/baseline-cloud_done-24px.svg";
-import { ReactComponent as BaselineDeleteIcon } from "@svgr/webpack!./svg/baseline-delete-24px.svg";
-import { ReactComponent as BaselineDoneIcon } from "@svgr/webpack!./svg/baseline-done-24px.svg";
-import { Icon } from "./Icon";
-var story = storiesOf("Components/Icon", module);
-story.add("usage", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
-    title: "A simple icon"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
-  }), "\xA0", /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(CloudDoneIcon, null)
-  }), "\xA0", /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
-  }), "\xA0", /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
-  }), "\xA0")));
-}, {
-  info: {
-    propTables: [Icon]
-  }
-});

package/Icon/README.md

@@ -1,11 +0,0 @@
-# Icon
-
-### Description
-
-Use `Icon` component to display an icon.
-
-### Import
-
-```js
-import { Icon } from "@webiny/ui/Icon";
-```

package/Icon/svg/baseline-autorenew-24px.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/Icon/svg/baseline-cloud_done-24px.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
-</svg>

package/Icon/svg/baseline-delete-24px.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/Icon/svg/baseline-done-24px.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>

package/Image/Image.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    [key: string]: any;
-};
-declare const Image: ({ ...rest }: Props) => JSX.Element;
-export { Image };

package/Image/Image.js

@@ -1,18 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import * as React from "react"; // Accepts all props that a normal <img> element would accept.
-
-var Image = function Image(_ref) {
-  var rest = Object.assign({}, _ref);
-
-  var finalProps = _objectSpread({}, rest);
-
-  if (finalProps.srcSet && typeof finalProps.srcSet === "object") {
-    finalProps.srcSet = Object.keys(finalProps.srcSet).map(function (key) {
-      return "".concat(finalProps.srcSet[key], " ").concat(key);
-    }).join(", ");
-  }
-
-  return /*#__PURE__*/React.createElement("img", finalProps);
-};
-
-export { Image };

package/Image/Image.stories.d.ts

@@ -1 +0,0 @@
-export {};

package/Image/Image.stories.js

@@ -1,21 +0,0 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./../Image/README.md";
-import { withKnobs } from "@storybook/addon-knobs";
-import { Image } from "./Image";
-var story = storiesOf("Components/Image", module);
-story.addDecorator(withKnobs);
-story.add("usage", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Image, {
-    src: "http://i.pravatar.cc/150?img=49",
-    alt: "Nice image."
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement(Image, {
-    src: "http://i.pravatar.cc/150?img=49",
-    alt: "Nice image."
-  }))));
-}, {
-  info: {
-    propTables: [Image]
-  }
-});

package/Image/README.md

@@ -1,12 +0,0 @@
-# Image
-
-### Description
-
-Use `Image` component instead of plain `<img>` element to display images more efficiently. Internally it uses
-`react-image` component.
-
-### Import
-
-```js
-import { Image } from "@webiny/ui/Image";
-```

package/ImageEditor/toolbar/crop.d.ts

@@ -1,4 +0,0 @@
-import { ImageEditorTool } from "./types";
-import "cropperjs/dist/cropper.css";
-declare const tool: ImageEditorTool;
-export default tool;

package/ImageEditor/toolbar/crop.js

@@ -1,69 +0,0 @@
-import React from "react";
-import { ReactComponent as CropIcon } from "@svgr/webpack!./icons/crop.svg";
-import { IconButton } from "../../Button";
-import { Tooltip } from "../../Tooltip";
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
-var cropper = null;
-
-var renderForm = function renderForm() {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: "center"
-    }
-  }, "Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.");
-};
-
-var tool = {
-  name: "crop",
-  icon: function icon(_ref) {
-    var activateTool = _ref.activateTool;
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      placement: "bottom",
-      content: "Crop"
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(CropIcon, null),
-      onClick: activateTool
-    }));
-  },
-  renderForm: renderForm,
-  onActivate: function onActivate(_ref2) {
-    var canvas = _ref2.canvas,
-        options = _ref2.options;
-    cropper = new Cropper(canvas.current, options);
-  },
-  cancel: function cancel() {
-    return cropper && cropper.destroy();
-  },
-  apply: function apply(_ref3) {
-    var canvas = _ref3.canvas;
-    return new Promise(function (resolve) {
-      if (!cropper) {
-        resolve();
-        return;
-      }
-
-      var current = canvas.current;
-      var src = cropper.getCroppedCanvas().toDataURL();
-
-      if (current) {
-        var image = new window.Image();
-        var ctx = current.getContext("2d");
-
-        image.onload = function () {
-          ctx.drawImage(image, 0, 0);
-          current.width = image.width;
-          current.height = image.height;
-          ctx.drawImage(image, 0, 0);
-          resolve();
-        };
-
-        image.src = src;
-      }
-
-      cropper.destroy();
-      cropper = null;
-    });
-  }
-};
-export default tool;

package/ImageEditor/toolbar/filter.d.ts

@@ -1,3 +0,0 @@
-import { ImageEditorTool } from "./types";
-declare const tool: ImageEditorTool;
-export default tool;