@webiny/ui 0.0.0-unstable.e3f4727c56 → 0.0.0-unstable.eb196ccd2f

package/ImageEditor/toolbar/index.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "crop", {
-  enumerable: true,
-  get: function get() {
-    return _crop.default;
-  }
-});
-Object.defineProperty(exports, "filter", {
-  enumerable: true,
-  get: function get() {
-    return _filter.default;
-  }
-});
-Object.defineProperty(exports, "flip", {
-  enumerable: true,
-  get: function get() {
-    return _flip.default;
-  }
-});
-Object.defineProperty(exports, "rotate", {
-  enumerable: true,
-  get: function get() {
-    return _rotate.default;
-  }
-});
-var _crop = _interopRequireDefault(require("./crop"));
-var _flip = _interopRequireDefault(require("./flip"));
-var _filter = _interopRequireDefault(require("./filter"));
-var _rotate = _interopRequireDefault(require("./rotate"));

package/ImageEditor/toolbar/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as crop } from \"./crop\";\nexport { default as flip } from \"./flip\";\nexport { default as filter } from \"./filter\";\nexport { default as rotate } from \"./rotate\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA"}

package/ImageEditor/toolbar/rotate.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/rotate.js

@@ -1,139 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _rotateRight = require("./icons/rotateRight.svg");
-var _Slider = require("../../Slider");
-var _Tooltip = require("../../Tooltip");
-var _Button = require("../../Button");
-var _cropperjs = _interopRequireDefault(require("cropperjs"));
-require("cropperjs/dist/cropper.css");
-var cropper;
-var RenderForm = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(RenderForm, _React$Component);
-  var _super = (0, _createSuper2.default)(RenderForm);
-  function RenderForm() {
-    var _this;
-    (0, _classCallCheck2.default)(this, RenderForm);
-    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));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      rangeInput: 0
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(RenderForm, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          width: "500px",
-          margin: "0 auto"
-        }
-      }, /*#__PURE__*/_react.default.createElement(_Slider.Slider, {
-        label: "Range Input",
-        value: this.state.rangeInput,
-        min: 0,
-        max: 360,
-        step: 10,
-        discrete: true,
-        displayMarkers: true,
-        onInput: function onInput(value) {
-          _this2.setState({
-            rangeInput: value
-          }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-            return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  if (cropper) {
-                    cropper.rotateTo(parseInt(value, 10));
-                  }
-                case 1:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          })));
-        }
-      }));
-    }
-  }]);
-  return RenderForm;
-}(_react.default.Component);
-var tool = {
-  name: "rotate",
-  icon: function icon(_ref2) {
-    var activateTool = _ref2.activateTool;
-    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-      placement: "bottom",
-      content: "Rotate"
-    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-      icon: /*#__PURE__*/_react.default.createElement(_rotateRight.ReactComponent, null),
-      onClick: function onClick() {
-        return activateTool("rotate");
-      },
-      "data-testid": "rotate-item"
-    }));
-  },
-  renderForm: function renderForm(props) {
-    return /*#__PURE__*/_react.default.createElement(RenderForm, props);
-  },
-  onActivate: function onActivate(_ref3) {
-    var canvas = _ref3.canvas;
-    /**
-     * We can safely cast canvas.current as HTMLCanvasElement
-     */
-    cropper = new _cropperjs.default(canvas.current, {
-      background: false,
-      modal: false,
-      guides: false,
-      dragMode: "none",
-      highlight: false,
-      autoCrop: false
-    });
-  },
-  cancel: function cancel() {
-    return cropper && cropper.destroy();
-  },
-  apply: function apply(_ref4) {
-    var canvas = _ref4.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);
-        };
-        image.src = src;
-        resolve();
-      }
-      cropper.destroy();
-    });
-  }
-};
-var _default = tool;
-exports.default = _default;

package/ImageEditor/toolbar/rotate.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cropper","RenderForm","rangeInput","width","margin","state","value","setState","rotateTo","parseInt","React","Component","tool","name","icon","activateTool","renderForm","props","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageEditor/toolbar/types.d.ts

@@ -1,33 +0,0 @@
-/// <reference types="web" />
-import React from "react";
-export declare type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
-interface RenderFormParams {
-    canvas: React.RefObject<HTMLCanvasElement>;
-    image: HTMLImageElement;
-    renderApplyCancel?: Function;
-    options?: {
-        [key: string]: any;
-    };
-}
-interface OnActivateParams {
-    options: any;
-    canvas: React.RefObject<HTMLCanvasElement>;
-}
-interface IconParams {
-    activateTool: (tool: ToolbarTool) => void;
-}
-interface ApplyParams {
-    canvas: React.RefObject<HTMLCanvasElement>;
-}
-interface CancelParams {
-    canvas: React.RefObject<HTMLCanvasElement>;
-}
-export interface ImageEditorTool {
-    name: string;
-    apply?: (params: ApplyParams) => void;
-    cancel?: (params: CancelParams) => void;
-    onActivate?: (params: OnActivateParams) => void;
-    icon: (params: IconParams) => React.ReactElement<any>;
-    renderForm?: (params: RenderFormParams) => React.ReactNode;
-}
-export {};

package/ImageEditor/toolbar/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/ImageEditor/toolbar/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React from \"react\";\n\nexport type ToolbarTool = \"crop\" | \"flip\" | \"rotate\" | \"filter\";\n\ninterface RenderFormParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n    image: HTMLImageElement;\n    renderApplyCancel?: Function;\n    options?: { [key: string]: any };\n}\n\ninterface OnActivateParams {\n    options: any;\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface IconParams {\n    activateTool: (tool: ToolbarTool) => void;\n}\n\ninterface ApplyParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\ninterface CancelParams {\n    canvas: React.RefObject<HTMLCanvasElement>;\n}\n\nexport interface ImageEditorTool {\n    name: string;\n    apply?: (params: ApplyParams) => void;\n    cancel?: (params: CancelParams) => void;\n    onActivate?: (params: OnActivateParams) => void;\n    icon: (params: IconParams) => React.ReactElement<any>;\n    renderForm?: (params: RenderFormParams) => React.ReactNode;\n}\n"],"mappings":""}

package/ImageUpload/MultiImageUpload.stories.d.ts

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

package/ImageUpload/MultiImageUpload.stories.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@storybook/react");
-var _Story = require("@webiny/storybook-utils/Story");
-var _addonKnobs = require("@storybook/addon-knobs");
-var _README = _interopRequireDefault(require("./README.md"));
-var _form = require("@webiny/form");
-var _MultiImageUpload = require("./MultiImageUpload");
-var story = (0, _react2.storiesOf)("Components/ImageUpload", module);
-story.addDecorator(_addonKnobs.withKnobs);
-var images = [{
-  id: 1,
-  name: "1st_image.jpg",
-  src: "http://i.pravatar.cc/150?img=49",
-  type: "image/jpeg",
-  size: 901611
-}, {
-  id: 2,
-  name: "2nd_image.jpg",
-  src: "http://i.pravatar.cc/150?img=63",
-  type: "image/jpeg",
-  size: 902612
-}, {
-  id: 3,
-  name: "3rd_image.jpg",
-  src: "http://i.pravatar.cc/150?img=24",
-  type: "image/jpeg",
-  size: 903613
-}, {
-  id: 4,
-  name: "4th_image.jpg",
-  src: "http://i.pravatar.cc/150?img=57",
-  type: "image/jpeg",
-  size: 904614
-}, {
-  id: 5,
-  name: "5th_image.jpg",
-  src: "http://i.pravatar.cc/150?img=31",
-  type: "image/jpeg",
-  size: 905615
-}];
-story.add("Multi Image Upload", function () {
-  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
-  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_form.Form, {
-    data: {
-      images: images
-    }
-  }, function (_ref) {
-    var Bind = _ref.Bind;
-    return /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "images"
-    }, /*#__PURE__*/_react.default.createElement(_MultiImageUpload.MultiImageUpload, {
-      label: "Your previously uploaded images:",
-      disabled: disabled,
-      description: "This list will not be shown to other users.",
-      cropper: {
-        aspectRatio: 1
-      }
-    }));
-  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
-    images: images
-  }), "}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    "))));
-}, {
-  info: {
-    propTables: [_MultiImageUpload.MultiImageUpload]
-  }
-});

package/ImageUpload/MultiImageUpload.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","images","id","name","src","type","size","add","disabled","boolean","readme","Bind","aspectRatio","JSON","stringify","info","propTables","MultiImageUpload"],"sources":["MultiImageUpload.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { MultiImageUpload } from \"./MultiImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst images = [\n    {\n        id: 1,\n        name: \"1st_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=49\",\n        type: \"image/jpeg\",\n        size: 901611\n    },\n    {\n        id: 2,\n        name: \"2nd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=63\",\n        type: \"image/jpeg\",\n        size: 902612\n    },\n    {\n        id: 3,\n        name: \"3rd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=24\",\n        type: \"image/jpeg\",\n        size: 903613\n    },\n    {\n        id: 4,\n        name: \"4th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=57\",\n        type: \"image/jpeg\",\n        size: 904614\n    },\n    {\n        id: 5,\n        name: \"5th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=31\",\n        type: \"image/jpeg\",\n        size: 905615\n    }\n];\n\nstory.add(\n    \"Multi Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ images }}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                    <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                        cropper={{\n                                            aspectRatio: 1\n                                        }}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ images: images })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [MultiImageUpload] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7B,IAAMC,MAAM,GAAG,CACX;EACIC,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,CACJ;AAEDV,KAAK,CAACW,GAAG,CACL,oBAAoB,EACpB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAET,MAAM,EAANA;IAAO;EAAE,GAClB;IAAA,IAAGU,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAQ,gBACf,6BAAC,kCAAgB;MACb,KAAK,EAAC,kCAAkC;MACxC,QAAQ,EAAEH,QAAS;MACnB,WAAW,EAAC,6CAA6C;MACzD,OAAO,EAAE;QACLI,WAAW,EAAE;MACjB;IAAE,EACJ,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,wDAECC,IAAI,CAACC,SAAS,CAAC;IAAEb,MAAM,EAAEA;EAAO,CAAC,CAAC,okBAYjC,CACR,CACX;AAEhB,CAAC,EACD;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kCAAgB;EAAE;AAAE,CAAC,CAC/C"}

package/ImageUpload/README.md

@@ -1,11 +0,0 @@
-# ImageUpload
-
-### Description
-
-`ImageUpload` component lets users select a image (eg. to be uploaded to a server), or multiple images.
-
-### Import
-
-```js
-import { SingleImageUpload, MultiImageUpload } from "@webiny/ui/ImageUpload";
-```

package/ImageUpload/SingleImageUpload.stories.d.ts

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

package/ImageUpload/SingleImageUpload.stories.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@storybook/react");
-var _Story = require("@webiny/storybook-utils/Story");
-var _addonKnobs = require("@storybook/addon-knobs");
-var _README = _interopRequireDefault(require("./README.md"));
-var _form = require("@webiny/form");
-var _SingleImageUpload = require("./SingleImageUpload");
-var story = (0, _react2.storiesOf)("Components/ImageUpload", module);
-story.addDecorator(_addonKnobs.withKnobs);
-var image = {
-  id: 1,
-  name: "1st_image.jpg",
-  src: "http://i.pravatar.cc/150?img=49",
-  type: "image/jpeg",
-  size: 901611
-};
-story.add("Single Image Upload", function () {
-  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
-  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      maxWidth: 200
-    }
-  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
-    data: {
-      image: image
-    }
-  }, function (_ref) {
-    var Bind = _ref.Bind;
-    return /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "image"
-    }, /*#__PURE__*/_react.default.createElement(_SingleImageUpload.SingleImageUpload, {
-      label: "Your previously uploaded image:",
-      disabled: disabled,
-      description: "Image will be publicly visible."
-    }));
-  }))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <Form data={".concat(JSON.stringify({
-    image: image
-  }), "}>\n                            {({ Bind }) => (\n                                <Bind name=\"image\">\n                                     <SingleImageUpload\n                                        label=\"Your previously uploaded image:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    "))));
-}, {
-  info: {
-    propTables: [_SingleImageUpload.SingleImageUpload]
-  }
-});

package/ImageUpload/SingleImageUpload.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","image","id","name","src","type","size","add","disabled","boolean","readme","maxWidth","Bind","JSON","stringify","info","propTables","SingleImageUpload"],"sources":["SingleImageUpload.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport { Form } from \"@webiny/form\";\nimport { SingleImageUpload } from \"./SingleImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst image = {\n    id: 1,\n    name: \"1st_image.jpg\",\n    src: \"http://i.pravatar.cc/150?img=49\",\n    type: \"image/jpeg\",\n    size: 901611\n};\n\nstory.add(\n    \"Single Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <div style={{ maxWidth: 200 }}>\n                            <Form data={{ image }}>\n                                {({ Bind }) => (\n                                    <Bind name=\"image\">\n                                        <SingleImageUpload\n                                            label=\"Your previously uploaded image:\"\n                                            disabled={disabled}\n                                            description=\"Image will be publicly visible.\"\n                                        />\n                                    </Bind>\n                                )}\n                            </Form>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ image: image })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"image\">\n                                     <SingleImageUpload\n                                        label=\"Your previously uploaded image:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [SingleImageUpload] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7B,IAAMC,KAAK,GAAG;EACVC,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC;AAEDV,KAAK,CAACW,GAAG,CACL,qBAAqB,EACrB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAC1B,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEV,KAAK,EAALA;IAAM;EAAE,GACjB;IAAA,IAAGW,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAO,gBACd,6BAAC,oCAAiB;MACd,KAAK,EAAC,iCAAiC;MACvC,QAAQ,EAAEJ,QAAS;MACnB,WAAW,EAAC;IAAiC,EAC/C,CACC;EAAA,CACV,CACE,CACL,CACY,eACtB,6BAAC,uBAAgB,wDAECK,IAAI,CAACC,SAAS,CAAC;IAAEb,KAAK,EAAEA;EAAM,CAAC,CAAC,mkBAY/B,CACR,CACX;AAEhB,CAAC,EACD;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oCAAiB;EAAE;AAAE,CAAC,CAChD"}

package/ImageUpload/icons/round-add_photo_alternate-24px.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<g id="ui_x5F_spec_x5F_header_copy_3">
-	</g>
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<g id="ui_x5F_spec_x5F_header_copy_7">
-	</g>
-	<g>
-		<path fill="currentColor" d="M21.02,5H19V2.98C19,2.44,18.56,2,18.02,2h-0.03C17.44,2,17,2.44,17,2.98V5h-2.01C14.45,5,14.01,5.44,14,5.98
-			c0,0.01,0,0.02,0,0.03C14,6.56,14.44,7,14.99,7H17v2.01c0,0.54,0.44,0.99,0.99,0.98c0.01,0,0.02,0,0.03,0
-			c0.54,0,0.98-0.44,0.98-0.98V7h2.02C21.56,7,22,6.56,22,6.02V5.98C22,5.44,21.56,5,21.02,5z"/>
-		<path fill="currentColor" d="M16,9.01V8h-1.01c-0.53,0-1.03-0.21-1.41-0.58C13.21,7.04,13,6.54,13,5.98c0-0.36,0.1-0.69,0.27-0.98H5C3.9,5,3,5.9,3,7
-			v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-8.28c-0.3,0.17-0.64,0.28-1.02,0.28C16.89,10.99,16,10.1,16,9.01z M15.96,19H6
-			c-0.41,0-0.65-0.47-0.4-0.8l1.98-2.63c0.21-0.28,0.62-0.26,0.82,0.02L10,18l2.61-3.48c0.2-0.26,0.59-0.27,0.79-0.01l2.95,3.68
-			C16.61,18.52,16.38,19,15.96,19z"/>
-	</g>
-</g>
-</svg>

package/ImageUpload/icons/round-close-24px.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="Bounding_Boxes">
-	<path fill="none" d="M0,0h24v24H0V0z"/>
-</g>
-<g id="Rounded">
-	<path fill="currentColor" d="M18.3,5.71L18.3,5.71c-0.39-0.39-1.02-0.39-1.41,0L12,10.59L7.11,5.7c-0.39-0.39-1.02-0.39-1.41,0l0,0
-		c-0.39,0.39-0.39,1.02,0,1.41L10.59,12L5.7,16.89c-0.39,0.39-0.39,1.02,0,1.41h0c0.39,0.39,1.02,0.39,1.41,0L12,13.41l4.89,4.89
-		c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L13.41,12l4.89-4.89C18.68,6.73,18.68,6.09,18.3,5.71z"/>
-</g>
-</svg>

package/ImageUpload/icons/round-edit-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="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/ImageUpload/styled.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-/// <reference types="web" />
-/// <reference types="react" />
-export declare const AddImageIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const AddImageWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const AddImageWrapperRound: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
-} & {
-    children?: import("react").ReactNode;
-}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
-} & {
-    children?: import("react").ReactNode;
-}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("react").HTMLAttributes<HTMLDivElement> | "theme">, object>;
-export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const EditImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const ImagePreviewWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/ImageUpload/styled.js

@@ -1,131 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RemoveImage = exports.ImagePreviewWrapper = exports.EditImage = exports.AddImageWrapperRound = exports.AddImageWrapper = exports.AddImageIconWrapper = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _styled2 = _interopRequireDefault(require("@emotion/styled"));
-var _hover, _styled;
-var AddImageIconWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
-  target: "e1engwcq0",
-  label: "AddImageIconWrapper"
-})({
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  ">svg": {
-    width: "100%",
-    height: "100%",
-    maxWidth: 50,
-    maxHeight: 50,
-    display: "block",
-    opacity: 0.5,
-    margin: "0 auto"
-  }
-});
-exports.AddImageIconWrapper = AddImageIconWrapper;
-var AddImageWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
-  target: "e1engwcq1",
-  label: "AddImageWrapper"
-})({
-  width: "100%",
-  height: "100%",
-  minHeight: 50,
-  minWidth: 50,
-  textAlign: "center",
-  backgroundColor: "var(--mdc-theme-on-background)",
-  borderRadius: 0,
-  borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-around",
-  flexDirection: "column",
-  transition: "color 0.2s",
-  cursor: "pointer",
-  padding: 10,
-  boxSizing: "border-box",
-  "&:hover": {
-    backgroundColor: "rgba(0,0,0, 0.5)",
-    borderBottom: "1px solid var(--mdc-theme-on-surface)"
-  }
-});
-exports.AddImageWrapper = AddImageWrapper;
-var AddImageWrapperRound = /*#__PURE__*/(0, _styled2.default)(AddImageWrapper, {
-  target: "e1engwcq2",
-  label: "AddImageWrapperRound"
-})({
-  margin: "auto",
-  width: "150px",
-  height: "150px",
-  borderRadius: "50%"
-});
-exports.AddImageWrapperRound = AddImageWrapperRound;
-var RemoveImage = /*#__PURE__*/(0, _styled2.default)("div", {
-  target: "e1engwcq3",
-  label: "RemoveImage"
-})({
-  position: "absolute",
-  cursor: "pointer",
-  top: 10,
-  right: 10,
-  display: "none",
-  color: "white",
-  opacity: 0.5,
-  "&:hover": {
-    opacity: 0.75
-  }
-});
-exports.RemoveImage = RemoveImage;
-var EditImage = /*#__PURE__*/(0, _styled2.default)("div", {
-  target: "e1engwcq4",
-  label: "EditImage"
-})({
-  position: "absolute",
-  cursor: "pointer",
-  top: 10,
-  left: 10,
-  display: "none",
-  color: "white",
-  opacity: 0.5,
-  "&:hover": {
-    opacity: 0.75
-  }
-});
-exports.EditImage = EditImage;
-var ImagePreviewWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
-  target: "e1engwcq5",
-  label: "ImagePreviewWrapper"
-})((_styled = {
-  width: "100%",
-  height: "100%",
-  minHeight: 50,
-  minWidth: 50,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-around",
-  flexDirection: "column",
-  boxSizing: "border-box",
-  position: "relative"
-}, (0, _defineProperty2.default)(_styled, AddImageWrapper, (0, _defineProperty2.default)({
-  position: "absolute",
-  display: "none",
-  top: 0,
-  height: "100%",
-  zIndex: 1,
-  backgroundColor: "rgba(0,0,0, 0.75)"
-}, AddImageIconWrapper, {
-  top: "50%",
-  left: "50%",
-  transform: "translateY(-50%) translateX(-50%)",
-  position: "absolute",
-  color: "white"
-})), (0, _defineProperty2.default)(_styled, "&:hover", (_hover = {}, (0, _defineProperty2.default)(_hover, AddImageWrapper, {
-  display: "block"
-}), (0, _defineProperty2.default)(_hover, RemoveImage, {
-  display: "block",
-  zIndex: 2
-}), (0, _defineProperty2.default)(_hover, EditImage, {
-  display: "block",
-  zIndex: 2
-}), _hover)), _styled));
-exports.ImagePreviewWrapper = ImagePreviewWrapper;

package/ImageUpload/styled.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["AddImageIconWrapper","styled","color","width","height","maxWidth","maxHeight","display","opacity","margin","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","EditImage","left","ImagePreviewWrapper","zIndex","transform"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const EditImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    left: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const ImagePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        },\n        [EditImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":"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"}

package/Input/Input.stories.d.ts

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