feat: add storybook playground link

Co-Authored-By: Scott Wu <sw@scottwu.ca>

Author: yannbf

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/pages/package/[[org]]/[name].vue

@@ -109,6 +109,26 @@ const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   { default: () => ({ html: '', mdExists: false, playgroundLinks: [], toc: [] }) },
 )
 
+const { data: packageJson } = useLazyFetch<{ storybook?: { title: string; url: string } }>(() => {
+  const version = requestedVersion.value ?? 'latest'
+  return `https://cdn.jsdelivr.net/npm/${packageName.value}@${version}/package.json`
+})
+
+const playgroundLinks = computed(() => [
+  ...readmeData.value.playgroundLinks,
+  // Libraries with a storybook field in package.json contain a link to their deployed playground
+  ...(packageJson.value?.storybook
+    ? [
+        {
+          url: packageJson.value.storybook.url,
+          provider: 'storybook',
+          providerName: 'Storybook',
+          label: 'Storybook',
+        },
+      ]
+    : []),
+])
+
 const {
   data: readmeMarkdownData,
   status: readmeMarkdownStatus,
@@ -1387,10 +1407,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" />
 

uno.config.ts

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