From 23b4cd538053df91ee5a9b54b1b44ebd63752a95 Mon Sep 17 00:00:00 2001
From: Artem Tarasov <artem.tarasov@onlyoffice.com>
Date: Thu, 11 Mar 2021 19:03:17 +0300
Subject: [PATCH] Web: Components: added story for Toast

---
 .../asc-web-components/.storybook/main.js     |   1 +
 .../theme-provider/theme-provider.stories.js  |  92 --------
 .../toast/all.toast.stories.js                | 139 ------------
 packages/asc-web-components/toast/index.js    |   5 +
 .../asc-web-components/toast/toast.stories.js | 206 +++++++++++++-----
 .../toast/toast.stories.mdx                   |  81 +++++++
 6 files changed, 243 insertions(+), 281 deletions(-)
 delete mode 100644 packages/asc-web-components/toast/all.toast.stories.js
 create mode 100644 packages/asc-web-components/toast/toast.stories.mdx

diff --git a/packages/asc-web-components/.storybook/main.js b/packages/asc-web-components/.storybook/main.js
index a00dc4e1a0..406508e015 100644
--- a/packages/asc-web-components/.storybook/main.js
+++ b/packages/asc-web-components/.storybook/main.js
@@ -53,6 +53,7 @@ module.exports = {
     "../text-input/*.stories.@(js|mdx)",
     "../textarea/*.stories.@(js|mdx)",
     "../theme-provider/*.stories.@(js|mdx)",
+    "../toast/*.stories.@(js|mdx)",
   ],
   addons: [
     "@storybook/addon-links",
diff --git a/packages/asc-web-components/theme-provider/theme-provider.stories.js b/packages/asc-web-components/theme-provider/theme-provider.stories.js
index 28b56b3a86..d69a9e77ae 100644
--- a/packages/asc-web-components/theme-provider/theme-provider.stories.js
+++ b/packages/asc-web-components/theme-provider/theme-provider.stories.js
@@ -92,95 +92,3 @@ const DarkTemplate = (args) => {
   );
 };
 export const DarkTheme = DarkTemplate.bind({});
-
-/*
-import { storiesOf } from "@storybook/react";
-import ThemeProvider from ".";
-import withReadme from "storybook-readme/with-readme";
-import Readme from "./README.md";
-import { BooleanValue } from "react-values";
-import Box from "../Box";
-import Text from "../Text";
-import JSONPretty from "react-json-pretty";
-import Base from "../themes/base";
-import Heading from "../Heading";
-import Checkbox from "../Checkbox";
-
-const LightTheme = {
-  backgroundColor: "#FFF",
-  fontFamily: "sans-serif",
-  text: { color: "#333" },
-};
-
-const DarkTheme = {
-  backgroundColor: "#1F2933",
-  fontFamily: "Open Sans",
-  text: { color: "#E4E7EB" },
-};
-
-storiesOf("Components|ThemeProvider", module)
-  .addDecorator(withReadme(Readme))
-  .add("Default", () => (
-    <BooleanValue>
-      {({ value, toggle }) => (
-        <Box displayProp="flex" paddingProp="16px" alignItems="center">
-          <ThemeProvider theme={value ? DarkTheme : LightTheme}>
-            <Checkbox
-              checked={value}
-              onChange={(e) => toggle(e.target.value)}
-              label={value ? "Dark" : "Light"}
-            />
-          </ThemeProvider>
-        </Box>
-      )}
-    </BooleanValue>
-  ));
-storiesOf("Components|ThemeProvider", module)
-  .addParameters({ options: { showAddonPanel: false } })
-  .add("Base theme", () => {
-    const jsonTheme = {
-      main: "line-height:1.5;background:#FFF;overflow:auto;",
-      error: "line-height:1.5;background:#FFF;overflow:auto;",
-      key: "color:#444;",
-      string: "color:#00873D;",
-    };
-    return (
-      <ThemeProvider theme={LightTheme}>
-        <Box paddingProp={"16px"}>
-          <Heading>Base theme:</Heading>
-          <Text as="div" bold fontSize="14px">
-            <JSONPretty
-              id="json-pretty"
-              data={JSON.stringify(Base)}
-              theme={jsonTheme}
-            />
-          </Text>
-        </Box>
-      </ThemeProvider>
-    );
-  });
-storiesOf("Components|ThemeProvider", module)
-  .addParameters({ options: { showAddonPanel: false } })
-  .add("Dark theme", () => {
-    const jsonTheme = {
-      main: "line-height:1.5;background:#1F2933;overflow:auto;",
-      error: "line-height:1.5;background:#1F2933;overflow:auto;",
-      key: "color:#1F97CA;",
-      string: "color:#00873D;",
-    };
-    return (
-      <ThemeProvider theme={DarkTheme}>
-        <Box paddingProp={"16px"}>
-          <Heading>Dark theme:</Heading>
-          <Text as="div" bold color="#1F97CA" fontSize="14px">
-            <JSONPretty
-              id="json-pretty"
-              data={JSON.stringify(Dark)}
-              theme={jsonTheme}
-            />
-          </Text>
-        </Box>
-      </ThemeProvider>
-    );
-  });
-*/
diff --git a/packages/asc-web-components/toast/all.toast.stories.js b/packages/asc-web-components/toast/all.toast.stories.js
deleted file mode 100644
index 91cd8ac54e..0000000000
--- a/packages/asc-web-components/toast/all.toast.stories.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { storiesOf } from "@storybook/react";
-import Toast from ".";
-import toastr from "./toastr";
-import Link from "../link";
-
-class TostWrapper extends React.Component {
-  componentDidMount() {
-    this.toastContainer = document.createElement("div");
-    this.toastContainer.setAttribute("id", "toast-container");
-    document.body.appendChild(this.toastContainer);
-
-    ReactDOM.render(
-      <Toast />,
-      document.getElementById("toast-container"),
-      () => {
-        toastr.success(
-          "Demo text for success Toast closes in 30 seconds or on click",
-          null,
-          30000
-        );
-        toastr.error(
-          "Demo text for error Toast closes in 28 seconds or on click",
-          null,
-          28000
-        );
-        toastr.warning(
-          "Demo text for warning Toast closes in 25 seconds or on click",
-          null,
-          25000
-        );
-        toastr.info(
-          "Demo text for info Toast closes in 15 seconds or on click",
-          null,
-          15000
-        );
-        toastr.success(
-          "Demo text for success Toast with title closes in 12 seconds or on click",
-          "Demo title",
-          12000
-        );
-        toastr.error(
-          "Demo text for error Toast with title closes in 10 seconds or on click",
-          "Demo title",
-          10000
-        );
-        toastr.warning(
-          "Demo text for warning Toast with title closes in 8 seconds or on click",
-          "Demo title",
-          8000
-        );
-        toastr.info(
-          "Demo text for info Toast with title closes in 6 seconds or on click",
-          "Demo title",
-          6000
-        );
-        toastr.success(
-          "Demo text for success manual closed Toast",
-          null,
-          0,
-          true,
-          true
-        );
-        toastr.error(
-          "Demo text for error manual closed Toast",
-          null,
-          0,
-          true,
-          true
-        );
-        toastr.warning(
-          "Demo text for warning manual closed Toast",
-          null,
-          0,
-          true,
-          true
-        );
-        toastr.info(
-          "Demo text for info manual closed Toast",
-          null,
-          0,
-          true,
-          true
-        );
-        toastr.success(
-          <>
-            Demo text for success manual closed Toast with title and contains{" "}
-            <Link
-              type="page"
-              color="gray"
-              href="https://github.com"
-              text="gray link"
-            />
-          </>,
-          "Demo title",
-          0,
-          true,
-          true
-        );
-        toastr.error(
-          "Demo text for error manual closed Toast with title",
-          "Demo title",
-          0,
-          true,
-          true
-        );
-        toastr.warning(
-          "Demo text for warning manual closed Toast with title",
-          "Demo title",
-          0,
-          true,
-          true
-        );
-        toastr.info(
-          "Demo text for info manual closed Toast with title",
-          "Demo title",
-          0,
-          true,
-          true
-        );
-      }
-    );
-  }
-
-  componentWillUnmount() {
-    toastr.clear();
-    ReactDOM.unmountComponentAtNode(this.toastContainer);
-    document.body.removeChild(this.toastContainer);
-  }
-
-  render() {
-    return <></>;
-  }
-}
-
-storiesOf("Components|Toast", module)
-  .addParameters({ options: { showAddonPanel: false } })
-  .add("all", () => <TostWrapper />);
diff --git a/packages/asc-web-components/toast/index.js b/packages/asc-web-components/toast/index.js
index 0cec0fa0e9..50f5b7e9ee 100644
--- a/packages/asc-web-components/toast/index.js
+++ b/packages/asc-web-components/toast/index.js
@@ -37,11 +37,16 @@ const Toast = (props) => {
 
 Toast.propTypes = {
   autoClosed: PropTypes.bool,
+  /** Accepts class  */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style  */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   text: PropTypes.string,
+  /** Title inside a toast */
   title: PropTypes.string,
+  /** Define color and icon of toast */
   type: PropTypes.oneOf(["success", "error", "warning", "info"]).isRequired,
 };
 
diff --git a/packages/asc-web-components/toast/toast.stories.js b/packages/asc-web-components/toast/toast.stories.js
index 498d458255..a4be4d33a4 100644
--- a/packages/asc-web-components/toast/toast.stories.js
+++ b/packages/asc-web-components/toast/toast.stories.js
@@ -1,54 +1,160 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Toast from ".";
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
+import Toast from "./";
 import toastr from "./toastr";
-import Readme from "./README.md";
-import {
-  text,
-  boolean,
-  withKnobs,
-  select,
-  number,
-} from "@storybook/addon-knobs/react";
-import withReadme from "storybook-readme/with-readme";
-import Section from "../../../.storybook/decorators/section";
+import Button from "../button";
+import Link from "../link";
 
-const typeToast = ["success", "error", "warning", "info"];
+const BaseTemplate = ({ type, data, title, timeout, withCross, ...args }) => {
+  return (
+    <>
+      <Toast {...args} />
+      <Button
+        label="Show toast"
+        primary
+        size="medium"
+        onClick={() => {
+          switch (type) {
+            case "error":
+              toastr.error(data, title, timeout, withCross);
+              break;
+            case "warning":
+              toastr.warning(data, title, timeout, withCross);
+              break;
+            case "info":
+              toastr.info(data, title, timeout, withCross);
+              break;
+            default:
+              toastr.success(data, title, timeout, withCross);
+              break;
+          }
+        }}
+      />
+    </>
+  );
+};
 
-storiesOf("Components|Toast", module)
-  .addDecorator(withKnobs)
-  .addDecorator(withReadme(Readme))
-  .add("base", () => {
-    const type = `${select("type", typeToast, "success")}`;
-    const data = `${text("data", "Demo text for Toast")}`;
-    const title = `${text("title", "Demo title")}`;
-    const withCross = boolean("withCross", false);
-    const timeout = number("timeout", "5000");
-    return (
-      <>
-        <Toast />
-        <Section>
-          <button
-            onClick={() => {
-              switch (type) {
-                case "error":
-                  toastr.error(data, title, timeout, withCross);
-                  break;
-                case "warning":
-                  toastr.warning(data, title, timeout, withCross);
-                  break;
-                case "info":
-                  toastr.info(data, title, timeout, withCross);
-                  break;
-                default:
-                  toastr.success(data, title, timeout, withCross);
-                  break;
-              }
-            }}
-          >
-            Show toast
-          </button>
-        </Section>
-      </>
+export const basic = BaseTemplate.bind({});
+basic.args = {
+  type: "success",
+  data: "Demo text for Toast",
+  title: "Demo title",
+  withCross: false,
+  timeout: 5000,
+};
+
+const AllTemplate = (args) => {
+  const renderAllToast = () => {
+    toastr.success(
+      "Demo text for success Toast closes in 30 seconds or on click",
+      null,
+      30000
     );
-  });
+    toastr.error(
+      "Demo text for error Toast closes in 28 seconds or on click",
+      null,
+      28000
+    );
+    toastr.warning(
+      "Demo text for warning Toast closes in 25 seconds or on click",
+      null,
+      25000
+    );
+    toastr.info(
+      "Demo text for info Toast closes in 15 seconds or on click",
+      null,
+      15000
+    );
+    toastr.success(
+      "Demo text for success Toast with title closes in 12 seconds or on click",
+      "Demo title",
+      12000
+    );
+    toastr.error(
+      "Demo text for error Toast with title closes in 10 seconds or on click",
+      "Demo title",
+      10000
+    );
+    toastr.warning(
+      "Demo text for warning Toast with title closes in 8 seconds or on click",
+      "Demo title",
+      8000
+    );
+    toastr.info(
+      "Demo text for info Toast with title closes in 6 seconds or on click",
+      "Demo title",
+      6000
+    );
+    toastr.success(
+      "Demo text for success manual closed Toast",
+      null,
+      0,
+      true,
+      true
+    );
+    toastr.error(
+      "Demo text for error manual closed Toast",
+      null,
+      0,
+      true,
+      true
+    );
+    toastr.warning(
+      "Demo text for warning manual closed Toast",
+      null,
+      0,
+      true,
+      true
+    );
+    toastr.info("Demo text for info manual closed Toast", null, 0, true, true);
+    toastr.success(
+      <>
+        Demo text for success manual closed Toast with title and contains{" "}
+        <Link
+          type="page"
+          color="gray"
+          href="https://github.com"
+          text="gray link"
+        />
+      </>,
+      "Demo title",
+      0,
+      true,
+      true
+    );
+    toastr.error(
+      "Demo text for error manual closed Toast with title",
+      "Demo title",
+      0,
+      true,
+      true
+    );
+    toastr.warning(
+      "Demo text for warning manual closed Toast with title",
+      "Demo title",
+      0,
+      true,
+      true
+    );
+    toastr.info(
+      "Demo text for info manual closed Toast with title",
+      "Demo title",
+      0,
+      true,
+      true
+    );
+  };
+  return (
+    <>
+      <Toast />
+      <Button
+        label="Show all toast"
+        primary
+        size="medium"
+        onClick={() => renderAllToast()}
+      />
+    </>
+  );
+};
+
+export const all = AllTemplate.bind({});
diff --git a/packages/asc-web-components/toast/toast.stories.mdx b/packages/asc-web-components/toast/toast.stories.mdx
new file mode 100644
index 0000000000..e2423070fb
--- /dev/null
+++ b/packages/asc-web-components/toast/toast.stories.mdx
@@ -0,0 +1,81 @@
+import { Story, ArgsTable, Canvas, Meta } from "@storybook/addon-docs/blocks";
+import * as stories from "./toast.stories.js";
+
+import Toast from "./";
+
+<Meta
+  title="Components/Toast"
+  component={Toast}
+  parameters={{
+    source: {
+      code: stories.basic,
+    },
+  }}
+  argTypes={{
+    timeout: {
+      description: `Time (in milliseconds) for showing your toast. Setting in \`0\` let you to show toast constantly until clicking on it`,
+    },
+    data: { description: "Any components or data inside a toast" },
+    withCross: {
+      description: `If \`false\`: toast disappeared after clicking on any area of toast. If \`true\`: toast disappeared after clicking on close button`,
+    },
+  }}
+/>
+
+# Toast
+
+Toast allow you to add notification to your page with ease.
+
+`<Toast />` is container for your notification. Remember to render the `<Toast />` _once_ in your application tree. If you can't figure out where to put it, rendering it in the application root would be the best bet.
+
+`toastr` is a function for showing notifications.
+
+<Canvas>
+  <Story story={stories.basic} name="Default" />
+</Canvas>
+
+<ArgsTable story="Default" />
+
+<Canvas>
+  <Story story={stories.all} name="All" />
+</Canvas>
+
+### Usage
+
+```js
+import Toast from "@appserver/components/toast";
+import toastr from "@appserver/components/toast/toastr";
+```
+
+```jsx
+<Toast />
+<button onClick={() => toastr.success('Some text for toast', 'Some text for title', true)}>Click</button>
+```
+
+or
+
+```jsx
+<Toast>{toastr.success("Some text for toast")}</Toast>
+```
+
+You can use simple html tags. For this action you should wrap your message by empty tags:
+
+```jsx
+<Toast />
+<button onClick={() => toastr.success(<>You have <b>bold text</b></>)}>Click</button>
+```
+
+If your notification include only text in html tags or data in JSX tags, you can omit empty tags:
+
+```jsx
+<Toast />
+<button onClick={() => toastr.success(<b>Bold text</b>)}>Click</button>
+```
+
+#### Other Options
+
+```js
+<Toast/>
+    // Remove all toasts in your page programmatically
+<button onClick = {()=> { toastr.clear() }}>Clear</button>
+```