diff --git a/apps/frontpage/components/docs/mdx/code-snippets/utils/get-active-content.ts b/apps/frontpage/components/docs/mdx/code-snippets/utils/get-active-content.ts index b0c7ba44..cc04ea0d 100644 --- a/apps/frontpage/components/docs/mdx/code-snippets/utils/get-active-content.ts +++ b/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( + (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, }; }; diff --git a/apps/frontpage/content/releases/10.2.md b/apps/frontpage/content/releases/10.2.md new file mode 100644 index 00000000..680896b6 --- /dev/null +++ b/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. diff --git a/packages/utils/src/docs-versions.tsx b/packages/utils/src/docs-versions.tsx index fd5b7932..54184001 100644 --- a/packages/utils/src/docs-versions.tsx +++ b/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, // },