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

package/Menu/Menu.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItem = exports.MenuDivider = exports.Menu = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+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 _menu = require("@rmwc/menu");
+
+var _emotion = require("emotion");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["disabled", "className"];
+var style = {
+  disabledMenuItem: /*#__PURE__*/(0, _emotion.css)({
+    opacity: 0.5,
+    pointerEvents: "none"
+  }, "label:disabledMenuItem;")
+};
+
+/**
+ * Use Menu component to display a list of choices, once the handler is triggered.
+ */
+var Menu = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Menu, _React$Component);
+
+  var _super = (0, _createSuper2.default)(Menu);
+
+  function Menu() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Menu);
+
+    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", {
+      menuIsOpen: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openMenu", function () {
+      _this.setState({
+        menuIsOpen: true
+      }, function () {
+        return _this.props.onOpen && _this.props.onOpen();
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeMenu", function () {
+      _this.setState({
+        menuIsOpen: false
+      }, function () {
+        return _this.props.onClose && _this.props.onClose();
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMenuWithPortal", function () {
+      return /*#__PURE__*/_react.default.createElement(_menu.Menu, {
+        anchorCorner: _this.props.anchor,
+        open: _this.state.menuIsOpen,
+        className: _this.props.className,
+        onClose: _this.closeMenu,
+        onSelect: _this.props.onSelect,
+        renderToPortal: true,
+        style: {
+          zIndex: 99
+        } // Fixes Menu in Drawers
+
+      }, _this.props.children);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCustomContent", function () {
+      var children = _this.props.children;
+      return /*#__PURE__*/_react.default.createElement(_menu.MenuSurface, {
+        open: _this.state.menuIsOpen,
+        onClose: _this.closeMenu
+      }, typeof children === "function" ? children({
+        closeMenu: _this.closeMenu
+      }) : children);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMenuContent", function () {
+      return Array.isArray(_this.props.children) ? _this.renderMenuWithPortal() : _this.renderCustomContent();
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(Menu, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_menu.MenuSurfaceAnchor, {
+        "data-testid": this.props["data-testid"]
+      }, this.renderMenuContent(), this.props.handle && /*#__PURE__*/_react.default.cloneElement(this.props.handle, {
+        onClick: this.openMenu
+      }));
+    }
+  }]);
+  return Menu;
+}(_react.default.Component);
+
+exports.Menu = Menu;
+(0, _defineProperty2.default)(Menu, "defaultProps", {
+  anchor: "topStart"
+});
+
+var MenuDivider = function MenuDivider() {
+  return /*#__PURE__*/_react.default.createElement("li", {
+    className: "mdc-list-divider",
+    role: "separator"
+  });
+};
+
+exports.MenuDivider = MenuDivider;
+
+var MenuItem = function MenuItem(_ref) {
+  var disabled = _ref.disabled,
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuItem, Object.assign({}, rest, {
+    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, style.disabledMenuItem, disabled))
+  }));
+};
+
+exports.MenuItem = MenuItem;

package/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Menu as BaseMenu,\n    MenuProps as RmwcMenuProps,\n    MenuItem as BaseMenuItem,\n    MenuItemProps as BaseMenuItemProps,\n    MenuSurface,\n    MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n    disabledMenuItem: css({\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    })\n};\n\ntype MenuProps = RmwcMenuProps & {\n    // One or more MenuItem components.\n    children: React.ReactNode;\n\n    // A handler which triggers the menu, eg. button or link.\n    handle?: React.ReactElement;\n\n    // Position the menu to one of anchor corners.\n    // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n    anchor?:\n        | \"bottomEnd\"\n        | \"bottomLeft\"\n        | \"bottomRight\"\n        | \"bottomStart\"\n        | \"topEnd\"\n        | \"topLeft\"\n        | \"topRight\"\n        | \"topStart\";\n\n    // Class that will be added to the Menu element.\n    className?: string;\n\n    onOpen?: () => void;\n    onClose?: () => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\ninterface MenuState {\n    menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n    static defaultProps: Partial<MenuProps> = {\n        anchor: \"topStart\"\n    };\n\n    public override state: MenuState = {\n        menuIsOpen: false\n    };\n\n    private readonly openMenu = () => {\n        this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n    };\n\n    private readonly closeMenu = () => {\n        this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n    };\n\n    private readonly renderMenuWithPortal = () => {\n        return (\n            <BaseMenu\n                anchorCorner={this.props.anchor}\n                open={this.state.menuIsOpen}\n                className={this.props.className}\n                onClose={this.closeMenu}\n                onSelect={this.props.onSelect}\n                renderToPortal={true}\n                style={{ zIndex: 99 }} // Fixes Menu in Drawers\n            >\n                {this.props.children}\n            </BaseMenu>\n        );\n    };\n\n    private readonly renderCustomContent = () => {\n        const { children } = this.props;\n        return (\n            <MenuSurface open={this.state.menuIsOpen} onClose={this.closeMenu}>\n                {typeof children === \"function\"\n                    ? children({ closeMenu: this.closeMenu })\n                    : children}\n            </MenuSurface>\n        );\n    };\n\n    private readonly renderMenuContent = () => {\n        return Array.isArray(this.props.children)\n            ? this.renderMenuWithPortal()\n            : this.renderCustomContent();\n    };\n\n    public override render(): React.ReactNode {\n        return (\n            <MenuSurfaceAnchor data-testid={this.props[\"data-testid\"]}>\n                {this.renderMenuContent()}\n                {this.props.handle &&\n                    React.cloneElement(this.props.handle, { onClick: this.openMenu })}\n            </MenuSurfaceAnchor>\n        );\n    }\n}\n\nconst MenuDivider: React.FC = () => {\n    return <li className=\"mdc-list-divider\" role=\"separator\" />;\n};\n\ninterface MenuItemProps extends BaseMenuItemProps {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    \"data-testid\"?: string;\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({ disabled, className, ...rest }) => {\n    return (\n        <BaseMenuItem\n            {...rest}\n            className={classNames(className, { [style.disabledMenuItem]: disabled })}\n        />\n    );\n};\n\nexport { Menu, MenuItem, MenuDivider };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAQA;;AACA;;;AAEA,IAAMA,KAAK,GAAG;EACVC,gBAAgB,eAAE,IAAAC,YAAA,EAAI;IAClBC,OAAO,EAAE,GADS;IAElBC,aAAa,EAAE;EAFG,CAAJ;AADR,CAAd;;AAwCA;AACA;AACA;IACMC,I;;;;;;;;;;;;;;;wFAKiC;MAC/BC,UAAU,EAAE;IADmB,C;2FAIP,YAAM;MAC9B,MAAKC,QAAL,CAAc;QAAED,UAAU,EAAE;MAAd,CAAd,EAAoC;QAAA,OAAM,MAAKE,KAAL,CAAWC,MAAX,IAAqB,MAAKD,KAAL,CAAWC,MAAX,EAA3B;MAAA,CAApC;IACH,C;4FAE4B,YAAM;MAC/B,MAAKF,QAAL,CAAc;QAAED,UAAU,EAAE;MAAd,CAAd,EAAqC;QAAA,OAAM,MAAKE,KAAL,CAAWE,OAAX,IAAsB,MAAKF,KAAL,CAAWE,OAAX,EAA5B;MAAA,CAArC;IACH,C;uGAEuC,YAAM;MAC1C,oBACI,6BAAC,UAAD;QACI,YAAY,EAAE,MAAKF,KAAL,CAAWG,MAD7B;QAEI,IAAI,EAAE,MAAKC,KAAL,CAAWN,UAFrB;QAGI,SAAS,EAAE,MAAKE,KAAL,CAAWK,SAH1B;QAII,OAAO,EAAE,MAAKC,SAJlB;QAKI,QAAQ,EAAE,MAAKN,KAAL,CAAWO,QALzB;QAMI,cAAc,EAAE,IANpB;QAOI,KAAK,EAAE;UAAEC,MAAM,EAAE;QAAV,CAPX,CAO2B;;MAP3B,GASK,MAAKR,KAAL,CAAWS,QAThB,CADJ;IAaH,C;sGAEsC,YAAM;MACzC,IAAQA,QAAR,GAAqB,MAAKT,KAA1B,CAAQS,QAAR;MACA,oBACI,6BAAC,iBAAD;QAAa,IAAI,EAAE,MAAKL,KAAL,CAAWN,UAA9B;QAA0C,OAAO,EAAE,MAAKQ;MAAxD,GACK,OAAOG,QAAP,KAAoB,UAApB,GACKA,QAAQ,CAAC;QAAEH,SAAS,EAAE,MAAKA;MAAlB,CAAD,CADb,GAEKG,QAHV,CADJ;IAOH,C;oGAEoC,YAAM;MACvC,OAAOC,KAAK,CAACC,OAAN,CAAc,MAAKX,KAAL,CAAWS,QAAzB,IACD,MAAKG,oBAAL,EADC,GAED,MAAKC,mBAAL,EAFN;IAGH,C;;;;;;WAED,kBAA0C;MACtC,oBACI,6BAAC,uBAAD;QAAmB,eAAa,KAAKb,KAAL,CAAW,aAAX;MAAhC,GACK,KAAKc,iBAAL,EADL,EAEK,KAAKd,KAAL,CAAWe,MAAX,iBACGC,cAAA,CAAMC,YAAN,CAAmB,KAAKjB,KAAL,CAAWe,MAA9B,EAAsC;QAAEG,OAAO,EAAE,KAAKC;MAAhB,CAAtC,CAHR,CADJ;IAOH;;;EA1DcH,cAAA,CAAMI,S;;;8BAAnBvB,I,kBACwC;EACtCM,MAAM,EAAE;AAD8B,C;;AA4D9C,IAAMkB,WAAqB,GAAG,SAAxBA,WAAwB,GAAM;EAChC,oBAAO;IAAI,SAAS,EAAC,kBAAd;IAAiC,IAAI,EAAC;EAAtC,EAAP;AACH,CAFD;;;;AAWA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAAsC;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC;EAAA,IAAzBlB,SAAyB,QAAzBA,SAAyB;EAAA,IAAXmB,IAAW;EAC5E,oBACI,6BAAC,cAAD,oBACQA,IADR;IAEI,SAAS,EAAE,IAAAC,mBAAA,EAAWpB,SAAX,oCAAyBb,KAAK,CAACC,gBAA/B,EAAkD8B,QAAlD;EAFf,GADJ;AAMH,CAPD"}

package/Menu/Menu.stories.d.ts

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

package/Menu/Menu.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 _Button = require("../Button");
+
+var _README = _interopRequireDefault(require("./../Menu/README.md"));
+
+var _Menu = require("./Menu");
+
+var story = (0, _react2.storiesOf)("Components/Menu", module);
+var style = {
+  position: "relative",
+  width: 200,
+  margin: "0 auto"
+};
+story.add("usage", 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: "A simple menu, triggered with a button"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, null, "Open menu")
+  }, /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+    onClick: function onClick() {
+      console.log("Apple selected!");
+    }
+  }, "Apple"), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, null, "Banana"), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, null, "Watermelon")))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                   <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\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                    ")));
+}, {
+  info: {
+    propTables: [_Menu.Menu, _Menu.MenuItem, _Menu.MenuDivider]
+  }
+});

package/Menu/Menu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","style","position","width","margin","add","readme","console","log","info","propTables","Menu","MenuItem","MenuDivider"],"sources":["Menu.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandbox,\n    StorySandboxExample,\n    StorySandboxCode\n} from \"@webiny/storybook-utils/Story\";\nimport { ButtonPrimary } from \"~/Button\";\nimport readme from \"./../Menu/README.md\";\nimport { Menu, MenuItem, MenuDivider } from \"./Menu\";\n\nconst story = storiesOf(\"Components/Menu\", module);\n\nconst style: React.CSSProperties = {\n    position: \"relative\",\n    width: 200,\n    margin: \"0 auto\"\n};\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"A simple menu, triggered with a button\"}>\n                        <div style={style}>\n                            <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\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                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                   <Menu handle={<ButtonPrimary>Open menu</ButtonPrimary>}>\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                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Menu, MenuItem, MenuDivider] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEA,IAAMC,KAA0B,GAAG;EAC/BC,QAAQ,EAAE,UADqB;EAE/BC,KAAK,EAAE,GAFwB;EAG/BC,MAAM,EAAE;AAHuB,CAAnC;AAMAN,KAAK,CAACO,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI;IAAK,KAAK,EAAEL;EAAZ,gBACI,6BAAC,UAAD;IAAM,MAAM,eAAE,6BAAC,qBAAD;EAAd,gBACI,6BAAC,cAAD;IACI,OAAO,EAAE,mBAAM;MACXM,OAAO,CAACC,GAAR,CAAY,iBAAZ;IACH;EAHL,WADJ,eAQI,6BAAC,cAAD,iBARJ,eASI,6BAAC,cAAD,qBATJ,CADJ,CADJ,CADJ,eAgBI,6BAAC,uBAAD,ghBAhBJ,CAFJ,CADJ;AAqCH,CAxCL,EAyCI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD,EAAOC,cAAP,EAAiBC,iBAAjB;EAAd;AAAR,CAzCJ"}

package/Menu/README.md

@@ -0,0 +1,15 @@
+# Menu
+
+### Design
+
+<a href="https://material.io/design/components/menus.html" target="_blank">https://material.io/design/components/menus.html</a>
+
+### Description
+
+Use `Menu` component to display a list of choices, once the handler is triggered.
+
+### Import
+
+```js
+import { Menu, MenuItem } from "@webiny/ui/Menu";
+```

package/Menu/index.d.ts

@@ -0,0 +1 @@
+export * from "./Menu";

package/Menu/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Menu = require("./Menu");
+
+Object.keys(_Menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Menu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Menu[key];
+    }
+  });
+});

package/Menu/index.js.map

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

package/Mosaic/Mosaic.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface MosaicProps {
+    columns?: {
+        [key: string]: number;
+    };
+    className?: string;
+}
+declare const Mosaic: React.FC<MosaicProps>;
+export { Mosaic };

package/Mosaic/Mosaic.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Mosaic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactColumned = _interopRequireDefault(require("react-columned"));
+
+/**
+ * Package react-columned does not have types.
+ */
+// @ts-ignore
+var Mosaic = function Mosaic(_ref) {
+  var children = _ref.children,
+      columns = _ref.columns,
+      className = _ref.className;
+  return /*#__PURE__*/_react.default.createElement(_reactColumned.default, {
+    columns: columns,
+    className: className
+  }, children);
+};
+
+exports.Mosaic = Mosaic;
+Mosaic.defaultProps = {
+  columns: {
+    320: 1,
+    480: 2,
+    800: 3,
+    1366: 4
+  }
+};

package/Mosaic/Mosaic.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Mosaic","children","columns","className","defaultProps"],"sources":["Mosaic.tsx"],"sourcesContent":["import React from \"react\";\n/**\n * Package react-columned does not have types.\n */\n// @ts-ignore\nimport Columned from \"react-columned\";\n\nexport interface MosaicProps {\n    // Number of columns, per max screen size, eg. { \"320\": 1, \"480\": 2, \"800\": 3, \"1366\": 4 }.\n    columns?: {\n        [key: string]: number;\n    };\n\n    // Custom class for the mosaic container.\n    className?: string;\n}\n\nconst Mosaic: React.FC<MosaicProps> = ({ children, columns, className }) => {\n    return (\n        <Columned columns={columns} className={className}>\n            {children}\n        </Columned>\n    );\n};\n\nMosaic.defaultProps = {\n    columns: { 320: 1, 480: 2, 800: 3, 1366: 4 }\n};\n\nexport { Mosaic };\n"],"mappings":";;;;;;;;;AAAA;;AAKA;;AAJA;AACA;AACA;AACA;AAaA,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAAsC;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAhBC,SAAgB,QAAhBA,SAAgB;EACxE,oBACI,6BAAC,sBAAD;IAAU,OAAO,EAAED,OAAnB;IAA4B,SAAS,EAAEC;EAAvC,GACKF,QADL,CADJ;AAKH,CAND;;;AAQAD,MAAM,CAACI,YAAP,GAAsB;EAClBF,OAAO,EAAE;IAAE,KAAK,CAAP;IAAU,KAAK,CAAf;IAAkB,KAAK,CAAvB;IAA0B,MAAM;EAAhC;AADS,CAAtB"}

package/Mosaic/Mosaic.stories.d.ts

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

package/Mosaic/Mosaic.stories.js

@@ -0,0 +1,84 @@
+"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("./../Mosaic/README.md"));
+
+var _Mosaic = require("./Mosaic");
+
+var story = (0, _react2.storiesOf)("Components/Mosaic", module);
+story.add("usage", 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: "A simple responsive mosaic."
+  }, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_Mosaic.Mosaic, null, /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 1",
+    src: "https://via.placeholder.com/800x600/001F3F/FFFFFF.png?text=1"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 2",
+    src: "https://via.placeholder.com/400x300/0074D9/FFFFFF.png?text=2"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 3",
+    src: "https://via.placeholder.com/1024x768/7FDBFF/FFFFFF.png?text=3"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 4",
+    src: "https://via.placeholder.com/1280x1024/39CCCC/FFFFFF.png?text=4"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 5",
+    src: "https://via.placeholder.com/640x480/3D9970/FFFFFF.png?text=5"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 6",
+    src: "https://via.placeholder.com/1000x500/2ECC40/FFFFFF.png?text=6"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 7",
+    src: "https://via.placeholder.com/700x1000/01FF70/FFFFFF.png?text=7"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 8",
+    src: "https://via.placeholder.com/800x600/FFDC00/FFFFFF.png?text=8"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 9",
+    src: "https://via.placeholder.com/200x100/FF851B/FFFFFF.png?text=9"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 10",
+    src: "https://via.placeholder.com/200x100/FF4136/FFFFFF.png?text=10"
+  }))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, /*#__PURE__*/_react.default.createElement(_Mosaic.Mosaic, null, /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 1",
+    src: "https://..."
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 2",
+    src: "https://..."
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 3",
+    src: "https://..."
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 4",
+    src: "https://..."
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 5",
+    src: "https://..."
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 6",
+    src: "https://..."
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 7",
+    src: "https://..."
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 8",
+    src: "https://..."
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 9",
+    src: "https://..."
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Image 10",
+    src: "https://..."
+  })))));
+}, {
+  info: {
+    propTables: [_Mosaic.Mosaic]
+  }
+});

package/Mosaic/Mosaic.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Mosaic"],"sources":["Mosaic.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 readme from \"./../Mosaic/README.md\";\n\nimport { Mosaic } from \"./Mosaic\";\n\nconst story = storiesOf(\"Components/Mosaic\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple responsive mosaic.\"}>\n                    <StorySandboxExample>\n                        <Mosaic>\n                            <img\n                                alt=\"Image 1\"\n                                src={\"https://via.placeholder.com/800x600/001F3F/FFFFFF.png?text=1\"}\n                            />\n                            <img\n                                alt=\"Image 2\"\n                                src={\"https://via.placeholder.com/400x300/0074D9/FFFFFF.png?text=2\"}\n                            />\n                            <img\n                                alt=\"Image 3\"\n                                src={\n                                    \"https://via.placeholder.com/1024x768/7FDBFF/FFFFFF.png?text=3\"\n                                }\n                            />\n                            <img\n                                alt=\"Image 4\"\n                                src={\n                                    \"https://via.placeholder.com/1280x1024/39CCCC/FFFFFF.png?text=4\"\n                                }\n                            />\n                            <img\n                                alt=\"Image 5\"\n                                src={\"https://via.placeholder.com/640x480/3D9970/FFFFFF.png?text=5\"}\n                            />\n                            <img\n                                alt=\"Image 6\"\n                                src={\n                                    \"https://via.placeholder.com/1000x500/2ECC40/FFFFFF.png?text=6\"\n                                }\n                            />\n                            <img\n                                alt=\"Image 7\"\n                                src={\n                                    \"https://via.placeholder.com/700x1000/01FF70/FFFFFF.png?text=7\"\n                                }\n                            />\n                            <img\n                                alt=\"Image 8\"\n                                src={\"https://via.placeholder.com/800x600/FFDC00/FFFFFF.png?text=8\"}\n                            />\n                            <img\n                                alt=\"Image 9\"\n                                src={\"https://via.placeholder.com/200x100/FF851B/FFFFFF.png?text=9\"}\n                            />\n                            <img\n                                alt=\"Image 10\"\n                                src={\n                                    \"https://via.placeholder.com/200x100/FF4136/FFFFFF.png?text=10\"\n                                }\n                            />\n                        </Mosaic>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Mosaic>\n                            <img alt=\"Image 1\" src={\"https://...\"} />\n                            <img alt=\"Image 2\" src={\"https://...\"} />\n                            <img alt=\"Image 3\" src={\"https://...\"} />\n                            <img alt=\"Image 4\" src={\"https://...\"} />\n                            <img alt=\"Image 5\" src={\"https://...\"} />\n                            <img alt=\"Image 6\" src={\"https://...\"} />\n                            <img alt=\"Image 7\" src={\"https://...\"} />\n                            <img alt=\"Image 8\" src={\"https://...\"} />\n                            <img alt=\"Image 9\" src={\"https://...\"} />\n                            <img alt=\"Image 10\" src={\"https://...\"} />\n                        </Mosaic>\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Mosaic] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,cAAD,qBACI;IACI,GAAG,EAAC,SADR;IAEI,GAAG,EAAE;EAFT,EADJ,eAKI;IACI,GAAG,EAAC,SADR;IAEI,GAAG,EAAE;EAFT,EALJ,eASI;IACI,GAAG,EAAC,SADR;IAEI,GAAG,EACC;EAHR,EATJ,eAeI;IACI,GAAG,EAAC,SADR;IAEI,GAAG,EACC;EAHR,EAfJ,eAqBI;IACI,GAAG,EAAC,SADR;IAEI,GAAG,EAAE;EAFT,EArBJ,eAyBI;IACI,GAAG,EAAC,SADR;IAEI,GAAG,EACC;EAHR,EAzBJ,eA+BI;IACI,GAAG,EAAC,SADR;IAEI,GAAG,EACC;EAHR,EA/BJ,eAqCI;IACI,GAAG,EAAC,SADR;IAEI,GAAG,EAAE;EAFT,EArCJ,eAyCI;IACI,GAAG,EAAC,SADR;IAEI,GAAG,EAAE;EAFT,EAzCJ,eA6CI;IACI,GAAG,EAAC,UADR;IAEI,GAAG,EACC;EAHR,EA7CJ,CADJ,CADJ,eAuDI,6BAAC,uBAAD,qBACI,6BAAC,cAAD,qBACI;IAAK,GAAG,EAAC,SAAT;IAAmB,GAAG,EAAE;EAAxB,EADJ,eAEI;IAAK,GAAG,EAAC,SAAT;IAAmB,GAAG,EAAE;EAAxB,EAFJ,eAGI;IAAK,GAAG,EAAC,SAAT;IAAmB,GAAG,EAAE;EAAxB,EAHJ,eAII;IAAK,GAAG,EAAC,SAAT;IAAmB,GAAG,EAAE;EAAxB,EAJJ,eAKI;IAAK,GAAG,EAAC,SAAT;IAAmB,GAAG,EAAE;EAAxB,EALJ,eAMI;IAAK,GAAG,EAAC,SAAT;IAAmB,GAAG,EAAE;EAAxB,EANJ,eAOI;IAAK,GAAG,EAAC,SAAT;IAAmB,GAAG,EAAE;EAAxB,EAPJ,eAQI;IAAK,GAAG,EAAC,SAAT;IAAmB,GAAG,EAAE;EAAxB,EARJ,eASI;IAAK,GAAG,EAAC,SAAT;IAAmB,GAAG,EAAE;EAAxB,EATJ,eAUI;IAAK,GAAG,EAAC,UAAT;IAAoB,GAAG,EAAE;EAAzB,EAVJ,CADJ,CAvDJ,CAFJ,CADJ;AA2EH,CA9EL,EA+EI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD;EAAd;AAAR,CA/EJ"}

package/Mosaic/README.md

@@ -0,0 +1,15 @@
+# Mosaic
+
+### Additional information
+
+<a href="https://www.npmjs.com/package/react-columned" target="_blank">https://www.npmjs.com/package/react-columned</a>
+
+### Description
+
+`Mosaic` component is used to show images or any other component in columns.
+
+### Import
+
+```js
+import { Mosaic } from "@webiny/ui/Mosaic";
+```

package/Mosaic/index.d.ts

@@ -0,0 +1 @@
+export * from "./Mosaic";

package/Mosaic/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Mosaic = require("./Mosaic");
+
+Object.keys(_Mosaic).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Mosaic[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Mosaic[key];
+    }
+  });
+});

package/Mosaic/index.js.map

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

package/Progress/CircularProgress.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface CircularProgressProps {
+    label?: React.ReactNode;
+    size?: number;
+    spinnerColor?: string;
+    spinnerWidth?: number;
+    visible?: boolean;
+    style?: React.CSSProperties;
+}
+declare const CircularProgress: React.FC<CircularProgressProps>;
+export default CircularProgress;

package/Progress/CircularProgress.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _reactSpinnerMaterial = _interopRequireDefault(require("react-spinner-material"));
+
+var _Typography = require("../Typography");
+
+// This is just to center the spinner
+var SpinnerWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1s1fi5k0",
+  label: "SpinnerWrapper"
+})({
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  background: "var(--mdc-theme-surface)",
+  opacity: 0.92,
+  top: 0,
+  left: 0,
+  zIndex: 3,
+  "& .spinner__inner-wrapper": {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+var Label = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1s1fi5k1",
+  label: "Label"
+})({
+  marginTop: 15
+});
+
+var CircularProgress = function CircularProgress(props) {
+  var label = props.label,
+      size = props.size,
+      spinnerWidth = props.spinnerWidth,
+      spinnerColor = props.spinnerColor,
+      visible = props.visible,
+      style = props.style;
+  /**
+   * We can safely cast because we have default props
+   */
+
+  return /*#__PURE__*/_react.default.createElement(SpinnerWrapper, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spinner__inner-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_reactSpinnerMaterial.default, {
+    size: size,
+    spinnerColor: spinnerColor,
+    spinnerWidth: spinnerWidth,
+    visible: visible
+  }), label && /*#__PURE__*/_react.default.createElement(Label, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "overline"
+  }, label))));
+};
+
+CircularProgress.defaultProps = {
+  size: 45,
+  spinnerColor: "var(--mdc-theme-primary)",
+  spinnerWidth: 4,
+  visible: true
+};
+var _default = CircularProgress;
+exports.default = _default;

package/Progress/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SpinnerWrapper","styled","width","height","position","background","opacity","top","left","zIndex","transform","display","flexDirection","justifyContent","alignItems","Label","marginTop","CircularProgress","props","label","size","spinnerWidth","spinnerColor","visible","style","defaultProps"],"sources":["CircularProgress.tsx"],"sourcesContent":["// This is just to center the spinner\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Spinner from \"react-spinner-material\";\nimport { Typography } from \"../Typography\";\n\ninterface CircularProgressProps {\n    label?: React.ReactNode;\n    size?: number;\n    spinnerColor?: string;\n    spinnerWidth?: number;\n    visible?: boolean;\n    style?: React.CSSProperties;\n}\n\nconst SpinnerWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    background: \"var(--mdc-theme-surface)\",\n    opacity: 0.92,\n    top: 0,\n    left: 0,\n    zIndex: 3,\n    \"& .spinner__inner-wrapper\": {\n        position: \"absolute\",\n        top: \"50%\",\n        left: \"50%\",\n        transform: \"translate(-50%, -50%)\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\"\n    }\n});\n\nconst Label = styled(\"div\")({\n    marginTop: 15\n});\n\nconst CircularProgress: React.FC<CircularProgressProps> = props => {\n    const { label, size, spinnerWidth, spinnerColor, visible, style } = props;\n    /**\n     * We can safely cast because we have default props\n     */\n    return (\n        <SpinnerWrapper style={style}>\n            <div className={\"spinner__inner-wrapper\"}>\n                <Spinner\n                    size={size as number}\n                    spinnerColor={spinnerColor as string}\n                    spinnerWidth={spinnerWidth as number}\n                    visible={visible as boolean}\n                />\n                {label && (\n                    <Label>\n                        <Typography use={\"overline\"}>{label}</Typography>\n                    </Label>\n                )}\n            </div>\n        </SpinnerWrapper>\n    );\n};\n\nCircularProgress.defaultProps = {\n    size: 45,\n    spinnerColor: \"var(--mdc-theme-primary)\",\n    spinnerWidth: 4,\n    visible: true\n};\n\nexport default CircularProgress;\n"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AAJA;AAeA,IAAMA,cAAc,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACjCC,KAAK,EAAE,MAD0B;EAEjCC,MAAM,EAAE,MAFyB;EAGjCC,QAAQ,EAAE,UAHuB;EAIjCC,UAAU,EAAE,0BAJqB;EAKjCC,OAAO,EAAE,IALwB;EAMjCC,GAAG,EAAE,CAN4B;EAOjCC,IAAI,EAAE,CAP2B;EAQjCC,MAAM,EAAE,CARyB;EASjC,6BAA6B;IACzBL,QAAQ,EAAE,UADe;IAEzBG,GAAG,EAAE,KAFoB;IAGzBC,IAAI,EAAE,KAHmB;IAIzBE,SAAS,EAAE,uBAJc;IAKzBC,OAAO,EAAE,MALgB;IAMzBC,aAAa,EAAE,QANU;IAOzBC,cAAc,EAAE,QAPS;IAQzBC,UAAU,EAAE;EARa;AATI,CAAjB,CAApB;AAqBA,IAAMC,KAAK,oBAAGd,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACxBe,SAAS,EAAE;AADa,CAAjB,CAAX;;AAIA,IAAMC,gBAAiD,GAAG,SAApDA,gBAAoD,CAAAC,KAAK,EAAI;EAC/D,IAAQC,KAAR,GAAoED,KAApE,CAAQC,KAAR;EAAA,IAAeC,IAAf,GAAoEF,KAApE,CAAeE,IAAf;EAAA,IAAqBC,YAArB,GAAoEH,KAApE,CAAqBG,YAArB;EAAA,IAAmCC,YAAnC,GAAoEJ,KAApE,CAAmCI,YAAnC;EAAA,IAAiDC,OAAjD,GAAoEL,KAApE,CAAiDK,OAAjD;EAAA,IAA0DC,KAA1D,GAAoEN,KAApE,CAA0DM,KAA1D;EACA;AACJ;AACA;;EACI,oBACI,6BAAC,cAAD;IAAgB,KAAK,EAAEA;EAAvB,gBACI;IAAK,SAAS,EAAE;EAAhB,gBACI,6BAAC,6BAAD;IACI,IAAI,EAAEJ,IADV;IAEI,YAAY,EAAEE,YAFlB;IAGI,YAAY,EAAED,YAHlB;IAII,OAAO,EAAEE;EAJb,EADJ,EAOKJ,KAAK,iBACF,6BAAC,KAAD,qBACI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GAA8BA,KAA9B,CADJ,CARR,CADJ,CADJ;AAiBH,CAtBD;;AAwBAF,gBAAgB,CAACQ,YAAjB,GAAgC;EAC5BL,IAAI,EAAE,EADsB;EAE5BE,YAAY,EAAE,0BAFc;EAG5BD,YAAY,EAAE,CAHc;EAI5BE,OAAO,EAAE;AAJmB,CAAhC;eAOeN,gB"}

package/Progress/README.md

@@ -0,0 +1,19 @@
+# Progress
+
+### Design
+
+<a href="https://material.io/design/components/progress-indicators.html#circular-progress-indicators" target="_blank">
+    https://material.io/design/components/progress-indicators.html#circular-progress-indicators
+</a>
+
+### Description
+
+Progress components are used in cases where user has to wait for a background process to finish.
+
+Currently only the `CircularProgress` component is available, which is ideal for forms.
+
+### Import
+
+```js
+import { CircularProgress } from "@webiny/ui/Progress";
+```

package/Progress/index.d.ts

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

package/Progress/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, "CircularProgress", {
+  enumerable: true,
+  get: function get() {
+    return _CircularProgress.default;
+  }
+});
+
+var _CircularProgress = _interopRequireDefault(require("./CircularProgress"));

package/Progress/index.js.map

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

package/Progress/svg/circularProgress.svg

@@ -0,0 +1,3 @@
+<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+</svg>

package/README.md

@@ -0,0 +1,28 @@
+# @webiny/ui
+[![](https://img.shields.io/npm/dw/@webiny/ui.svg)](https://www.npmjs.com/package/@webiny/ui) 
+[![](https://img.shields.io/npm/v/@webiny/ui.svg)](https://www.npmjs.com/package/@webiny/ui)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+A collection of [material-design](https://material.io/) based 
+components, for all of your UI development needs. 
+
+A large amount of components are basically thin wrappers around the
+already well-known [RMWC](https://rmwc.io/) library. With that, 
+there are a few additional components that weren't included in it.
+
+Please visit the official [storybook](https://storybook.webiny.com/) page 
+for details and examples of each component.
+  
+## Install
+```
+npm install --save @webiny/ui
+```
+
+Or if you prefer yarn: 
+```
+yarn add @webiny/ui
+```
+
+### Note on @rmwc/textfield
+The package `@rmwc/textfield` is being pulled directly from our github due to its typings being broken on typescript versions that are greater than `3.7.4`.