@webiny/ui 0.0.0-mt-1

package/AutoComplete/MultiAutoComplete.stories.js

@@ -0,0 +1,132 @@
+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 "./MultiAutoCompleteReadme.md";
+import { Form } from "@webiny/form";
+import { MultiAutoComplete } from "./MultiAutoComplete";
+var story = storiesOf("Components/AutoComplete", module);
+story.addDecorator(withKnobs);
+var options = [{
+  name: "France",
+  id: "france"
+}, {
+  name: "Germany",
+  id: "germany"
+}, {
+  name: "Italy",
+  id: "italy"
+}, {
+  name: "Spain",
+  id: "spain"
+}, {
+  name: "UK",
+  id: "uk"
+}, {
+  name: "US",
+  id: "us"
+}, {
+  name: "Norway",
+  id: "norway"
+}, {
+  name: "Finland",
+  id: "finland"
+}, {
+  name: "Czech Republic",
+  id: "czech-republic"
+}];
+story.add("MultiAutoComplete", 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: "Values as objects"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      country: [{
+        id: "uk",
+        name: "UK"
+      }, {
+        id: "italy",
+        name: "Italy"
+      }]
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "country"
+    }, /*#__PURE__*/React.createElement(MultiAutoComplete, {
+      options: options,
+      label: "Country",
+      disabled: disabled,
+      description: "Choose one or more countries."
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Form>\n                            {({ Bind }) => (\n                                 <Bind name=\"country\">\n                                    <MultiAutoComplete\n                                        options={".concat(JSON.stringify(options), "}\n                                        label=\"Country\"\n                                        disabled={").concat(disabled, "}\n                                        description=\"Choose one or more countries.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    "))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Values as strings"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      country: ["Italy", "France"]
+    }
+  }, function (_ref2) {
+    var Bind = _ref2.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "country"
+    }, /*#__PURE__*/React.createElement(MultiAutoComplete, {
+      useSimpleValues: true,
+      options: options.map(function (item) {
+        return item.name;
+      }),
+      label: "Country",
+      disabled: disabled,
+      description: "Choose one or more countries."
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Form>\n                            {({ Bind }) => (\n                                 <Bind name=\"country\">\n                                    <MultiAutoComplete\n                                        useSimpleValues\n                                        options={".concat(JSON.stringify(options), "}\n                                        label=\"Country\"\n                                        disabled={").concat(disabled, "}\n                                        description=\"Choose one or more countries.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    "))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Allow free input"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      country: [{
+        id: "anotherCountry",
+        name: "Another Country"
+      }, {
+        id: "nowhere",
+        name: "Nowhere"
+      }, {
+        id: "france",
+        name: "France"
+      }]
+    }
+  }, function (_ref3) {
+    var Bind = _ref3.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "country"
+    }, /*#__PURE__*/React.createElement(MultiAutoComplete, {
+      allowFreeInput: true,
+      options: options,
+      label: "Country",
+      disabled: disabled,
+      description: "Choose your country"
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form data={{ country: { id: \"anotherCountry\", name: \"Another Country\" } }}>\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <MultiAutoComplete\n                                    useSimpleValues\n                                    options={".concat(JSON.stringify(options), "}\n                                    label=\"Country\"\n                                    disabled={disabled}\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Allow free input (values as strings)"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      country: ["Another Country", "Nowhere", "France"]
+    }
+  }, function (_ref4) {
+    var Bind = _ref4.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "country"
+    }, /*#__PURE__*/React.createElement(MultiAutoComplete, {
+      useSimpleValues: true,
+      allowFreeInput: true,
+      options: options.map(function (item) {
+        return item.name;
+      }),
+      label: "Country",
+      disabled: disabled,
+      description: "Choose your country"
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                  <Form\n                        data={{\n                            country: [\"Another Country\", \"Nowhere\", \"France\"]\n                        }}\n                    >\n                        {({ Bind }) => (\n                            <Bind name=\"country\">\n                                <MultiAutoComplete\n                                    useSimpleValues\n                                    allowFreeInput\n                                    options={options.map(item => item.name)}\n                                    label=\"Country\"\n                                    disabled={disabled}\n                                    description=\"Choose your country\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+}, {
+  info: {
+    propTables: [MultiAutoComplete]
+  }
+});

package/AutoComplete/MultiAutoCompleteReadme.md

@@ -0,0 +1,11 @@
+# MultiAutoComplete
+
+### Description
+
+`MultiAutoComplete` component lets users select multiple values from a list of suggestions (created based on their input).
+
+### Import
+
+```js
+import { MultiAutoComplete } from "@webiny/ui/MultiAutoComplete";
+```

package/AutoComplete/icons/baseline-close-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/AutoComplete/icons/delete.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_5">
+	</g>
+	<path fill="currentColor" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9c0-1.1-0.9-2-2-2H8C6.9,7,6,7.9,6,9V19z M18,4h-2.5l-0.71-0.71
+		C14.61,3.11,14.35,3,14.09,3H9.91C9.65,3,9.39,3.11,9.21,3.29L8.5,4H6C5.45,4,5,4.45,5,5v0c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1
+		v0C19,4.45,18.55,4,18,4z"/>
+</g>
+</svg>

package/AutoComplete/icons/navigate_before-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.91 6.71c-.39-.39-1.02-.39-1.41 0L8.91 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L11.03 12l3.88-3.88c.38-.39.38-1.03 0-1.41z"/></svg>

package/AutoComplete/icons/navigate_next-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.31 6.71c-.39.39-.39 1.02 0 1.41L13.19 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.72 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg>

package/AutoComplete/icons/reorder_black_24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 15h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V9H3v2zm0-6v2h18V5H3z"/></svg>

package/AutoComplete/icons/skip_next-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L7.58 7.11C6.91 6.65 6 7.12 6 7.93v8.14c0 .81.91 1.28 1.58.82zM16 7v10c0 .55.45 1 1 1s1-.45 1-1V7c0-.55-.45-1-1-1s-1 .45-1 1z"/></svg>

package/AutoComplete/icons/skip_previous-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zm3.66 6.82l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.57.4-.57 1.24 0 1.64z"/></svg>

package/AutoComplete/icons/spinner.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/AutoComplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AutoComplete";
+export * from "./MultiAutoComplete";

package/AutoComplete/index.js

@@ -0,0 +1,2 @@
+export * from "./AutoComplete";
+export * from "./MultiAutoComplete";

package/AutoComplete/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const autoCompleteStyle: string;
+export declare const suggestionList: string;

package/AutoComplete/styles.js

@@ -0,0 +1,37 @@
+import { css } from "emotion";
+export var autoCompleteStyle = /*#__PURE__*/css({
+  position: "relative",
+  ".mdc-elevation--z1": {
+    position: "absolute",
+    width: "calc(100% - 2px)",
+    left: 1,
+    top: 56,
+    zIndex: 10,
+    maxHeight: 200,
+    overflowY: "scroll",
+    backgroundColor: "var(--mdc-theme-surface)"
+  },
+  ul: {
+    listStyle: "none",
+    width: "100%",
+    padding: 0,
+    li: {
+      padding: 10,
+      span: {
+        color: "var(--mdc-theme-on-surface)"
+      }
+    }
+  }
+}, "label:autoCompleteStyle;");
+export var suggestionList = /*#__PURE__*/css({
+  fontWeight: "normal",
+  backgroundColor: "var(--mdc-theme-surface)",
+  transition: "background-color 0.2s",
+  color: "var(--mdc-theme-text-primary-on-background)",
+  "&.selected": {
+    fontWeight: "bold"
+  },
+  "&.highlighted": {
+    backgroundColor: "var(--mdc-theme-on-background)"
+  }
+}, "label:suggestionList;");

package/AutoComplete/types.d.ts

@@ -0,0 +1,62 @@
+import { FormComponentProps } from "../types";
+export declare type AutoCompleteBaseProps = FormComponentProps & {
+    /**
+     * Component label.
+     */
+    label?: string;
+    /**
+     * Is component disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Is component read-only?
+     */
+    readOnly?: boolean;
+    /**
+     * Options that will be shown.
+     */
+    options: Array<any>;
+    /**
+     * Description beneath the autoComplete.
+     */
+    description?: string;
+    /**
+     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.
+     */
+    placeholder?: 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;
+    };
+    /**
+     * Key in a single option object that will be used as option's value (by default, "id" key will be used).
+     */
+    valueProp: string;
+    /**
+     * Key in a single option object that will be used as option's text (by default, "name" key will be used).
+     */
+    textProp: string;
+    /**
+     * Callback that gets executed on change of input value.
+     */
+    onInput?: Function;
+    /**
+     * Callback that gets executed when the input is focused.
+     */
+    onFocus?: Function;
+    /**
+     * Set if you are saving plain strings as values.
+     */
+    useSimpleValues?: boolean;
+    /**
+     * Renders a single suggestion item.
+     */
+    renderItem: Function;
+};

package/AutoComplete/types.js

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

package/AutoComplete/utils.d.ts

@@ -0,0 +1,9 @@
+declare type Props = {
+    useSimpleValues?: boolean;
+    valueProp?: string;
+    textProp?: string;
+};
+export declare const getOptionValue: (option: any, props: Props) => any;
+export declare const getOptionText: (option: any, props: Props) => any;
+export declare const findInAliases: (option: any, search?: string) => any;
+export {};

package/AutoComplete/utils.js

@@ -0,0 +1,19 @@
+export var getOptionValue = function getOptionValue(option, props) {
+  if (option) {
+    return props.useSimpleValues ? option : option[props.valueProp];
+  }
+
+  return option;
+};
+export var getOptionText = function getOptionText(option, props) {
+  if (option) {
+    return props.useSimpleValues ? option : option[props.textProp];
+  }
+
+  return option;
+};
+export var findInAliases = function findInAliases(option, search) {
+  return option.aliases.some(function (alias) {
+    return alias.toLowerCase().includes(search.toLowerCase());
+  });
+};

package/Avatar/Avatar.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+export declare type AvatarProps = {
+    /**
+     * CSS class name.
+     */
+    className?: string;
+    /**
+     * Style object.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Avatar image source.
+     */
+    src: string;
+    /**
+     * "alt" text.
+     */
+    alt?: string;
+    /**
+     * Width.
+     */
+    width?: number;
+    /**
+     * Height.
+     */
+    height?: number;
+    /**
+     * Pass a custom image component to be rendered instead of a simple <img> element.
+     * @param props
+     */
+    renderImage?: (props: {
+        src: string;
+        alt?: string;
+    }) => React.ReactElement;
+    /**
+     * Text that will be shown when there is no image (usually user's initials).
+     */
+    fallbackText: string;
+};
+/**
+ * Use Avatar component to display user's avatar.
+ */
+export declare const Avatar: {
+    (props: AvatarProps): JSX.Element;
+    defaultProps: {
+        width: number;
+        height: number;
+    };
+};

package/Avatar/Avatar.js

@@ -0,0 +1,80 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "width", "height", "src", "alt", "fallbackText", "renderImage"];
+import * as React from "react";
+import { css } from "emotion";
+import classNames from "classnames";
+var avatar = /*#__PURE__*/css({
+  borderRadius: "50%",
+  display: "block",
+  //alignItems: "center",
+  //justifyContent: "center",
+  width: 38,
+  height: 38,
+  position: "relative",
+  top: -7,
+  right: 7,
+  overflow: "hidden",
+  background: "var(--mdc-theme-background)",
+  color: "var(--mdc-theme-text-secondary-on-background)",
+  div: {
+    textAlign: "center",
+    display: "flex",
+    alignContent: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    width: 38,
+    height: 38,
+    fontSize: "1rem",
+    span: {
+      paddingBottom: 2
+    }
+  },
+  img: {
+    width: "100% !important",
+    height: "100% !important",
+    objectFit: "cover"
+  }
+}, "label:avatar;");
+
+/**
+ * Use Avatar component to display user's avatar.
+ */
+export var Avatar = function Avatar(props) {
+  var className = props.className,
+      width = props.width,
+      height = props.height,
+      src = props.src,
+      alt = props.alt,
+      fallbackText = props.fallbackText,
+      renderImage = props.renderImage,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var renderedImage;
+  var imageProps = {
+    src: src,
+    alt: alt
+  };
+
+  if (typeof renderImage === "function") {
+    renderedImage = renderImage(imageProps);
+  } else {
+    renderedImage = /*#__PURE__*/React.createElement("img", Object.assign({}, imageProps, {
+      alt: alt
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
+    className: classNames(avatar, className),
+    style: _objectSpread(_objectSpread({}, props.style), {}, {
+      width: width,
+      height: height
+    })
+  }), props.src ? renderedImage : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, fallbackText.split(" ").map(function (word) {
+    return word.charAt(0);
+  }).join("").toUpperCase())));
+};
+Avatar.defaultProps = {
+  width: 38,
+  height: 38
+};

package/Avatar/Avatar.stories.d.ts

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

package/Avatar/Avatar.stories.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
+import readme from "./../Avatar/README.md";
+import { Avatar } from "./Avatar";
+var story = storiesOf("Components/Avatar", module);
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "A simple avatar"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Avatar, {
+    width: 48,
+    height: 48,
+    alt: "Test alt.",
+    fallbackText: "T",
+    src: "http://i.pravatar.cc/150?img=49"
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Avatar, {
+    width: 64,
+    height: 64,
+    alt: "Test alt.",
+    fallbackText: "T",
+    src: ""
+  }))));
+}, {
+  info: {
+    propTables: [Avatar]
+  }
+});

package/Avatar/README.md

@@ -0,0 +1,11 @@
+# Avatar
+
+### Description
+
+Use `Avatar` component to display an avatar.
+
+### Import
+
+```js
+import { Avatar } from "@webiny/ui/Avatar";
+```

package/Avatar/index.d.ts

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

package/Avatar/index.js

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

package/Button/Button.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { FabProps } from "@rmwc/fab";
+import { IconProps } from "../Icon/Icon";
+import { SyntheticEvent } from "react";
+export declare type ButtonProps = {
+    flat?: boolean;
+    small?: boolean;
+    onClick?: (event: React.MouseEvent<any, MouseEvent>) => void | null;
+    children?: React.ReactNode;
+    ripple?: boolean;
+    className?: string;
+    disabled?: boolean;
+    style?: {
+        [key: string]: any;
+    };
+    "data-testid"?: string;
+};
+/**
+ * Shows a default button, used typically when action is not of high priority.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ButtonDefault: (props: ButtonProps) => JSX.Element;
+/**
+ * Shows primary button, eg. for submitting forms.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ButtonPrimary: (props: ButtonProps) => JSX.Element;
+/**
+ * Shows a secondary button - eg. for doing a reset on a form.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ButtonSecondary: (props: ButtonProps) => JSX.Element;
+export declare type ButtonFloatingProps = ButtonProps & FabProps & {
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    onMouseDown?: (e: SyntheticEvent) => void;
+    onMouseUp?: (e: SyntheticEvent) => void;
+};
+/**
+ * A floating button, shown on the side of the screen, typically used for creating new content or accessing settings.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ButtonFloating: (props: ButtonFloatingProps) => JSX.Element;
+/**
+ * Shows an icon, suitable to be shown inside of a button.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+export declare const ButtonIcon: (props: IconProps) => JSX.Element;