Release 10.2; dedupe snippet tabs, preferring non-common

apps/frontpage/components/docs/mdx/code-snippets/utils/get-active-content.ts

@@ -22,12 +22,80 @@ export const getActiveContentTabs = ({
 } => {
   let error: string | null = null;
 
-  const filterByRenderer = content.filter((item) => {
-    if (item.renderer === activeRenderer || item.renderer === 'common')
-      return true;
+  const filterByLanguage = content.filter((item) => {
+    // If activeLanguage is null, we don't need to filter
+    if (!activeLanguage) return true;
+
+    // If there is only one language, we don't need to filter
+    if (filters.languages.length <= 1) return true;
+
+    // If there's a match, we return true
+    if (item.language === activeLanguage) return true;
+
     return false;
   });
 
+  if (activeLanguage === 'ts' && filterByLanguage.length === 0) {
+    const tsVersions = content.filter(
+      (v) => v.language === 'ts-4-9',
+    );
+    const jsVersions = content.filter(
+      (v) => v.language === 'js',
+    );
+    if (tsVersions.length > 0) {
+      filterByLanguage.splice(-1, 0, ...tsVersions);
+    } else if (jsVersions.length > 0) {
+      filterByLanguage.splice(-1, 0, ...jsVersions);
+    } else {
+      // This mean there's an error
+      // We need to show an error message
+    }
+  }
+
+  if (activeLanguage === 'ts-4-9' && filterByLanguage.length === 0) {
+    const tsVersions = content.filter(
+      (v) => v.language === 'ts',
+    );
+    const jsVersions = content.filter(
+      (v) => v.language === 'js',
+    );
+    if (tsVersions.length > 0) {
+      filterByLanguage.splice(-1, 0, ...tsVersions);
+    } else if (jsVersions.length > 0) {
+      filterByLanguage.splice(-1, 0, ...jsVersions);
+    } else {
+      // This mean there's an error
+      // We need to show an error message
+    }
+  }
+
+  const filterByRenderer = filterByLanguage.reduce<CodeSnippetsProps[]>(
+    (acc, item) => {
+      if (item.packageManager) {
+        // If package manager is defined on the snippet, we skip it here
+        acc.push(item);
+        return acc;
+      }
+
+      if (item.renderer !== activeRenderer && item.renderer !== 'common') {
+        return acc;
+      }
+
+      const existingIndex = acc.findIndex(
+        (existing) => decodeURIComponent(existing.tabTitle ?? '') === decodeURIComponent(item.tabTitle ?? ''),
+      );
+
+      if (existingIndex === -1) {
+        acc.push(item);
+      } else if (item.renderer !== 'common' && acc[existingIndex].renderer === 'common') {
+        acc[existingIndex] = item;
+      }
+
+      return acc;
+    },
+    [],
+  );
+
   let filteredContent = filterByRenderer;
 
   if (filterByRenderer.length === 0) {
@@ -52,7 +120,7 @@ export const getActiveContentTabs = ({
     }
   }
 
-  const filterByPackageManager = filteredContent.filter((item) => {
+  filteredContent = filteredContent.filter((item) => {
     // If activePackageManager is null, we don't need to filter
     if (!activePackageManager) return true;
 
@@ -69,57 +137,10 @@ export const getActiveContentTabs = ({
     return false;
   });
 
-  const filterByLanguage = filterByPackageManager.filter((item) => {
-    // If activeLanguage is null, we don't need to filter
-    if (!activeLanguage) return true;
-
-    // If there is only one language, we don't need to filter
-    if (filters.languages.length <= 1) return true;
-
-    // If there's a match, we return true
-    if (item.language === activeLanguage) return true;
-
-    return false;
-  });
-
-  if (activeLanguage === 'ts' && filterByLanguage.length === 0) {
-    const tsVersions = filterByPackageManager.filter(
-      (v) => v.language === 'ts-4-9',
-    );
-    const jsVersions = filterByPackageManager.filter(
-      (v) => v.language === 'js',
-    );
-    if (tsVersions.length > 0) {
-      filterByLanguage.splice(-1, 0, ...tsVersions);
-    } else if (jsVersions.length > 0) {
-      filterByLanguage.splice(-1, 0, ...jsVersions);
-    } else {
-      // This mean there's an error
-      // We need to show an error message
-    }
-  }
-
-  if (activeLanguage === 'ts-4-9' && filterByLanguage.length === 0) {
-    const tsVersions = filterByPackageManager.filter(
-      (v) => v.language === 'ts',
-    );
-    const jsVersions = filterByPackageManager.filter(
-      (v) => v.language === 'js',
-    );
-    if (tsVersions.length > 0) {
-      filterByLanguage.splice(-1, 0, ...tsVersions);
-    } else if (jsVersions.length > 0) {
-      filterByLanguage.splice(-1, 0, ...jsVersions);
-    } else {
-      // This mean there's an error
-      // We need to show an error message
-    }
-  }
-
-  if (filterByLanguage.length === 0) return { activeContentTabs: null, error };
+  if (filteredContent.length === 0) return { activeContentTabs: null, error };
 
   return {
-    activeContentTabs: filterByLanguage || null,
+    activeContentTabs: filteredContent || null,
     error,
   };
 };

apps/frontpage/content/releases/10.2.md

@@ -0,0 +1,19 @@
+---
+title: 'Storybook 10.2 - January 2026'
+---
+
+_Improved UI and story authoring ergonomics_
+
+Storybook 10.2 contains hundreds of fixes and improvement including:
+
+- 💅 New Viewports and Zoom UI
+- 🏭 Typesafe CSF factories for Vue, Angular, Web Components (preview)
+- 📄 MDX support for Storybook MCP (experimental)
+
+Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) for the full list of changes.
+
+---
+
+There are no breaking changes, but you can refer to our
+[Migration guide](https://storybook.js.org/docs/releases/migration-guide) to upgrade from
+pre-10.0 of Storybook.

packages/utils/src/docs-versions.tsx

@@ -28,14 +28,14 @@ export interface DocsVersion {
  **/
 export const docsVersions: DocsVersion[] = [
   {
-    label: 'Version 10.1',
-    id: '10.1',
+    label: 'Version 10.2',
+    id: '10.2',
     branch: 'main',
   },
   // {
-  //   label: 'Version 10.2 (beta)',
-  //   id: '10.2',
-  //   inSlug: '10.2',
+  //   label: 'Version 10.3 (alpha)',
+  //   id: '10.3',
+  //   inSlug: '10.3',
   //   branch: 'next',
   //   preRelease: true,
   // },