From adf9b803db5013958d6403896008a3903cbab821 Mon Sep 17 00:00:00 2001
From: avivkeller <me@aviv.sh>
Date: Sat, 31 May 2025 13:16:10 -0400
Subject: [PATCH 1/7] feat(ui): add CircularIcon

---
 .../Common/CircularIcon/index.module.css      | 27 +++++++++++++++++++
 .../Common/CircularIcon/index.stories.tsx     | 18 +++++++++++++
 .../Common/CircularIcon/index.tsx             | 24 +++++++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 packages/ui-components/Common/CircularIcon/index.module.css
 create mode 100644 packages/ui-components/Common/CircularIcon/index.stories.tsx
 create mode 100644 packages/ui-components/Common/CircularIcon/index.tsx

diff --git a/packages/ui-components/Common/CircularIcon/index.module.css b/packages/ui-components/Common/CircularIcon/index.module.css
new file mode 100644
index 0000000000000..5633cf79140cb
--- /dev/null
+++ b/packages/ui-components/Common/CircularIcon/index.module.css
@@ -0,0 +1,27 @@
+@reference "../../styles/index.css";
+
+.icon {
+  @apply flex
+    items-center
+    justify-center
+    rounded-full
+    font-semibold
+    text-white;
+
+  &.lg {
+    @apply h-12
+      w-12
+      text-2xl;
+  }
+
+  &.md {
+    @apply h-10
+      w-10
+      text-xl;
+  }
+
+  &.sm {
+    @apply h-8
+      w-8;
+  }
+}
diff --git a/packages/ui-components/Common/CircularIcon/index.stories.tsx b/packages/ui-components/Common/CircularIcon/index.stories.tsx
new file mode 100644
index 0000000000000..0e60524c0e857
--- /dev/null
+++ b/packages/ui-components/Common/CircularIcon/index.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import CircularIcon from '#ui/Common/CircularIcon';
+
+type Story = StoryObj<typeof CircularIcon>;
+type Meta = MetaObj<typeof CircularIcon>;
+
+export const Icons: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <CircularIcon symbol="B" color="#3b82f6" size="sm" />
+      <CircularIcon symbol="G" color="#10b981" size="md" />
+      <CircularIcon symbol="R" color="#ef4444" size="lg" />
+    </div>
+  ),
+};
+
+export default { component: CircularIcon } as Meta;
diff --git a/packages/ui-components/Common/CircularIcon/index.tsx b/packages/ui-components/Common/CircularIcon/index.tsx
new file mode 100644
index 0000000000000..d70159c20f807
--- /dev/null
+++ b/packages/ui-components/Common/CircularIcon/index.tsx
@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+
+import styles from './index.module.css';
+
+interface CircularIconProps {
+  symbol: string;
+  color: string;
+  size?: 'lg' | 'md' | 'sm';
+}
+
+export default function CircularIcon({
+  symbol,
+  color,
+  size = 'md',
+}: CircularIconProps) {
+  return (
+    <div
+      className={classNames(styles.icon, styles[size])}
+      style={{ backgroundColor: color }}
+    >
+      <span>{symbol}</span>
+    </div>
+  );
+}

From 06458b801ba5897727158227264f1be2dd1d2a37 Mon Sep 17 00:00:00 2001
From: avivkeller <me@aviv.sh>
Date: Sat, 31 May 2025 15:06:51 -0400
Subject: [PATCH 2/7] tw in story

---
 packages/ui-components/Common/CircularIcon/index.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-components/Common/CircularIcon/index.stories.tsx b/packages/ui-components/Common/CircularIcon/index.stories.tsx
index 0e60524c0e857..20c0a23925c68 100644
--- a/packages/ui-components/Common/CircularIcon/index.stories.tsx
+++ b/packages/ui-components/Common/CircularIcon/index.stories.tsx
@@ -7,7 +7,7 @@ type Meta = MetaObj<typeof CircularIcon>;
 
 export const Icons: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+    <div className="flex items-center gap-4">
       <CircularIcon symbol="B" color="#3b82f6" size="sm" />
       <CircularIcon symbol="G" color="#10b981" size="md" />
       <CircularIcon symbol="R" color="#ef4444" size="lg" />

From a21a80931fbbf0898c282bb57703c0a9272a8d51 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Sat, 31 May 2025 16:10:55 -0400
Subject: [PATCH 3/7] Apply suggestions from code review

Co-authored-by: Caner Akdas <canerakdas@gmail.com>
Signed-off-by: Aviv Keller <me@aviv.sh>
---
 .../ui-components/Common/CircularIcon/index.module.css   | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/ui-components/Common/CircularIcon/index.module.css b/packages/ui-components/Common/CircularIcon/index.module.css
index 5633cf79140cb..b1e093a126e6d 100644
--- a/packages/ui-components/Common/CircularIcon/index.module.css
+++ b/packages/ui-components/Common/CircularIcon/index.module.css
@@ -9,19 +9,16 @@
     text-white;
 
   &.lg {
-    @apply h-12
-      w-12
+    @apply size-12
       text-2xl;
   }
 
   &.md {
-    @apply h-10
-      w-10
+    @apply size-10
       text-xl;
   }
 
   &.sm {
-    @apply h-8
-      w-8;
+    @apply size-8
   }
 }

From 082cdd150c400e381bfa7a6bf2f5ce0693634495 Mon Sep 17 00:00:00 2001
From: avivkeller <me@aviv.sh>
Date: Sat, 31 May 2025 16:27:55 -0400
Subject: [PATCH 4/7] fixup!

---
 .../Common/CircularIcon/index.module.css      | 30 ++++++++++++++-
 .../Common/CircularIcon/index.stories.tsx     | 19 +++++++---
 .../Common/CircularIcon/index.tsx             | 37 ++++++++++++-------
 3 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/packages/ui-components/Common/CircularIcon/index.module.css b/packages/ui-components/Common/CircularIcon/index.module.css
index b1e093a126e6d..7e60a51a1ab58 100644
--- a/packages/ui-components/Common/CircularIcon/index.module.css
+++ b/packages/ui-components/Common/CircularIcon/index.module.css
@@ -19,6 +19,34 @@
   }
 
   &.sm {
-    @apply size-8
+    @apply size-8;
+  }
+
+  &.event {
+    @apply bg-purple-600;
+  }
+
+  &.method {
+    @apply bg-info-600;
+  }
+
+  &.property {
+    @apply bg-green-600;
+  }
+
+  &.class {
+    @apply bg-warning-600;
+  }
+
+  &.module {
+    @apply bg-red-600;
+  }
+
+  &.classMethod {
+    @apply bg-blue-600;
+  }
+
+  &.ctor {
+    @apply bg-pink-600;
   }
 }
diff --git a/packages/ui-components/Common/CircularIcon/index.stories.tsx b/packages/ui-components/Common/CircularIcon/index.stories.tsx
index 20c0a23925c68..ae47ed11849e5 100644
--- a/packages/ui-components/Common/CircularIcon/index.stories.tsx
+++ b/packages/ui-components/Common/CircularIcon/index.stories.tsx
@@ -1,16 +1,25 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import CircularIcon from '#ui/Common/CircularIcon';
+import CircularIcon, { type CircularIconProps } from '#ui/Common/CircularIcon';
 
 type Story = StoryObj<typeof CircularIcon>;
 type Meta = MetaObj<typeof CircularIcon>;
 
 export const Icons: Story = {
   render: () => (
-    <div className="flex items-center gap-4">
-      <CircularIcon symbol="B" color="#3b82f6" size="sm" />
-      <CircularIcon symbol="G" color="#10b981" size="md" />
-      <CircularIcon symbol="R" color="#ef4444" size="lg" />
+    <div className="grid grid-cols-3 gap-6 p-6">
+      {['event', 'method', 'property', 'class', 'module', 'classMethod', 'ctor']
+        .map(kind =>
+          ['sm', 'md', 'lg'].map(size => (
+            <div key={`${kind}-${size}`} className="flex justify-center">
+              <CircularIcon
+                kind={kind as CircularIconProps['kind']}
+                size={size as CircularIconProps['size']}
+              />
+            </div>
+          ))
+        )
+        .flat()}
     </div>
   ),
 };
diff --git a/packages/ui-components/Common/CircularIcon/index.tsx b/packages/ui-components/Common/CircularIcon/index.tsx
index d70159c20f807..6735c5b915fb5 100644
--- a/packages/ui-components/Common/CircularIcon/index.tsx
+++ b/packages/ui-components/Common/CircularIcon/index.tsx
@@ -2,23 +2,32 @@ import classNames from 'classnames';
 
 import styles from './index.module.css';
 
-interface CircularIconProps {
-  symbol: string;
-  color: string;
+export type CircularIconProps = {
+  kind:
+    | 'event'
+    | 'method'
+    | 'property'
+    | 'class'
+    | 'module'
+    | 'classMethod'
+    | 'ctor';
   size?: 'lg' | 'md' | 'sm';
-}
+};
+
+const symbolMap = {
+  event: 'E',
+  method: 'M',
+  property: 'P',
+  class: 'C',
+  module: 'M',
+  classMethod: 'S',
+  ctor: 'C',
+} as const;
 
-export default function CircularIcon({
-  symbol,
-  color,
-  size = 'md',
-}: CircularIconProps) {
+export default function CircularIcon({ kind, size = 'md' }: CircularIconProps) {
   return (
-    <div
-      className={classNames(styles.icon, styles[size])}
-      style={{ backgroundColor: color }}
-    >
-      <span>{symbol}</span>
+    <div className={classNames(styles.icon, styles[size], styles[kind])}>
+      <span>{symbolMap[kind]}</span>
     </div>
   );
 }

From d1d404fd27ab7c077df5cfaf1d2e36087efc13dd Mon Sep 17 00:00:00 2001
From: avivkeller <me@aviv.sh>
Date: Sat, 31 May 2025 18:36:24 -0400
Subject: [PATCH 5/7] rename

---
 .../{CircularIcon => DataTag}/index.module.css   |  2 +-
 .../{CircularIcon => DataTag}/index.stories.tsx  | 16 ++++++++--------
 .../Common/{CircularIcon => DataTag}/index.tsx   |  9 ++++++---
 3 files changed, 15 insertions(+), 12 deletions(-)
 rename packages/ui-components/Common/{CircularIcon => DataTag}/index.module.css (98%)
 rename packages/ui-components/Common/{CircularIcon => DataTag}/index.stories.tsx (53%)
 rename packages/ui-components/Common/{CircularIcon => DataTag}/index.tsx (54%)

diff --git a/packages/ui-components/Common/CircularIcon/index.module.css b/packages/ui-components/Common/DataTag/index.module.css
similarity index 98%
rename from packages/ui-components/Common/CircularIcon/index.module.css
rename to packages/ui-components/Common/DataTag/index.module.css
index 7e60a51a1ab58..928d800336589 100644
--- a/packages/ui-components/Common/CircularIcon/index.module.css
+++ b/packages/ui-components/Common/DataTag/index.module.css
@@ -1,6 +1,6 @@
 @reference "../../styles/index.css";
 
-.icon {
+.dataTag {
   @apply flex
     items-center
     justify-center
diff --git a/packages/ui-components/Common/CircularIcon/index.stories.tsx b/packages/ui-components/Common/DataTag/index.stories.tsx
similarity index 53%
rename from packages/ui-components/Common/CircularIcon/index.stories.tsx
rename to packages/ui-components/Common/DataTag/index.stories.tsx
index ae47ed11849e5..d0bb7488c8bd4 100644
--- a/packages/ui-components/Common/CircularIcon/index.stories.tsx
+++ b/packages/ui-components/Common/DataTag/index.stories.tsx
@@ -1,20 +1,20 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import CircularIcon, { type CircularIconProps } from '#ui/Common/CircularIcon';
+import DataTag, { type DataTagProps } from '#ui/Common/DataTag';
 
-type Story = StoryObj<typeof CircularIcon>;
-type Meta = MetaObj<typeof CircularIcon>;
+type Story = StoryObj<typeof DataTag>;
+type Meta = MetaObj<typeof DataTag>;
 
-export const Icons: Story = {
+export const DataTags: Story = {
   render: () => (
     <div className="grid grid-cols-3 gap-6 p-6">
       {['event', 'method', 'property', 'class', 'module', 'classMethod', 'ctor']
         .map(kind =>
           ['sm', 'md', 'lg'].map(size => (
             <div key={`${kind}-${size}`} className="flex justify-center">
-              <CircularIcon
-                kind={kind as CircularIconProps['kind']}
-                size={size as CircularIconProps['size']}
+              <DataTag
+                kind={kind as DataTagProps['kind']}
+                size={size as DataTagProps['size']}
               />
             </div>
           ))
@@ -24,4 +24,4 @@ export const Icons: Story = {
   ),
 };
 
-export default { component: CircularIcon } as Meta;
+export default { component: DataTag } as Meta;
diff --git a/packages/ui-components/Common/CircularIcon/index.tsx b/packages/ui-components/Common/DataTag/index.tsx
similarity index 54%
rename from packages/ui-components/Common/CircularIcon/index.tsx
rename to packages/ui-components/Common/DataTag/index.tsx
index 6735c5b915fb5..624fe2a917280 100644
--- a/packages/ui-components/Common/CircularIcon/index.tsx
+++ b/packages/ui-components/Common/DataTag/index.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 
 import styles from './index.module.css';
 
-export type CircularIconProps = {
+export type DataTagProps = {
   kind:
     | 'event'
     | 'method'
@@ -14,6 +14,9 @@ export type CircularIconProps = {
   size?: 'lg' | 'md' | 'sm';
 };
 
+// These symbols match up with the types used in
+// node core, and the ones defined at
+// https://github.com/nodejs/api-docs-tooling/blob/main/src/types.d.ts#L22 (`HeadingMetadataEntry['type']`)
 const symbolMap = {
   event: 'E',
   method: 'M',
@@ -24,9 +27,9 @@ const symbolMap = {
   ctor: 'C',
 } as const;
 
-export default function CircularIcon({ kind, size = 'md' }: CircularIconProps) {
+export default function DataTag({ kind, size = 'md' }: DataTagProps) {
   return (
-    <div className={classNames(styles.icon, styles[size], styles[kind])}>
+    <div className={classNames(styles.dataTag, styles[size], styles[kind])}>
       <span>{symbolMap[kind]}</span>
     </div>
   );

From b9aed992c03e5f6db548c11da1c190dfed953aa2 Mon Sep 17 00:00:00 2001
From: avivkeller <me@aviv.sh>
Date: Sat, 31 May 2025 18:38:52 -0400
Subject: [PATCH 6/7] code review

---
 packages/ui-components/Common/DataTag/index.module.css  | 4 ++--
 packages/ui-components/Common/DataTag/index.stories.tsx | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/Common/DataTag/index.module.css b/packages/ui-components/Common/DataTag/index.module.css
index 928d800336589..1cf2a76d0d094 100644
--- a/packages/ui-components/Common/DataTag/index.module.css
+++ b/packages/ui-components/Common/DataTag/index.module.css
@@ -23,7 +23,7 @@
   }
 
   &.event {
-    @apply bg-purple-600;
+    @apply bg-accent1-600;
   }
 
   &.method {
@@ -47,6 +47,6 @@
   }
 
   &.ctor {
-    @apply bg-pink-600;
+    @apply bg-accent2-600;
   }
 }
diff --git a/packages/ui-components/Common/DataTag/index.stories.tsx b/packages/ui-components/Common/DataTag/index.stories.tsx
index d0bb7488c8bd4..2cbbf3f7f4364 100644
--- a/packages/ui-components/Common/DataTag/index.stories.tsx
+++ b/packages/ui-components/Common/DataTag/index.stories.tsx
@@ -11,7 +11,11 @@ export const DataTags: Story = {
       {['event', 'method', 'property', 'class', 'module', 'classMethod', 'ctor']
         .map(kind =>
           ['sm', 'md', 'lg'].map(size => (
-            <div key={`${kind}-${size}`} className="flex justify-center">
+            <div
+              key={`${kind}-${size}`}
+              className="flex justify-center"
+              title={kind}
+            >
               <DataTag
                 kind={kind as DataTagProps['kind']}
                 size={size as DataTagProps['size']}

From 7e2faf1f77bd28143a6994dae477f37e227d49ae Mon Sep 17 00:00:00 2001
From: avivkeller <me@aviv.sh>
Date: Sun, 1 Jun 2025 09:14:38 -0400
Subject: [PATCH 7/7] code review

---
 packages/ui-components/Common/DataTag/index.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/ui-components/Common/DataTag/index.tsx b/packages/ui-components/Common/DataTag/index.tsx
index 624fe2a917280..ad616fe9009e7 100644
--- a/packages/ui-components/Common/DataTag/index.tsx
+++ b/packages/ui-components/Common/DataTag/index.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import type { FC } from 'react';
 
 import styles from './index.module.css';
 
@@ -27,10 +28,10 @@ const symbolMap = {
   ctor: 'C',
 } as const;
 
-export default function DataTag({ kind, size = 'md' }: DataTagProps) {
-  return (
-    <div className={classNames(styles.dataTag, styles[size], styles[kind])}>
-      <span>{symbolMap[kind]}</span>
-    </div>
-  );
-}
+const DataTag: FC<DataTagProps> = ({ kind, size = 'md' }) => (
+  <div className={classNames(styles.dataTag, styles[size], styles[kind])}>
+    <span>{symbolMap[kind]}</span>
+  </div>
+);
+
+export default DataTag;