@node-core/ui-components 1.0.1-df203d0fe21ee5d80d258c60dc821e8ac0601ce4 → 1.0.1-ed840c2c5b3a7f7a58ec6d75280c2b34129fb5dc

package/Common/AvatarGroup/index.module.css

@@ -4,22 +4,18 @@
   @apply flex
     flex-wrap
     items-center;
-
-  &:not(.expandable) {
-    > span {
-      @apply ml-0;
-    }
-  }
 }
 
 .small {
   > span {
-    @apply -ml-2;
+    @apply -ml-2
+      first:ml-0;
   }
 }
 
 .medium {
   > span {
-    @apply -ml-2.5;
+    @apply -ml-2.5
+      first:ml-0;
   }
 }

package/Common/AvatarGroup/index.tsx

@@ -42,11 +42,7 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
     : undefined;
 
   return (
-    <div
-      className={classNames(styles.avatarGroup, styles[size], {
-        [styles.expandable]: avatars.length > limit,
-      })}
-    >
+    <div className={classNames(styles.avatarGroup, styles[size])}>
       {renderAvatars.map(avatar => (
         <Tooltip
           key={avatar.nickname}

package/Common/BaseCodeBox/index.module.css

@@ -73,12 +73,6 @@
   }
 }
 
-.notification {
-  @apply flex
-    items-center
-    gap-3;
-}
-
 .icon {
   @apply size-4;
 }

package/Common/BaseCodeBox/index.tsx

@@ -1,11 +1,8 @@
 'use client';
 
-import {
-  DocumentDuplicateIcon,
-  CodeBracketIcon,
-} from '@heroicons/react/24/outline';
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
-import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import { Fragment, isValidElement, useRef } from 'react';
 
 import BaseButton from '#ui/Common/BaseButton';
@@ -69,10 +66,9 @@ const transformCode = <T extends ReactElement<PropsWithChildren>>(
 interface CodeBoxProps {
   language: string;
   className?: string;
-  onCopy: (text: string, message: ReactNode) => void;
+  onCopy: (text: string) => void;
   as?: LinkLike;
-  copyText: string;
-  copiedText: string;
+  buttonText: string;
   showCopyButton?: boolean;
 }
 
@@ -81,8 +77,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   language,
   className,
   onCopy,
-  copiedText,
-  copyText,
+  buttonText,
   as = 'a',
   showCopyButton = true,
 }: PropsWithChildren<CodeBoxProps>) => {
@@ -91,13 +86,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   const handleCopy = (): void => {
     const text = containerRef.current?.textContent;
     if (text) {
-      onCopy(
-        text,
-        <div className={styles.notification}>
-          <CodeBracketIcon className={styles.icon} />
-          {copiedText}
-        </div>
-      );
+      onCopy(text);
     }
   };
 
@@ -121,7 +110,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
               onClick={handleCopy}
             >
               <DocumentDuplicateIcon className={styles.icon} />
-              {copyText}
+              {buttonText}
             </BaseButton>
           )}
         </div>

package/Common/CodeTabs/index.stories.tsx

@@ -40,8 +40,7 @@ server.listen(port, hostname, () => {
 
 const boxProps = {
   onCopy: console.log,
-  copyText: '[Copy Text]',
-  copiedText: '[Copied Text]',
+  buttonText: '[Button Text]',
 };
 
 const TabsContent: FC = () => (

package/Common/DataTag/index.module.css

@@ -0,0 +1,56 @@
+@reference "../../styles/index.css";
+
+.dataTag {
+  @apply flex
+    items-center
+    justify-center
+    rounded-full
+    font-semibold
+    text-white;
+
+  &.lg {
+    @apply size-12
+      text-2xl;
+  }
+
+  &.md {
+    @apply size-10
+      text-xl;
+  }
+
+  &.sm {
+    @apply size-8;
+  }
+
+  &.event {
+    @apply bg-accent1-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-accent2-600;
+  }
+
+  &.global {
+    @apply bg-amber-600;
+  }
+}

package/Common/DataTag/index.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import DataTag, { type DataTagProps } from '#ui/Common/DataTag';
+
+type Story = StoryObj<typeof DataTag>;
+type Meta = MetaObj<typeof DataTag>;
+
+export const DataTags: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-6 p-6">
+      {[
+        'event',
+        'method',
+        'property',
+        'class',
+        'module',
+        'classMethod',
+        'ctor',
+        'global',
+      ]
+        .map(kind =>
+          ['sm', 'md', 'lg'].map(size => (
+            <div
+              key={`${kind}-${size}`}
+              className="flex justify-center"
+              title={kind}
+            >
+              <DataTag
+                kind={kind as DataTagProps['kind']}
+                size={size as DataTagProps['size']}
+              />
+            </div>
+          ))
+        )
+        .flat()}
+    </div>
+  ),
+};
+
+export default { component: DataTag } as Meta;

package/Common/DataTag/index.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+export type DataTagProps = {
+  kind:
+    | 'event'
+    | 'method'
+    | 'property'
+    | 'class'
+    | 'module'
+    | 'classMethod'
+    | 'global'
+    | 'ctor';
+  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',
+  property: 'P',
+  class: 'C',
+  module: 'M',
+  classMethod: 'S',
+  global: 'G',
+  ctor: 'C',
+} as const;
+
+const DataTag: FC<DataTagProps> = ({ kind, size = 'md' }) => (
+  <div className={classNames(styles.dataTag, styles[size], styles[kind])}>
+    <span>{symbolMap[kind]}</span>
+  </div>
+);
+
+export default DataTag;

package/MDX/CodeTabs.tsx

@@ -0,0 +1,47 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import type { FC, ReactElement } from 'react';
+
+import CodeTabs from '#ui/Common/CodeTabs';
+
+type MDXCodeTabsProps = {
+  children: Array<ReactElement<unknown>>;
+  languages: string;
+  displayNames?: string;
+  defaultTab?: string;
+};
+
+const MDXCodeTabs: FC<MDXCodeTabsProps> = ({
+  languages: rawLanguages,
+  displayNames: rawDisplayNames,
+  children: codes,
+  defaultTab = '0',
+  ...props
+}) => {
+  const languages = rawLanguages.split('|');
+  const displayNames = rawDisplayNames?.split('|') ?? [];
+
+  const tabs = languages.map((language, index) => {
+    const displayName = displayNames[index];
+
+    return {
+      key: `${language}-${index}`,
+      label: displayName?.length ? displayName : language.toUpperCase(),
+    };
+  });
+
+  return (
+    <CodeTabs
+      tabs={tabs}
+      defaultValue={tabs[Number(defaultTab)].key}
+      {...props}
+    >
+      {languages.map((_, index) => (
+        <TabsPrimitive.Content key={tabs[index].key} value={tabs[index].key}>
+          {codes[index]}
+        </TabsPrimitive.Content>
+      ))}
+    </CodeTabs>
+  );
+};
+
+export default MDXCodeTabs;

package/package.json

@@ -13,6 +13,7 @@
   "files": [
     "Common",
     "Containers",
+    "MDX",
     "Icons",
     "styles",
     "types.ts",
@@ -20,49 +21,46 @@
   ],
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@radix-ui/react-avatar": "^1.1.9",
-    "@radix-ui/react-dialog": "^1.1.7",
-    "@radix-ui/react-dropdown-menu": "~2.1.6",
-    "@radix-ui/react-label": "~2.1.2",
-    "@radix-ui/react-select": "~2.2.2",
-    "@radix-ui/react-separator": "~1.1.3",
-    "@radix-ui/react-tabs": "~1.1.3",
-    "@radix-ui/react-toast": "~1.2.6",
-    "@radix-ui/react-tooltip": "~1.2.4",
-    "@tailwindcss/postcss": "~4.1.5",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "~2.1.15",
+    "@radix-ui/react-label": "~2.1.7",
+    "@radix-ui/react-select": "~2.2.5",
+    "@radix-ui/react-separator": "~1.1.7",
+    "@radix-ui/react-tabs": "~1.1.12",
+    "@radix-ui/react-toast": "~1.2.14",
+    "@radix-ui/react-tooltip": "~1.2.7",
+    "@tailwindcss/postcss": "~4.1.8",
     "@vcarl/remark-headings": "~0.1.0",
     "classnames": "~2.5.1",
     "postcss-calc": "^10.1.1",
     "tailwindcss": "~4.0.17"
   },
   "devDependencies": {
-    "@storybook/addon-controls": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-themes": "^9.0.3",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.6.12",
-    "@storybook/addon-viewport": "^8.6.12",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/react": "^9.0.3",
+    "@storybook/react-webpack5": "^9.0.3",
     "@testing-library/user-event": "~14.6.1",
     "@types/node": "22.15.3",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.1.6",
     "cross-env": "^7.0.3",
     "css-loader": "~7.1.2",
     "eslint-plugin-react": "~7.37.4",
-    "eslint-plugin-storybook": "~0.12.0",
+    "eslint-plugin-storybook": "~9.0.3",
     "global-jsdom": "^26.0.0",
     "postcss-loader": "~8.1.1",
     "react": "^19.1.0",
-    "storybook": "^8.6.11",
+    "storybook": "^9.0.3",
     "style-loader": "~4.0.0",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.20.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-order": "7.0.0",
     "stylelint-selector-bem-pattern": "4.0.1",
     "tsx": "^4.19.3",
     "typescript": "~5.8.2",
-    "typescript-eslint": "~8.31.1"
+    "typescript-eslint": "~8.33.1"
   },
   "imports": {
     "#ui/*": [
@@ -76,7 +74,7 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "1.0.1-df203d0fe21ee5d80d258c60dc821e8ac0601ce4",
+  "version": "1.0.1-ed840c2c5b3a7f7a58ec6d75280c2b34129fb5dc",
   "scripts": {
     "check-types": "tsc --noEmit",
     "lint": "turbo run lint:js lint:css",