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

…ts_for_api_documentation_ui Adjusting Endpoint and adding Informer components
3commas-io · Feb 10, 2025 · e97b298 · e97b298
2 parents f200e29 + 02551c4
commit e97b298
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 9 deletions.
diff --git a/docs/DCA Bot/README.mdx b/docs/DCA Bot/README.mdx
@@ -1,3 +1,4 @@
+import Endpoint from '@site/src/components/Endpoint'
 
 # DCA Bot
 
@@ -24,4 +25,21 @@
 <p>
    The process starts with configuring a <strong>DCA Bot</strong>, where all trading conditions, such as base and safety orders, take profit, and stop loss, are set. The bot automatically creates and manages deals based on the configured strategy.
 </p>
+## Endpoints list
+<Endpoint
+  endpointsList={[
+    {
+      url: "/ver1/bots/strategy_list",
+      method: 'POST'
+    },
+    {
+      url: "/ver1/bots/strategy_list1",
+      method: 'GET'
+    },
+    {
+      url: "/ver1/bots/strategy_list2",
+      method: 'PUT'
+    }
+  ]}
+/>
 </div>
diff --git a/src/components/Endpoint/Endpoint.module.css b/src/components/Endpoint/Endpoint.module.css
@@ -11,7 +11,8 @@
 }
 
 .container {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr;
   align-items: center;
   padding: 8px 6px;
   min-width: 400px;
@@ -25,6 +26,18 @@
   line-height: 1.5;
 }
 
+.endpointsListContainer {
+  min-width: auto;
+  padding-right: 14px;
+  gap: 4px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .permissions {
   display: flex;
   flex-direction: column;

diff --git a/src/components/Endpoint/Endpoint.tsx b/src/components/Endpoint/Endpoint.tsx
@@ -5,38 +5,61 @@ import styles from './Endpoint.module.css'
 import { Tooltip } from '@site/src/components/Tooltip'
 
 type Props = {
-  url: string
+  url?: string
   method?: Method
   permissions?: ReactNode
+  endpointsList?: Props[]
 }
 
-export function Endpoint({ url, method, permissions }: Props) {
+export function Endpoint({ url, method, permissions, endpointsList }: Props) {
   const [copied, setCopied] = useState(false)
+  let endpointContent: ReactNode
 
   const handleOpenChange = (open: boolean) => {
     if (!open) {
       setCopied(false)
     }
   }
 
-  const handleCopy = () => {
+  const handleCopy = (url: string) => {
     navigator.clipboard.writeText(url).then(() => {
       setCopied(true)
     })
   }
 
-  return (
-    <div className={styles.root}>
-      <div className={styles.container}>
+  if (endpointsList) {
+    endpointContent = endpointsList.map(endpoint =>
+      <>
+        {endpoint.method ? <Method variant="text" align="right">{endpoint.method}</Method> : null}
+
+        <Tooltip
+          onOpenChange={handleOpenChange}
+          content={copied ? 'Copied!' : 'Copy'}>
+          <span className={styles.url} onClick={() => handleCopy(endpoint.url)}>
+            {endpoint.url}
+          </span>
+        </Tooltip>
+      </>
+    );
+  } else {
+    endpointContent =
+      <>
         {method ? <Method>{method}</Method> : null}
 
         <Tooltip
           onOpenChange={handleOpenChange}
           content={copied ? 'Copied!' : 'Copy'}>
-          <span className={styles.url} onClick={handleCopy}>
+          <span className={styles.url} onClick={() => handleCopy(url)}>
             {url}
           </span>
         </Tooltip>
+      </>
+  }
+
+  return (
+    <div className={styles.root}>
+      <div className={`${styles.container} ${endpointsList && styles.endpointsListContainer}`}>
+        {endpointContent}
       </div>
 
       <div>{permissions}</div>

diff --git a/src/components/Endpoint/Method.module.css b/src/components/Endpoint/Method.module.css
@@ -19,6 +19,14 @@
   color: white;
 }
 
+.text {
+  color: var(--accent);
+}
+
+.right {
+  justify-content: end;
+}
+
 .put {
   --accent: #ff9800;
 }

diff --git a/src/components/Endpoint/Method.tsx b/src/components/Endpoint/Method.tsx
@@ -8,6 +8,7 @@ type Props = {
   children: string
   variant?: 'filled' | 'text'
   size?: 'medium'
+  align?: 'center' | 'right'
 }
 
 const colors: Record<Method, string> = {
@@ -23,6 +24,7 @@ export function Method({
   children,
   variant = 'filled',
   size = 'medium',
+  align = 'center'
 }: Props) {
   if (typeof children !== 'string' || !(children.toUpperCase() in colors)) {
     return null
@@ -36,7 +38,9 @@ export function Method({
         styles.container,
         colors[color],
         variant === 'filled' && styles.filled,
-        size === 'medium' && styles.medium
+        variant === 'text' && styles.text,
+        size === 'medium' && styles.medium,
+        align === 'right' && styles.right
       )}>
       {color}
     </div>