Fix deprecations for Storybook component usage

package.json

@@ -122,7 +122,6 @@
 		"snapshot-diff": "0.10.0",
 		"sprintf-js": "1.1.1",
 		"storybook": "^10.1.11",
-		"storybook-addon-source-link": "2.0.1",
 		"storybook-addon-tag-badges": "3.0.4",
 		"style-loader": "3.2.1",
 		"stylelint-plugin-logical-css": "^1.2.3",

storybook/addons/design-system-theme/manager.ts

@@ -6,7 +6,7 @@ import { createElement, Fragment } from 'react';
 import { addons, types, useGlobals } from 'storybook/manager-api';
 import { MirrorIcon } from '@storybook/icons';
 import {
-	IconButton,
+	Button,
 	WithTooltip,
 	TooltipMessage,
 	TooltipLinkList,
@@ -76,9 +76,9 @@ const ThemeTool = () => {
 	);
 
 	const button = createElement(
-		IconButton,
-		{ title: 'Design System Theme', active: true },
-		createElement( MirrorIcon ),
+		Button,
+		{ ariaLabel: false },
+		createElement( MirrorIcon, { 'aria-hidden': true } ),
 		'Theme'
 	);
 

storybook/addons/source-link/manager.ts

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { createElement } from 'react';
+import { addons, types, useStorybookApi } from 'storybook/manager-api';
+import { JumpToIcon } from '@storybook/icons';
+import { Button } from 'storybook/internal/components';
+
+const ADDON_ID = '@wordpress/storybook-addon-source-link';
+
+const SourceLinkTool = () => {
+	const api = useStorybookApi();
+	const storyData = api.getCurrentStoryData();
+
+	let sourcePath;
+	if ( storyData?.parameters?.sourceLink ) {
+		sourcePath = storyData.parameters.sourceLink;
+	} else if ( storyData?.importPath ) {
+		// importPath is like "../packages/components/src/button/stories/index.story.tsx"
+		// Convert to component directory path: "packages/components/src/button"
+		sourcePath = storyData.importPath
+			.replace( /^\.\.\//, '' ) // Remove leading "../"
+			.replace( /^\.\//, '' ) // Remove leading "./" (for stories in storybook folder)
+			.replace( /\/stories\/.*$/, '' ); // Remove "/stories/..." suffix
+	}
+
+	if ( ! sourcePath ) {
+		return null;
+	}
+
+	const href = `https://github.com/WordPress/gutenberg/blob/trunk/${ sourcePath }`;
+
+	return createElement(
+		Button,
+		{
+			ariaLabel: 'Open source file',
+			title: 'Open source file',
+			asChild: true,
+		},
+		createElement( 'a', { href }, createElement( JumpToIcon ) )
+	);
+};
+
+addons.register( ADDON_ID, () => {
+	addons.add( `${ ADDON_ID }/tool`, {
+		type: types.TOOL,
+		title: 'Source Link',
+		render: SourceLinkTool,
+	} );
+} );

storybook/addons/source-link/preset.ts

@@ -0,0 +1,5 @@
+import { fileURLToPath } from 'node:url';
+
+export const managerEntries = [
+	fileURLToPath( import.meta.resolve( './manager.ts' ) ),
+];

storybook/main.ts

@@ -31,7 +31,7 @@ export default {
 			options: { configureJSX: true },
 		},
 		'@storybook/addon-a11y',
-		'storybook-addon-source-link',
+		import.meta.resolve( './addons/source-link/preset.ts' ),
 		'storybook-addon-tag-badges',
 		import.meta.resolve( './addons/design-system-theme/preset.ts' ),
 	],

storybook/preview.jsx

@@ -136,31 +136,6 @@ export const parameters = {
 			],
 		},
 	},
-	sourceLink: {
-		links: {
-			// Disable default links
-			'component-editor': () => undefined,
-			'story-editor': () => undefined,
-			'addon-powered-by': () => undefined,
-			// Custom GitHub link
-			'story-github': ( { importPath } ) => {
-				if ( ! importPath ) {
-					return undefined;
-				}
-				// importPath is like "../packages/components/src/button/stories/index.story.tsx"
-				// Convert to component directory path: "packages/components/src/button"
-				const componentPath = importPath
-					.replace( /^\.\.\//, '' ) // Remove leading "../"
-					.replace( /^\.\//, '' ) // Remove leading "./" (for stories in storybook folder)
-					.replace( /\/stories\/.*$/, '' ); // Remove "/stories/..." suffix
-				return {
-					label: 'View source',
-					href: `https://github.com/WordPress/gutenberg/blob/trunk/${ componentPath }`,
-					icon: 'GithubIcon',
-				};
-			},
-		},
-	},
 };
 
 export const tags = [ 'autodocs' ];

storybook/stories/playground/index.story.jsx

@@ -18,31 +18,31 @@ export const _default = () => {
 };
 
 _default.parameters = {
-	sourceLink: 'storybook/stories/playground/fullpage/index.js',
+	sourceLink: 'storybook/stories/playground/fullpage/index.jsx',
 };
 
 export const Box = () => {
 	return <EditorBox />;
 };
 
 Box.parameters = {
-	sourceLink: 'storybook/stories/playground/box/index.js',
+	sourceLink: 'storybook/stories/playground/box/index.jsx',
 };
 
 export const UndoRedo = () => {
 	return <EditorWithUndoRedo />;
 };
 
 UndoRedo.parameters = {
-	sourceLink: 'storybook/stories/playground/with-undo-redo/index.js',
+	sourceLink: 'storybook/stories/playground/with-undo-redo/index.jsx',
 };
 
 export const ZoomOut = ( props ) => {
 	return <EditorZoomOut { ...props } />;
 };
 
 ZoomOut.parameters = {
-	sourceLink: 'storybook/stories/playground/zoom-out/index.js',
+	sourceLink: 'storybook/stories/playground/zoom-out/index.jsx',
 };
 ZoomOut.argTypes = {
 	zoomLevel: { control: { type: 'range', min: 10, max: 100, step: 5 } },