feat: conditional exports, numerous bug fixes and ux improvements

.github/workflows/publish-packages.yml

@@ -116,10 +116,11 @@ jobs:
           # Check if a custom publish script exists in package.json
           if jq -e '.scripts.release' package.json > /dev/null; then
             pnpm run release
-          else
-            pnpm publish --access public --no-git-checks
           fi
 
+          # Then publish the package to npm
+          pnpm publish --access public --no-git-checks
+
       - name: Notify on Manual Release
         if: ${{ github.event_name == 'workflow_dispatch' }}
         uses: rtCamp/action-slack-notify@e31e87e03dd19038e411e38ae27cbad084a90661 # 2.3.3

apps/site/components/Common/Partners/index.tsx

@@ -1,4 +1,3 @@
-import Tooltip from '@node-core/ui-components/Common/Tooltip';
 import * as PartnerLogos from '@node-core/ui-components/Icons/PartnerLogos';
 
 import providePartners from '#site/next-data/providers/partners';
@@ -36,15 +35,15 @@ const renderSmallPartner = (partner: Partner) => {
   const Logo = PartnerLogos[partner.id];
 
   return (
-    <Tooltip
+    <PartnerButton
+      aria-label={partner.name}
       key={partner.id}
-      asChild
-      content={<div className={style.tooltip}>{partner.name}</div>}
+      size="small"
+      href={partner.href}
+      title={partner.name}
     >
-      <PartnerButton aria-label={partner.name} size="small" href={partner.href}>
-        <Logo.Favicon />
-      </PartnerButton>
-    </Tooltip>
+      <Logo.Favicon />
+    </PartnerButton>
   );
 };
 

apps/site/layouts/layouts.module.css

@@ -1,12 +1,12 @@
 @reference "../styles/index.css";
 
 .baseLayout {
-  @apply grid
+  @apply ml:grid
+    ml:grid-cols-[1fr]
+    ml:grid-rows-[auto_1fr_auto]
     h-max
     min-h-full
-    w-full
-    grid-cols-[1fr]
-    grid-rows-[auto_1fr_auto];
+    w-full;
 }
 
 .centeredLayout {

apps/site/next.fetch.mjs

@@ -26,7 +26,7 @@ export const fetchWithRetry = async (
   const backoff = Math.max(0, Number(delay) || 0);
 
   const attemptFetch = attempt =>
-    fetch(url, options).catch(e => {
+    fetch(url, { ...options, signal: AbortSignal.timeout(30000) }).catch(e => {
       if (attempt === retries || !isTimeoutError(e)) {
         throw e;
       }

apps/site/tsconfig.json

@@ -10,6 +10,7 @@
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "Bundler",
+    "customConditions": ["default"],
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",

packages/rehype-shiki/src/plugin.mjs

@@ -13,6 +13,11 @@ const languagePrefix = 'language-';
 // The regex to match metadata
 const rMeta = /(\w+)(?:=(?:"([^"]+)"|(\S+)))?/g;
 
+const getLineCount = value =>
+  value
+    .split('\n')
+    .filter((_, i, arr) => !(i === arr.length - 1 && arr[i] === '')).length;
+
 /**
  * Parses a fenced code block metadata string into a JavaScript object.
  * @param {string} meta - The metadata string from a Markdown code fence.
@@ -163,7 +168,9 @@ export default async function rehypeShikiji(options) {
       const meta = parseMeta(preElement.data?.meta);
 
       // Retrieve the whole <pre> contents as a parsed DOM string
-      const preElementContents = toString(preElement);
+      const preElementContents = toString(preElement).replace(/\n$/, '');
+
+      const lineCount = getLineCount(preElementContents);
 
       // Grabs the relevant alias/name of the language
       const languageId = codeLanguage.slice(languagePrefix.length);
@@ -178,7 +185,8 @@ export default async function rehypeShikiji(options) {
       // Adds the original language back to the <pre> element
       children[0].properties.class = classNames(
         children[0].properties.class,
-        codeLanguage
+        codeLanguage,
+        { 'no-line-numbers': lineCount < 5, 'no-footer': lineCount === 1 }
       );
 
       // Replaces the <pre> element with the updated one

packages/ui-components/README.md

@@ -8,3 +8,23 @@ The components are based on [this design file](https://www.figma.com/design/a10c
 Most components in this package are available on [Chromatic](https://www.chromatic.com/library?appId=64c7d71358830e9105808652).
 
 For additional details regarding specific components, refer to the [nodejs/nodejs.org](https://github.com/nodejs/nodejs.org) repository.
+
+## Local development
+
+To use this package via `npm link` in another repo (for example, doc-kit), build the
+compiled outputs and keep them updated while you work.
+
+```bash
+# From nodejs.org/packages/ui-components
+pnpm install
+node --run compile:watch
+
+# In another terminal, still in nodejs.org/packages/ui-components
+npm link
+
+# From the consumer repo (for example doc-kit)
+npm link @node-core/ui-components
+```
+
+The `compile:watch` script keeps `dist/` up to date so consumers resolve compiled
+CSS and JavaScript instead of the raw Tailwind source.

packages/ui-components/package.json

@@ -3,13 +3,20 @@
   "version": "1.5.10",
   "type": "module",
   "exports": {
-    "./*": [
-      "./src/*",
-      "./src/*.tsx",
-      "./src/*/index.tsx",
-      "./src/*.ts",
-      "./src/*/index.ts"
-    ]
+    "./*": {
+      "rolldown": [
+        "./dist/*",
+        "./dist/*.js",
+        "./dist/*/index.js"
+      ],
+      "default": [
+        "./src/*",
+        "./src/*.tsx",
+        "./src/*/index.tsx",
+        "./src/*.ts",
+        "./src/*/index.ts"
+      ]
+    }
   },
   "repository": {
     "type": "git",
@@ -20,7 +27,8 @@
     "compile:ts": "tsc",
     "compile:css": "postcss --dir dist --base src \"src/**/*.module.css\" src/styles/index.css",
     "compile": "node --run compile:ts && node --run compile:css",
-    "release": "node --run compile && node scripts/publish.mjs",
+    "compile:watch": "node --run compile:ts -- --watch & node --run compile:css -- --watch",
+    "release": "node --run compile",
     "lint": "node --run lint:js && node --run lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
     "lint:css:fix": "node --run lint:css -- --fix",
@@ -80,14 +88,25 @@
     "typescript": "catalog:"
   },
   "imports": {
-    "#ui/*": [
-      "./src/*",
-      "./src/*.tsx",
-      "./src/*/index.tsx",
-      "./src/*.ts",
-      "./src/*/index.ts"
-    ]
+    "#ui/*": {
+      "rolldown": [
+        "./dist/*",
+        "./dist/*.js",
+        "./dist/*/index.js"
+      ],
+      "default": [
+        "./src/*",
+        "./src/*.tsx",
+        "./src/*/index.tsx",
+        "./src/*.ts",
+        "./src/*/index.ts"
+      ]
+    }
   },
+  "files": [
+    "dist/**",
+    "README.md"
+  ],
   "engines": {
     "node": ">=20"
   }

packages/ui-components/src/Common/Badge/index.module.css

@@ -38,6 +38,61 @@
     @apply bg-neutral-800;
   }
 
+  &[data-tooltip] {
+    @apply relative
+      cursor-help;
+  }
+
+  &[data-tooltip]::after {
+    @apply pointer-events-none
+      absolute
+      top-full
+      left-1/2
+      z-10
+      mt-2
+      w-max
+      -translate-x-1/2
+      rounded-md
+      bg-neutral-900
+      px-2.5
+      py-1.5
+      text-xs
+      font-medium
+      text-white
+      opacity-0
+      transition-opacity
+      dark:bg-neutral-100
+      dark:text-neutral-900;
+
+    content: attr(data-tooltip);
+  }
+
+  &[data-tooltip]::before {
+    @apply pointer-events-none
+      absolute
+      top-full
+      left-1/2
+      z-10
+      mt-1
+      h-2
+      w-2
+      -translate-x-1/2
+      rotate-45
+      bg-neutral-900
+      opacity-0
+      transition-opacity
+      dark:bg-neutral-100;
+
+    content: '';
+  }
+
+  &[data-tooltip]:hover::after,
+  &[data-tooltip]:hover::before,
+  &[data-tooltip]:focus-visible::after,
+  &[data-tooltip]:focus-visible::before {
+    @apply opacity-100;
+  }
+
   &.circular {
     @apply font-ibm-plex-mono
       inline-flex

packages/ui-components/src/Common/BaseCodeBox/index.module.css

@@ -53,6 +53,19 @@
             [counter-increment:line];
         }
       }
+
+      &[class*='plain-text'] {
+        @apply font-mono;
+      }
+    }
+
+    &[class*='no-line-numbers'] > code > [class='line'] {
+      @apply pl-0;
+
+      &:not(:empty:last-child)::after {
+        @apply content-none
+          [counter-reset:none];
+      }
     }
   }
 
@@ -62,8 +75,8 @@
       justify-between
       border-t
       border-t-neutral-900
-      px-4
-      py-3
+      px-3
+      py-2
       text-sm
       font-medium;
 
@@ -72,9 +85,15 @@
     }
 
     & > .action {
-      @apply px-3
-        py-1.5
+      @apply px-2.5
+        py-1
+        text-xs
         font-medium;
+
+      > svg {
+        @apply h-4
+          w-4;
+      }
     }
   }
 }