Page per section

Readme.md

@@ -4,8 +4,7 @@
 
 **Isolated React component development environment with a living style guide**
 
-[![Build Status](https://travis-ci.org/styleguidist/react-styleguidist.svg)](https://travis-ci.org/styleguidist/react-styleguidist) [![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/react-styleguidist) [![Join the chat at https://gitter.im/styleguidist/styleguidist](https://badges.gitter.im/styleguidist/styleguidist.svg)](https://gitter.im/styleguidist/styleguidist?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/styleguidist) [![Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/branch/master/graph/badge.svg)](https://codecov.io/gh/styleguidist/react-styleguidist)
-[![Open Source Helpers](https://www.codetriage.com/styleguidist/react-styleguidist/badges/users.svg)](https://www.codetriage.com/styleguidist/react-styleguidist)
+[![Build Status](https://travis-ci.org/styleguidist/react-styleguidist.svg)](https://travis-ci.org/styleguidist/react-styleguidist) [![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/react-styleguidist) [![Join the chat at https://gitter.im/styleguidist/styleguidist](https://badges.gitter.im/styleguidist/styleguidist.svg)](https://gitter.im/styleguidist/styleguidist?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/styleguidist) [![Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/branch/master/graph/badge.svg)](https://codecov.io/gh/styleguidist/react-styleguidist) [![Open Source Helpers](https://www.codetriage.com/styleguidist/react-styleguidist/badges/users.svg)](https://www.codetriage.com/styleguidist/react-styleguidist)
 
 </div>
 

docs/Configuration.md

@@ -20,6 +20,7 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje
 * [`handlers`](#handlers)
 * [`ignore`](#ignore)
 * [`logger`](#logger)
+* [`pagePerSection`](#pagepersection)
 * [`previewDelay`](#previewdelay)
 * [`propsParser`](#propsparser)
 * [`require`](#require)
@@ -259,6 +260,22 @@ module.exports = {
 }
 ```
 
+#### `pagePerSection`
+
+Type: `Boolean`, default: `false`
+
+Render one section or component per page, starting with the first.
+
+If set to `true`, the sidebar will be visible on each page, except for the examples.
+
+The value may be differ on each environment.
+
+```javascript
+module.exports = {
+  pagePerSection: process.env.NODE_ENV !== 'production'
+}
+```
+
 #### `previewDelay`
 
 Type: `Number`, default: 500

docs/Cookbook.md

@@ -114,7 +114,6 @@ const iconElements = Object.keys(icons).map(iconName => {
     </span>
   )
 })
-
 ;<div>{iconElements}</div>
 ```
 

loaders/styleguide-loader.js

@@ -24,6 +24,7 @@ const CLIENT_CONFIG_OPTIONS = [
 	'styles',
 	'compilerConfig',
 	'editorConfig',
+	'pagePerSection',
 ];
 
 module.exports = function() {};

scripts/schemas/config.js

@@ -124,6 +124,10 @@ module.exports = {
 	logger: {
 		type: 'object',
 	},
+	pagePerSection: {
+		type: 'boolean',
+		default: false,
+	},
 	previewDelay: {
 		type: 'number',
 		default: 500,

src/index.js

@@ -2,16 +2,21 @@
 
 import './polyfills';
 import './styles';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import renderStyleguide from './utils/renderStyleguide';
+import App from './rsg-components/App';
 
 // Examples code revision to rerender only code examples (not the whole page) when code changes
+// eslint-disable-next-line no-unused-vars
 let codeRevision = 0;
 
 const render = () => {
 	// eslint-disable-next-line import/no-unresolved
 	const styleguide = require('!!../loaders/styleguide-loader!./index.js');
-	ReactDOM.render(renderStyleguide(styleguide, codeRevision), document.getElementById('app'));
+	ReactDOM.render(
+		<App styleguide={styleguide} codeRevision={codeRevision} />,
+		document.getElementById('app')
+	);
 };
 
 window.addEventListener('hashchange', render);

src/rsg-components/App/App.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { isFunction } from 'lodash';
+import slots from 'rsg-components/slots';
+import StyleGuide from 'rsg-components/StyleGuide';
+import getPageTitle from '../../utils/getPageTitle';
+import getRouteData from '../../utils/getRouteData';
+import globalizeComponents from '../../utils/globalizeComponents';
+import processSections from '../../utils/processSections';
+
+export default class App extends Component {
+	static propTypes = {
+		/** Object returned by styleguide-loader */
+		styleguide: PropTypes.object.isRequired,
+		codeRevision: PropTypes.number.isRequired,
+		loc: PropTypes.object,
+		doc: PropTypes.object,
+		hist: PropTypes.object,
+	};
+
+	static defaultProps = {
+		loc: window.location,
+		doc: document,
+		hist: window.history,
+	};
+
+	constructor(props) {
+		super(props);
+		this.lastHash = props.loc.hash;
+	}
+
+	componentDidUpdate() {
+		// scroll to top of styleguide container when sections changed
+		if (this.props.styleguide.config.pagePerSection && this.props.loc.hash !== this.lastHash) {
+			if (window && isFunction(window.scrollTo)) {
+				window.scrollTo(0, 0);
+			}
+		}
+		this.currentHash = this.props.loc.hash;
+	}
+
+	render() {
+		const { styleguide, codeRevision, loc, doc, hist } = this.props;
+
+		const allSections = processSections(styleguide.sections);
+
+		// Globalize all components, not just ones we see on the screen, to make
+		// all components accessible to all examples
+		globalizeComponents(allSections);
+
+		const { title, pagePerSection } = styleguide.config;
+		const { sections, displayMode } = getRouteData(allSections, loc.hash, pagePerSection);
+
+		// Update page title
+		doc.title = getPageTitle(sections, title, displayMode);
+
+		// If the current hash location was set to just `/` (e.g. when navigating back from isolated view to overview)
+		// replace the URL with one without hash, to present the user with a single address of the overview screen
+		if (loc.hash === '#/') {
+			const url = loc.pathname + loc.search;
+			hist.replaceState('', doc.title, url);
+		}
+
+		return (
+			<StyleGuide
+				codeRevision={codeRevision}
+				config={styleguide.config}
+				slots={slots}
+				welcomeScreen={styleguide.welcomeScreen}
+				patterns={styleguide.patterns}
+				sections={sections}
+				allSections={allSections}
+				displayMode={displayMode}
+				pagePerSection={pagePerSection}
+			/>
+		);
+	}
+}

src/rsg-components/App/App.spec.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import { cloneDeep } from 'lodash';
+import App from './App';
+
+const styleguide = {
+	config: {
+		title: 'My Style Guide',
+	},
+	sections: [
+		{
+			components: [
+				{
+					props: {
+						displayName: 'Button',
+					},
+					module: 'ButtonModule',
+				},
+				{
+					props: {
+						displayName: 'Image',
+					},
+					module: 'ImageModule',
+				},
+			],
+		},
+	],
+	welcomeScreen: false,
+	patterns: ['button', 'input'],
+};
+const codeRevision = 1;
+const location = {
+	hash: '',
+};
+const doc = {
+	title: () => {},
+};
+const history = {
+	replaceState: () => {},
+};
+
+afterEach(() => {
+	delete global.Button;
+	delete global.Image;
+});
+
+describe('<App />', () => {
+	it('should render StyleGuide component', () => {
+		const result = shallow(
+			<App
+				styleguide={styleguide}
+				codeRevision={codeRevision}
+				loc={location}
+				doc={doc}
+				hist={history}
+			/>
+		);
+		expect(result).toMatchSnapshot();
+	});
+
+	it('should globalize all components', () => {
+		shallow(
+			<App
+				styleguide={styleguide}
+				codeRevision={codeRevision}
+				loc={location}
+				doc={doc}
+				hist={history}
+			/>
+		);
+		expect(global.Button).toBe('ButtonModule');
+		expect(global.Image).toBe('ImageModule');
+	});
+
+	it('should globalize all components in isolated mode', () => {
+		shallow(
+			<App
+				styleguide={styleguide}
+				codeRevision={codeRevision}
+				loc={{ hash: '#!/Button' }}
+				doc={doc}
+				hist={history}
+			/>
+		);
+		expect(global.Button).toBe('ButtonModule');
+		expect(global.Image).toBe('ImageModule');
+	});
+
+	it('should change document title', () => {
+		const title = jest.fn();
+		const location = { hash: '' };
+		Object.defineProperty(location, 'title', {
+			set: title,
+		});
+		shallow(
+			<App
+				styleguide={styleguide}
+				codeRevision={codeRevision}
+				loc={location}
+				doc={location}
+				hist={history}
+			/>
+		);
+		expect(title).toBeCalledWith('My Style Guide');
+	});
+
+	it('should change document title in isolated mode', () => {
+		const title = jest.fn();
+		const location = { hash: '#!/Button' };
+		Object.defineProperty(location, 'title', {
+			set: title,
+		});
+		shallow(
+			<App
+				styleguide={styleguide}
+				codeRevision={codeRevision}
+				loc={location}
+				doc={location}
+				hist={history}
+			/>
+		);
+		expect(title).toBeCalledWith('Button — My Style Guide');
+	});
+
+	it('should remove #/ from the address bar', () => {
+		const location = { hash: '#/', pathname: '/pizza', search: '?foo=bar' };
+		const history = { replaceState: jest.fn() };
+		shallow(
+			<App
+				styleguide={styleguide}
+				codeRevision={codeRevision}
+				loc={location}
+				doc={doc}
+				hist={history}
+			/>
+		);
+		expect(history.replaceState).toBeCalledWith('', 'My Style Guide', '/pizza?foo=bar');
+	});
+
+	it('should scroll to top on sections change, when pagePerSections is true', () => {
+		const scrollTo = jest.fn();
+		global.window.scrollTo = scrollTo;
+
+		const styleguideCopy = cloneDeep(styleguide);
+		styleguideCopy.config.pagePerSection = true;
+
+		const props = {
+			styleguide: styleguideCopy,
+			codeRevision,
+			loc: { hash: '#A' },
+			doc,
+			hist: history,
+		};
+
+		const wrapper = shallow(<App {...props} />);
+		wrapper.setProps({ ...props, loc: { hash: '#B' } });
+
+		expect(scrollTo).toHaveBeenCalled();
+	});
+
+	it('should not scroll to top on sections change, when pagePerSections is false', () => {
+		const scrollTo = jest.fn();
+		global.window.scrollTo = scrollTo;
+
+		const styleguideCopy = cloneDeep(styleguide);
+		styleguideCopy.config.pagePerSection = false;
+
+		const props = {
+			styleguide: styleguideCopy,
+			codeRevision,
+			loc: { hash: '#A' },
+			doc,
+			hist: history,
+		};
+
+		const wrapper = shallow(<App {...props} />);
+		wrapper.setProps({ ...props, loc: { hash: '#B' } });
+
+		expect(scrollTo).not.toHaveBeenCalled();
+	});
+});