@webiny/ui 0.0.0-mt-1

package/Snackbar/Snackbar.stories.js

@@ -0,0 +1,77 @@
+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 { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../Snackbar/README.md";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import { ButtonPrimary } from "./../Button";
+import { Snackbar } from "./Snackbar";
+var story = storiesOf("Components/Snackbar", module);
+story.addDecorator(withKnobs);
+
+var SnackbarContainer = /*#__PURE__*/function (_React$Component) {
+  _inherits(SnackbarContainer, _React$Component);
+
+  var _super = _createSuper(SnackbarContainer);
+
+  function SnackbarContainer() {
+    var _this;
+
+    _classCallCheck(this, SnackbarContainer);
+
+    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), "state", {
+      show: false
+    });
+
+    return _this;
+  }
+
+  _createClass(SnackbarContainer, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Snackbar, {
+        open: this.state.show,
+        onClose: function onClose() {
+          return _this2.setState({
+            show: false
+          });
+        },
+        message: "This is a message.",
+        leading: this.props.leading,
+        action: "Something"
+      }), /*#__PURE__*/React.createElement(ButtonPrimary, {
+        onClick: function onClick() {
+          return _this2.setState({
+            show: true
+          });
+        }
+      }, "Show message"));
+    }
+  }]);
+
+  return SnackbarContainer;
+}(React.Component);
+
+story.add("usage", function () {
+  var leading = boolean("leading", false);
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(SnackbarContainer, {
+    leading: true
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <div>\n                             <Snackbar\n                                open={this.state.show}\n                                leading={".concat(leading, "}\n                                onHide={() => this.setState({ show: false })}\n                                message=\"This is a message.\"\n                            />\n                            <ButtonPrimary onClick={() => this.setState({ show: true })}>\n                                Show message\n                            </ButtonPrimary>\n                        </div>\n                    "))));
+}, {
+  info: {
+    propTables: [Snackbar]
+  }
+});

package/Snackbar/index.d.ts

@@ -0,0 +1 @@
+export { Snackbar, SnackbarAction } from "./Snackbar";

package/Snackbar/index.js

@@ -0,0 +1 @@
+export { Snackbar, SnackbarAction } from "./Snackbar";

package/Switch/README.md

@@ -0,0 +1,15 @@
+# Switch
+
+### Design
+
+<a href="https://material.io/design/components/selection-controls.html#switches" target="_blank">https://material.io/design/components/selection-controls.html#switches</a>
+
+### Description
+
+`Switch` component can be used to store simple boolean values.
+
+### Import
+
+```js
+import { Switch } from "@webiny/ui/Switch";
+```

package/Switch/Switch.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { SwitchProps } from "@rmwc/switch";
+import { FormComponentProps } from "../types";
+declare type Props = FormComponentProps & SwitchProps & {
+    description?: string;
+    className?: string;
+};
+/**
+ * Switch component can be used to store simple boolean values.
+ */
+declare class Switch extends React.Component<Props> {
+    static defaultProps: {
+        validation: {
+            isValid: any;
+        };
+    };
+    static rmwcProps: string[];
+    onChange: (e: React.SyntheticEvent<HTMLElement>) => void;
+    render(): JSX.Element;
+}
+export { Switch };

package/Switch/Switch.js

@@ -0,0 +1,67 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+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 { Switch as RmwcSwitch } from "@rmwc/switch";
+import pick from "lodash/pick";
+import { FormElementMessage } from "../FormElementMessage";
+import { getClasses } from "../Helpers";
+
+/**
+ * Switch component can be used to store simple boolean values.
+ */
+var Switch = /*#__PURE__*/function (_React$Component) {
+  _inherits(Switch, _React$Component);
+
+  var _super = _createSuper(Switch);
+
+  function Switch() {
+    var _this;
+
+    _classCallCheck(this, Switch);
+
+    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) {
+      _this.props.onChange && _this.props.onChange(e.target.checked);
+    });
+
+    return _this;
+  }
+
+  _createClass(Switch, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          description = _this$props.description,
+          validation = _this$props.validation;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcSwitch, Object.assign({}, getClasses(_objectSpread({}, pick(this.props, Switch.rmwcProps)), "webiny-ui-switch"), {
+        checked: Boolean(value),
+        onChange: this.onChange
+      })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+    }
+  }]);
+
+  return Switch;
+}(React.Component);
+
+_defineProperty(Switch, "defaultProps", {
+  validation: {
+    isValid: null
+  }
+});
+
+_defineProperty(Switch, "rmwcProps", ["id", "disabled", "checked", "label", "rootProps", "className"]);
+
+export { Switch };

package/Switch/Switch.stories.d.ts

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

package/Switch/Switch.stories.js

@@ -0,0 +1,32 @@
+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 { Switch } from "./Switch";
+var story = storiesOf("Components/Switch", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var disabled = boolean("Disabled", false);
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Simple switch with a label and description"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      rememberMe: true
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "rememberMe"
+    }, /*#__PURE__*/React.createElement(Switch, {
+      label: "Remember me",
+      disabled: disabled,
+      description: "You won't be logged out after you leave the app."
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"rememberMe\">\n                                  <Switch\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: [Switch]
+  }
+});

package/Switch/index.d.ts

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

package/Switch/index.js

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

package/Tabs/README.md

@@ -0,0 +1,19 @@
+# Tabs
+
+### Design
+
+<a href="https://material.io/develop/web/components/tabss/" target="_blank">https://material.io/develop/web/components/tabss/</a>
+
+### Description
+
+`Tabs` component is used to group content for better readability.
+
+By default it will mount tab content only when the tab is actually selected.
+Alternatively, it can also keep tab content always mounted - even when it's not active. This might be useful eg.
+when validating forms which span across two or more tabs.
+
+### Import
+
+```js
+import { Tabs, Tab, TabIcon } from "@webiny/ui/Tabs";
+```

package/Tabs/Tab.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { TabProps as RmwcTabProps } from "@rmwc/tabs";
+export declare type TabProps = RmwcTabProps & {
+    tag?: string;
+    /**
+     * Is tab disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Style object
+     */
+    style?: React.CSSProperties;
+};
+export declare const Tab: (props: TabProps) => JSX.Element;

package/Tabs/Tab.js

@@ -0,0 +1,10 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import * as React from "react";
+import { Tab as RmwcTab } from "@rmwc/tabs";
+export var Tab = function Tab(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(RmwcTab, rest, children);
+};

package/Tabs/Tabs.d.ts

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+export declare type TabsRenderProps = {
+    switchTab(tabIndex: number): void;
+};
+export declare type TabsProps = {
+    /**
+     * A collection of tabs that needs to be rendered.
+     */
+    children: ((props: TabsRenderProps) => ReactNode) | ReactNode;
+    /**
+     * Append a class name.
+     */
+    className?: string;
+    /**
+     * Callback to execute when a tab is changed.
+     */
+    onActivate?: (index: number) => void;
+    /**
+     * Active tab index value.
+     */
+    value?: number;
+    /**
+     * Function to change active tab.
+     */
+    updateValue?: (index: number) => void;
+};
+declare type State = {
+    activeTabIndex: number;
+};
+/**
+ * Use Tabs component to display a list of choices, once the handler is triggered.
+ */
+export declare class Tabs extends React.Component<TabsProps, State> {
+    state: {
+        activeTabIndex: number;
+    };
+    switchTab(activeTabIndex: any): void;
+    renderChildren(children: any, activeIndex: any): JSX.Element;
+    render(): JSX.Element;
+}
+export {};

package/Tabs/Tabs.js

@@ -0,0 +1,145 @@
+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 React from "react";
+import classNames from "classnames";
+import { TabBar } from "@rmwc/tabs";
+import { Tab } from "./Tab";
+var disabledStyles = {
+  opacity: 0.5,
+  pointerEvents: "none"
+};
+/**
+ * Use Tabs component to display a list of choices, once the handler is triggered.
+ */
+
+export var Tabs = /*#__PURE__*/function (_React$Component) {
+  _inherits(Tabs, _React$Component);
+
+  var _super = _createSuper(Tabs);
+
+  function Tabs() {
+    var _this;
+
+    _classCallCheck(this, Tabs);
+
+    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), "state", {
+      activeTabIndex: 0
+    });
+
+    return _this;
+  }
+
+  _createClass(Tabs, [{
+    key: "switchTab",
+    value: function switchTab(activeTabIndex) {
+      if (typeof this.props.updateValue === "function") {
+        this.props.updateValue(activeTabIndex);
+      } else {
+        this.setState({
+          activeTabIndex: activeTabIndex
+        });
+      }
+    }
+  }, {
+    key: "renderChildren",
+    value: function renderChildren(children, activeIndex) {
+      var _this2 = this;
+
+      var tabs = React.Children.toArray(children).filter(function (c) {
+        return c !== null;
+      }).map(function (child) {
+        return {
+          label: child.props.label,
+          children: child.props.children,
+          icon: child.props.icon,
+          disabled: child.props.disabled,
+          style: child.props.style,
+          "data-testid": child.props["data-testid"]
+        };
+      });
+      var tabBar = /*#__PURE__*/React.createElement(TabBar, {
+        className: "webiny-ui-tabs__tab-bar",
+        activeTabIndex: activeIndex,
+        onActivate: function onActivate(evt) {
+          if (typeof _this2.props.updateValue === "function") {
+            _this2.props.updateValue(evt.detail.index);
+          } else {
+            _this2.setState({
+              activeTabIndex: evt.detail.index
+            });
+          }
+
+          _this2.props.onActivate && _this2.props.onActivate(evt.detail.index);
+        }
+      }, tabs.map(function (item, index) {
+        var style = item.style || {};
+
+        if (item.disabled) {
+          Object.assign(style, disabledStyles);
+        }
+
+        return /*#__PURE__*/React.createElement(Tab, Object.assign({
+          tag: "div",
+          style: style,
+          key: item.label + "-" + index,
+          "data-testid": item["data-testid"]
+        }, item.icon ? {
+          icon: item.icon
+        } : {}, item.label ? {
+          label: item.label
+        } : {}));
+      }));
+      var content = [];
+
+      for (var i = 0; i < tabs.length; i++) {
+        var current = tabs[i];
+
+        if (activeIndex === i) {
+          content.push( /*#__PURE__*/React.createElement("div", {
+            key: i
+          }, current.children));
+        } else {
+          content.push( /*#__PURE__*/React.createElement("div", {
+            key: i,
+            style: {
+              display: "none"
+            }
+          }, current.children));
+        }
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames("webiny-ui-tabs", this.props.className)
+      }, tabBar, /*#__PURE__*/React.createElement("div", {
+        className: "webiny-ui-tabs__content mdc-tab-content"
+      }, content));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var activeIndex = this.props.value !== undefined ? this.props.value : this.state.activeTabIndex;
+      var children = this.props.children;
+
+      if (typeof this.props.children === "function") {
+        // @ts-ignore
+        children = this.props.children({
+          switchTab: this.switchTab.bind(this)
+        });
+      }
+
+      return this.renderChildren(children, activeIndex);
+    }
+  }]);
+
+  return Tabs;
+}(React.Component);

package/Tabs/Tabs.stories.d.ts

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

package/Tabs/Tabs.stories.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../Tabs/README.md";
+import { ReactComponent as DeleteIcon } from "@svgr/webpack!./svg/baseline-delete-24px.svg";
+import { ReactComponent as DoneIcon } from "@svgr/webpack!./svg/baseline-done-24px.svg";
+import { withKnobs } from "@storybook/addon-knobs";
+import { Tabs, Tab } from "./index";
+var story = storiesOf("Components/Tabs", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var Div = function Div(props) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 50
+      }
+    }, props.children);
+  };
+
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Tabs example"
+  }, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+    label: "Tab 1",
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
+  }, /*#__PURE__*/React.createElement(Div, null, "Tab 1 content.")), /*#__PURE__*/React.createElement(Tab, {
+    label: "Tab 2",
+    icon: /*#__PURE__*/React.createElement(DoneIcon, null)
+  }, /*#__PURE__*/React.createElement(Div, null, "Tab 2 content.")), /*#__PURE__*/React.createElement(Tab, {
+    label: "Tab 3"
+  }, /*#__PURE__*/React.createElement(Div, null, "Tab 3 content - header without icon.")), /*#__PURE__*/React.createElement(Tab, {
+    icon: /*#__PURE__*/React.createElement(DoneIcon, null)
+  }, /*#__PURE__*/React.createElement(Div, null, "Tab 4 content - header without label."))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        ")));
+}, {
+  info: {
+    propTables: [Tabs, Tab]
+  }
+});

package/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+export * from "./Tab";

package/Tabs/index.js

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+export * from "./Tab";

package/Tabs/svg/baseline-autorenew-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/Tabs/svg/baseline-cloud_done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path 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/Tabs/svg/baseline-delete-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/Tabs/svg/baseline-done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0z"/>
+    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+</svg>

package/Tags/README.md

@@ -0,0 +1,15 @@
+# Tags
+
+### Design
+
+N/A
+
+### Description
+
+`Tags` component lets users to input one or more tags.
+
+### Import
+
+```js
+import { Tags } from "@webiny/ui/Tags";
+```

package/Tags/Tags.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { FormComponentProps } from "../types";
+declare type Props = FormComponentProps & {
+    /**
+     * Component label.
+     */
+    label?: string;
+    /**
+     * Are input and chosen tags disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.
+     */
+    placeholder?: string;
+    /**
+     * Description beneath the input.
+     */
+    description?: string;
+    /**
+     * A className for the root element.
+     */
+    className?: string;
+    /**
+     * Default structure of value, an object consisting of "id" and "name" keys. Different keys can be set using "valueProp" and "textProp" props.
+     */
+    value?: {
+        id: string;
+        name: string;
+    };
+    /**
+     * Callback that gets executed on change of input value.
+     */
+    onInput?: Function;
+    /**
+     * Callback that gets executed when the input is focused.
+     */
+    onFocus?: Function;
+    /**
+     * Automatically focus on the tags input.
+     */
+    autoFocus?: boolean;
+};
+declare type State = {
+    inputValue: string;
+};
+export declare class Tags extends React.Component<Props, State> {
+    state: {
+        inputValue: string;
+    };
+    static defaultProps: {
+        validation: {
+            isValid: any;
+        };
+    };
+    render(): JSX.Element;
+}
+export default Tags;