Move styles to css

Author: pomber

packages/mini-editor/src/index.scss

@@ -1,5 +1,6 @@
 @import "~@code-hike/mini-frame/dist/index.scss";
 @import "~@code-hike/mini-terminal/dist/index.scss";
+@import "~@code-hike/smooth-code/dist/index.scss";
 
 /** tabs */
 

packages/smooth-code/src/index.scss

@@ -0,0 +1,8 @@
+.ch-code-line-number {
+  user-select: none;
+  text-align: right;
+  display: inline-block;
+  box-sizing: border-box;
+  padding-right: 1.5ch;
+  font-variant-numeric: tabular-nums;
+}

packages/smooth-code/src/smooth-container.tsx

@@ -54,7 +54,8 @@ export function SmoothContainer({
 
   const lineNumberPad =
     (dimensions?.lineNumberWidth || 0) * zoom
-  const leftPad = 16 + lineNumberPad
+
+  const leftPad = lineNumberPad || 16
 
   const width = Math.max(
     focusWidth + leftPad,
@@ -221,10 +222,14 @@ function getContentProps({
   } = dimensions!
   const originalFocusHeight =
     (extremes[1] - extremes[0] + 3) * lineHeight
+
+  const leftPadding = dimensions?.lineNumberWidth || 16
+  const rightPadding = 16
+
   const zoom = Math.max(
     Math.min(
-      // TODO consider line number width
-      (containerWidth - 16 * 2) / lineWidth,
+      (containerWidth - leftPadding - rightPadding) /
+        lineWidth,
       containerHeight / originalFocusHeight,
       maxZoom
     ),

packages/smooth-code/src/smooth-lines.tsx

@@ -159,21 +159,16 @@ function LineGroup({
           <React.Fragment key={key}>
             {lineNumberWidth ? (
               <span
+                className="ch-code-line-number"
                 style={{
+                  position: "absolute",
                   top: 0,
                   left: 0,
                   transform: `translate(${
                     dx * focusWidth
                   }px, ${(dy - startY) * lineHeight}px)`,
-                  position: "absolute",
-                  userSelect: "none",
                   width: lineNumberWidth,
-                  textAlign: "right",
-                  display: "inline-block",
-                  boxSizing: "border-box",
-                  paddingRight: "1ch",
                   opacity,
-                  fontVariantNumeric: "tabular-nums",
                   color: getColor(
                     theme,
                     ColorName.LineNumberForeground

packages/smooth-code/src/use-dimensions.tsx

@@ -79,14 +79,11 @@ function useDimensions(
             }
             key={i}
           >
-            <span
-              style={{
-                display: "inline-block",
-                width: lineNumbers ? "auto" : 0,
-              }}
-            >
-              {lineCount}0
-            </span>
+            {lineNumbers ? (
+              <span className="ch-code-line-number">
+                _{lineCount}
+              </span>
+            ) : undefined}
             <div style={{ display: "inline-block" }}>
               <span>{line}</span>
             </div>
@@ -119,7 +116,9 @@ function useDimensions(
       const lineNumberSpan = pll?.querySelector(
         ":scope > span"
       ) as HTMLElement
-      const lnw = getWidthWithoutPadding(lineNumberSpan)
+      const lnw = lineNumberSpan
+        ? getWidthWithPadding(lineNumberSpan)
+        : 0
 
       const plw = getWidthWithoutPadding(lineContentDiv)
       const colWidth = plw / prevLongestLine.length || 1
@@ -195,6 +194,10 @@ function getWidthWithoutPadding(element: HTMLElement) {
     parseFloat(computedStyle.paddingRight)
   )
 }
+function getWidthWithPadding(element: HTMLElement) {
+  const computedStyle = getComputedStyle(element)
+  return parseFloat(computedStyle.width)
+}
 function getHeightWithoutPadding(
   element: HTMLElement | null
 ) {

packages/storybook/src/code-tween.story.js

@@ -65,8 +65,6 @@ const x = (y) => y++ * foobarbaz
     )
   }, [])
 
-  console.log({ tween })
-
   return (
     <WithProgress>
       {progress => (