feat: add storybook playground link (npmx-dev#1624)

Co-authored-by: Scott Wu <sw@scottwu.ca>
Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: 3 people

app/components/Package/Playgrounds.vue

@@ -20,6 +20,7 @@ const providerIcons: Record<string, string> = {
   'solid-playground': 'i-simple-icons:solid',
   'svelte-playground': 'i-simple-icons:svelte',
   'tailwind-playground': 'i-simple-icons:tailwindcss',
+  'storybook': 'i-simple-icons:storybook',
 }
 
 // Map provider id to color class
@@ -37,6 +38,7 @@ const providerColors: Record<string, string> = {
   'solid-playground': 'text-provider-solid',
   'svelte-playground': 'text-provider-svelte',
   'tailwind-playground': 'text-provider-tailwind',
+  'storybook': 'text-provider-storybook',
 }
 
 function getIcon(provider: string): string {

app/composables/npm/usePackage.ts

@@ -120,6 +120,14 @@ export function transformPackument(
     license = license.type
   }
 
+  // Extract storybook field from the requested version (custom package.json field)
+  const requestedPkgVersion = requestedVersion ? pkg.versions[requestedVersion] : null
+  const rawStorybook = requestedPkgVersion?.storybook
+  const storybook =
+    rawStorybook && typeof rawStorybook === 'object' && 'url' in rawStorybook
+      ? ({ url: rawStorybook.url } as { url: string })
+      : undefined
+
   return {
     '_id': pkg._id,
     '_rev': pkg._rev,
@@ -134,6 +142,7 @@ export function transformPackument(
     'keywords': pkg.keywords,
     'repository': pkg.repository,
     'bugs': pkg.bugs,
+    ...(storybook && { storybook }),
     'requestedVersion': versionData,
     'versions': filteredVersions,
     'securityVersions': securityVersions,

app/pages/package/[[org]]/[name].vue

@@ -109,6 +109,21 @@ const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   { default: () => ({ html: '', mdExists: false, playgroundLinks: [], toc: [] }) },
 )
 
+const playgroundLinks = computed(() => [
+  ...readmeData.value.playgroundLinks,
+  // Libraries with a storybook field in package.json contain a link to their deployed playground
+  ...(pkg.value?.storybook?.url
+    ? [
+        {
+          url: pkg.value.storybook.url,
+          provider: 'storybook',
+          providerName: 'Storybook',
+          label: 'Storybook',
+        },
+      ]
+    : []),
+])
+
 const {
   data: readmeMarkdownData,
   status: readmeMarkdownStatus,
@@ -1357,10 +1372,7 @@ const showSkeleton = shallowRef(false)
           />
 
           <!-- Playground links -->
-          <PackagePlaygrounds
-            v-if="readmeData?.playgroundLinks?.length"
-            :links="readmeData.playgroundLinks"
-          />
+          <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
 
           <PackageCompatibility :engines="displayVersion?.engines" />
 

shared/types/npm-registry.ts

@@ -83,6 +83,7 @@ export interface SlimPackument {
   'keywords'?: string[]
   'repository'?: { type?: string; url?: string; directory?: string }
   'bugs'?: { url?: string; email?: string }
+  'storybook'?: { url: string }
   /** current version */
   'requestedVersion': SlimPackumentVersion | null
   /** Only includes dist-tag versions (with installScripts info added per version) */

uno.config.ts

@@ -104,6 +104,7 @@ export default defineConfig({
         solid: '#2C4F7C',
         svelte: '#FF3E00',
         tailwind: '#06B6D4',
+        storybook: '#FF4785',
       },
     },
     animation: {