From a67a8e7e90f35636c8d99858fc5b19358df4c174 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Thu, 16 Nov 2023 11:50:04 +0100
Subject: [PATCH] fix(ui): Fixed CodeBlock line number width (#5640)

**What**
- Fixes the width of lineNumbers in the CodeBlock component according to the widest number.
- Introduces a new prop on snippets that allows users to hide the copy button. Also updated docs to reflect this.

Before:
![image](https://github.com/medusajs/medusa/assets/45367945/07852c2e-434c-44df-93b7-4078148cb74f)

After:
<img width="742" alt="image" src="https://github.com/medusajs/medusa/assets/45367945/5ce845f7-b8c7-411c-abfb-fa03448aeb1a">

Closes #5639
---
 .changeset/fast-glasses-grow.md               |  5 ++
 .../code-block/code-block.stories.tsx         | 37 +++++++++++++-
 .../src/components/code-block/code-block.tsx  | 50 +++++++++++++------
 www/apps/ui/src/props/code-block.tsx          |  2 +-
 4 files changed, 76 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/fast-glasses-grow.md

diff --git a/.changeset/fast-glasses-grow.md b/.changeset/fast-glasses-grow.md
new file mode 100644
index 0000000000..bf6da0e6f3
--- /dev/null
+++ b/.changeset/fast-glasses-grow.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+fix(ui): Fix the width of line numbers in the CodeBlock component, such that they are always the same width as the widest line number.
diff --git a/packages/design-system/ui/src/components/code-block/code-block.stories.tsx b/packages/design-system/ui/src/components/code-block/code-block.stories.tsx
index a981f9798a..17ad7cd35c 100644
--- a/packages/design-system/ui/src/components/code-block/code-block.stories.tsx
+++ b/packages/design-system/ui/src/components/code-block/code-block.stories.tsx
@@ -1,8 +1,8 @@
-import React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
+import React from "react"
 
-import { CodeBlock } from "./code-block"
 import { Label } from "../label"
+import { CodeBlock } from "./code-block"
 
 const meta: Meta<typeof CodeBlock> = {
   title: "Components/CodeBlock",
@@ -50,3 +50,36 @@ export const Default: Story = {
     )
   },
 }
+
+const code = `medusa develop
+✔ Models initialized – 14ms
+✔ Repositories initialized – 35ms
+✔ Strategies initialized – 24ms
+✔ Modules initialized – 1ms
+✔ Database initialized – 654ms
+✔ Services initialized – 7ms
+✔ Express intialized – 5ms
+✔ Plugins intialized – 7ms
+✔ Subscribers initialized – 6ms
+✔ API initialized – 28ms
+✔ Server is ready on port: 9000`
+
+export const ManyLines: Story = {
+  render: () => {
+    return (
+      <CodeBlock
+        snippets={[
+          {
+            code: code,
+            label: "Test",
+            language: "bash",
+            hideCopy: true,
+          },
+        ]}
+        className="w-[700px]"
+      >
+        <CodeBlock.Body />
+      </CodeBlock>
+    )
+  },
+}
diff --git a/packages/design-system/ui/src/components/code-block/code-block.tsx b/packages/design-system/ui/src/components/code-block/code-block.tsx
index a7f716a85f..b617159822 100644
--- a/packages/design-system/ui/src/components/code-block/code-block.tsx
+++ b/packages/design-system/ui/src/components/code-block/code-block.tsx
@@ -10,6 +10,7 @@ export type CodeSnippet = {
   language: string
   code: string
   hideLineNumbers?: boolean
+  hideCopy?: boolean
 }
 
 type CodeBlockState = {
@@ -47,7 +48,7 @@ const Root = ({
     <CodeBlockContext.Provider value={{ snippets, active, setActive }}>
       <div
         className={clx(
-          "border-ui-code-border overflow-hidden rounded-lg border",
+          "border-ui-code-border flex flex-col overflow-hidden rounded-lg border",
           className
         )}
         {...props}
@@ -119,13 +120,18 @@ const Body = ({
   const { active } = useCodeBlockContext()
   return (
     <div
-      className={clx("bg-ui-code-bg-base relative p-4", className)}
+      className={clx(
+        "bg-ui-code-bg-base relative h-full overflow-y-auto p-4",
+        className
+      )}
       {...props}
     >
-      <Copy
-        content={active.code}
-        className="text-ui-code-icon absolute right-4 top-4"
-      />
+      {!active.hideCopy && (
+        <Copy
+          content={active.code}
+          className="text-ui-code-icon absolute right-4 top-4"
+        />
+      )}
       <div className="max-w-[90%]">
         <Highlight
           theme={{
@@ -155,24 +161,38 @@ const Body = ({
         >
           {({ style, tokens, getLineProps, getTokenProps }) => (
             <pre
-              className="txt-compact-small whitespace-pre-wrap bg-transparent font-mono"
+              className={clx(
+                "txt-compact-small whitespace-pre-wrap bg-transparent font-mono",
+                {
+                  "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
+                }
+              )}
               style={{
                 ...style,
                 background: "transparent",
               }}
             >
-              {tokens.map((line, i) => (
-                <div key={i} {...getLineProps({ line })} className="flex">
-                  {!active.hideLineNumbers && (
-                    <span className="text-ui-code-text-subtle">{i + 1}</span>
-                  )}
-                  <div className="pl-4">
+              {!active.hideLineNumbers && (
+                <div role="presentation" className="flex flex-col text-right">
+                  {tokens.map((_, i) => (
+                    <span
+                      key={i}
+                      className="text-ui-code-text-subtle tabular-nums"
+                    >
+                      {i + 1}
+                    </span>
+                  ))}
+                </div>
+              )}
+              <div>
+                {tokens.map((line, i) => (
+                  <div key={i} {...getLineProps({ line })}>
                     {line.map((token, key) => (
                       <span key={key} {...getTokenProps({ token })} />
                     ))}
                   </div>
-                </div>
-              ))}
+                ))}
+              </div>
             </pre>
           )}
         </Highlight>
diff --git a/www/apps/ui/src/props/code-block.tsx b/www/apps/ui/src/props/code-block.tsx
index 090216e5f8..abbc7681c5 100644
--- a/www/apps/ui/src/props/code-block.tsx
+++ b/www/apps/ui/src/props/code-block.tsx
@@ -8,7 +8,7 @@ const codeBlockProps: PropDataMap = [
       type: "object",
       name: "CodeSnippet[]",
       shape:
-        "{\n  label: string\n  language: string\n  code: string\n  hideLineNumbers?: boolean\n}[]",
+        "{\n  label: string\n  language: string\n  code: string\n  hideLineNumbers?: boolean\n  hideCopy?: boolean\n}[]",
     },
   },
 ]