Add Common Components in Docs (#3046)

docs/docs/components/Button/buttons.js

@@ -0,0 +1,84 @@
+import React from "react";
+import Button from "erxes-ui/lib/components/Button";
+import styles from "../../../src/components/styles.module.css";
+import CodeBlock from "@theme/CodeBlock";
+import { renderApiTable, stringify } from "../common.js";
+import "erxes-icon/css/erxes.min.css";
+
+export function ButtonComponent(props) {
+  const { type, buttons = [], icons = [], table = [] } = props;
+
+  const propDatas = (propName, btn, icon, index) => {
+    const kind = {
+      [propName]:
+        propName === "btnStyle" || propName === "size"
+          ? btn.toLowerCase()
+          : true,
+    };
+
+    const datas = {
+      ...kind,
+      icon: icon && icons[index],
+    };
+
+    return datas;
+  };
+
+  const renderBlock = (propName, defaultBtn, icon) => {
+    return (
+      <>
+        <div className={styles.styled}>
+          {defaultBtn && <Button>{defaultBtn}</Button>}
+
+          {buttons.map((btn, index) => {
+            return (
+              <Button key={index} {...propDatas(propName, btn, icon, index)}>
+                {btn}
+              </Button>
+            );
+          })}
+        </div>
+
+        <CodeBlock className="language-jsx">
+          {`<>${
+            defaultBtn ? `\n\t<Button>${defaultBtn}</Button>` : ``
+          }${buttons.map((btn, index) => {
+            return `\n\t<Button ${stringify(
+              propDatas(propName, btn, icon, index)
+            )} >${btn}</Button>`;
+          })}\n</>`}
+        </CodeBlock>
+      </>
+    );
+  };
+
+  if (type === "btnStyle") {
+    return renderBlock("btnStyle", "Default");
+  }
+
+  if (type === "size") {
+    return renderBlock("size");
+  }
+
+  if (type === "disabled") {
+    return renderBlock("disabled", "Normal");
+  }
+
+  if (type === "uppercase") {
+    return renderBlock("uppercase", "Normal");
+  }
+
+  if (type === "block") {
+    return renderBlock("block");
+  }
+
+  if (type === "icon") {
+    return renderBlock("btnStyle", "", "icon");
+  }
+
+  if (type === "APIbutton") {
+    return renderApiTable("Button", table);
+  }
+
+  return null;
+}

docs/docs/components/Button/buttons.md

@@ -0,0 +1,53 @@
+---
+id: buttons
+title: Buttons
+---
+
+import { ButtonComponent } from "./buttons.js"
+
+<p>Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
+
+## Examples
+
+### Types
+
+<p>Use any of the available button style types to quickly create a styled button. Just modify the <code>btnStyle</code> prop.</p>
+<ButtonComponent type="btnStyle" buttons={['Primary', 'Success', 'Danger', 'Warning', 'Simple', 'Link']} />
+
+### Sizes
+
+<p>Larger or smaller buttons? Add <code>size</code> for additional sizes.</p>
+<ButtonComponent type="size" buttons={['Large', 'Medium', 'Small']} />
+
+## Disabled state
+
+<p>Make buttons look inactive by adding the <code>disabled</code> prop to.</p>
+<ButtonComponent type="disabled" buttons={['Disabled']} />
+
+## Uppercase
+
+<p>Make button text uppercase by adding the <code>uppercase</code> prop to.</p>
+<ButtonComponent type="uppercase" buttons={['Uppercase']} />
+
+## Block
+
+<p>Make button full-width by adding the <code>block</code> prop to.</p>
+<ButtonComponent type="block" buttons={['Block']} />
+
+## Icon
+
+<p>Add your favorite icon by using the <code>icon</code> prop.</p>
+<ButtonComponent type="icon" buttons={['Primary', 'Success', 'Danger', 'Warning', 'Simple', 'Link']} icons={['envelope-alt', 'check-circle', 'times-circle', 'exclamation-triangle', 'info-circle', 'link']} />
+
+## API
+
+<ButtonComponent type="APIbutton" table={[
+    ['href', 'string', '', 'Defines a hyperlink'],
+    ['type', 'string', 'button', 'Defines HTML button type attribute'],
+    ['btnStyle', 'primary | success | danger | warning | simple | link', 'default', 'One or more button style combinations'],
+    ['size', 'large | medium | small', 'medium', 'Specifies a large or small button'],
+    ['disabled', 'boolean', 'false', 'Disables the Button'],
+    ['block', 'boolean', 'false', 'Makes the button full-width'],
+    ['icon', 'string', '', 'Shows icon'],
+    ['uppercase', 'boolean', 'false', 'Makes the button text uppercase']
+]} />

docs/docs/components/EmptyState/emptystate.js

@@ -0,0 +1,63 @@
+import React from "react";
+import EmptyState from "erxes-ui/lib/components/EmptyState";
+import CodeBlock from "@theme/CodeBlock";
+import "erxes-icon/css/erxes.min.css";
+import { renderApiTable, stringify } from "../common.js";
+
+export function EmptyComponents(props) {
+  const { type, table = [], item } = props;
+
+  const propDatas = (view, style, additional) => {
+    const styling = style === "size" ? "30" : true;
+
+    const kind = {
+      [view]: view === "icon" || view === "image" ? item : true,
+      [style]: style && styling,
+    };
+
+    const datas = {
+      ...kind,
+      text: "Text",
+      extra: additional && "Extra text",
+    };
+
+    return datas;
+  };
+
+  const renderBlock = (view, style, additional) => {
+    return (
+      <>
+        <EmptyState {...propDatas(view, style, additional)} />
+        <CodeBlock className="language-jsx">
+          {`<>\n\t<EmptyState ${stringify(propDatas(view, style, additional))} />\n</>`}
+        </CodeBlock>
+      </>
+    );
+  };
+
+  if (type === "simple") {
+    return renderBlock("icon");
+  }
+
+  if (type === "size") {
+    return renderBlock("icon", "size");
+  }
+
+  if (type === "image") {
+    return renderBlock("image");
+  }
+
+  if (type === "light") {
+    return renderBlock("icon", "light");
+  }
+
+  if (type === "extra") {
+    return renderBlock("icon", "size", "extra");
+  }
+
+  if (type === "APIempty") {
+    return renderApiTable("EmptyState", table);
+  }
+
+  return null;
+}

docs/docs/components/EmptyState/emptystate.md

@@ -0,0 +1,40 @@
+---
+id: emptystate
+title: Empty State
+---
+
+import { EmptyComponents } from './emptystate.js'
+
+<p>Empty state with <code>icon</code> and <code>text</code> props.</p>
+<EmptyComponents type="simple" item="info-circle" />
+
+## Light
+
+<p>Make your text invisible by using <code>light</code> prop. </p>
+<EmptyComponents type="light" item="info-circle" />
+
+## Icon size
+
+<p>You can change the size of icon with <code>size</code> prop. </p>
+<EmptyComponents type="size" item="info-circle" size="30" />
+
+## Image
+
+<p>Replace the icon with image by <code>image</code> prop.</p>
+<EmptyComponents type="image" item="https://erxes.io/static/images/logo/logo_dark.svg" />
+
+## Extra
+
+<p>You can add extra item (text, number, tags, etc) to your empty state with <code>extra</code> prop.</p>
+<EmptyComponents type="extra" item="info-circle" />
+
+## API
+
+<EmptyComponents type="APIempty" table={[
+    ['text', 'string', "", 'Shows your text. If you want to show only text, use it with light prop'],
+    ['icon', 'string', "", 'Shows icon'],
+    ['image', 'string', "", 'Shows image'],
+    ['size', 'string', "", 'Changes the size of icon'],
+    ['extra', 'node', "", 'Adds other components or text'],
+    ['light', 'boolean', "", 'Show only first row']
+]} />

docs/docs/components/ErrorMsg/errormsg.js

@@ -0,0 +1,26 @@
+import React from "react";
+import ErrorMsg from "erxes-ui/lib/components/ErrorMsg";
+import CodeBlock from "@theme/CodeBlock";
+import "erxes-icon/css/erxes.min.css";
+import { renderApiTable } from "../common.js";
+
+export function ErrorMsgComponent(props) {
+  const { table = [], children } = props;
+
+  if (children) {
+    return (
+      <>
+        <ErrorMsg children={children} />
+        <CodeBlock className="language-jsx">
+          {`<ErrorMsg children="${children}"/>`}
+        </CodeBlock>
+      </>
+    );
+  }
+
+  if (table) {
+    return renderApiTable("ErrorMsg", table);
+  }
+
+  return null;
+}

docs/docs/components/ErrorMsg/errormsg.md

@@ -0,0 +1,18 @@
+---
+id: errormsg
+title: Error message
+---
+
+import { ErrorMsgComponent } from "./errormsg.js"
+
+<p>Provide Error message to indicate an error that occurred.</p>
+
+## Example
+
+<ErrorMsgComponent children="This is error" />
+
+## API
+
+<ErrorMsgComponent table={[
+  ['children', 'string', '', 'your error message' ]
+]} />

docs/docs/components/Info/info.js

@@ -0,0 +1,58 @@
+import React from "react";
+import Info from "erxes-ui/lib/components/Info";
+import CodeBlock from "@theme/CodeBlock";
+import "erxes-icon/css/erxes.min.css";
+import { renderApiTable, stringify } from "../common.js";
+
+export function InfoComponent(props) {
+  const { func, table = [] } = props;
+  const types = ["Primary", "Info", "Danger", "Warning", "Success"];
+  const title = ["Primary", "Info", "Danger", "Warning", "Success"];
+
+  const propDatas = (type, iconShow, index) => {
+    const datas = {
+      iconShow: iconShow && true,
+      type: type.toLowerCase(),
+      title: title[index],
+    };
+
+    return datas;
+  };
+
+  const renderBlock = (type, iconShow) => {
+    return (
+      <>
+        <div>
+          {types.map((type, index) => {
+            return (
+              <Info key={index} {...propDatas(type, iconShow, index)}>
+                {type}
+              </Info>
+            );
+          })}
+        </div>
+
+        <CodeBlock className="language-jsx">
+          {`<>\t${types.map((type, index) => {
+            return `\n\t<Info ${stringify(
+              propDatas(type, iconShow, index)
+            )} >${type}</Info>`;
+          })}\n</>`}
+        </CodeBlock>
+      </>
+    );
+  };
+
+  if (func === "infos") {
+    return renderBlock("type");
+  }
+
+  if (func === "icon") {
+    return renderBlock("type", "iconShow");
+  }
+
+  if (func === "APIinfo") {
+    return renderApiTable("Info", table);
+  }
+  return null;
+}

docs/docs/components/Info/info.md

@@ -0,0 +1,27 @@
+---
+id: info
+title: Info
+---
+
+import { InfoComponent } from './info.js'
+
+<p>Provide contextual messages for typical user actions with info messages.</p>
+
+## Examples
+
+<p>Infos are available for any length of text. Just choose one of the five variants and modify the{" "} <code>type</code> prop. And write your own title by using <code>title</code> prop.</p>
+<b>Primary is set by default.</b>
+<InfoComponent func="infos" />
+
+## Icon
+
+<p>Add icons using <code>iconShow</code> prop.</p>
+<InfoComponent func="icon" />
+
+## API
+
+<InfoComponent func="APIinfo" table={[
+    ['type', 'primary | info | danger | warning | success', 'primary', 'Set type of info'],
+    ['iconShow', 'boolean', '', 'Shows icon depending on the info type'],
+    ['title', 'string', '', 'Shows title on top of the info']
+]} />