Merge branch 'main' of https://github.com/TanStack/tanstack.com

Author: tannerlinsley

src/components/Markdown.tsx

@@ -13,6 +13,8 @@ import { renderMarkdown } from '~/utils/markdown'
 import { getNetlifyImageUrl } from '~/utils/netlifyImage'
 import { Tabs } from '~/components/Tabs'
 import { CodeBlock } from './CodeBlock'
+import { PackageManagerTabs } from './PackageManagerTabs'
+import type { Framework } from '~/libraries/types'
 
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
@@ -112,6 +114,7 @@ const options: HTMLReactParserOptions = {
       if (domNode.name === 'md-comment-component') {
         const componentName = domNode.attribs['data-component']
         const rawAttributes = domNode.attribs['data-attributes']
+        const pmMeta = domNode.attribs['data-package-manager-meta']
         const attributes: Record<string, any> = {}
         try {
           Object.assign(attributes, JSON.parse(rawAttributes))
@@ -121,9 +124,39 @@ const options: HTMLReactParserOptions = {
 
         switch (componentName?.toLowerCase()) {
           case 'tabs': {
+            // Check if this is a package-manager tabs (has metadata)
+            if (pmMeta) {
+              try {
+                const { packagesByFramework, mode } = JSON.parse(pmMeta)
+                const id =
+                  attributes.id ||
+                  `package-manager-tabs-${Math.random().toString(36).slice(2, 9)}`
+                const frameworks = Object.keys(
+                  packagesByFramework,
+                ) as Framework[]
+
+                return (
+                  <PackageManagerTabs
+                    id={id}
+                    packagesByFramework={packagesByFramework}
+                    mode={mode}
+                    frameworks={frameworks}
+                  />
+                )
+              } catch {
+                // Fall through to default tabs if parsing fails
+              }
+            }
+
+            // Default tabs variant
             const tabs = attributes.tabs
             const id =
               attributes.id || `tabs-${Math.random().toString(36).slice(2, 9)}`
+
+            if (!tabs || !Array.isArray(tabs)) {
+              return null
+            }
+
             const panelElements = domNode.children?.filter(
               (child): child is Element =>
                 child instanceof Element && child.name === 'md-tab-panel',

src/components/PackageManagerTabs.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react'
+import { useCurrentFramework } from './FrameworkSelect'
+import { useLocalStorage } from '~/utils/useLocalStorage'
+import { Tabs, type TabDefinition } from './Tabs'
+import { CodeBlock } from './CodeBlock'
+import type { Framework } from '~/libraries/types'
+
+type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
+type InstallMode = 'install' | 'dev-install'
+
+type PackageManagerTabsProps = {
+  id: string
+  packagesByFramework: Record<string, string>
+  mode: InstallMode
+  frameworks: Framework[]
+}
+
+const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'pnpm', 'yarn', 'bun']
+
+function getInstallCommand(
+  packageManager: PackageManager,
+  packages: string,
+  mode: InstallMode,
+): string {
+  if (mode === 'dev-install') {
+    switch (packageManager) {
+      case 'npm':
+        return `npm i -D ${packages}`
+      case 'pnpm':
+        return `pnpm add -D ${packages}`
+      case 'yarn':
+        return `yarn add -D ${packages}`
+      case 'bun':
+        return `bun add -d ${packages}`
+    }
+  }
+
+  // install mode
+  switch (packageManager) {
+    case 'npm':
+      return `npm i ${packages}`
+    case 'pnpm':
+      return `pnpm add ${packages}`
+    case 'yarn':
+      return `yarn add ${packages}`
+    case 'bun':
+      return `bun add ${packages}`
+  }
+}
+
+export function PackageManagerTabs({
+  id,
+  packagesByFramework,
+  mode,
+  frameworks,
+}: PackageManagerTabsProps) {
+  const { framework: currentFramework } = useCurrentFramework(frameworks)
+  const [storedPackageManager, setStoredPackageManager] =
+    useLocalStorage<PackageManager>('packageManager', PACKAGE_MANAGERS[0])
+
+  // Normalize framework key to lowercase for lookup
+  const normalizedFramework = currentFramework.toLowerCase()
+  const packages = packagesByFramework[normalizedFramework]
+
+  // Hide component if current framework not in package list
+  if (!packages) {
+    return null
+  }
+
+  // Use stored package manager if valid, otherwise default to first one
+  const selectedPackageManager = PACKAGE_MANAGERS.includes(storedPackageManager)
+    ? storedPackageManager
+    : PACKAGE_MANAGERS[0]
+
+  // Generate tabs for each package manager
+  const tabs: TabDefinition[] = PACKAGE_MANAGERS.map((pm) => ({
+    slug: pm,
+    name: pm,
+    headers: [],
+  }))
+
+  // Generate children (command blocks) for each package manager
+  const children = PACKAGE_MANAGERS.map((pm) => {
+    const command = getInstallCommand(pm, packages, mode)
+    return (
+      <CodeBlock key={pm}>
+        <code className="language-bash">{command}</code>
+      </CodeBlock>
+    )
+  })
+
+  return (
+    <Tabs
+      id={id}
+      tabs={tabs}
+      children={children}
+      activeSlug={selectedPackageManager}
+      onTabChange={(slug) => setStoredPackageManager(slug as PackageManager)}
+    />
+  )
+}

src/components/Tabs.tsx

@@ -12,16 +12,37 @@ export type TabsProps = {
   tabs: Array<TabDefinition>
   children: Array<React.ReactNode>
   id: string
+  activeSlug?: string
+  onTabChange?: (slug: string) => void
 }
 
-export function Tabs({ tabs, id, children }: TabsProps) {
+export function Tabs({
+  tabs,
+  id,
+  children,
+  activeSlug: controlledActiveSlug,
+  onTabChange,
+}: TabsProps) {
   const params = useParams({ strict: false })
   const framework = 'framework' in params ? params.framework : undefined
 
-  const [activeSlug, setActiveSlug] = React.useState(
+  const [internalActiveSlug, setInternalActiveSlug] = React.useState(
     () => tabs.find((tab) => tab.slug === framework)?.slug || tabs[0].slug,
   )
 
+  // Use controlled state if provided, otherwise use internal state
+  const activeSlug = controlledActiveSlug ?? internalActiveSlug
+  const setActiveSlug = React.useCallback(
+    (slug: string) => {
+      if (onTabChange) {
+        onTabChange(slug)
+      } else {
+        setInternalActiveSlug(slug)
+      }
+    },
+    [onTabChange],
+  )
+
   return (
     <div className="not-prose my-4">
       <div className="flex items-center justify-start gap-2 rounded-t-md border-1 border-b-none border-gray-200 dark:border-gray-800 overflow-x-auto overflow-y-hidden bg-white dark:bg-gray-950">
@@ -65,7 +86,7 @@ const Tab = ({
   id: string
   tab: TabDefinition
   activeSlug: string
-  setActiveSlug: React.Dispatch<React.SetStateAction<string>>
+  setActiveSlug: (slug: string) => void
 }) => {
   const option = React.useMemo(
     () => frameworkOptions.find((o) => o.value === tab.slug),