fix(ui): Fixed CodeBlock line number width

.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.

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>
+    )
+  },
+}

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>

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}[]",
     },
   },
 ]