Merge pull request #142 from feisk/feature/BOST-30_implement_componen…

…ts_for_api_documentation_ui

BOST-30 feat: added Informer component; changed links colorg

docs/Account/2. Add exchange account.mdx

@@ -5,6 +5,7 @@ import ApiParam from '@site/src/components/ApiParam';
 import { CollapseAll, CollapseAllButton, CollapseAllHeading } from '@site/src/components/CollapseAll';
 import * as StickyLayout from '@site/src/components/StickyLayout';
 import * as ResponseTabs from '@site/src/components/ResponseTabs';
+import { Informer } from '@site/src/components/Informer/Informer'
 
 <Endpoint
   url="/ver1/accounts/new"
@@ -19,9 +20,9 @@ import * as ResponseTabs from '@site/src/components/ResponseTabs';
 
 Adds a new exchange account. 
 
-<div class="alert alert--warning" role="alert">
-Please note that connections using manually created API keys are available only to Expert plan subscribers and exclusively for Binance sub-accounts.
-</div>
+<Informer variant="warning">
+   Please note that connections using manually created API keys are available only to Expert plan subscribers and exclusively for Binance sub-accounts.
+</Informer>
 
 
 <StickyLayout.Root>

docs/General information/4. Get an API key.mdx

@@ -1,3 +1,5 @@
+import { Informer } from '@site/src/components/Informer/Informer'
+
 ## Ways to generate API Key
 
 We offer two ways to generate API Key:
@@ -15,15 +17,13 @@ To create and manage an API Key, [sign in](https://app.3commas.io/en/auth/login)
 
 On the page, click the **<span style={{ color: "green" }}>New API access token</span>** button and select the method for generating the API Key. Then, complete the form fields. If you select Self-generated, you need to provide an RSA Private Key.
 
-
-
-<div className="alert alert--info" role="alert" style={{ marginBottom: '20px', marginTop: '20px' }}>
+<Informer variant="info">
   For instructions on how to generate an RSA Private Key, refer to the article <a href="/docs/General20%information/5.20%How20%to20%create20%a20%RSA20%Key20%pair.mdx"> How to create an RSA Key pair</a>
-</div>
+</Informer>
 
 Select the appropriate permissions for the API Key and create your API Key.
 
-<div className="alert alert--danger" role="alert" style={{ marginBottom: '20px', marginTom: '20px', }}>
+<Informer variant="danger">
     After creating an API Key, store the information securely.
-</div>
+</Informer>
 

docs/Grid Bot/10. Required balances for launch.mdx

@@ -5,6 +5,7 @@ import ApiParam from '@site/src/components/ApiParam';
 import { CollapseAll, CollapseAllButton, CollapseAllHeading } from '@site/src/components/CollapseAll';
 import * as StickyLayout from '@site/src/components/StickyLayout'
 import * as ResponseTabs from '@site/src/components/ResponseTabs'
+import { Informer } from '@site/src/components/Informer/Informer'
 
 <Endpoint
   url="/ver1/grid_bots/:id/required_balances"
@@ -19,9 +20,9 @@ import * as ResponseTabs from '@site/src/components/ResponseTabs'
 
 Returns the amount of funds required to launch the Grid Bot and details about the current balance state.
 
-<div class="alert alert--danger" role="alert" style={{ margin: '30px 20px 20px 0px', padding: '15px' }}>
+<Informer variant="danger">
 This endpoint works only for the spot exchange.
-</div>
+</Informer>
 
 <StickyLayout.Root>
 <StickyLayout.Main>

docs/Grid Bot/5. Get profit details.mdx

@@ -5,6 +5,7 @@ import ApiParam from '@site/src/components/ApiParam';
 import { CollapseAll, CollapseAllButton, CollapseAllHeading } from '@site/src/components/CollapseAll';
 import * as StickyLayout from '@site/src/components/StickyLayout'
 import * as ResponseTabs from '@site/src/components/ResponseTabs'
+import { Informer } from '@site/src/components/Informer/Informer'
 
 <Endpoint
   url="/ver1/grid_bots/:id/profits"
@@ -36,9 +37,9 @@ Returns profit details of existing Grid Bot using its ID.
    Filters the Grid Bots created before a specific date in ISO 8601 format.
 </ApiParam>
 
-<div class="alert alert--info" role="alert" style={{ margin: '30px 20px 20px 0px', padding: '15px' }}>
- If the **from** and **to** values are not set, the response will include all records ordered in descending (`[DESC]`) order by ID parameter.
-</div>
+<Informer variant="info">
+  If the **from** and **to** values are not set, the response will include all records ordered in descending (`[DESC]`) order by ID parameter.
+</Informer>
 
 </StickyLayout.Main>
 <StickyLayout.Sticky>

src/components/Informer/Informer.module.css

@@ -0,0 +1,64 @@
+.root {
+  box-sizing: border-box;
+  padding: 16px;
+  display: flex;
+  border-radius: 8px;
+  gap: 4px 8px;
+  align-items: flex-start;
+  padding: 16px;
+  margin: 20px 0;
+}
+
+.info {
+  background-color: rgb(230, 239, 249);
+}
+
+.info .iconBlock {
+  color: rgb(30, 114, 210);
+}
+
+.warning {
+  background-color: rgb(255, 243, 214);
+}
+
+.warning .iconBlock {
+  color: rgb(255, 155, 26);
+}
+
+.danger {
+  background-color: rgb(251, 239, 240);
+}
+
+.danger .iconBlock {
+  color: rgb(231, 89, 106);
+}
+
+.accent {
+  background-color: rgb(234, 245, 245);
+}
+
+.accent .iconBlock {
+  color: rgb(19, 168, 161);
+}
+
+.container {
+  display: contents;
+}
+
+.content {
+  display: flex;
+  gap: inherit;
+  align-items: flex-start;
+  flex: 1;
+  flex-direction: column;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.iconBlock {
+    display: flex;
+}
+
+.content p:last-child {
+  margin-bottom: 0;
+}

src/components/Informer/Informer.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react'
+import styles from './Informer.module.css'
+import clsx from 'clsx'
+import { IconAttentionCircle, IconInfo, IconCheck } from "../../icons";
+
+
+export type TInformerVariantTypes = 'info' | 'warning' | 'danger' | 'accent'
+
+type Props = {
+  variant?: TInformerVariantTypes,
+  children: ReactNode
+}
+
+const variants: Record<TInformerVariantTypes, string> = {
+  info: styles.info,
+  warning: styles.warning,
+  danger: styles.danger,
+  accent: styles.accent
+}
+
+const mapVariantToIcon: Record<TInformerVariantTypes, ReactNode> = {
+  info: <IconInfo />,
+  danger: <IconAttentionCircle />,
+  warning: <IconAttentionCircle />,
+  accent: <IconCheck />,
+};
+
+export function Informer({ variant = 'info', children }: Props) {
+  return (
+    <div className={clsx(
+      styles.root,
+      variants[variant]
+    )}>
+      <div className={styles.container}>
+        <div className={styles.iconBlock}>
+          {mapVariantToIcon[variant as keyof typeof mapVariantToIcon]}
+        </div>
+        <div className={styles.content}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

src/css/custom.css

@@ -20,6 +20,7 @@
   --ifm-col-width: 0px !important;
   --ifm-table-cell-padding: 0.5rem;
   --ifm-list-left-padding: 1rem;
+  --ifm-link-color: #13a8a1;
 
   @media (min-width: 997px) {
     --ifm-global-spacing: 1.5rem;

src/icons/IconAttentionCircle.tsx

@@ -0,0 +1,26 @@
+export const IconAttentionCircle = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+        d="M12 6.5C11.4477 6.5 11 6.94772 11 7.5L11 13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13L13 7.5C13 6.94772 12.5523 6.5 12 6.5Z"
+        fill="currentColor"
+      />
+
+      <path
+        d="M13 16C13 15.7239 12.7761 15.5 12.5 15.5H11.5C11.2239 15.5 11 15.7239 11 16V17C11 17.2761 11.2239 17.5 11.5 17.5H12.5C12.7761 17.5 13 17.2761 13 17V16Z"
+        fill="currentColor"
+      />
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
+        fill="currentColor"
+      />
+  </svg>
+);

src/icons/IconCheck.tsx

@@ -0,0 +1,16 @@
+export const IconCheck = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.678 5.76493C21.084 6.13937 21.1095 6.77202 20.7351 7.17799L10.5893 18.178C10.2164 18.5823 9.587 18.6096 9.18054 18.239L3.32629 12.9019C2.91816 12.5298 2.88893 11.8973 3.26101 11.4892C3.63309 11.0811 4.26558 11.0518 4.67372 11.4239L9.79325 16.0912L19.2649 5.82202C19.6394 5.41605 20.272 5.39049 20.678 5.76493Z"
+        fill="currentColor"
+      />
+  </svg>
+);

src/icons/IconInfo.tsx

@@ -0,0 +1,26 @@
+export const IconInfo = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+        d="M10.8008 8C10.8008 8.27614 11.0246 8.5 11.3008 8.5H12.5008C12.7769 8.5 13.0008 8.27614 13.0008 8V7C13.0008 6.72386 12.7769 6.5 12.5008 6.5H11.3008C11.0246 6.5 10.8008 6.72386 10.8008 7V8Z"
+        fill="currentColor"
+      />
+
+      <path
+        d="M11 17.5C10.4477 17.5 10 17.0523 10 16.5C10 15.9477 10.4477 15.5 11 15.5V12C10.4477 12 10 11.5523 10 11C10 10.4477 10.4477 10 11 10H12C12.5523 10 13 10.4477 13 11V15.5C13.5523 15.5 14 15.9477 14 16.5C14 17.0523 13.5523 17.5 13 17.5H11Z"
+        fill="currentColor"
+      />
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"
+        fill="currentColor"
+      />
+  </svg>
+);

src/icons/index.tsx

@@ -0,0 +1,3 @@
+export { IconAttentionCircle } from "./IconAttentionCircle";
+export { IconCheck } from "./IconCheck";
+export { IconInfo } from "./IconInfo";