chore: render cli examples if available

apps/docs/components/reference/CLICommandSection.tsx

@@ -1,25 +1,12 @@
-import { IconChevronRight } from '~/../../packages/ui'
+import ReactMarkdown from 'react-markdown'
+import { IconChevronRight, Tabs } from '~/../../packages/ui'
 // @ts-expect-error
 import spec from '~/../../spec/cli_v1_commands.yaml' assert { type: 'yml' }
 import CodeBlock from '~/components/CodeBlock/CodeBlock'
 import Options from '~/components/Options'
 import Param from '~/components/Params'
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
-
-interface ICommonFunc {
-  id: string
-  title: string
-  slug: string
-  product: string
-  libs: string
-  items: ICommonFunc[]
-}
-
-interface IRefFunctionSection {
-  funcData: ICommonFunc
-  commonFuncData: ICommonFunc
-  spec: any
-}
+import RefDetailCollapse from './RefDetailCollapse'
 
 export type Flag = {
   id: string
@@ -37,16 +24,25 @@ export type AcceptedValue = {
   description?: string
 }
 
+export type Example = {
+  id: string
+  name: string
+  code: string
+  response: string
+  description?: string
+}
+
 export type Command = {
   id: string
   title: string
   description: string
   flags?: Flag[]
   summary: string
-  tags?: []
-  links?: []
-  subcommands?: []
+  tags?: string[]
+  links?: string[]
+  subcommands?: string[]
   usage?: string
+  examples?: Example[]
 }
 
 const CliCommandSection = (props) => {
@@ -75,12 +71,6 @@ const CliCommandSection = (props) => {
               </p>
             </header>
 
-            {/* {command.usage && (
-                        <CodeBlock language="bash" className="relative">
-                          {command.usage}
-                        </CodeBlock>
-                      )} */}
-
             {command.subcommands.length > 0 && (
               <div className="mb-3">
                 <h3 className="text-lg text-scale-1200 mb-3">Available Commands</h3>
@@ -126,13 +116,82 @@ const CliCommandSection = (props) => {
           </div>
         </div>
       </RefSubLayout.Details>
-      <RefSubLayout.Examples>
-        {command.usage && (
-          <CodeBlock language="bash" className="relative">
-            {command.usage}
-          </CodeBlock>
-        )}
-      </RefSubLayout.Examples>
+      {(command.examples || command.usage) && (
+        <RefSubLayout.Examples>
+          <div className="overflow-hidden w-full">
+            <Tabs
+              defaultActiveId={`${command.id}-basic-usage`}
+              size="tiny"
+              type="rounded-pills"
+              scrollable
+            >
+              {command.examples ? (
+                command.examples.map((example) => {
+                  const exampleId = `${command.id}-${example.id}`
+                  return (
+                    <Tabs.Panel
+                      id={exampleId}
+                      key={exampleId}
+                      label={example.name}
+                      className="flex flex-col gap-3"
+                    >
+                      <CodeBlock
+                        className="useless-code-block-class"
+                        language="bash"
+                        hideLineNumbers={true}
+                      >
+                        {example.code}
+                      </CodeBlock>
+
+                      <RefDetailCollapse
+                        id={`${exampleId}-response`}
+                        label="Response"
+                        defaultOpen={false}
+                      >
+                        <CodeBlock
+                          className="useless-code-block-class rounded !rounded-tl-none !rounded-tr-none border border-scale-500"
+                          language="bash"
+                          hideLineNumbers={true}
+                        >
+                          {example.response}
+                        </CodeBlock>
+                      </RefDetailCollapse>
+
+                      {example.description && (
+                        <RefDetailCollapse
+                          id={`${exampleId}-notes`}
+                          label="Notes"
+                          defaultOpen={false}
+                        >
+                          <div className="bg-scale-300 border border-scale-500 rounded !rounded-tl-none !rounded-tr-none prose max-w-none px-5 py-2">
+                            <ReactMarkdown className="text-sm">{example.description}</ReactMarkdown>
+                          </div>
+                        </RefDetailCollapse>
+                      )}
+                    </Tabs.Panel>
+                  )
+                })
+              ) : (
+                // TODO: remove this block once all commands have examples
+                <Tabs.Panel
+                  id={`${command.id}-basic-usage`}
+                  key={`${command.id}-basic-usage`}
+                  label="Basic usage"
+                  className="flex flex-col gap-3"
+                >
+                  <CodeBlock
+                    className="useless-code-block-class"
+                    language="bash"
+                    hideLineNumbers={true}
+                  >
+                    {command.usage}
+                  </CodeBlock>
+                </Tabs.Panel>
+              )}
+            </Tabs>
+          </div>
+        </RefSubLayout.Examples>
+      )}
     </RefSubLayout.Section>
   )
 }