@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.40876133bb

package/Select/Select.js

@@ -1,12 +1,31 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Select = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _select = require("@rmwc/select");
+
+var _FormElementMessage = require("../FormElementMessage");
+
+var _emotion = require("emotion");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _excluded = ["value", "description", "validation"];
-import * as React from "react";
-import { Select as RmwcSelect } from "@rmwc/select";
-import { FormElementMessage } from "../FormElementMessage";
-import { css } from "emotion";
-import classNames from "classnames";
-var noLabel = /*#__PURE__*/css({
+var webinySelect = /*#__PURE__*/(0, _emotion.css)("display:grid;background-color:transparent;border-color:transparent;color:var(--webiny-theme-color-primary);.rmwc-select__native-control{opacity:0;position:absolute;top:0;bottom:0;left:0;right:0;}label:webinySelect;");
+var noLabel = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-select": {
     height: 35,
     ".mdc-select__native-control": {
@@ -20,41 +39,100 @@ var noLabel = /*#__PURE__*/css({
     }
   }
 }, "label:noLabel;");
+/**
+ * TODO verify that this is correct method get all options.
+ */
+
+var getOptions = function getOptions(initialOptions) {
+  if (!initialOptions) {
+    return [];
+  } else if (Array.isArray(initialOptions)) {
+    var options = [];
+
+    var _iterator = (0, _createForOfIteratorHelper2.default)(initialOptions),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var option = _step.value;
+
+        if (typeof option === "string") {
+          options.push({
+            label: option,
+            value: option
+          });
+          continue;
+        }
+
+        options.push({
+          label: option.label,
+          value: option.value,
+          options: option.options
+        });
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return options;
+  }
+
+  return Object.keys(initialOptions).map(function (key) {
+    return {
+      label: initialOptions[key],
+      value: key
+    };
+  });
+};
 /**
  * Select component lets users choose a value from given set of options.
  */
 
-var skipProps = ["validate"];
+
+var skipProps = ["validate", "form"];
 
 var getRmwcProps = function getRmwcProps(props) {
   var newProps = {};
   Object.keys(props).filter(function (name) {
     return !skipProps.includes(name);
-  }).forEach(function (name) {
+  }) // @ts-ignore
+  .forEach(function (name) {
     return newProps[name] = props[name];
   });
   return newProps;
 };
+/**
+ * We check for null and undefined in the value because React is complaining about those values.
+ * Error says to use the empty string in null/undefined case.
+ */
+
 
-export var Select = function Select(props) {
-  var value = props.value,
+var Select = function Select(props) {
+  var initialValue = props.value,
       description = props.description,
       validation = props.validation,
-      other = _objectWithoutProperties(props, _excluded);
+      other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var value = initialValue === null || initialValue === undefined ? "" : initialValue;
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcSelect, Object.assign({}, getRmwcProps(other), {
+  var _ref = validation || {},
+      validationIsValid = _ref.isValid,
+      validationMessage = _ref.message;
+
+  var options = getOptions(other.options);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.Select, Object.assign({}, getRmwcProps(other), {
+    options: options,
     value: value,
-    className: classNames("webiny-ui-select", props.className, _defineProperty({}, noLabel, !props.label)),
+    className: (0, _classnames.default)("webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded", webinySelect, props.className, (0, _defineProperty2.default)({}, noLabel, !props.label)),
     onChange: function onChange(e) {
       props.onChange && props.onChange(e.target.value);
     }
-  })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+  })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
     error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
-};
-Select.defaultProps = {
-  validation: {
-    isValid: null
-  }
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
 };
-export default Select;
+
+exports.Select = Select;
+var _default = Select;
+exports.default = _default;

package/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["webinySelect","css","noLabel","height","paddingTop","getOptions","initialOptions","Array","isArray","options","option","push","label","value","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","Select","initialValue","description","validation","other","undefined","validationIsValid","isValid","validationMessage","message","classNames","className","e","onChange","target"],"sources":["Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    FormattedOption,\n    Select as RmwcSelect,\n    SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type SelectProps = FormComponentProps &\n    RmwcSelectProps & {\n        // Component label.\n        label?: string;\n\n        // Is checkbox disabled?\n        disabled?: boolean;\n\n        // Description beneath the select.\n        description?: string;\n\n        // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n        placeholder?: string;\n\n        // Makes the Select have a visual box.\n        box?: string;\n\n        // One or more <option> or <optgroup> elements.\n        children?: Array<React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">>;\n\n        // IconProps for the root element. By default, additional props spread to the native select element.\n        rootProps?: Object;\n\n        // A className for the root element.\n        className?: string;\n    };\n\nconst webinySelect = css`\n    display: grid;\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--webiny-theme-color-primary);\n\n    .rmwc-select__native-control {\n        opacity: 0;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n    }\n`;\n\nconst noLabel = css({\n    \"&.mdc-select\": {\n        height: 35,\n        \".mdc-select__native-control\": {\n            paddingTop: 0\n        },\n        \"&.mdc-select--box\": {\n            \".mdc-select__native-control\": {\n                height: 35,\n                paddingTop: 5\n            }\n        }\n    }\n});\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): FormattedOption[] => {\n    if (!initialOptions) {\n        return [];\n    } else if (Array.isArray(initialOptions)) {\n        const options: FormattedOption[] = [];\n        for (const option of initialOptions) {\n            if (typeof option === \"string\") {\n                options.push({\n                    label: option,\n                    value: option\n                });\n                continue;\n            }\n            options.push({\n                label: option.label,\n                value: option.value,\n                options: option.options\n            });\n        }\n        return options;\n    }\n    return Object.keys(initialOptions).map(key => {\n        return {\n            label: initialOptions[key],\n            value: key\n        };\n    });\n};\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n    const newProps: FormComponentProps & RmwcSelectProps = {};\n    Object.keys(props)\n        .filter(name => !skipProps.includes(name))\n        // @ts-ignore\n        .forEach((name: any) => (newProps[name] = props[name]));\n\n    return newProps;\n};\n/**\n * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select: React.FC<SelectProps> = props => {\n    const { value: initialValue, description, validation, ...other } = props;\n\n    const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const options = getOptions(other.options);\n\n    return (\n        <React.Fragment>\n            <RmwcSelect\n                {...getRmwcProps(other)}\n                options={options}\n                value={value}\n                className={classNames(\n                    \"webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded\",\n                    webinySelect,\n                    props.className,\n                    {\n                        [noLabel]: !props.label\n                    }\n                )}\n                onChange={e => {\n                    props.onChange && props.onChange((e.target as any).value);\n                }}\n            />\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\nexport default Select;\n"],"mappings":"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"}

package/Select/Select.stories.js

@@ -1,46 +1,57 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import { Select } from "./Select";
-var story = storiesOf("Components/Select", 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 _form = require("@webiny/form");
+
+var _Select = require("./Select");
+
+var story = (0, _react2.storiesOf)("Components/Select", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var disabled = boolean("Disabled", false);
-  var box = boolean("Box", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  var box = (0, _addonKnobs.boolean)("Box", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Simple select with a label and description"
-  }, /*#__PURE__*/React.createElement(Form, null, function (_ref) {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, null, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "pet"
-    }, /*#__PURE__*/React.createElement(Select, {
+    }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
       label: "Pets",
       disabled: disabled,
       box: box.toString(),
       description: "Choose a pet of your liking."
-    }, /*#__PURE__*/React.createElement("optgroup", {
+    }, /*#__PURE__*/_react.default.createElement("optgroup", {
       label: "Dogs"
-    }, /*#__PURE__*/React.createElement("option", {
+    }, /*#__PURE__*/_react.default.createElement("option", {
       value: "germanShepherd"
-    }, "German Shepherd"), /*#__PURE__*/React.createElement("option", {
+    }, "German Shepherd"), /*#__PURE__*/_react.default.createElement("option", {
       value: "bulldog"
-    }, "Bulldog"), /*#__PURE__*/React.createElement("option", {
+    }, "Bulldog"), /*#__PURE__*/_react.default.createElement("option", {
       value: "sharPei"
-    }, "Shar-Pei")), /*#__PURE__*/React.createElement("optgroup", {
+    }, "Shar-Pei")), /*#__PURE__*/_react.default.createElement("optgroup", {
       label: "Other"
-    }, /*#__PURE__*/React.createElement("option", {
+    }, /*#__PURE__*/_react.default.createElement("option", {
       value: "parrot"
-    }, "Parrot"), /*#__PURE__*/React.createElement("option", {
+    }, "Parrot"), /*#__PURE__*/_react.default.createElement("option", {
       value: "cat"
-    }, "Cat"), /*#__PURE__*/React.createElement("option", {
+    }, "Cat"), /*#__PURE__*/_react.default.createElement("option", {
       value: "guinea "
     }, "Guinea Pig"))));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"pet\">\n                               <Select\n                                    label=\"Pets\"\n                                    disabled={disabled}\n                                    box={box.toString()}\n                                    description=\"Choose a pet of your liking.\"\n                                >\n                                   <optgroup label=\"Dogs\">\n                                        <option value=\"germanShepherd\">\n                                            German Shepherd\n                                        </option>\n                                        <option value=\"bulldog\">Bulldog</option>\n                                        <option value=\"sharPei\">Shar-Pei</option>\n                                    </optgroup>\n                                    <optgroup label=\"Other\">\n                                        <option value=\"parrot\">Parrot</option>\n                                        <option value=\"cat\">Cat</option>\n                                        <option value=\"guinea \">Guinea Pig</option>\n                                    </optgroup>\n                                </Select>\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"pet\">\n                               <Select\n                                    label=\"Pets\"\n                                    disabled={disabled}\n                                    box={box.toString()}\n                                    description=\"Choose a pet of your liking.\"\n                                >\n                                   <optgroup label=\"Dogs\">\n                                        <option value=\"germanShepherd\">\n                                            German Shepherd\n                                        </option>\n                                        <option value=\"bulldog\">Bulldog</option>\n                                        <option value=\"sharPei\">Shar-Pei</option>\n                                    </optgroup>\n                                    <optgroup label=\"Other\">\n                                        <option value=\"parrot\">Parrot</option>\n                                        <option value=\"cat\">Cat</option>\n                                        <option value=\"guinea \">Guinea Pig</option>\n                                    </optgroup>\n                                </Select>\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
 }, {
   info: {
-    propTables: [Select]
+    propTables: [_Select.Select]
   }
 });

package/Select/Select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","box","readme","Bind","toString","info","propTables","Select"],"sources":["Select.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Select } from \"./Select\";\n\nconst story = storiesOf(\"Components/Select\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n        const box = boolean(\"Box\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple select with a label and description\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind name=\"pet\">\n                                    <Select\n                                        label=\"Pets\"\n                                        disabled={disabled}\n                                        box={box.toString()}\n                                        description=\"Choose a pet of your liking.\"\n                                    >\n                                        <optgroup label=\"Dogs\">\n                                            <option value=\"germanShepherd\">German Shepherd</option>\n                                            <option value=\"bulldog\">Bulldog</option>\n                                            <option value=\"sharPei\">Shar-Pei</option>\n                                        </optgroup>\n                                        <optgroup label=\"Other\">\n                                            <option value=\"parrot\">Parrot</option>\n                                            <option value=\"cat\">Cat</option>\n                                            <option value=\"guinea \">Guinea Pig</option>\n                                        </optgroup>\n                                    </Select>\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"pet\">\n                               <Select\n                                    label=\"Pets\"\n                                    disabled={disabled}\n                                    box={box.toString()}\n                                    description=\"Choose a pet of your liking.\"\n                                >\n                                   <optgroup label=\"Dogs\">\n                                        <option value=\"germanShepherd\">\n                                            German Shepherd\n                                        </option>\n                                        <option value=\"bulldog\">Bulldog</option>\n                                        <option value=\"sharPei\">Shar-Pei</option>\n                                    </optgroup>\n                                    <optgroup label=\"Other\">\n                                        <option value=\"parrot\">Parrot</option>\n                                        <option value=\"cat\">Cat</option>\n                                        <option value=\"guinea \">Guinea Pig</option>\n                                    </optgroup>\n                                </Select>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Select] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EACA,IAAMC,GAAG,GAAG,IAAAD,mBAAA,EAAQ,KAAR,EAAe,KAAf,CAAZ;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcE,eAAd,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,cAAD;MACI,KAAK,EAAC,MADV;MAEI,QAAQ,EAAEJ,QAFd;MAGI,GAAG,EAAEE,GAAG,CAACG,QAAJ,EAHT;MAII,WAAW,EAAC;IAJhB,gBAMI;MAAU,KAAK,EAAC;IAAhB,gBACI;MAAQ,KAAK,EAAC;IAAd,qBADJ,eAEI;MAAQ,KAAK,EAAC;IAAd,aAFJ,eAGI;MAAQ,KAAK,EAAC;IAAd,cAHJ,CANJ,eAWI;MAAU,KAAK,EAAC;IAAhB,gBACI;MAAQ,KAAK,EAAC;IAAd,YADJ,eAEI;MAAQ,KAAK,EAAC;IAAd,SAFJ,eAGI;MAAQ,KAAK,EAAC;IAAd,gBAHJ,CAXJ,CADJ,CADH;EAAA,CADL,CADJ,CADJ,eA0BI,6BAAC,uBAAD,85CA1BJ,CAFJ,CADJ;AA6DH,CAnEL,EAoEI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD;EAAd;AAAR,CApEJ"}

package/Select/index.js

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

package/Select/index.js.map

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

package/Skeleton/README.md

@@ -0,0 +1,21 @@
+# Skeleton
+
+### Additional information
+
+[https://www.npmjs.com/package/react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)
+
+### Description
+
+`Skeleton` component is used to render animated loading skeletons within Webiny.
+
+### Usage
+
+```jsx
+import { Skeleton } from "@webiny/ui/Skeleton";
+
+...
+
+return (
+    <Skeleton />
+)
+```

package/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+import { SkeletonProps } from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+export declare const Skeleton: (props: SkeletonProps) => ReactElement;

package/Skeleton/Skeleton.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Skeleton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
+
+require("react-loading-skeleton/dist/skeleton.css");
+
+var Skeleton = function Skeleton(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
+    baseColor: "var(--mdc-theme-background)",
+    highlightColor: "var(--mdc-theme-surface)"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, props));
+};
+
+exports.Skeleton = Skeleton;

package/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skeleton","props"],"sources":["Skeleton.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport ReactLoadingSkeleton, { SkeletonProps, SkeletonTheme } from \"react-loading-skeleton\";\n\nimport \"react-loading-skeleton/dist/skeleton.css\";\n\nexport const Skeleton = (props: SkeletonProps): ReactElement => {\n    return (\n        <SkeletonTheme\n            baseColor={\"var(--mdc-theme-background)\"}\n            highlightColor={\"var(--mdc-theme-surface)\"}\n        >\n            <ReactLoadingSkeleton {...props} />\n        </SkeletonTheme>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAwC;EAC5D,oBACI,6BAAC,mCAAD;IACI,SAAS,EAAE,6BADf;IAEI,cAAc,EAAE;EAFpB,gBAII,6BAAC,6BAAD,EAA0BA,KAA1B,CAJJ,CADJ;AAQH,CATM"}

package/Skeleton/Skeleton.stories.d.ts

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

package/Skeleton/Skeleton.stories.js

@@ -0,0 +1,28 @@
+"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("./../Skeleton/README.md"));
+
+var _Skeleton = require("./Skeleton");
+
+var story = (0, _react2.storiesOf)("Components/Skeleton", 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 loading Skeleton, single line"
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, null)), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A loading Skeleton, with 3 lines"
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
+    count: 3
+  })));
+}, {
+  info: {
+    propTables: [_Skeleton.Skeleton]
+  }
+});

package/Skeleton/Skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Skeleton"],"sources":["Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Skeleton/README.md\";\nimport { Skeleton } from \"./Skeleton\";\n\nconst story = storiesOf(\"Components/Skeleton\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple loading Skeleton, single line\"}>\n                    <Skeleton />\n                </StorySandbox>\n                <StorySandbox title={\"A loading Skeleton, with 3 lines\"}>\n                    <Skeleton count={3} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Skeleton] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,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,kBAAD,OADJ,CAFJ,eAKI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,kBAAD;IAAU,KAAK,EAAE;EAAjB,EADJ,CALJ,CADJ;AAWH,CAdL,EAeI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kBAAD;EAAd;AAAR,CAfJ"}

package/Skeleton/index.d.ts

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

package/Skeleton/index.js

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

package/Skeleton/index.js.map

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

package/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 declare type Props = FormComponentProps & {
     label?: string;
@@ -15,11 +15,6 @@ declare type Props = FormComponentProps & {
  * Slider component lets users choose a value from given range.
  */
 declare class Slider extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     onChange: (e: {
         detail: {
             value: number;

package/Slider/Slider.js

@@ -1,15 +1,34 @@
-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 { Slider as RmwcSlider } from "@rmwc/slider";
-import styled from "@emotion/styled";
-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 _slider = require("@rmwc/slider");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _FormElementMessage = require("../FormElementMessage");
+
 // wrapper fixes a bug in slider where the slider handle is rendered outside the bounds of the slider box
-var Wrapper = /*#__PURE__*/styled("div", {
+var Wrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1ll7sdi0",
   label: "Wrapper"
 })({
@@ -23,33 +42,30 @@ var Wrapper = /*#__PURE__*/styled("div", {
  */
 
 var Slider = /*#__PURE__*/function (_React$Component) {
-  _inherits(Slider, _React$Component);
+  (0, _inherits2.default)(Slider, _React$Component);
 
-  var _super = _createSuper(Slider);
+  var _super = (0, _createSuper2.default)(Slider);
 
   function Slider() {
     var _this;
 
-    _classCallCheck(this, Slider);
+    (0, _classCallCheck2.default)(this, Slider);
 
     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.detail.value);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onInput", function (e) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInput", function (e) {
       _this.props.onInput && _this.props.onInput(e.detail.value);
     });
-
     return _this;
   }
 
-  _createClass(Slider, [{
+  (0, _createClass2.default)(Slider, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -63,25 +79,23 @@ var Slider = /*#__PURE__*/function (_React$Component) {
         sliderValue = this.props.min || 0;
       }
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
         className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent"
-      }, label), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(RmwcSlider, Object.assign({}, this.props, {
+      }, label), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_slider.Slider, Object.assign({}, this.props, {
         value: sliderValue,
         onChange: this.onChange,
         onInput: this.onInput
-      }))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }))), 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 Slider;
-}(React.Component);
-
-_defineProperty(Slider, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
+}(_react.default.Component);
 
-export default Slider;
+var _default = Slider;
+exports.default = _default;

package/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Wrapper","styled","width","left","Slider","e","props","onChange","detail","value","onInput","label","description","validation","sliderValue","min","validationIsValid","isValid","validationMessage","message","React","Component"],"sources":["Slider.tsx"],"sourcesContent":["import React from \"react\";\nimport { Slider as RmwcSlider } from \"@rmwc/slider\";\nimport { FormComponentProps } from \"~/types\";\nimport styled from \"@emotion/styled\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ntype Props = FormComponentProps & {\n    // Component label.\n    label?: string;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // Description beneath the slider.\n    description?: string;\n\n    // The minimum value of the Slider.\n    min: number | string;\n\n    // The maximum value of the Slider.\n    max: number | string;\n\n    // A step to quantize values by.\n    step?: number | string;\n\n    // Displays the exact value of the Slider on the knob.\n    discrete?: boolean;\n\n    // Displays the individual step markers on the Slider track.\n    displayMarkers?: boolean;\n\n    // Function that gets triggered on each input.\n    onInput?: Function;\n};\n\n// wrapper fixes a bug in slider where the slider handle is rendered outside the bounds of the slider box\nconst Wrapper = styled(\"div\")({\n    width: \"100%\",\n    \".mdc-slider .mdc-slider__thumb-container\": {\n        left: 5\n    }\n});\n\n/**\n * Slider component lets users choose a value from given range.\n */\nclass Slider extends React.Component<Props> {\n    onChange = (e: { detail: { value: number } }) => {\n        this.props.onChange && this.props.onChange(e.detail.value);\n    };\n\n    onInput = (e: { detail: { value: number } }) => {\n        this.props.onInput && this.props.onInput(e.detail.value);\n    };\n\n    public override render() {\n        const { value, label, description, validation } = this.props;\n\n        let sliderValue = value;\n        if (value === null || typeof value === \"undefined\") {\n            sliderValue = this.props.min || 0;\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div className=\"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\">\n                        {label}\n                    </div>\n                )}\n\n                <Wrapper>\n                    <RmwcSlider\n                        {...this.props}\n                        value={sliderValue}\n                        onChange={this.onChange}\n                        onInput={this.onInput}\n                    />\n                </Wrapper>\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 Slider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AA+BA;AACA,IAAMA,OAAO,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC1BC,KAAK,EAAE,MADmB;EAE1B,4CAA4C;IACxCC,IAAI,EAAE;EADkC;AAFlB,CAAjB,CAAb;AAOA;AACA;AACA;;IACMC,M;;;;;;;;;;;;;;;2FACS,UAACC,CAAD,EAAsC;MAC7C,MAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAoBF,CAAC,CAACG,MAAF,CAASC,KAA7B,CAAvB;IACH,C;0FAES,UAACJ,CAAD,EAAsC;MAC5C,MAAKC,KAAL,CAAWI,OAAX,IAAsB,MAAKJ,KAAL,CAAWI,OAAX,CAAmBL,CAAC,CAACG,MAAF,CAASC,KAA5B,CAAtB;IACH,C;;;;;;WAED,kBAAyB;MACrB,kBAAkD,KAAKH,KAAvD;MAAA,IAAQG,KAAR,eAAQA,KAAR;MAAA,IAAeE,KAAf,eAAeA,KAAf;MAAA,IAAsBC,WAAtB,eAAsBA,WAAtB;MAAA,IAAmCC,UAAnC,eAAmCA,UAAnC;MAEA,IAAIC,WAAW,GAAGL,KAAlB;;MACA,IAAIA,KAAK,KAAK,IAAV,IAAkB,OAAOA,KAAP,KAAiB,WAAvC,EAAoD;QAChDK,WAAW,GAAG,KAAKR,KAAL,CAAWS,GAAX,IAAkB,CAAhC;MACH;;MAED,WAAmEF,UAAU,IAAI,EAAjF;MAAA,IAAiBG,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,QACKR,KAAK,iBACF;QAAK,SAAS,EAAC;MAAf,GACKA,KADL,CAFR,eAOI,6BAAC,OAAD,qBACI,6BAAC,cAAD,oBACQ,KAAKL,KADb;QAEI,KAAK,EAAEQ,WAFX;QAGI,QAAQ,EAAE,KAAKP,QAHnB;QAII,OAAO,EAAE,KAAKG;MAJlB,GADJ,CAPJ,EAgBKM,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CAjBR,EAoBKF,iBAAiB,KAAK,KAAtB,IAA+BJ,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CArBR,CADJ;IA0BH;;;EA7CgBQ,cAAA,CAAMC,S;;eAgDZjB,M"}