Storybook: Add link to component folder on GitHub, retire Storysource (…

…#45727)

* Storybook: Add source link button

* Remove storysource addon

* Update docs

* Add link to relevant plugin

package.json

@@ -107,7 +107,6 @@
 		"@storybook/addon-controls": "6.5.7",
 		"@storybook/addon-docs": "6.5.7",
 		"@storybook/addon-knobs": "6.2.9",
-		"@storybook/addon-storysource": "6.5.7",
 		"@storybook/addon-toolbars": "6.5.7",
 		"@storybook/addon-viewport": "6.5.7",
 		"@storybook/builder-webpack5": "6.5.7",
@@ -234,6 +233,7 @@
 		"snapshot-diff": "0.8.1",
 		"source-map-loader": "3.0.0",
 		"sprintf-js": "1.1.1",
+		"storybook-source-link": "2.0.3",
 		"style-loader": "3.2.1",
 		"terser-webpack-plugin": "5.1.4",
 		"typescript": "4.4.2",

storybook/main.js

@@ -19,11 +19,11 @@ module.exports = {
 		},
 		'@storybook/addon-controls',
 		'@storybook/addon-knobs', // Deprecated, new stories should use addon-controls.
-		'@storybook/addon-storysource',
 		'@storybook/addon-viewport',
 		'@storybook/addon-a11y',
 		'@storybook/addon-toolbars',
 		'@storybook/addon-actions',
+		'storybook-source-link',
 	],
 	features: {
 		babelModeV7: true,

storybook/preview.js

@@ -107,4 +107,5 @@ export const parameters = {
 			],
 		},
 	},
+	sourceLinkPrefix: 'https://github.com/WordPress/gutenberg/blob/trunk/',
 };

storybook/stories/docs/inline-icon.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { Icons } from '@storybook/components';
+
+const StyledIcons = styled( Icons )`
+	display: inline-block !important;
+	width: 14px;
+`;
+
+export const InlineIcon = ( props ) => (
+	<StyledIcons aria-hidden={ true } { ...props } />
+);

storybook/stories/docs/introduction.story.mdx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
+import { InlineIcon } from './inline-icon';
 
 <Meta title="Docs/Introduction" />
 
@@ -17,24 +18,25 @@ Import them from the components root directory like in below example:
 import { Button } from '@wordpress/components';
 
 export default function MyButton() {
-    return <Button>Click Me!</Button>;
+	return <Button>Click Me!</Button>;
 }
-````
+```
 
 ## How this site works
 
-The site shows the individual components in the sidebar and the Canvas on the right. Select the component you’d like to explore, and you’ll see the display on the Canvas tab. If the component also has controls/arguments, you can modify them on the Controls tab on the lower half of the screen.
+The site shows the individual components in the sidebar and the Canvas on the right. Select the component you’d like to explore, and you’ll see the display on the **Canvas** tab. If the component also has controls/arguments, you can modify them on the **Controls** tab on the lower half of the screen.
 
 To view the documentation for each component use the **Docs** menu item in the top toolbar.
 
+To view the source code for the component and its stories on GitHub, click the <InlineIcon icon="repository" /> View Source Repository button in the top right corner.
+
 To use it in your local development environment run the following command in the top level Gutenberg directory:
 
- ```bash
- npm run storybook:dev
- ```
+```bash
+npm run storybook:dev
+```
 
 ## Resources to learn more:
 
-- [Storybook.js.org](https://storybook.js.org/) - Storybook is a frontend workshop for building UI components and pages in isolation.
-- [[Package] Components](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BPackage%5D+Components%22) - Open Issue Gutenberg Repo
-- [On the known "loading source..." issue](https://github.com/WordPress/gutenberg/issues/45095) at the 'Story' tab for some components
+-   [Storybook.js.org](https://storybook.js.org/) - Storybook is a frontend workshop for building UI components and pages in isolation.
+-   [[Package] Components](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BPackage%5D+Components%22) - Open Issue Gutenberg Repo

storybook/stories/playground/index.js

@@ -70,6 +70,9 @@ function App() {
 
 export default {
 	title: 'Playground/Block Editor',
+	parameters: {
+		sourceLink: 'storybook/stories/playground',
+	},
 };
 
 export const _default = () => {

storybook/webpack.config.js

@@ -44,6 +44,15 @@ module.exports = ( { config } ) => {
 			),
 			enforce: 'post',
 		},
+		{
+			// Adds a `sourceLink` parameter to the story metadata, based on the file path
+			test: /\/stories\/.+\.(j|t)sx?$/,
+			loader: path.resolve(
+				__dirname,
+				'./webpack/source-link-loader.js'
+			),
+			enforce: 'post',
+		},
 		{
 			test: /\.scss$/,
 			exclude: /\.lazy\.scss$/,

storybook/webpack/source-link-loader.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+const babel = require( '@babel/core' );
+const path = require( 'path' );
+
+const REPO_ROOT = path.resolve( __dirname, '../../' );
+
+/**
+ * Adds a `sourceLink` parameter to the story metadata, based on the file path.
+ *
+ * @see https://storybook.js.org/addons/storybook-source-link
+ */
+function addSourceLinkPlugin() {
+	return {
+		visitor: {
+			ExportDefaultDeclaration( visitorPath, state ) {
+				const componentPath = getComponentPathFromStoryPath(
+					state.file.opts.filename
+				);
+				const properties =
+					// When default export is anonymous, the declaration is an object expression
+					visitorPath.node.declaration.properties ??
+					// When default export is named, the declaration is an identifier, usually the previous node
+					visitorPath.getPrevSibling().node.declarations[ 0 ].init
+						.properties;
+
+				alterParameters( properties, componentPath );
+			},
+		},
+	};
+}
+
+function getComponentPathFromStoryPath( storyPath ) {
+	const componentRoot = path.resolve( storyPath, '../../' );
+	return path.relative( REPO_ROOT, componentRoot );
+}
+
+function alterParameters( properties, componentPath ) {
+	const sourceLink = babel.types.objectProperty(
+		babel.types.identifier( 'sourceLink' ),
+		babel.types.stringLiteral( componentPath )
+	);
+
+	let parameters = properties.find( ( op ) => op.key.name === 'parameters' );
+
+	if ( ! parameters ) {
+		parameters = babel.types.objectProperty(
+			babel.types.identifier( 'parameters' )
+		);
+		properties.push( parameters );
+	}
+
+	parameters.value.properties = [
+		sourceLink,
+		...parameters.value.properties,
+	];
+}
+
+module.exports = function ( source, { sources } ) {
+	const output = babel.transform( source, {
+		plugins: [ addSourceLinkPlugin ],
+		filename: sources[ 0 ],
+		sourceType: 'module',
+	} );
+	return output.code;
+};