@webiny/ui 0.0.0-mt-1

package/Dialog/Dialog.js

@@ -0,0 +1,101 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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";
+var _excluded = ["children"];
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { Dialog as RmwcDialog, DialogContent as RmwcDialogContent, DialogTitle as RmwcDialogTitle, DialogActions as RmwcDialogActions, DialogButton as RmwcDialogButton } from "@rmwc/dialog";
+import { getClasses } from "../Helpers";
+export var Dialog = /*#__PURE__*/function (_React$Component) {
+  _inherits(Dialog, _React$Component);
+
+  var _super = _createSuper(Dialog);
+
+  function Dialog(props) {
+    var _this;
+
+    _classCallCheck(this, Dialog);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "container", void 0);
+
+    _this.container = document.getElementById("dialog-container");
+
+    if (!_this.container) {
+      _this.container = document.createElement("div");
+
+      _this.container.setAttribute("id", "dialog-container");
+
+      var container = _this.container;
+      document.body && document.body.appendChild(container);
+    }
+
+    return _this;
+  }
+
+  _createClass(Dialog, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          props = _objectWithoutProperties(_this$props, _excluded);
+
+      var container = this.container; // Let's pass "permanent" / "persistent" / "temporary" flags as "mode" prop instead.
+
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(RmwcDialog, getClasses(props, "webiny-ui-dialog"), children), container);
+    }
+  }]);
+
+  return Dialog;
+}(React.Component);
+
+/**
+ * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
+ */
+export var DialogTitle = function DialogTitle(props) {
+  return /*#__PURE__*/React.createElement(RmwcDialogTitle, getClasses(props, "webiny-ui-dialog__title"));
+};
+
+/**
+ * A simple component for showing dialog's body.
+ */
+export var DialogContent = function DialogContent(props) {
+  return /*#__PURE__*/React.createElement(RmwcDialogContent, getClasses(props, "webiny-ui-dialog__content"));
+};
+
+/**
+ * Can be used to show accept and cancel buttons.
+ */
+export var DialogActions = function DialogActions(props) {
+  return /*#__PURE__*/React.createElement(RmwcDialogActions, getClasses(props, "webiny-ui-dialog__actions"));
+};
+
+/**
+ * Use this to show a simple button.
+ */
+export var DialogButton = function DialogButton(props) {
+  return /*#__PURE__*/React.createElement(RmwcDialogButton, getClasses(props, "webiny-ui-dialog__button"));
+};
+
+/**
+ * Use this to close the dialog without taking any additional action.
+ */
+export var DialogCancel = function DialogCancel(props) {
+  return /*#__PURE__*/React.createElement(DialogButton, Object.assign({}, getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--cancel"), {
+    action: "close"
+  }), props.children);
+};
+
+/**
+ * Use this to close the dialog without taking any additional action.
+ */
+export var DialogAccept = function DialogAccept(props) {
+  return /*#__PURE__*/React.createElement(DialogButton, Object.assign({}, getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--accept"), {
+    action: "accept"
+  }), props.children);
+};

package/Dialog/Dialog.stories.d.ts

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

package/Dialog/Dialog.stories.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../Dialog/README.md";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import { Dialog, DialogButton, DialogAccept, DialogCancel, DialogActions, DialogTitle, DialogContent } from ".";
+var story = storiesOf("Components/Dialog", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var open = boolean("Open", false);
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "dialog"
+  }, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "A list with all possible options"
+  }, "Toggle ", /*#__PURE__*/React.createElement("code", null, "open"), " prop via the bottom knobs.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Note that instead of using ", /*#__PURE__*/React.createElement("code", null, "DialogFooter.Button"), " with", " ", /*#__PURE__*/React.createElement("code", null, "accept"), " or ", /*#__PURE__*/React.createElement("code", null, "cancel"), " prop, you can use a shorter", " ", /*#__PURE__*/React.createElement("code", null, "DialogAccept"), " and ", /*#__PURE__*/React.createElement("code", null, "DialogCancel"), " components respectively.", /*#__PURE__*/React.createElement(Dialog, {
+    open: open
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Delete confirmation"), /*#__PURE__*/React.createElement(DialogContent, null, "Are you sure you want to delete?"), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(DialogCancel, {
+    onClick: function onClick() {
+      return console.log("Cancel");
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement(DialogAccept, {
+    onClick: function onClick() {
+      return console.log("Accept");
+    }
+  }, "OK")))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Dialog open={".concat(open, "}>\n                        <DialogTitle>\n                            Delete confirmation\n                        </DialogTitle>\n                        <DialogBody>Are you sure you want to delete?</DialogBody>\n                        <DialogFooter>\n                            <DialogCancel onClick={() => console.log(\"Cancel\")}>Cancel</DialogCancel>\n                            <DialogAccept onClick={() => console.log(\"Accept\")}>OK</DialogAccept>\n                        </DialogFooter>\n                    </Dialog>\n                    "))));
+}, {
+  info: {
+    propTables: [Dialog, DialogButton, DialogAccept, DialogCancel, DialogActions, DialogTitle, DialogContent]
+  }
+});

package/Dialog/README.md

@@ -0,0 +1,23 @@
+# Dialog
+
+### Design
+
+<a href="https://material.io/design/components/dialogs.html" target="_blank">https://material.io/design/components/dialogs.html</a>
+
+### Description
+
+Use `Dialog` component to display an informative or alert message and allow users to act upon it.
+
+### Import
+
+```js
+import {
+  Dialog,
+  DialogAccept,
+  DialogCancel,
+  DialogFooter,
+  DialogHeader,
+  DialogHeaderTitle,
+  DialogBody
+} from "@webiny/ui/Dialog";
+```

package/Dialog/index.d.ts

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

package/Dialog/index.js

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

package/Drawer/Drawer.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { DrawerProps as RmwcDrawerProps, DrawerHeaderProps as RmwcDrawerHeaderProps, DrawerContentProps as RmwcDrawerContentProps } from "@rmwc/drawer";
+declare type DrawerHeaderProps = RmwcDrawerHeaderProps & {
+    children: any;
+    className?: string;
+};
+/**
+ * Shows header of the drawer.
+ */
+declare const DrawerHeader: (props: DrawerHeaderProps) => JSX.Element;
+export declare type DrawerContentProps = RmwcDrawerContentProps & {
+    /**
+     * Drawer direction.
+     */
+    dir?: string;
+    /**
+     * Drawer content.
+     */
+    children: React.ReactNode;
+    /**
+     * CSS class name
+     */
+    className?: string;
+};
+/**
+ * Shows drawer content. It can be anything, but commonly a List component would suffice here.
+ */
+declare const DrawerContent: (props: DrawerContentProps) => JSX.Element;
+declare type DrawerProps = RmwcDrawerProps & {
+    /**
+     * Drawer direction.
+     */
+    dir?: string;
+    /**
+     * Drawer content.
+     */
+    children: React.ReactNode;
+    /**
+     * CSS class name
+     */
+    className?: string;
+};
+/**
+ * Use Drawer component to display navigation for the whole app or just a small section of it.
+ */
+declare const Drawer: (props: DrawerProps) => JSX.Element;
+export { Drawer, DrawerHeader, DrawerContent };

package/Drawer/Drawer.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Drawer as RmwcDrawer, DrawerContent as RmwcDrawerContent, DrawerHeader as RmwcDrawerHeader } from "@rmwc/drawer";
+
+/**
+ * Shows header of the drawer.
+ */
+var DrawerHeader = function DrawerHeader(props) {
+  return /*#__PURE__*/React.createElement(RmwcDrawerHeader, props);
+};
+
+/**
+ * Shows drawer content. It can be anything, but commonly a List component would suffice here.
+ */
+var DrawerContent = function DrawerContent(props) {
+  return /*#__PURE__*/React.createElement(RmwcDrawerContent, props);
+};
+
+/**
+ * Use Drawer component to display navigation for the whole app or just a small section of it.
+ */
+var Drawer = function Drawer(props) {
+  return /*#__PURE__*/React.createElement(RmwcDrawer, props);
+};
+
+export { Drawer, DrawerHeader, DrawerContent };

package/Drawer/Drawer.stories.d.ts

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

package/Drawer/Drawer.stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import { List, ListItem } from "./../List";
+import readme from "./../Drawer/README.md";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import { Drawer, DrawerHeader, DrawerContent } from "./Drawer";
+var story = storiesOf("Components/Drawer", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var open = boolean("Open", true);
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "drawer"
+  }, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "A list with all possible options"
+  }, /*#__PURE__*/React.createElement(Drawer, {
+    open: open
+  }, /*#__PURE__*/React.createElement(DrawerHeader, null, "Main Menu"), /*#__PURE__*/React.createElement(DrawerContent, null, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, "Users"), /*#__PURE__*/React.createElement(ListItem, null, "Companies"), /*#__PURE__*/React.createElement(ListItem, null, "Brands"), /*#__PURE__*/React.createElement(ListItem, null, "ACL"), /*#__PURE__*/React.createElement(ListItem, null, "Settings"))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Drawer>\n                        <DrawerHeader>Main Menu</DrawerHeader>\n                        <DrawerContent>\n                            <List>\n                                <ListItem>Users</ListItem>\n                                <ListItem>Companies</ListItem>\n                                <ListItem>Brands</ListItem>\n                                <ListItem>ACL</ListItem>\n                                <ListItem>Settings</ListItem>\n                            </List>\n                        </DrawerContent>\n                    </Drawer>\n                    ")));
+}, {
+  info: {
+    propTables: [Drawer, DrawerHeader, DrawerContent]
+  }
+});

package/Drawer/README.md

@@ -0,0 +1,15 @@
+# Drawer
+
+### Design
+
+<a href="https://material.io/design/components/navigation-drawer.html" target="_blank">https://material.io/design/components/navigation-drawer.html</a>
+
+### Description
+
+Use `Drawer` component to display navigation for the whole app or just a small section of it.
+
+### Import
+
+```js
+import { Drawer } from "@webiny/ui/Drawer";
+```

package/Drawer/index.d.ts

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

package/Drawer/index.js

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

package/DynamicFieldset/Fieldset.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+interface ChildrenRenderProp {
+    actions: {
+        add: Function;
+        remove: Function;
+    };
+    header: Function;
+    row: Function;
+    empty: Function;
+}
+declare type FieldsetProps = {
+    value?: Array<Object>;
+    description?: string;
+    validation?: {
+        isValid: null | boolean;
+        message?: string;
+    };
+    onChange?: Function;
+    children: (props: ChildrenRenderProp) => React.ReactNode;
+};
+declare class Fieldset extends React.Component<FieldsetProps> {
+    static defaultProps: {
+        value: any[];
+        description: any;
+    };
+    header: React.ReactNode;
+    rows: React.ReactNode;
+    empty: React.ReactNode;
+    actions: {
+        add: (index?: number) => () => void;
+        remove: (index?: number) => () => void;
+    };
+    removeData: (index: number) => void;
+    addData: (index?: number) => void;
+    renderHeader: (cb: () => React.ReactNode) => void;
+    renderRow: (cb: (params: Object) => React.ReactNode) => void;
+    renderEmpty: (cb: () => React.ReactNode) => void;
+    renderComponent(): {};
+    render(): JSX.Element;
+}
+export default Fieldset;

package/DynamicFieldset/Fieldset.js

@@ -0,0 +1,143 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 dotProp from "dot-prop-immutable";
+import { FormElementMessage } from "../FormElementMessage";
+import styled from "@emotion/styled";
+var DynamicFieldsetRow = /*#__PURE__*/styled("div", {
+  target: "eqcnudi0",
+  label: "DynamicFieldsetRow"
+})({
+  paddingBottom: 10,
+  "> .mdc-layout-grid": {
+    padding: 0
+  }
+});
+
+var Fieldset = /*#__PURE__*/function (_React$Component) {
+  _inherits(Fieldset, _React$Component);
+
+  var _super = _createSuper(Fieldset);
+
+  function Fieldset() {
+    var _this;
+
+    _classCallCheck(this, Fieldset);
+
+    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), "header", null);
+
+    _defineProperty(_assertThisInitialized(_this), "rows", null);
+
+    _defineProperty(_assertThisInitialized(_this), "empty", null);
+
+    _defineProperty(_assertThisInitialized(_this), "actions", {
+      add: function add() {
+        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+        return function () {
+          return _this.addData(index);
+        };
+      },
+      remove: function remove() {
+        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+        return function () {
+          return _this.removeData(index);
+        };
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "removeData", function (index) {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          onChange = _this$props.onChange;
+      onChange(dotProp.delete(value, index));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "addData", function () {
+      var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+      var _this$props2 = _this.props,
+          value = _this$props2.value,
+          onChange = _this$props2.onChange;
+
+      if (index < 0) {
+        onChange([].concat(_toConsumableArray(value), [{}]));
+      } else {
+        onChange([].concat(_toConsumableArray(value.slice(0, index + 1)), [{}], _toConsumableArray(value.slice(index + 1))));
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderHeader", function (cb) {
+      _this.header = cb();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderRow", function (cb) {
+      var value = _this.props.value;
+      _this.rows = value.map(function (record, index) {
+        return /*#__PURE__*/React.createElement(DynamicFieldsetRow, {
+          key: index
+        }, cb({
+          data: record,
+          index: index
+        }));
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderEmpty", function (cb) {
+      _this.empty = cb();
+    });
+
+    return _this;
+  }
+
+  _createClass(Fieldset, [{
+    key: "renderComponent",
+    value: function renderComponent() {
+      var value = this.props.value;
+      var children = this.props.children;
+      children({
+        actions: this.actions,
+        header: this.renderHeader,
+        row: this.renderRow,
+        empty: this.renderEmpty
+      });
+
+      if (value.length) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, this.header, this.rows);
+      }
+
+      return this.empty;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          description = _this$props3.description,
+          _this$props3$validati = _this$props3.validation,
+          validation = _this$props3$validati === void 0 ? {
+        isValid: null
+      } : _this$props3$validati;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderComponent(), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+    }
+  }]);
+
+  return Fieldset;
+}(React.Component);
+
+_defineProperty(Fieldset, "defaultProps", {
+  value: [],
+  description: null
+});
+
+export default Fieldset;

package/DynamicFieldset/index.d.ts

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

package/DynamicFieldset/index.js

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

package/Elevation/Elevation.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export declare type ElevationProps = {
+    children?: React.ReactNode;
+    z: number;
+    transition?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * Elevation component visually raises any content by applying shadow.
+ */
+declare const Elevation: React.ForwardRefExoticComponent<ElevationProps & React.RefAttributes<any>>;
+export { Elevation };

package/Elevation/Elevation.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Elevation as RmwcElevation } from "@rmwc/elevation";
+
+/**
+ * Elevation component visually raises any content by applying shadow.
+ */
+var Elevation = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(RmwcElevation, Object.assign({
+    ref: ref
+  }, props), props.children);
+});
+Elevation.displayName = "Elevation";
+export { Elevation };

package/Elevation/Elevation.stories.d.ts

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

package/Elevation/Elevation.stories.js

@@ -0,0 +1,29 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../Elevation/README.md";
+import { withKnobs, boolean, select } from "@storybook/addon-knobs";
+import { Elevation } from "./Elevation";
+var story = storiesOf("Components/Elevation", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var transition = boolean("Transition", true);
+  var z = select("Z (elevation height)", _toConsumableArray(Array(25).keys()), 1);
+  var style = {
+    padding: 20,
+    backgroundColor: "white"
+  };
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "An area with applied elevation"
+  }, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Elevation, {
+    z: z,
+    transition: transition
+  }, /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, "This is an elevated content."))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Elevation z={".concat(z, "} transition={").concat(transition, "}>\n                            <div>This is an elevated content.</div>\n                        </Elevation>\n                    "))));
+}, {
+  info: {
+    propTables: [Elevation]
+  }
+});

package/Elevation/README.md

@@ -0,0 +1,15 @@
+# Elevation
+
+### Design
+
+<a href="https://material.io/develop/web/components/elevation/" target="_blank">https://material.io/develop/web/components/elevation/</a>
+
+### Description
+
+`Elevation` component visually raises any content by applying shadow.
+
+### Import
+
+```js
+import { Elevation } from "@webiny/ui/Elevation";
+```

package/Elevation/index.d.ts

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

package/Elevation/index.js

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

package/FormElementMessage/FormElementMessage.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare type Props = {
+    children: React.ReactNode;
+    className?: string;
+    error?: boolean;
+};
+declare const FormElementMessage: (props: Props) => JSX.Element;
+export { FormElementMessage };

package/FormElementMessage/FormElementMessage.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import classnames from "classnames";
+
+var FormElementMessage = function FormElementMessage(props) {
+  var classNames = classnames("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", props.className, {
+    "mdc-text-field-helper-text--error": props.error
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames
+  }, props.children);
+};
+
+export { FormElementMessage };

package/FormElementMessage/index.d.ts

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

package/FormElementMessage/index.js

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

package/FullName/FullName.d.ts

@@ -0,0 +1,8 @@
+declare type Props = {
+    data?: {
+        firstName?: string;
+        lastName?: string;
+    };
+};
+declare const FullName: (props: Props) => string;
+export { FullName };

package/FullName/FullName.js

@@ -0,0 +1,21 @@
+var FullName = function FullName(props) {
+  var data = props.data;
+
+  if (!data) {
+    return "N/A";
+  }
+
+  var output = "";
+
+  if (data.firstName) {
+    output += data.firstName;
+  }
+
+  if (data.lastName) {
+    output += " " + data.lastName;
+  }
+
+  return output;
+};
+
+export { FullName };

package/FullName/README.md

@@ -0,0 +1,11 @@
+# FullName
+
+### Description
+
+Use `FullName` component to display first name and last name of users.
+
+### Import
+
+```js
+import { FullName } from "@webiny/ui/FullName";
+```

package/FullName/index.d.ts

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

package/FullName/index.js

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