@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.085ff6572f

package/Button/CopyButton/CopyButton.stories.js

@@ -1,18 +1,21 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
-import readme from "./README.md";
-import { Menu, MenuItem } from "./../../Menu/index";
-import { CopyButton } from "./CopyButton";
-var story = storiesOf("Components/Button", module);
+"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 _README = _interopRequireDefault(require("./README.md"));
+var _index = require("./../../Menu/index");
+var _CopyButton = require("./CopyButton");
+var story = (0, _react2.storiesOf)("Components/Button", module);
 story.add("copy button", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Copy button"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Click the button to copy the \"Hello\" value:"), /*#__PURE__*/React.createElement(CopyButton, {
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, "Click the button to copy the \"Hello\" value:"), /*#__PURE__*/_react.default.createElement(_CopyButton.CopyButton, {
     value: "Hello"
   }))));
 }, {
   info: {
-    propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]
+    propTablesExclude: [_index.Menu, _index.MenuItem, _Story.Story, _Story.StoryReadme, _Story.StorySandbox]
   }
 });

package/Button/CopyButton/CopyButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTablesExclude","Menu","MenuItem","Story","StoryReadme","StorySandbox"],"sources":["CopyButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { CopyButton } from \"./CopyButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n    \"copy button\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Copy button\"}>\n                    <div>\n                        <span>Click the button to copy the &quot;Hello&quot; value:</span>\n                        <CopyButton value=\"Hello\" />\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n        }\n    }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,mBAAmB,EAAEC,MAAM,CAAC;AAEpDF,KAAK,CAACG,GAAG,CACL,aAAa,EACb,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAc,gBAC/B,uDACI,2CAAM,+CAAqD,CAAO,eAClE,6BAAC,sBAAU;IAAC,KAAK,EAAC;EAAO,EAAG,CAC1B,CACK,CACX;AAEhB,CAAC,EACD;EACIC,IAAI,EAAE;IACFC,iBAAiB,EAAE,CAACC,WAAI,EAAEC,eAAQ,EAAEC,YAAK,EAAEC,kBAAW,EAAEC,mBAAY;EACxE;AACJ,CAAC,CACJ"}

package/Button/IconButton/IconButton.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { IconButtonProps as RmwcIconButtonProps } from "@rmwc/icon-button";
 import { FormComponentProps } from "../../types";
-export declare type IconButtonProps = FormComponentProps & RmwcIconButtonProps & {
+export interface IconButtonProps extends Omit<FormComponentProps, "onChange">, RmwcIconButtonProps {
     id?: string;
     /**
      * Icon should be provided as an SvgComponent.
@@ -28,12 +28,9 @@ export declare type IconButtonProps = FormComponentProps & RmwcIconButtonProps &
      * Should icon be disabled?
      */
     disabled?: boolean;
-};
+}
 /**
  * Shows the icon button.
- * @param props
- * @returns {*}
- * @constructor
  */
-declare const IconButton: (props: IconButtonProps) => JSX.Element;
+declare const IconButton: React.FC<IconButtonProps>;
 export { IconButton };

package/Button/IconButton/IconButton.js

@@ -1,22 +1,24 @@
-import * as React from "react";
-import { IconButton as RIconButton } from "@rmwc/icon-button";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _iconButton = require("@rmwc/icon-button");
 /**
  * Shows the icon button.
- * @param props
- * @returns {*}
- * @constructor
  */
 var IconButton = function IconButton(props) {
   var id = props.id,
-      icon = props.icon,
-      label = props.label,
-      onClick = props.onClick,
-      className = props.className,
-      disabled = props.disabled,
-      _props$ripple = props.ripple,
-      ripple = _props$ripple === void 0 ? true : _props$ripple;
-  return /*#__PURE__*/React.createElement(RIconButton, {
+    icon = props.icon,
+    label = props.label,
+    onClick = props.onClick,
+    className = props.className,
+    disabled = props.disabled,
+    ripple = props.ripple;
+  return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
     id: id,
     "data-testid": props["data-testid"],
     onClick: onClick,
@@ -27,5 +29,4 @@ var IconButton = function IconButton(props) {
     ripple: ripple
   });
 };
-
-export { IconButton };
+exports.IconButton = IconButton;

package/Button/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IconButton","props","id","icon","label","onClick","className","disabled","ripple"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    IconButton as RIconButton,\n    IconButtonProps as RmwcIconButtonProps\n} from \"@rmwc/icon-button\";\n\nimport { FormComponentProps } from \"../../types\";\n\nexport interface IconButtonProps extends Omit<FormComponentProps, \"onChange\">, RmwcIconButtonProps {\n    id?: string;\n    /**\n     * Icon should be provided as an SvgComponent.\n     */\n    icon: React.ReactNode;\n\n    /**\n     * Button label\n     */\n    label?: string;\n\n    /**\n     * onClick handler\n     * @param event\n     */\n    onClick?: (event: React.MouseEvent) => void;\n\n    /**\n     * Custom CSS class\n     */\n    className?: string;\n    /**\n     * For testing purposes.\n     */\n\n    \"data-testid\"?: string;\n\n    /**\n     * Should icon be disabled?\n     */\n    disabled?: boolean;\n}\n\n/**\n * Shows the icon button.\n */\nconst IconButton: React.FC<IconButtonProps> = props => {\n    const { id, icon, label, onClick, className, disabled, ripple } = props;\n\n    return (\n        <RIconButton\n            id={id}\n            data-testid={props[\"data-testid\"]}\n            onClick={onClick}\n            disabled={disabled}\n            className={className}\n            label={label}\n            icon={icon}\n            ripple={ripple}\n        />\n    );\n};\n\nexport { IconButton };\n"],"mappings":";;;;;;;AAAA;AACA;AAyCA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAqC,CAAGC,KAAK,EAAI;EACnD,IAAQC,EAAE,GAAwDD,KAAK,CAA/DC,EAAE;IAAEC,IAAI,GAAkDF,KAAK,CAA3DE,IAAI;IAAEC,KAAK,GAA2CH,KAAK,CAArDG,KAAK;IAAEC,OAAO,GAAkCJ,KAAK,CAA9CI,OAAO;IAAEC,SAAS,GAAuBL,KAAK,CAArCK,SAAS;IAAEC,QAAQ,GAAaN,KAAK,CAA1BM,QAAQ;IAAEC,MAAM,GAAKP,KAAK,CAAhBO,MAAM;EAE7D,oBACI,6BAAC,sBAAW;IACR,EAAE,EAAEN,EAAG;IACP,eAAaD,KAAK,CAAC,aAAa,CAAE;IAClC,OAAO,EAAEI,OAAQ;IACjB,QAAQ,EAAEE,QAAS;IACnB,SAAS,EAAED,SAAU;IACrB,KAAK,EAAEF,KAAM;IACb,IAAI,EAAED,IAAK;IACX,MAAM,EAAEK;EAAO,EACjB;AAEV,CAAC;AAAC"}

package/Button/IconButton/IconButton.stories.js

@@ -1,38 +1,41 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
-import readme from "./README.md";
-import { ReactComponent as CloudIcon } from "@svgr/webpack!./../assets/baseline-cloud_done-24px.svg";
-import { ReactComponent as MoreIcon } from "@svgr/webpack!./../assets/round-more_vert-24px.svg";
-import { Menu, MenuItem } from "./../../Menu/index";
-import { IconButton } from "./IconButton";
-var story = storiesOf("Components/Button", module);
+"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 _README = _interopRequireDefault(require("./README.md"));
+var _baselineCloud_done24px = require("./../assets/baseline-cloud_done-24px.svg");
+var _roundMore_vert24px = require("./../assets/round-more_vert-24px.svg");
+var _index = require("./../../Menu/index");
+var _IconButton = require("./IconButton");
+var story = (0, _react2.storiesOf)("Components/Button", module);
 story.add("icon button", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Icon button"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(CloudIcon, null),
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null),
     label: "Icon label",
     onClick: function onClick() {
       return console.log("Button clicked");
     }
-  })), /*#__PURE__*/React.createElement(StorySandbox, {
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Menu example"
-  }, /*#__PURE__*/React.createElement(Menu, {
-    handle: /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(MoreIcon, null),
+  }, /*#__PURE__*/_react.default.createElement(_index.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_roundMore_vert24px.ReactComponent, null),
       label: "Toggle menu",
       onClick: function onClick() {
         return console.log("Button clicked");
       }
     })
-  }, /*#__PURE__*/React.createElement(MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
     onClick: function onClick() {
       console.log("Apple selected!");
     }
-  }, "Apple"), /*#__PURE__*/React.createElement(MenuItem, null, "Banana"), /*#__PURE__*/React.createElement(MenuItem, null, "Watermelon"))));
+  }, "Apple"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Banana"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Watermelon"))));
 }, {
   info: {
-    propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]
+    propTablesExclude: [_index.Menu, _index.MenuItem, _Story.Story, _Story.StoryReadme, _Story.StorySandbox]
   }
 });

package/Button/IconButton/IconButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","console","log","info","propTablesExclude","Menu","MenuItem","Story","StoryReadme","StorySandbox"],"sources":["IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { ReactComponent as CloudIcon } from \"./../assets/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as MoreIcon } from \"./../assets/round-more_vert-24px.svg\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { IconButton } from \"./IconButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n    \"icon button\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Icon button\"}>\n                    <IconButton\n                        icon={<CloudIcon />}\n                        label=\"Icon label\"\n                        onClick={() => console.log(\"Button clicked\")}\n                    />\n                </StorySandbox>\n                <StorySandbox title={\"Menu example\"}>\n                    <Menu\n                        handle={\n                            <IconButton\n                                icon={<MoreIcon />}\n                                label=\"Toggle menu\"\n                                onClick={() => console.log(\"Button clicked\")}\n                            />\n                        }\n                    >\n                        <MenuItem\n                            onClick={() => {\n                                console.log(\"Apple selected!\");\n                            }}\n                        >\n                            Apple\n                        </MenuItem>\n                        <MenuItem>Banana</MenuItem>\n                        <MenuItem>Watermelon</MenuItem>\n                    </Menu>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n        }\n    }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,mBAAmB,EAAEC,MAAM,CAAC;AAEpDF,KAAK,CAACG,GAAG,CACL,aAAa,EACb,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAc,gBAC/B,6BAAC,sBAAU;IACP,IAAI,eAAE,6BAAC,sCAAS,OAAI;IACpB,KAAK,EAAC,YAAY;IAClB,OAAO,EAAE;MAAA,OAAMC,OAAO,CAACC,GAAG,CAAC,gBAAgB,CAAC;IAAA;EAAC,EAC/C,CACS,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAe,gBAChC,6BAAC,WAAI;IACD,MAAM,eACF,6BAAC,sBAAU;MACP,IAAI,eAAE,6BAAC,kCAAQ,OAAI;MACnB,KAAK,EAAC,aAAa;MACnB,OAAO,EAAE;QAAA,OAAMD,OAAO,CAACC,GAAG,CAAC,gBAAgB,CAAC;MAAA;IAAC;EAEpD,gBAED,6BAAC,eAAQ;IACL,OAAO,EAAE,mBAAM;MACXD,OAAO,CAACC,GAAG,CAAC,iBAAiB,CAAC;IAClC;EAAE,GACL,OAED,CAAW,eACX,6BAAC,eAAQ,QAAC,QAAM,CAAW,eAC3B,6BAAC,eAAQ,QAAC,YAAU,CAAW,CAC5B,CACI,CACX;AAEhB,CAAC,EACD;EACIC,IAAI,EAAE;IACFC,iBAAiB,EAAE,CAACC,WAAI,EAAEC,eAAQ,EAAEC,YAAK,EAAEC,kBAAW,EAAEC,mBAAY;EACxE;AACJ,CAAC,CACJ"}

package/Button/index.js

@@ -1,3 +1,38 @@
-export * from "./Button";
-export * from "./IconButton/IconButton";
-export * from "./CopyButton/CopyButton";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Button = require("./Button");
+Object.keys(_Button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Button[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Button[key];
+    }
+  });
+});
+var _IconButton = require("./IconButton/IconButton");
+Object.keys(_IconButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _IconButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _IconButton[key];
+    }
+  });
+});
+var _CopyButton = require("./CopyButton/CopyButton");
+Object.keys(_CopyButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CopyButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CopyButton[key];
+    }
+  });
+});

package/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Button\";\nexport * from \"./IconButton/IconButton\";\nexport * from \"./CopyButton/CopyButton\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/Carousel/Carousel.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
+import React from "react";
 import { CarouselProps, CarouselRenderControl } from "nuka-carousel";
-declare type Props = CarouselProps & {
+interface Props extends CarouselProps {
     children: React.ReactNode;
     renderNextSlide?: CarouselRenderControl | null;
     renderPreviousSlide?: CarouselRenderControl | null;
     renderBottomNav?: CarouselRenderControl | null;
-};
+}
 declare class Carousel extends React.Component<Props> {
     static defaultProps: {
         swiping: boolean;

package/Carousel/Carousel.js

@@ -1,27 +1,29 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-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 NukaCarousel from "nuka-carousel";
-import pick from "lodash/pick";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 _nukaCarousel = _interopRequireDefault(require("nuka-carousel"));
+var _pick = _interopRequireDefault(require("lodash/pick"));
 var Carousel = /*#__PURE__*/function (_React$Component) {
-  _inherits(Carousel, _React$Component);
-
-  var _super = _createSuper(Carousel);
-
+  (0, _inherits2.default)(Carousel, _React$Component);
+  var _super = (0, _createSuper2.default)(Carousel);
   function Carousel() {
-    _classCallCheck(this, Carousel);
-
+    (0, _classCallCheck2.default)(this, Carousel);
     return _super.apply(this, arguments);
   }
-
-  _createClass(Carousel, [{
+  (0, _createClass2.default)(Carousel, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(NukaCarousel, Object.assign({}, pick(this.props, Carousel.nukaProps), this.props.renderPreviousSlide ? {
+      return /*#__PURE__*/_react.default.createElement(_nukaCarousel.default, Object.assign({}, (0, _pick.default)(this.props, Carousel.nukaProps), this.props.renderPreviousSlide ? {
         renderCenterLeftControls: this.props.renderPreviousSlide
       } : {}, this.props.renderNextSlide ? {
         renderCenterRightControls: this.props.renderNextSlide
@@ -30,17 +32,14 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
       } : {}), this.props.children);
     }
   }]);
-
   return Carousel;
-}(React.Component);
-
-_defineProperty(Carousel, "defaultProps", {
+}(_react.default.Component);
+(0, _defineProperty2.default)(Carousel, "defaultProps", {
   swiping: true,
   dragging: false,
   heightMode: "first",
   easing: "easeExpInOut"
 });
-
-_defineProperty(Carousel, "nukaProps", ["children", "afterSlide", "autoplay", "autoplayInterval", "beforeSlide", "dragging", "easing", "heightMode", "pauseOnHover", "slideIndex", "speed", "swiping", "transitionMode"]);
-
-export default Carousel;
+(0, _defineProperty2.default)(Carousel, "nukaProps", ["children", "afterSlide", "autoplay", "autoplayInterval", "beforeSlide", "dragging", "easing", "heightMode", "pauseOnHover", "slideIndex", "speed", "swiping", "transitionMode"]);
+var _default = Carousel;
+exports.default = _default;

package/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Carousel","pick","props","nukaProps","renderPreviousSlide","renderCenterLeftControls","renderNextSlide","renderCenterRightControls","renderBottomNav","renderBottomCenterControls","children","React","Component","swiping","dragging","heightMode","easing"],"sources":["Carousel.tsx"],"sourcesContent":["import React from \"react\";\nimport NukaCarousel, { CarouselProps, CarouselRenderControl } from \"nuka-carousel\";\nimport pick from \"lodash/pick\";\n\ninterface Props extends CarouselProps {\n    // slides as set of HTMLElements\n    children: React.ReactNode;\n\n    // render method for the next slide button\n    renderNextSlide?: CarouselRenderControl | null;\n\n    // render method for the previous slide button\n    renderPreviousSlide?: CarouselRenderControl | null;\n\n    // render method for the central navigation\n    renderBottomNav?: CarouselRenderControl | null;\n}\n\nclass Carousel extends React.Component<Props> {\n    static defaultProps = {\n        swiping: true,\n        dragging: false,\n        heightMode: \"first\",\n        easing: \"easeExpInOut\"\n    };\n\n    static nukaProps = [\n        \"children\",\n        \"afterSlide\",\n        \"autoplay\",\n        \"autoplayInterval\",\n        \"beforeSlide\",\n        \"dragging\",\n        \"easing\",\n        \"heightMode\",\n        \"pauseOnHover\",\n        \"slideIndex\",\n        \"speed\",\n        \"swiping\",\n        \"transitionMode\"\n    ];\n\n    public override render() {\n        return (\n            <NukaCarousel\n                {...pick(this.props, Carousel.nukaProps)}\n                {...(this.props.renderPreviousSlide\n                    ? { renderCenterLeftControls: this.props.renderPreviousSlide }\n                    : {})}\n                {...(this.props.renderNextSlide\n                    ? { renderCenterRightControls: this.props.renderNextSlide }\n                    : {})}\n                {...(this.props.renderBottomNav\n                    ? { renderBottomCenterControls: this.props.renderBottomNav }\n                    : {})}\n            >\n                {this.props.children}\n            </NukaCarousel>\n        );\n    }\n}\n\nexport default Carousel;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAA+B,IAgBzBA,QAAQ;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA,OAwBV,kBAAyB;MACrB,oBACI,6BAAC,qBAAY,oBACL,IAAAC,aAAI,EAAC,IAAI,CAACC,KAAK,EAAEF,QAAQ,CAACG,SAAS,CAAC,EACnC,IAAI,CAACD,KAAK,CAACE,mBAAmB,GAC7B;QAAEC,wBAAwB,EAAE,IAAI,CAACH,KAAK,CAACE;MAAoB,CAAC,GAC5D,CAAC,CAAC,EACH,IAAI,CAACF,KAAK,CAACI,eAAe,GACzB;QAAEC,yBAAyB,EAAE,IAAI,CAACL,KAAK,CAACI;MAAgB,CAAC,GACzD,CAAC,CAAC,EACH,IAAI,CAACJ,KAAK,CAACM,eAAe,GACzB;QAAEC,0BAA0B,EAAE,IAAI,CAACP,KAAK,CAACM;MAAgB,CAAC,GAC1D,CAAC,CAAC,GAEP,IAAI,CAACN,KAAK,CAACQ,QAAQ,CACT;IAEvB;EAAC;EAAA;AAAA,EAzCkBC,cAAK,CAACC,SAAS;AAAA,8BAAhCZ,QAAQ,kBACY;EAClBa,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE,KAAK;EACfC,UAAU,EAAE,OAAO;EACnBC,MAAM,EAAE;AACZ,CAAC;AAAA,8BANChB,QAAQ,eAQS,CACf,UAAU,EACV,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,OAAO,EACP,SAAS,EACT,gBAAgB,CACnB;AAAA,eAsBUA,QAAQ;AAAA"}

package/Carousel/Carouser.stories.js

@@ -1,29 +1,32 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import Carousel from "./Carousel";
-var story = storiesOf("Components/Carousel", module);
-story.addDecorator(withKnobs);
+"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 _Carousel = _interopRequireDefault(require("./Carousel"));
+var story = (0, _react2.storiesOf)("Components/Carousel", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage - single", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  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, {
     title: "Simple checkbox with a label and description"
-  }, /*#__PURE__*/React.createElement(Carousel, null, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/_react.default.createElement(_Carousel.default, null, /*#__PURE__*/_react.default.createElement("img", {
     src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1"
-  }), /*#__PURE__*/React.createElement("img", {
+  }), /*#__PURE__*/_react.default.createElement("img", {
     src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"
-  }), /*#__PURE__*/React.createElement("img", {
+  }), /*#__PURE__*/_react.default.createElement("img", {
     src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide3"
-  }), /*#__PURE__*/React.createElement("img", {
+  }), /*#__PURE__*/_react.default.createElement("img", {
     src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide4"
-  }), /*#__PURE__*/React.createElement("img", {
+  }), /*#__PURE__*/_react.default.createElement("img", {
     src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide5"
-  }), /*#__PURE__*/React.createElement("img", {
+  }), /*#__PURE__*/_react.default.createElement("img", {
     src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"
-  }))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Carousel>\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\" />\n                    </Carousel>\n                    ")));
+  }))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Carousel>\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\" />\n                    </Carousel>\n                    ")));
 }, {
   info: {
-    propTables: [Carousel]
+    propTables: [_Carousel.default]
   }
 });

package/Carousel/Carouser.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","Carousel"],"sources":["Carouser.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 } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport Carousel from \"./Carousel\";\n\nconst story = storiesOf(\"Components/Carousel\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage - single\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple checkbox with a label and description\"}>\n                        <Carousel>\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\" />\n                        </Carousel>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Carousel>\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\" />\n                    </Carousel>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Carousel] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,qBAAqB,EAAEC,MAAM,CAAC;AACtDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,gBAAgB,EAChB,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAA+C,gBACvE,6BAAC,iBAAQ,qBACL;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,CAC9D,CACO,eACtB,6BAAC,uBAAgB,wqBAWE,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,iBAAQ;EAAE;AAAE,CAAC,CACvC"}

package/Carousel/index.js

@@ -1 +1,13 @@
-export { default as Carousel } from "./Carousel";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel.default;
+  }
+});
+var _Carousel = _interopRequireDefault(require("./Carousel"));

package/Carousel/index.js.map

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

package/Checkbox/Checkbox.d.ts

@@ -1,12 +1,14 @@
-import * as React from "react";
+/// <reference types="web" />
+import React from "react";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+interface Props extends FormComponentProps {
     label?: React.ReactNode;
     disabled?: boolean;
-    onClick?: Function;
+    onClick?: (value: boolean) => void;
     indeterminate?: boolean;
     description?: string;
-};
+    "data-testid"?: string;
+}
 /**
  * Single Checkbox component can be used to store simple boolean values.
  *
@@ -14,11 +16,6 @@ declare type Props = FormComponentProps & {
  * In that case, each Checkbox component must receive value and onChange callback via props.
  */
 declare class Checkbox extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }

package/Checkbox/Checkbox.js

@@ -1,13 +1,19 @@
-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 { Checkbox as RmwcCheckbox } from "@rmwc/checkbox";
-import { FormElementMessage } from "../FormElementMessage";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 _checkbox = require("@rmwc/checkbox");
+var _FormElementMessage = require("../FormElementMessage");
 /**
  * Single Checkbox component can be used to store simple boolean values.
  *
@@ -15,62 +21,52 @@ import { FormElementMessage } from "../FormElementMessage";
  * In that case, each Checkbox component must receive value and onChange callback via props.
  */
 var Checkbox = /*#__PURE__*/function (_React$Component) {
-  _inherits(Checkbox, _React$Component);
-
-  var _super = _createSuper(Checkbox);
-
+  (0, _inherits2.default)(Checkbox, _React$Component);
+  var _super = (0, _createSuper2.default)(Checkbox);
   function Checkbox() {
     var _this;
-
-    _classCallCheck(this, Checkbox);
-
+    (0, _classCallCheck2.default)(this, Checkbox);
     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), "onChange", function (e) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
       _this.props.onChange && _this.props.onChange(e.target.checked);
     });
-
     return _this;
   }
-
-  _createClass(Checkbox, [{
+  (0, _createClass2.default)(Checkbox, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          value = _this$props.value,
-          label = _this$props.label,
-          disabled = _this$props.disabled,
-          indeterminate = _this$props.indeterminate,
-          description = _this$props.description,
-          validation = _this$props.validation,
-          _onClick = _this$props.onClick;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcCheckbox, {
+        value = _this$props.value,
+        label = _this$props.label,
+        disabled = _this$props.disabled,
+        indeterminate = _this$props.indeterminate,
+        description = _this$props.description,
+        validation = _this$props.validation,
+        _onClick = _this$props.onClick;
+      var _ref = validation || {},
+        validationIsValid = _ref.isValid,
+        validationMessage = _ref.message;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
         indeterminate: indeterminate,
         disabled: disabled,
         checked: Boolean(value),
         onChange: this.onChange,
         onClick: function onClick() {
           return typeof _onClick === "function" && _onClick(Boolean(value));
-        } // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
+        }
+        // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
         ,
-        label: label
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        label: label,
+        "data-testid": this.props["data-testid"]
+      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
     }
   }]);
-
   return Checkbox;
-}(React.Component);
-
-_defineProperty(Checkbox, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
-export default Checkbox;
+}(_react.default.Component);
+var _default = Checkbox;
+exports.default = _default;

package/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Checkbox","e","props","onChange","target","checked","value","label","disabled","indeterminate","description","validation","onClick","validationIsValid","isValid","validationMessage","message","Boolean","React","Component"],"sources":["Checkbox.tsx"],"sourcesContent":["import React from \"react\";\nimport { Checkbox as RmwcCheckbox } from \"@rmwc/checkbox\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\n\ninterface Props extends FormComponentProps {\n    // Component label.\n    label?: React.ReactNode;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // onClick callback.\n    onClick?: (value: boolean) => void;\n\n    // Use when checkbox is not checked nor unchecked.\n    indeterminate?: boolean;\n\n    // Description beneath the checkbox.\n    description?: string;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\n/**\n * Single Checkbox component can be used to store simple boolean values.\n *\n * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.\n * In that case, each Checkbox component must receive value and onChange callback via props.\n */\nclass Checkbox extends React.Component<Props> {\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, label, disabled, indeterminate, description, validation, onClick } =\n            this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcCheckbox\n                    indeterminate={indeterminate}\n                    disabled={disabled}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                    onClick={() => typeof onClick === \"function\" && onClick(Boolean(value))}\n                    // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.\n                    label={label}\n                    data-testid={this.props[\"data-testid\"]}\n                />\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AAuBA;AACA;AACA;AACA;AACA;AACA;AALA,IAMMA,QAAQ;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uFACC,UAACC,CAAyC,EAAK;MACtD,MAAKC,KAAK,CAACC,QAAQ,IAAI,MAAKD,KAAK,CAACC,QAAQ,CAAEF,CAAC,CAACG,MAAM,CAASC,OAAO,CAAC;IACzE,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MACrB,kBACI,IAAI,CAACH,KAAK;QADNI,KAAK,eAALA,KAAK;QAAEC,KAAK,eAALA,KAAK;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,aAAa,eAAbA,aAAa;QAAEC,WAAW,eAAXA,WAAW;QAAEC,UAAU,eAAVA,UAAU;QAAEC,QAAO,eAAPA,OAAO;MAG/E,WAAmED,UAAU,IAAI,CAAC,CAAC;QAAlEE,iBAAiB,QAA1BC,OAAO;QAA8BC,iBAAiB,QAA1BC,OAAO;MAE3C,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,kBAAY;QACT,aAAa,EAAEP,aAAc;QAC7B,QAAQ,EAAED,QAAS;QACnB,OAAO,EAAES,OAAO,CAACX,KAAK,CAAE;QACxB,QAAQ,EAAE,IAAI,CAACH,QAAS;QACxB,OAAO,EAAE;UAAA,OAAM,OAAOS,QAAO,KAAK,UAAU,IAAIA,QAAO,CAACK,OAAO,CAACX,KAAK,CAAC,CAAC;QAAA;QACvE;QAAA;QACA,KAAK,EAAEC,KAAM;QACb,eAAa,IAAI,CAACL,KAAK,CAAC,aAAa;MAAE,EACzC,EACDW,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;QAAC,KAAK;MAAA,GAAEE,iBAAiB,CAC/C,EAEAF,iBAAiB,KAAK,KAAK,IAAIH,WAAW,iBACvC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACY;IAEzB;EAAC;EAAA;AAAA,EAhCkBQ,cAAK,CAACC,SAAS;AAAA,eAmCvBnB,QAAQ;AAAA"}