Feat: Add showSidebar config option (#310)

* Use context instead of passing down `sidebar` prop * Better variable name: singleExample -> isolatedExample * Better prop names: sidebar -> isolatedComponent; sidebar -> hasSidebar
styleguidist · Feb 9, 2017 · 99295fb · 99295fb
1 parent 8d2bd58
commit 99295fb
Show file tree

Hide file tree

Showing 18 changed files with 147 additions and 121 deletions.
diff --git a/docs/Configuration.md b/docs/Configuration.md
@@ -272,6 +272,12 @@ Type: `Boolean`, default: `false`
 
 Show or hide example code initially. It can be toggled in the UI by clicking the show/hide code button before each example.
 
+#### `showSidebar`
+
+Type: `Boolean`, default: `true`
+
+Toggle sidebar initially. Sidebar is being hidden when opening components or examples in the isolation mode even if this value is set to `true`. When set to `false`, sidebar will always be hidden.
+
 #### `skipComponentsWithoutExample`
 
 Type: `Boolean`, default: `false`

diff --git a/loaders/styleguide-loader.js b/loaders/styleguide-loader.js
@@ -17,6 +17,7 @@ const CLIENT_CONFIG_OPTIONS = [
 	'title',
 	'highlightTheme',
 	'showCode',
+	'showSidebar',
 	'previewDelay',
 	'theme',
 	'styles',

diff --git a/scripts/schemas/config.js b/scripts/schemas/config.js
@@ -106,6 +106,10 @@ module.exports = {
 		type: 'boolean',
 		default: false,
 	},
+	showSidebar: {
+		type: 'boolean',
+		default: true,
+	},
 	skipComponentsWithoutExample: {
 		type: 'boolean',
 		default: false,

diff --git a/src/index.js b/src/index.js
@@ -21,8 +21,8 @@ let codeKey = 0;
 function renderStyleguide() {
 	const styleguide = require('!!../loaders/styleguide-loader!./index.js');
 
-	let sidebar = true;
-	let singleExample = false;
+	let isolatedComponent = false;
+	let isolatedExample = false;
 	let components = processComponents(styleguide.components);
 	let sections = styleguide.sections;
 
@@ -48,12 +48,12 @@ function renderStyleguide() {
 			...filterComponentsInSectionsByExactName(sections, targetComponentName),
 		];
 		sections = [{ components }];
-		sidebar = false;
+		isolatedComponent = true;
 
 		// if a single component is filtered and a fenced block index is specified hide the other examples
 		if (components.length === 1 && isFinite(targetComponentIndex)) {
 			components[0] = filterComponentExamples(components[0], targetComponentIndex);
-			singleExample = true;
+			isolatedExample = true;
 		}
 	}
 
@@ -63,8 +63,8 @@ function renderStyleguide() {
 			config={styleguide.config}
 			components={components}
 			sections={sections}
-			sidebar={sidebar}
-			singleExample={singleExample}
+			isolatedComponent={isolatedComponent}
+			isolatedExample={isolatedExample}
 		/>,
 		document.getElementById('app')
 	);

diff --git a/src/rsg-components/Components/Components.js b/src/rsg-components/Components/Components.js
@@ -2,18 +2,14 @@ import React, { PropTypes } from 'react';
 import ReactComponent from 'rsg-components/ReactComponent';
 import ComponentsRenderer from 'rsg-components/Components/ComponentsRenderer';
 
-export default function Components({
-	components,
-	sidebar,
-}) {
+export default function Components({ components }) {
 	return (
 		<ComponentsRenderer>
 			{
 				components.map(component => (
 					<ReactComponent
 						key={component.filepath}
 						component={component}
-						sidebar={sidebar}
 					/>
 				))
 			}
@@ -23,5 +19,4 @@ export default function Components({
 
 Components.propTypes = {
 	components: PropTypes.array.isRequired,
-	sidebar: PropTypes.bool,
 };
diff --git a/src/rsg-components/Examples/Examples.spec.js b/src/rsg-components/Examples/Examples.spec.js
@@ -23,7 +23,7 @@ it('should render examples', () => {
 		{
 			context: {
 				codeKey: 1,
-				singleExample: false,
+				isolatedExample: false,
 			},
 		}
 	);

diff --git a/src/rsg-components/Playground/Playground.js b/src/rsg-components/Playground/Playground.js
@@ -11,7 +11,7 @@ export default class Playground extends Component {
 	};
 	static contextTypes = {
 		config: PropTypes.object.isRequired,
-		singleExample: PropTypes.bool,
+		isolatedExample: PropTypes.bool,
 	};
 
 	constructor(props, context) {
@@ -79,14 +79,14 @@ export default class Playground extends Component {
 	render() {
 		const { code, showCode } = this.state;
 		const { evalInContext, index, name } = this.props;
-		const { singleExample } = this.context;
+		const { isolatedExample } = this.context;
 		return (
 			<PlaygroundRenderer
 				code={code}
 				showCode={showCode}
 				index={index}
 				name={name}
-				singleExample={singleExample}
+				isolatedExample={isolatedExample}
 				evalInContext={evalInContext}
 				onChange={code => this.handleChange(code)}
 				onCodeToggle={() => this.handleCodeToggle()}

diff --git a/src/rsg-components/Playground/PlaygroundRenderer.js b/src/rsg-components/Playground/PlaygroundRenderer.js
@@ -68,7 +68,7 @@ export function PlaygroundRenderer({
 	showCode,
 	name,
 	index,
-	singleExample,
+	isolatedExample,
 	evalInContext,
 	onChange,
 	onCodeToggle,
@@ -78,7 +78,7 @@ export function PlaygroundRenderer({
 			<div className={cx(classes.preview, 'rsg--example-preview')}>
 				<div className={classes.isolatedLink}>
 					{name && (
-						singleExample ? (
+						isolatedExample ? (
 							<Link href={'#!/' + name}>⇽ Exit Isolation</Link>
 						) : (
 							<Link href={'#!/' + name + '/' + index}>Open isolated ⇢</Link>
@@ -112,7 +112,7 @@ PlaygroundRenderer.propTypes = {
 	onChange: PropTypes.func.isRequired,
 	onCodeToggle: PropTypes.func.isRequired,
 	name: PropTypes.string,
-	singleExample: PropTypes.bool,
+	isolatedExample: PropTypes.bool,
 };
 
 export default Styled(styles)(PlaygroundRenderer);
diff --git a/src/rsg-components/ReactComponent/ReactComponent.js b/src/rsg-components/ReactComponent/ReactComponent.js
@@ -5,10 +5,7 @@ import Methods from 'rsg-components/Methods';
 import Examples from 'rsg-components/Examples';
 import ReactComponentRenderer from 'rsg-components/ReactComponent/ReactComponentRenderer';
 
-export default function ReactComponent({
-	component,
-	sidebar,
-}) {
+export default function ReactComponent({ component }, { isolatedComponent = false }) {
 	const { name, pathLine, examples } = component;
 	const { description, props, methods } = component.props;
 	return (
@@ -19,12 +16,15 @@ export default function ReactComponent({
 			props={props && <Props props={props} />}
 			methods={methods.length > 0 && <Methods methods={methods} />}
 			examples={examples && <Examples examples={examples} name={name} />}
-			sidebar={sidebar}
+			isolated={isolatedComponent}
 		/>
 	);
 }
 
 ReactComponent.propTypes = {
 	component: PropTypes.object.isRequired,
-	sidebar: PropTypes.bool,
+};
+
+ReactComponent.contextTypes = {
+	isolatedComponent: PropTypes.bool,
 };
diff --git a/src/rsg-components/ReactComponent/ReactComponent.spec.js b/src/rsg-components/ReactComponent/ReactComponent.spec.js
@@ -119,6 +119,31 @@ it('renderer should render component', () => {
 	expect(actual).toMatchSnapshot();
 });
 
+test('should render component not in the isolation mode by default', () => {
+	const actual = render(
+		<ReactComponentRenderer
+			classes={{}}
+			name="Test"
+			pathLine="test"
+		/>
+	);
+
+	expect(actual.find('a').text()).toEqual('Open isolated ⇢');
+});
+
+test('should render component in isolation mode', () => {
+	const actual = render(
+		<ReactComponentRenderer
+			classes={{}}
+			name="Test"
+			pathLine="test"
+			isolated
+		/>
+	);
+
+	expect(actual.find('a').text()).toEqual('← Back');
+});
+
 test('should render props section', () => {
 	const actual = shallow(
 		<ReactComponentRenderer

diff --git a/src/rsg-components/ReactComponent/ReactComponentRenderer.js b/src/rsg-components/ReactComponent/ReactComponentRenderer.js
@@ -60,7 +60,7 @@ export function ReactComponentRenderer({
 	props,
 	methods,
 	examples,
-	sidebar,
+	isolated = false,
 }) {
 	return (
 		<div className={classes.root} id={name + '-container'}>
@@ -70,10 +70,10 @@ export function ReactComponentRenderer({
 				</h2>
 				<div className={classes.pathLine}>{pathLine}</div>
 				<div className={classes.isolatedLink}>
-					{sidebar ? (
-						<Link href={'#!/' + name}>Open isolated ⇢</Link>
-					) : (
+					{isolated ? (
 						<Link href="/">← Back</Link>
+					) : (
+						<Link href={'#!/' + name}>Open isolated ⇢</Link>
 					)}
 				</div>
 			</header>
@@ -105,7 +105,7 @@ ReactComponentRenderer.propTypes = {
 	props: PropTypes.node,
 	methods: PropTypes.node,
 	examples: PropTypes.node,
-	sidebar: PropTypes.bool,
+	isolated: PropTypes.bool,
 };
 
 export default Styled(styles)(ReactComponentRenderer);
diff --git a/src/rsg-components/ReactComponent/__snapshots__/ReactComponent.spec.js.snap b/src/rsg-components/ReactComponent/__snapshots__/ReactComponent.spec.js.snap
@@ -11,8 +11,8 @@ exports[`test renderer should render component 1`] = `
     </div>
     <div>
       <_class
-        href="/">
-        ← Back
+        href="#!/Foo">
+        Open isolated ⇢
       </_class>
     </div>
   </header>
@@ -42,8 +42,8 @@ exports[`test should not render props / methods section if there is no content 1
     </div>
     <div>
       <_class
-        href="/">
-        ← Back
+        href="#!/Test">
+        Open isolated ⇢
       </_class>
     </div>
   </header>
@@ -64,8 +64,8 @@ exports[`test should render both props and methods section 1`] = `
     </div>
     <div>
       <_class
-        href="/">
-        ← Back
+        href="#!/Test">
+        Open isolated ⇢
       </_class>
     </div>
   </header>
@@ -112,6 +112,7 @@ exports[`test should render component renderer 1`] = `
       }
       name="Foo" />
   }
+  isolated={false}
   methods={false}
   name="Foo"
   pathLine="foo/bar.js" />
@@ -128,6 +129,7 @@ exports[`test should render component renderer for component with methods 1`] =
       examples={Array []}
       name="Foo" />
   }
+  isolated={false}
   methods={
     <_class
       methods={
@@ -164,6 +166,7 @@ exports[`test should render component renderer for component with props 1`] = `
       examples={Array []}
       name="Foo" />
   }
+  isolated={false}
   methods={false}
   name="Foo"
   pathLine="foo/bar.js"
@@ -196,8 +199,8 @@ exports[`test should render methods section 1`] = `
     </div>
     <div>
       <_class
-        href="/">
-        ← Back
+        href="#!/Test">
+        Open isolated ⇢
       </_class>
     </div>
   </header>
@@ -226,8 +229,8 @@ exports[`test should render props section 1`] = `
     </div>
     <div>
       <_class
-        href="/">
-        ← Back
+        href="#!/Test">
+        Open isolated ⇢
       </_class>
     </div>
   </header>

diff --git a/src/rsg-components/Section/Section.js b/src/rsg-components/Section/Section.js
@@ -4,10 +4,7 @@ import Components from 'rsg-components/Components';
 import Sections from 'rsg-components/Sections';
 import SectionRenderer from 'rsg-components/Section/SectionRenderer';
 
-export default function Section({
-	section,
-	sidebar,
-}) {
+export default function Section({ section }) {
 	const { name, content, components, sections } = section;
 
 	const contentJsx = content && (
@@ -16,13 +13,11 @@ export default function Section({
 	const componentsJsx = components && (
 		<Components
 			components={components}
-			sidebar={sidebar}
 		/>
 	);
 	const sectionsJsx = sections && (
 		<Sections
 			sections={sections}
-			sidebar={sidebar}
 		/>
 	);
 	return (
@@ -37,5 +32,4 @@ export default function Section({
 
 Section.propTypes = {
 	section: PropTypes.object.isRequired,
-	sidebar: PropTypes.bool,
 };
diff --git a/src/rsg-components/Sections/Sections.js b/src/rsg-components/Sections/Sections.js
@@ -2,18 +2,14 @@ import React, { PropTypes } from 'react';
 import Section from 'rsg-components/Section';
 import SectionsRenderer from 'rsg-components/Sections/SectionsRenderer';
 
-export default function Sections({
-	sections,
-	sidebar,
-}) {
+export default function Sections({ sections }) {
 	return (
 		<SectionsRenderer>
 			{
 				sections.map((section, idx) => (
 					<Section
 						key={idx}
 						section={section}
-						sidebar={sidebar}
 					/>
 				))
 			}
@@ -23,5 +19,4 @@ export default function Sections({
 
 Sections.propTypes = {
 	sections: PropTypes.array.isRequired,
-	sidebar: PropTypes.bool,
 };