Merge pull request #305 from Financial-Times/matth/decouple-storybook…

…-from-docs

Decouple Storybook from docs

tools/x-docs/gatsby-config.js

@@ -26,7 +26,10 @@ module.exports = {
 			resolve: 'gatsby-source-filesystem',
 			options: {
 				name: 'components',
-				path: '../../components'
+				path: '../../components',
+				// Don't attempt to load any Storybook or source files, as these may
+				// contain syntax and/or features we cannot parse.
+				ignore: [/stories/, /src/]
 			},
 		},
 		{

tools/x-docs/src/components/story-viewer/index.jsx

@@ -1,52 +1,22 @@
 import React from 'react';
 import { withPrefix } from 'gatsby';
 
-class StoryViewer extends React.Component {
-	constructor(props) {
-		super(props);
+const StoryViewer = ({ name }) => {
+	const queryString = `?path=/story/${name}--*`;
+	const iframeUrl = withPrefix(`/storybook/iframe.html${queryString}`);
+	const linkUrl = withPrefix(`/storybook/index.html${queryString}`);
 
-		this.state = {
-			selected: 0
-		};
-	}
-
-	onClick(index) {
-		if (this.state.selected !== index) {
-			this.setState({ selected: index });
-		}
-	}
-
-	render() {
-		const story = this.props.stories[this.state.selected];
-		const queryString = `?selectedKind=${this.props.name}&selectedStory=${story}`;
-		const iframeUrl = withPrefix(`/storybook/iframe.html${queryString}`);
-		const linkUrl = withPrefix(`/storybook/index.html${queryString}`);
-
-		return (
-			<div id="component-demos" className="story-viewer">
-				<h2 className="story-viewer__heading">Component demos</h2>
-				<ul className="story-viewer__list" role="tablist">
-					{this.props.stories.map((story, i) => (
-						<li key={`story-${i}`} className="story-viewer__item">
-							<button
-								role="tab"
-								className="story-viewer__button"
-								aria-selected={this.state.selected === i}
-								onClick={this.onClick.bind(this, i)}>
-								{story}
-							</button>
-						</li>
-					))}
-				</ul>
-				<div className="story-viewer__panel" role="tabpanel">
-					<iframe title={`${story} demo`} src={iframeUrl}></iframe>
-				</div>
-				<p className="story-viewer__footer">
-					<a href={linkUrl}>View in Storybook</a>
-				</p>
+	return (
+		<div id="component-demos" className="story-viewer">
+			<h2 className="story-viewer__heading">Component demos</h2>
+			<div className="story-viewer__panel">
+				<iframe title={`${name} demo`} src={iframeUrl}></iframe>
 			</div>
-		);
-	}
+			<p className="story-viewer__footer">
+				<a href={linkUrl}>View in Storybook</a>
+			</p>
+		</div>
+	)
 }
 
 export default StoryViewer;

tools/x-docs/src/components/tertiary/links.jsx

@@ -22,7 +22,7 @@ export default ({ name, manifest, storybook }) => (
 			</li>
 			{storybook ? (
 				<li className="tertiary-menu__item">
-					<Link to={`/storybook/index.html?selectedKind=${name}`} {...linkProps}>
+					<Link to={`/storybook/index.html?path=/story/${name}--*`} {...linkProps}>
 						Storybook
 					</Link>
 				</li>

tools/x-docs/src/lib/create-npm-package-pages.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 
 module.exports = async (actions, graphql) => {
@@ -8,6 +9,7 @@ module.exports = async (actions, graphql) => {
 					node {
 						name
 						manifest
+						fileAbsolutePath
 						fields {
 							slug
 							source
@@ -25,6 +27,7 @@ module.exports = async (actions, graphql) => {
 	result.data.npmPackages.edges.map(({ node }) => {
 		// Package manifest slug will be /package so remove it
 		const pagePath = path.dirname(node.fields.slug);
+		const relPath = path.dirname(node.fileAbsolutePath);
 
 		actions.createPage({
 			component: path.resolve('src/templates/npm-package.jsx'),
@@ -37,8 +40,9 @@ module.exports = async (actions, graphql) => {
 				source: node.fields.source,
 				packageName: node.manifest.name,
 				packageDescription: node.manifest.description,
+				// Flag if Storybook demos are available for this package
+				storybook: fs.existsSync(path.join(relPath, 'stories', 'index.js')),
 				// Associate readme and story nodes via slug
-				storiesPath: path.join(pagePath, 'stories'),
 				packagePath: path.join(pagePath, 'package'),
 				readmePath: path.join(pagePath, 'readme')
 			}

tools/x-docs/src/lib/decorate-nodes.js

@@ -1,6 +1,6 @@
 const path = require('path');
 
-const nodeTypesToSlug = new Set(['MarkdownRemark', 'NpmPackage', 'Stories']);
+const nodeTypesToSlug = new Set(['MarkdownRemark', 'NpmPackage']);
 
 const repoRoot = path.resolve('../../');
 
@@ -17,6 +17,7 @@ module.exports = (node, actions, getNode) => {
 		const file = getNode(node.parent);
 
 		// Group files by source type (currently: docs, components, packages)
+		// "Source" meaning the name of the filesystem plugin instance
 		actions.createNodeField({
 			node,
 			name: 'source',

tools/x-docs/src/templates/npm-package.jsx

@@ -20,27 +20,25 @@ export default ({ pageContext, data, location }) => (
 			<main className="content-layout__main" role="main">
 				<div className="content-layout__main-inner">
 					<div className="markdown" dangerouslySetInnerHTML={{ __html: data.markdown.html }} />
-					{data.storybook ? (
-						<StoryViewer name={pageContext.title} stories={data.storybook.stories} />
-					) : null}
+					{pageContext.storybook ? <StoryViewer name={pageContext.title} /> : null}
 				</div>
 			</main>
 			<div className="content-layout__tertiary">
 				<div className="content-layout__tertiary-inner">
 					<Links
 						name={pageContext.title}
 						manifest={data.npm.manifest}
-						storybook={Boolean(data.storybook)}
+						storybook={pageContext.storybook}
 					/>
-					<Subheadings items={data.markdown.headings} demos={Boolean(data.storybook)} />
+					<Subheadings items={data.markdown.headings} demos={pageContext.storybook} />
 				</div>
 			</div>
 		</div>
 	</Layout>
 );
 
 export const pageQuery = graphql`
-	query($type: String!, $packagePath: String!, $readmePath: String!, $storiesPath: String!) {
+	query($type: String!, $packagePath: String!, $readmePath: String!) {
 		npm: npmPackage(fields: { slug: { eq: $packagePath } }) {
 			manifest
 		}
@@ -51,9 +49,6 @@ export const pageQuery = graphql`
 				depth
 			}
 		}
-		storybook: stories(fields: { slug: { eq: $storiesPath } }) {
-			stories
-		}
 		modules: allSitePage(filter: { context: { type: { eq: $type } } }) {
 			edges {
 				node {

tools/x-docs/static/main.css

@@ -681,35 +681,6 @@ td:first-child {
 	padding-left: 0;
 }
 
-.story-viewer__item {
-	margin-left: 0.5rem;
-}
-
-.story-viewer__item:first-child {
-	margin-left: 0;
-}
-
-.story-viewer__button {
-	padding: 0.25rem 0.5rem;
-	font: inherit;
-	font-size: 0.95rem;
-	border: 1px solid;
-	color: var(--o-colors-oxford);
-	background: none;
-	cursor: pointer;
-}
-
-.story-viewer__button:hover,
-.story-viewer__button:focus {
-	color: var(--o-colors-oxford-100);
-}
-
-.story-viewer__button[aria-selected=true] {
-	border: 1px solid transparent;
-	color: var(--o-colors-white);
-	background: var(--o-colors-oxford);
-}
-
 .story-viewer__panel {
 	height: 20rem;
 	resize: vertical;