add code frame

vercel · Jan 10, 2025 · f6d752a · f6d752a
1 parent 30c0a52
commit f6d752a
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 28 deletions.
diff --git a/...nents/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.stories.tsx b/...nents/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.stories.tsx
@@ -16,7 +16,7 @@ type Story = StoryObj<typeof CodeFrame>
 
 const baseStackFrame = {
   file: './app/page.tsx',
-  methodName: 'MyComponent',
+  methodName: 'Home',
   arguments: [],
   lineNumber: 10,
   column: 5,
@@ -25,11 +25,11 @@ const baseStackFrame = {
 export const SimpleCodeFrame: Story = {
   args: {
     stackFrame: baseStackFrame,
-    codeFrame: `   8 | \u001b[31mfunction\u001b[39m \u001b[31mMyComponent\u001b[39m() {
-   9 |   \u001b[31mreturn\u001b[39m (
-> 10 |     <\u001b[31mdiv\u001b[39m>Hello \u001b[31mWorld\u001b[39m</\u001b[31mdiv\u001b[39m>
-     |     ^
-  11 |   )
-  12 | }`,
+    codeFrame: `\u001b[0m \u001b[90m 1 \u001b[39m \u001b[36mexport\u001b[39m \u001b[36mdefault\u001b[39m \u001b[36mfunction\u001b[39m \u001b[33mHome\u001b[39m() {\u001b[0m
+\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 2 \u001b[39m   \u001b[36mthrow\u001b[39m \u001b[36mnew\u001b[39m \u001b[33mError\u001b[39m(\u001b[32m'boom'\u001b[39m)\u001b[0m
+\u001b[0m \u001b[90m   \u001b[39m         \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m
+\u001b[0m \u001b[90m 3 \u001b[39m   \u001b[36mreturn\u001b[39m \u001b[33m<\u001b[39m\u001b[33mdiv\u001b[39m\u001b[33m>\u001b[39m\u001b[33mHello\u001b[39m \u001b[33mWorld\u001b[39m\u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33mdiv\u001b[39m\u001b[33m>\u001b[39m\u001b[0m
+\u001b[0m \u001b[90m 4 \u001b[39m }\u001b[0m
+\u001b[0m \u001b[90m 5 \u001b[39m\u001b[0m`,
   },
 }
diff --git a/...nt/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.tsx b/...nt/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.tsx
@@ -70,6 +70,7 @@ export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
           title="Click to open in your editor"
         >
           <span>
+            <FileIcon />
             {getFrameSource(stackFrame)} @{' '}
             <HotlinkedText text={stackFrame.methodName} />
           </span>
@@ -149,4 +150,23 @@ export const CODE_FRAME_STYLES = css`
     overflow: hidden;
     display: inline-block;
   }
+
+  [data-nextjs-codeframe] svg {
+    color: var(--color-gray-900);
+    margin-right: 6px;
+  }
 `
+
+// TODO: Add more Icons (react, next, etc.)
+function FileIcon() {
+  return (
+    <svg width="16" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.5 7v7a2.5 2.5 0 0 1-2.5 2.5H4A2.5 2.5 0 0 1 1.5 14V.5h7.586a1 1 0 0 1 .707.293l4.414 4.414a1 1 0 0 1 .293.707V7zM13 7v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2h5v5h5zM9.5 2.621V5.5h2.879L9.5 2.621z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
@@ -44,27 +44,6 @@ export function Base() {
           --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',
             sans-serif;
 
-          --color-ansi-selection: rgba(95, 126, 151, 0.48);
-          --color-ansi-bg: #111111;
-          --color-ansi-fg: #cccccc;
-
-          --color-ansi-white: #777777;
-          --color-ansi-black: #141414;
-          --color-ansi-blue: #00aaff;
-          --color-ansi-cyan: #88ddff;
-          --color-ansi-green: #98ec65;
-          --color-ansi-magenta: #aa88ff;
-          --color-ansi-red: #ff5555;
-          --color-ansi-yellow: #ffcc33;
-          --color-ansi-bright-white: #ffffff;
-          --color-ansi-bright-black: #777777;
-          --color-ansi-bright-blue: #33bbff;
-          --color-ansi-bright-cyan: #bbecff;
-          --color-ansi-bright-green: #b6f292;
-          --color-ansi-bright-magenta: #cebbff;
-          --color-ansi-bright-red: #ff8888;
-          --color-ansi-bright-yellow: #ffd966;
-
           font-family: var(--font-stack-sans);
 
           /* TODO: Remove replaced ones. */

diff --git a/...ges/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx b/...ges/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx
@@ -6,6 +6,28 @@ export function Colors() {
     <style>
       {css`
         :host {
+          /* Ansi - Temporary */
+          --color-ansi-selection: var(--color-gray-alpha-300);
+          --color-ansi-bg: var(--color-background-200);
+          --color-ansi-fg: var(--color-gray-1000);
+
+          --color-ansi-white: var(--color-gray-700);
+          --color-ansi-black: var(--color-gray-200);
+          --color-ansi-blue: var(--color-blue-700);
+          --color-ansi-cyan: var(--color-blue-700);
+          --color-ansi-green: var(--color-green-700);
+          --color-ansi-magenta: var(--color-blue-700);
+          --color-ansi-red: var(--color-red-700);
+          --color-ansi-yellow: var(--color-amber-800);
+          --color-ansi-bright-white: var(--color-gray-1000);
+          --color-ansi-bright-black: var(--color-gray-700);
+          --color-ansi-bright-blue: var(--color-blue-800);
+          --color-ansi-bright-cyan: var(--color-blue-800);
+          --color-ansi-bright-green: var(--color-green-800);
+          --color-ansi-bright-magenta: var(--color-blue-800);
+          --color-ansi-bright-red: var(--color-red-800);
+          --color-ansi-bright-yellow: var(--color-amber-900);
+
           /* Background Light */
           --color-background-100: #ffffff;
           --color-background-200: #fafafa;
@@ -198,6 +220,28 @@ export function Colors() {
             --color-turbopack-border-blue: #284f80;
             --color-turbopack-background-red: #250d12;
             --color-turbopack-background-blue: #0a1723;
+
+            /* Ansi Light - Temporary */
+            --color-ansi-selection: rgba(95, 126, 151, 0.48);
+            --color-ansi-bg: #111111;
+            --color-ansi-fg: #cccccc;
+
+            --color-ansi-white: #777777;
+            --color-ansi-black: #141414;
+            --color-ansi-blue: #00aaff;
+            --color-ansi-cyan: #88ddff;
+            --color-ansi-green: #98ec65;
+            --color-ansi-magenta: #aa88ff;
+            --color-ansi-red: #ff5555;
+            --color-ansi-yellow: #ffcc33;
+            --color-ansi-bright-white: #ffffff;
+            --color-ansi-bright-black: #777777;
+            --color-ansi-bright-blue: #33bbff;
+            --color-ansi-bright-cyan: #bbecff;
+            --color-ansi-bright-green: #b6f292;
+            --color-ansi-bright-magenta: #cebbff;
+            --color-ansi-bright-red: #ff8888;
+            --color-ansi-bright-yellow: #ffd966;
           }
         }
       `}