@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/Button/CopyButton/README.md

@@ -0,0 +1,11 @@
+# Copy Button
+
+### Description
+
+Provides a button that allows you to copy its passed `value` to the clipboard.
+
+### Import
+
+```js
+import { CopyButton } from "@webiny/ui/Button";
+```

package/Button/IconButton/IconButton.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { IconButtonProps as RmwcIconButtonProps } from "@rmwc/icon-button";
+import { FormComponentProps } from "../../types";
+export interface IconButtonProps extends Omit<FormComponentProps, "onChange">, RmwcIconButtonProps {
+    id?: string;
+    /**
+     * Icon should be provided as an SvgComponent.
+     */
+    icon: React.ReactNode;
+    /**
+     * Button label
+     */
+    label?: string;
+    /**
+     * onClick handler
+     * @param event
+     */
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * Custom CSS class
+     */
+    className?: string;
+    /**
+     * For testing purposes.
+     */
+    "data-testid"?: string;
+    /**
+     * Should icon be disabled?
+     */
+    disabled?: boolean;
+}
+/**
+ * Shows the icon button.
+ */
+declare const IconButton: React.FC<IconButtonProps>;
+export { IconButton };

package/Button/IconButton/IconButton.js

@@ -0,0 +1,37 @@
+"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.
+ */
+var IconButton = function IconButton(props) {
+  var id = props.id,
+      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,
+    disabled: disabled,
+    className: className,
+    label: label,
+    icon: icon,
+    ripple: ripple
+  });
+};
+
+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,UAAwC,CAAAC,KAAK,EAAI;EACnD,IAAQC,EAAR,GAAkED,KAAlE,CAAQC,EAAR;EAAA,IAAYC,IAAZ,GAAkEF,KAAlE,CAAYE,IAAZ;EAAA,IAAkBC,KAAlB,GAAkEH,KAAlE,CAAkBG,KAAlB;EAAA,IAAyBC,OAAzB,GAAkEJ,KAAlE,CAAyBI,OAAzB;EAAA,IAAkCC,SAAlC,GAAkEL,KAAlE,CAAkCK,SAAlC;EAAA,IAA6CC,QAA7C,GAAkEN,KAAlE,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAkEP,KAAlE,CAAuDO,MAAvD;EAEA,oBACI,6BAAC,sBAAD;IACI,EAAE,EAAEN,EADR;IAEI,eAAaD,KAAK,CAAC,aAAD,CAFtB;IAGI,OAAO,EAAEI,OAHb;IAII,QAAQ,EAAEE,QAJd;IAKI,SAAS,EAAED,SALf;IAMI,KAAK,EAAEF,KANX;IAOI,IAAI,EAAED,IAPV;IAQI,MAAM,EAAEK;EARZ,EADJ;AAYH,CAfD"}

package/Button/IconButton/IconButton.stories.d.ts

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

package/Button/IconButton/IconButton.stories.js

@@ -0,0 +1,50 @@
+"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.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.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.default.createElement(_Story.StorySandbox, {
+    title: "Menu example"
+  }, /*#__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.default.createElement(_index.MenuItem, {
+    onClick: function onClick() {
+      console.log("Apple selected!");
+    }
+  }, "Apple"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Banana"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Watermelon"))));
+}, {
+  info: {
+    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,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,aADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,sBAAD;IACI,IAAI,eAAE,6BAAC,sCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,OAAO,EAAE;MAAA,OAAMC,OAAO,CAACC,GAAR,CAAY,gBAAZ,CAAN;IAAA;EAHb,EADJ,CAFJ,eASI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,WAAD;IACI,MAAM,eACF,6BAAC,sBAAD;MACI,IAAI,eAAE,6BAAC,kCAAD,OADV;MAEI,KAAK,EAAC,aAFV;MAGI,OAAO,EAAE;QAAA,OAAMD,OAAO,CAACC,GAAR,CAAY,gBAAZ,CAAN;MAAA;IAHb;EAFR,gBASI,6BAAC,eAAD;IACI,OAAO,EAAE,mBAAM;MACXD,OAAO,CAACC,GAAR,CAAY,iBAAZ;IACH;EAHL,WATJ,eAgBI,6BAAC,eAAD,iBAhBJ,eAiBI,6BAAC,eAAD,qBAjBJ,CADJ,CATJ,CADJ;AAiCH,CApCL,EAqCI;EACIC,IAAI,EAAE;IACFC,iBAAiB,EAAE,CAACC,WAAD,EAAOC,eAAP,EAAiBC,YAAjB,EAAwBC,kBAAxB,EAAqCC,mBAArC;EADjB;AADV,CArCJ"}

package/Button/IconButton/README.md

@@ -0,0 +1,15 @@
+# Icon Button
+
+### Design
+
+<a href="https://material.io/design/components/buttons.html" target="_blank">https://material.io/design/components/buttons.html</a>
+
+### Description
+
+`IconButton` component provides a simple icon button component with ripple effect.
+
+### Import
+
+```js
+import { IconButton } from "@webiny/ui/Button";
+```

package/Button/README.md

@@ -0,0 +1,28 @@
+# Button
+
+### Design
+
+<a href="https://material.io/design/components/buttons.html" target="_blank">https://material.io/design/components/buttons.html</a>
+
+### Description
+
+`Button` component provides 4 commonly used button types:
+
+- `Default`
+- `Primary`
+- `Secondary`
+- `Floating`
+
+To create buttons with icon, use a `<Button.Icon/>` component.
+
+### Import
+
+```js
+import {
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonDefault,
+  ButtonFloating,
+  ButtonIcon
+} from "@webiny/ui/Button";
+```

package/Button/assets/baseline-cloud_done-24px.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="currentColor" 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/Button/assets/file_copy-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>

package/Button/assets/round-more_vert-24px.svg

@@ -0,0 +1,12 @@
+<?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" width="24px"
+	 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 d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z
+		 M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,16,12,16z"/>
+</g>
+</svg>

package/Button/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Button";
+export * from "./IconButton/IconButton";
+export * from "./CopyButton/CopyButton";

package/Button/index.js

@@ -0,0 +1,44 @@
+"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

@@ -0,0 +1,19 @@
+import React from "react";
+import { CarouselProps, CarouselRenderControl } from "nuka-carousel";
+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;
+        dragging: boolean;
+        heightMode: string;
+        easing: string;
+    };
+    static nukaProps: string[];
+    render(): JSX.Element;
+}
+export default Carousel;

package/Carousel/Carousel.js

@@ -0,0 +1,59 @@
+"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) {
+  (0, _inherits2.default)(Carousel, _React$Component);
+
+  var _super = (0, _createSuper2.default)(Carousel);
+
+  function Carousel() {
+    (0, _classCallCheck2.default)(this, Carousel);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(Carousel, [{
+    key: "render",
+    value: function render() {
+      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
+      } : {}, this.props.renderBottomNav ? {
+        renderBottomCenterControls: this.props.renderBottomNav
+      } : {}), this.props.children);
+    }
+  }]);
+  return Carousel;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(Carousel, "defaultProps", {
+  swiping: true,
+  dragging: false,
+  heightMode: "first",
+  easing: "easeExpInOut"
+});
+(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;;IAgBMA,Q;;;;;;;;;;;;WAwBF,kBAAyB;MACrB,oBACI,6BAAC,qBAAD,oBACQ,IAAAC,aAAA,EAAK,KAAKC,KAAV,EAAiBF,QAAQ,CAACG,SAA1B,CADR,EAES,KAAKD,KAAL,CAAWE,mBAAX,GACC;QAAEC,wBAAwB,EAAE,KAAKH,KAAL,CAAWE;MAAvC,CADD,GAEC,EAJV,EAKS,KAAKF,KAAL,CAAWI,eAAX,GACC;QAAEC,yBAAyB,EAAE,KAAKL,KAAL,CAAWI;MAAxC,CADD,GAEC,EAPV,EAQS,KAAKJ,KAAL,CAAWM,eAAX,GACC;QAAEC,0BAA0B,EAAE,KAAKP,KAAL,CAAWM;MAAzC,CADD,GAEC,EAVV,GAYK,KAAKN,KAAL,CAAWQ,QAZhB,CADJ;IAgBH;;;EAzCkBC,cAAA,CAAMC,S;;8BAAvBZ,Q,kBACoB;EAClBa,OAAO,EAAE,IADS;EAElBC,QAAQ,EAAE,KAFQ;EAGlBC,UAAU,EAAE,OAHM;EAIlBC,MAAM,EAAE;AAJU,C;8BADpBhB,Q,eAQiB,CACf,UADe,EAEf,YAFe,EAGf,UAHe,EAIf,kBAJe,EAKf,aALe,EAMf,UANe,EAOf,QAPe,EAQf,YARe,EASf,cATe,EAUf,YAVe,EAWf,OAXe,EAYf,SAZe,EAaf,gBAbe,C;eAoCRA,Q"}

package/Carousel/Carouser.stories.d.ts

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

package/Carousel/Carouser.stories.js

@@ -0,0 +1,39 @@
+"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.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.default.createElement(_Carousel.default, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide1"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide3"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide4"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide5"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    src: "http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"
+  }))), /*#__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.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,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,gBADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,iBAAD,qBACI;IAAK,GAAG,EAAC;EAAT,EADJ,eAEI;IAAK,GAAG,EAAC;EAAT,EAFJ,eAGI;IAAK,GAAG,EAAC;EAAT,EAHJ,eAII;IAAK,GAAG,EAAC;EAAT,EAJJ,eAKI;IAAK,GAAG,EAAC;EAAT,EALJ,eAMI;IAAK,GAAG,EAAC;EAAT,EANJ,CADJ,CADJ,eAWI,6BAAC,uBAAD,wqBAXJ,CAFJ,CADJ;AA6BH,CAhCL,EAiCI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,iBAAD;EAAd;AAAR,CAjCJ"}

package/Carousel/README.md

@@ -0,0 +1,15 @@
+# Carousel
+
+### Additional information
+
+<a href="https://www.npmjs.com/package/nuka-carousel" target="_blank">https://www.npmjs.com/package/nuka-carousel</a>
+
+### Description
+
+Use `Carousel` component to display two or more items, in a carousel.
+
+### Import
+
+```js
+import { Carousel } from "@webiny/ui/Carousel";
+```

package/Carousel/index.d.ts

@@ -0,0 +1 @@
+export { default as Carousel } from "./Carousel";

package/Carousel/index.js

@@ -0,0 +1,15 @@
+"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

@@ -0,0 +1,21 @@
+/// <reference types="web" />
+import React from "react";
+import { FormComponentProps } from "../types";
+interface Props extends FormComponentProps {
+    label?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: (value: boolean) => void;
+    indeterminate?: boolean;
+    description?: string;
+}
+/**
+ * Single Checkbox component can be used to store simple boolean values.
+ *
+ * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.
+ * In that case, each Checkbox component must receive value and onChange callback via props.
+ */
+declare class Checkbox extends React.Component<Props> {
+    onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    render(): JSX.Element;
+}
+export default Checkbox;

package/Checkbox/Checkbox.js

@@ -0,0 +1,90 @@
+"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.
+ *
+ * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.
+ * In that case, each Checkbox component must receive value and onChange callback via props.
+ */
+var Checkbox = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Checkbox, _React$Component);
+
+  var _super = (0, _createSuper2.default)(Checkbox);
+
+  function Checkbox() {
+    var _this;
+
+    (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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
+      _this.props.onChange && _this.props.onChange(e.target.checked);
+    });
+    return _this;
+  }
+
+  (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;
+
+      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.
+        ,
+        label: label
+      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+        error: true
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+    }
+  }]);
+  return 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\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                />\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;;AAoBA;AACA;AACA;AACA;AACA;AACA;IACMA,Q;;;;;;;;;;;;;;;2FACS,UAACC,CAAD,EAA+C;MACtD,MAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAqBF,CAAC,CAACG,MAAH,CAAkBC,OAAtC,CAAvB;IACH,C;;;;;;WAED,kBAAyB;MACrB,kBACI,KAAKH,KADT;MAAA,IAAQI,KAAR,eAAQA,KAAR;MAAA,IAAeC,KAAf,eAAeA,KAAf;MAAA,IAAsBC,QAAtB,eAAsBA,QAAtB;MAAA,IAAgCC,aAAhC,eAAgCA,aAAhC;MAAA,IAA+CC,WAA/C,eAA+CA,WAA/C;MAAA,IAA4DC,UAA5D,eAA4DA,UAA5D;MAAA,IAAwEC,QAAxE,eAAwEA,OAAxE;;MAGA,WAAmED,UAAU,IAAI,EAAjF;MAAA,IAAiBE,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,kBAAD;QACI,aAAa,EAAEP,aADnB;QAEI,QAAQ,EAAED,QAFd;QAGI,OAAO,EAAES,OAAO,CAACX,KAAD,CAHpB;QAII,QAAQ,EAAE,KAAKH,QAJnB;QAKI,OAAO,EAAE;UAAA,OAAM,OAAOS,QAAP,KAAmB,UAAnB,IAAiCA,QAAO,CAACK,OAAO,CAACX,KAAD,CAAR,CAA9C;QAAA,CALb,CAMI;QANJ;QAOI,KAAK,EAAEC;MAPX,EADJ,EAUKM,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CAXR,EAcKF,iBAAiB,KAAK,KAAtB,IAA+BH,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAfR,CADJ;IAoBH;;;EA/BkBQ,cAAA,CAAMC,S;;eAkCdnB,Q"}

package/Checkbox/Checkbox.stories.d.ts

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

package/Checkbox/Checkbox.stories.js

@@ -0,0 +1,39 @@
+"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_Checkbox = _interopRequireDefault(require("./README_Checkbox.md"));
+
+var _form = require("@webiny/form");
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var story = (0, _react2.storiesOf)("Components/Checkbox", module);
+story.addDecorator(_addonKnobs.withKnobs);
+story.add("usage - single", function () {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README_Checkbox.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
+    title: "Simple checkbox with a label and description"
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, null, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "rememberMe"
+    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+      label: "Remember me",
+      disabled: disabled,
+      description: "You won't be logged out after you leave the app."
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"rememberMe\">\n                                  <Checkbox\n                                    label={\"Remember me\"}\n                                    disabled={disabled}\n                                    description={\"You won't be logged out after you leave the app.\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+}, {
+  info: {
+    propTables: [_Checkbox.default]
+  }
+});

package/Checkbox/Checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","Bind","info","propTables","Checkbox"],"sources":["Checkbox.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_Checkbox.md\";\n\nimport { Form } from \"@webiny/form\";\nimport Checkbox from \"./Checkbox\";\n\nconst story = storiesOf(\"Components/Checkbox\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage - single\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple checkbox with a label and description\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind name=\"rememberMe\">\n                                    <Checkbox\n                                        label={\"Remember me\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"You won't be logged out after you leave the app.\"\n                                        }\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"rememberMe\">\n                                  <Checkbox\n                                    label={\"Remember me\"}\n                                    disabled={disabled}\n                                    description={\"You won't be logged out after you leave the app.\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Checkbox] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,gBADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,wBAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD,QACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,iBAAD;MACI,KAAK,EAAE,aADX;MAEI,QAAQ,EAAEH,QAFd;MAGI,WAAW,EACP;IAJR,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAgBI,6BAAC,uBAAD,4iBAhBJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;EAAEI,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,iBAAD;EAAd;AAAR,CA3CJ"}