lineNumbers -> showLineNumbers

souporserious · May 9, 2024 · 564806a · 564806a
1 parent cccf278
commit 564806a
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 21 deletions.
diff --git a/.changeset/seven-pugs-hang.md b/.changeset/seven-pugs-hang.md
@@ -0,0 +1,9 @@
+---
+'mdxts': minor
+---
+
+Renames `CodeBlock` `lineNumbers` prop to `showLineNumbers`.
+
+### Breaking Changes
+
+- `CodeBlock` `lineNumbers` prop has been renamed to `showLineNumbers`.
diff --git a/packages/mdxts/src/components/CodeBlock/CodeBlock.examples.tsx b/packages/mdxts/src/components/CodeBlock/CodeBlock.examples.tsx
@@ -34,7 +34,7 @@ export function LineNumbering() {
     <CodeBlock
       filename="line-numbers.ts"
       value={`const a = 1;\nconst b = 2;\n\nconst add = a + b\nconst subtract = a - b`}
-      lineNumbers
+      showLineNumbers
       highlightedLines="4"
     />
   )

diff --git a/packages/mdxts/src/components/CodeBlock/CodeBlock.tsx b/packages/mdxts/src/components/CodeBlock/CodeBlock.tsx
@@ -21,9 +21,6 @@ export type BaseCodeBlockProps = {
   /** Language of the source code. When using `source`, the file extension will be used by default. */
   language?: Languages
 
-  /** Show or hide line numbers. */
-  lineNumbers?: boolean
-
   /** A string of comma separated lines and ranges to highlight e.g. `'1, 3-5, 7'`. */
   highlightedLines?: string
 
@@ -33,7 +30,7 @@ export type BaseCodeBlockProps = {
   /** Opacity of unfocused lines when using `focusedLines`. */
   unfocusedLinesOpacity?: number
 
-  /** Whether or not to show the toolbar. */
+  /** Show or hide the toolbar. */
   toolbar?: boolean
 
   /** Show or hide a button that copies the source code to the clipboard. */
@@ -42,9 +39,12 @@ export type BaseCodeBlockProps = {
   /** Whether or not to allow errors. Accepts a boolean or comma-separated list of allowed error codes. */
   allowErrors?: boolean | string
 
-  /** Whether or not to show error diagnostics. */
+  /** Show or hide error diagnostics. */
   showErrors?: boolean
 
+  /** Show or hide line numbers. */
+  showLineNumbers?: boolean
+
   /** Path to the source file on disk in development and the git provider source in production. */
   sourcePath?: string | false
 
@@ -55,7 +55,7 @@ export type BaseCodeBlockProps = {
   className?: {
     container?: string
     toolbar?: string
-    lineNumbers?: string
+    showLineNumbers?: string
     token?: string
     popover?: string
   }
@@ -64,7 +64,7 @@ export type BaseCodeBlockProps = {
   style?: {
     container?: React.CSSProperties
     toolbar?: React.CSSProperties
-    lineNumbers?: React.CSSProperties
+    showLineNumbers?: React.CSSProperties
     token?: React.CSSProperties
     popover?: React.CSSProperties
   }
@@ -90,14 +90,14 @@ export type CodeBlockProps =
 export async function CodeBlock({
   filename,
   language,
-  lineNumbers,
   highlightedLines,
   focusedLines,
   unfocusedLinesOpacity = 0.6,
   toolbar,
   allowCopy,
   allowErrors,
   showErrors,
+  showLineNumbers,
   fixImports,
   sourcePath,
   ...props
@@ -164,7 +164,9 @@ export async function CodeBlock({
         } satisfies React.CSSProperties,
       }
     : {}
-  const isGridLayout = Boolean(lineNumbers || highlightedLines || focusedLines)
+  const isGridLayout = Boolean(
+    highlightedLines || focusedLines || showLineNumbers
+  )
 
   return (
     <Context value={contextValue}>
@@ -198,16 +200,16 @@ export async function CodeBlock({
               ? undefined
               : `0 0 0 1px ${theme.panel.border}`,
             ...(shouldRenderToolbar ? {} : props.style?.container),
-            padding: lineNumbers
+            padding: showLineNumbers
               ? typeof padding === 'number'
                 ? `${padding}px 0`
                 : `${padding} 0`
               : padding,
           }}
         >
-          {lineNumbers ? (
+          {showLineNumbers ? (
             <LineNumbers
-              className={props.className?.lineNumbers}
+              className={props.className?.showLineNumbers}
               style={{
                 gridColumn: 1,
                 gridRow: '1 / -1',
@@ -217,15 +219,15 @@ export async function CodeBlock({
                     ? `0 ${padding}px`
                     : `0 ${padding}`
                   : undefined,
-                ...props.style?.lineNumbers,
+                ...props.style?.showLineNumbers,
               }}
             />
           ) : null}
           {isGridLayout ? (
             <div
               style={{
                 gridRow: '1 / -1',
-                gridColumn: lineNumbers ? 2 : '1 / -1',
+                gridColumn: showLineNumbers ? 2 : '1 / -1',
                 ...(focusedLines
                   ? {
                       '--m0': `rgba(0, 0, 0, ${unfocusedLinesOpacity})`,
@@ -262,7 +264,7 @@ export async function CodeBlock({
           {highlightedLines ? (
             <LineHighlights
               style={{
-                margin: lineNumbers
+                margin: showLineNumbers
                   ? undefined
                   : padding
                     ? typeof padding === 'number'

diff --git a/packages/mdxts/src/components/CodeBlock/LineNumbers.tsx b/packages/mdxts/src/components/CodeBlock/LineNumbers.tsx
@@ -83,13 +83,13 @@ export function calculateLinesToHighlight(ranges: string | undefined) {
     return () => false
   }
 
-  const lineNumbers = ranges
+  const showLineNumbers = ranges
     .split(',')
     .map((value: string) => value.split('-').map((y) => parseInt(y, 10)))
 
   return (index: number) => {
     const lineNumber = index + 1
-    const inRange = lineNumbers.some(([start, end]: number[]) =>
+    const inRange = showLineNumbers.some(([start, end]: number[]) =>
       end ? lineNumber >= start && lineNumber <= end : lineNumber === start
     )
     return inRange

diff --git a/packages/mdxts/src/components/MDXComponents.tsx b/packages/mdxts/src/components/MDXComponents.tsx
@@ -24,7 +24,7 @@ export const MDXComponents = {
     allowCopy,
     allowErrors,
     showErrors,
-    lineNumbers,
+    showLineNumbers,
     highlightedLines,
     toolbar,
     filename,
@@ -39,7 +39,7 @@ export const MDXComponents = {
         allowCopy={allowCopy}
         allowErrors={allowErrors}
         showErrors={showErrors}
-        lineNumbers={lineNumbers}
+        showLineNumbers={showLineNumbers}
         highlightedLines={highlightedLines}
         toolbar={toolbar}
         filename={filename}

diff --git a/site/app/examples/[...example]/page.tsx b/site/app/examples/[...example]/page.tsx
@@ -165,7 +165,7 @@ export default async function Page({
       >
         <CodeBlock
           fixImports
-          lineNumbers
+          showLineNumbers
           value={example.sourceText}
           language="tsx"
           className={{