@webiny/ui 0.0.0-mt-1

package/Grid/Grid.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { GridCellProps as RmwcGridCellProps, GridProps as RmwcGridProps } from "@rmwc/grid";
+import { CSSProperties } from "react";
+export declare type CellProps = RmwcGridCellProps & {
+    children?: React.ReactNode;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+};
+export declare type GridProps = RmwcGridProps & {
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Cell must be direct children of Grid component.
+ */
+export declare const Cell: (props: CellProps) => JSX.Element;
+export declare type GridInnerProps = {
+    children: React.ReactElement<typeof Cell> | React.ReactElement<typeof Cell>[];
+    /**
+     * CSS class name
+     */
+    className?: string;
+};
+export declare const GridInner: {
+    (props: GridInnerProps): JSX.Element;
+    displayName: string;
+};
+/**
+ * Use Grid component to display a list of choices, once the handler is triggered.
+ */
+export declare const Grid: (props: GridProps) => JSX.Element;

package/Grid/Grid.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Grid as RmwcGrid, GridCell as RmwcGridCell, GridInner as RmwcGridInner } from "@rmwc/grid";
+
+/**
+ * Cell must be direct children of Grid component.
+ */
+export var Cell = function Cell(props) {
+  return /*#__PURE__*/React.createElement(RmwcGridCell, props, props.children);
+};
+export var GridInner = function GridInner(props) {
+  return /*#__PURE__*/React.createElement(RmwcGridInner, props, props.children);
+};
+GridInner.displayName = "GridInner";
+/**
+ * Use Grid component to display a list of choices, once the handler is triggered.
+ */
+
+export var Grid = function Grid(props) {
+  return /*#__PURE__*/React.createElement(RmwcGrid, props, props.children);
+};

package/Grid/Grid.stories.d.ts

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

package/Grid/Grid.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
+import readme from "./../Grid/README.md";
+import { Grid, Cell } from "./Grid";
+var story = storiesOf("Components/Grid", module);
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "A simple grid."
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+    span: 3,
+    tablet: 6,
+    phone: 12
+  }, "Apples"), /*#__PURE__*/React.createElement(Cell, {
+    span: 3,
+    tablet: 6,
+    phone: 12
+  }, "Oranges"), /*#__PURE__*/React.createElement(Cell, {
+    span: 3,
+    tablet: 6,
+    phone: 12
+  }, "Bananas"), /*#__PURE__*/React.createElement(Cell, {
+    span: 3,
+    tablet: 6,
+    phone: 12
+  }, "Strawberries"))));
+}, {
+  info: {
+    propTables: [Grid, Cell]
+  }
+});

package/Grid/README.md

@@ -0,0 +1,15 @@
+# Grid
+
+### Design
+
+<a href="https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins" target="_blank">https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins</a>
+
+### Description
+
+Use `Grid` and `Cell` components to display content and UI in an organized and responsive way.
+
+### Import
+
+```js
+import `{ Grid, Cell }` from "@webiny/ui/Grid";
+```

package/Grid/index.d.ts

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

package/Grid/index.js

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

package/Helpers/ClassNames.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This is a pass-through that modifies your object's props and creates the required className prop by merging
+ * the provided appendClasses(string) and any class names defined inside your props.
+ * To you the function just do: {...getClasses (props)}
+ * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.
+ * @param {*} propList
+ * @param {*} appendClasses
+ */
+declare const getClasses: (propList: any, appendClasses: any) => any;
+export { getClasses };

package/Helpers/ClassNames.js

@@ -0,0 +1,30 @@
+import _clone from "lodash/clone";
+import classnames from "classnames";
+
+/**
+ * This is a pass-through that modifies your object's props and creates the required className prop by merging
+ * the provided appendClasses(string) and any class names defined inside your props.
+ * To you the function just do: {...getClasses (props)}
+ * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.
+ * @param {*} propList
+ * @param {*} appendClasses
+ */
+var getClasses = function getClasses(propList, appendClasses) {
+  var classes = {};
+
+  var props = _clone(propList);
+
+  if (propList.hasOwnProperty("className")) {
+    classes = classnames(propList.className);
+    delete props.className;
+  }
+
+  if (typeof appendClasses !== "undefined") {
+    classes = classnames(classes, appendClasses);
+  }
+
+  props.className = classes;
+  return props;
+};
+
+export { getClasses };

package/Helpers/index.d.ts

@@ -0,0 +1,2 @@
+import { getClasses } from "./ClassNames";
+export { getClasses };

package/Helpers/index.js

@@ -0,0 +1,2 @@
+import { getClasses } from "./ClassNames";
+export { getClasses };

package/Icon/Icon.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export declare type IconProps = {
+    /**
+     * SvgComponent containing the svg icon
+     */
+    icon: React.ReactElement<any>;
+    /**
+     * Optional onclick handler
+     */
+    onClick?: Function;
+    /**
+     * CSS class to be added to the icon
+     */
+    className?: string;
+    "data-testid"?: string;
+};
+/**
+ * Use Icon component to display an icon.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+declare const Icon: (props: IconProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+export { Icon };

package/Icon/Icon.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { css } from "emotion";
+import classNames from "classnames";
+var webinyIcon = /*#__PURE__*/css({}, {
+  "&.mdc-button__icon": {
+    marginLeft: 0,
+    width: "inherit",
+    display: "block"
+  }
+}, "label:webinyIcon;");
+/**
+ * Use Icon component to display an icon.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+
+var Icon = function Icon(props) {
+  return /*#__PURE__*/React.cloneElement(props.icon, {
+    "data-testid": props["data-testid"],
+    className: classNames("mdc-button__icon webiny-ui-icon", webinyIcon, props.className),
+    onClick: props.onClick
+  });
+};
+
+export { Icon };

package/Icon/Icon.stories.d.ts

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

package/Icon/Icon.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 "./../Icon/README.md";
+import { ReactComponent as AutoRenewIcon } from "@svgr/webpack!./svg/baseline-autorenew-24px.svg";
+import { ReactComponent as CloudDoneIcon } from "@svgr/webpack!./svg/baseline-cloud_done-24px.svg";
+import { ReactComponent as BaselineDeleteIcon } from "@svgr/webpack!./svg/baseline-delete-24px.svg";
+import { ReactComponent as BaselineDoneIcon } from "@svgr/webpack!./svg/baseline-done-24px.svg";
+import { Icon } from "./Icon";
+var story = storiesOf("Components/Icon", module);
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "A simple icon"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
+  }), "\xA0", /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(CloudDoneIcon, null)
+  }), "\xA0", /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
+  }), "\xA0", /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
+  }), "\xA0")));
+}, {
+  info: {
+    propTables: [Icon]
+  }
+});

package/Icon/README.md

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

package/Icon/index.d.ts

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

package/Icon/index.js

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

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

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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/Icon/svg/baseline-cloud_done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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/Icon/svg/baseline-delete-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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/Icon/svg/baseline-done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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/Image/Image.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    [key: string]: any;
+};
+declare const Image: ({ ...rest }: Props) => JSX.Element;
+export { Image };

package/Image/Image.js

@@ -0,0 +1,18 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import * as React from "react"; // Accepts all props that a normal <img> element would accept.
+
+var Image = function Image(_ref) {
+  var rest = Object.assign({}, _ref);
+
+  var finalProps = _objectSpread({}, rest);
+
+  if (finalProps.srcSet && typeof finalProps.srcSet === "object") {
+    finalProps.srcSet = Object.keys(finalProps.srcSet).map(function (key) {
+      return "".concat(finalProps.srcSet[key], " ").concat(key);
+    }).join(", ");
+  }
+
+  return /*#__PURE__*/React.createElement("img", finalProps);
+};
+
+export { Image };

package/Image/Image.stories.d.ts

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

package/Image/Image.stories.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../Image/README.md";
+import { withKnobs } from "@storybook/addon-knobs";
+import { Image } from "./Image";
+var story = storiesOf("Components/Image", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  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(Image, {
+    src: "http://i.pravatar.cc/150?img=49",
+    alt: "Nice image."
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement(Image, {
+    src: "http://i.pravatar.cc/150?img=49",
+    alt: "Nice image."
+  }))));
+}, {
+  info: {
+    propTables: [Image]
+  }
+});

package/Image/README.md

@@ -0,0 +1,12 @@
+# Image
+
+### Description
+
+Use `Image` component instead of plain `<img>` element to display images more efficiently. Internally it uses
+`react-image` component.
+
+### Import
+
+```js
+import { Image } from "@webiny/ui/Image";
+```

package/Image/index.d.ts

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

package/Image/index.js

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

package/ImageEditor/ImageEditor.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { ImageEditorTool } from "./toolbar/types";
+export declare type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
+declare type RenderPropArgs = {
+    render: Function;
+    getCanvasDataUrl: () => string;
+    activeTool?: ImageEditorTool;
+    applyActiveTool: Function;
+    cancelActiveTool: Function;
+};
+declare type Props = {
+    src: string;
+    tools: ToolbarTool[];
+    options?: {
+        [key: string]: any;
+    };
+    onToolActivate?: Function;
+    onToolDeactivate?: Function;
+    children?: (props: RenderPropArgs) => React.ReactNode;
+};
+declare type State = {
+    tool?: {
+        [key: string]: any;
+    };
+    src: string;
+};
+declare class ImageEditor extends React.Component<Props, State> {
+    static defaultProps: {
+        tools: string[];
+    };
+    state: {
+        tool: any;
+        src: string;
+    };
+    canvas: React.RefObject<unknown>;
+    image: any;
+    componentDidMount(): void;
+    updateCanvas: () => void;
+    activateTool: (tool: string | ImageEditorTool) => void;
+    deactivateTool: () => void;
+    getCanvasDataUrl: () => string;
+    applyActiveTool: () => Promise<void>;
+    cancelActiveTool: () => Promise<void>;
+    getToolOptions: (tool: ImageEditorTool) => any;
+    render(): {};
+}
+export { ImageEditor };