Refactor: Replace isolated* flags with displayMode enum

Author: sapegin

src/index.js

@@ -35,30 +35,32 @@ function renderStyleguide() {
 		targetIndex,
 	} = getInfoFromHash();
 
-	let isolatedComponent = false;
-	let isolatedExample = false;
-	let isolatedSection = false;
+	// all: show all section and components (default)
+	// section: show one section
+	// component: show one component
+	// example: show one example
+	let displayMode = 'all';
 
 	// Filter the requested component if required
 	if (targetName) {
 		const filteredComponents = filterComponentsInSectionsByExactName(sections, targetName);
 		if (filteredComponents.length) {
 			sections = [{ components: filteredComponents }];
-			isolatedComponent = true;
+			displayMode = 'component';
 		} else {
 			const section = findSection(sections, targetName);
 			sections = section ? [section] : [];
-			isolatedSection = true;
+			displayMode = 'section';
 		}
 
 		// If a single component or section is filtered and a fenced block index is specified hide all other examples
 		if (isFinite(targetIndex)) {
 			if (filteredComponents.length === 1) {
 				filteredComponents[0] = filterComponentExamples(filteredComponents[0], targetIndex);
-				isolatedExample = true;
+				displayMode = 'example';
 			} else if (sections.length === 1) {
 				sections[0] = filterSectionExamples(sections[0], targetIndex);
-				isolatedExample = true;
+				displayMode = 'example';
 			}
 		}
 	}
@@ -68,9 +70,9 @@ function renderStyleguide() {
 	sections = setSlugs(sections);
 
 	let documentTitle = styleguide.config.title;
-	if (isolatedComponent || isolatedExample) {
+	if (displayMode === 'component' || displayMode === 'example') {
 		documentTitle = sections[0].components[0].name + ' — ' + documentTitle;
-	} else if (isolatedSection) {
+	} else if (displayMode === 'section') {
 		documentTitle = sections[0].name + ' — ' + documentTitle;
 	}
 	document.title = documentTitle;
@@ -91,9 +93,7 @@ function renderStyleguide() {
 			welcomeScreen={styleguide.welcomeScreen}
 			patterns={styleguide.patterns}
 			sections={sections}
-			isolatedComponent={isolatedComponent}
-			isolatedExample={isolatedExample}
-			isolatedSection={isolatedSection}
+			displayMode={displayMode}
 		/>,
 		document.getElementById('app')
 	);

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

@@ -18,7 +18,7 @@ it('should render examples', () => {
 	const actual = shallow(<Examples examples={examples} name="button" />, {
 		context: {
 			codeRevision: 1,
-			isolatedExample: false,
+			displayMode: 'example',
 		},
 	});
 

src/rsg-components/Playground/Playground.js

@@ -18,7 +18,7 @@ export default class Playground extends Component {
 
 	static contextTypes = {
 		config: PropTypes.object.isRequired,
-		isolatedExample: PropTypes.bool,
+		displayMode: PropTypes.string,
 	};
 
 	constructor(props, context) {
@@ -63,7 +63,7 @@ export default class Playground extends Component {
 	render() {
 		const { code, activeTab } = this.state;
 		const { evalInContext, index, name, settings } = this.props;
-		const { isolatedExample } = this.context;
+		const { displayMode } = this.context;
 		const preview = <Preview code={code} evalInContext={evalInContext} />;
 		if (settings.noeditor) {
 			return <Para>{preview}</Para>;
@@ -89,7 +89,10 @@ export default class Playground extends Component {
 					/>
 				}
 				toolbar={
-					<Slot name="exampleToolbar" props={{ name, isolated: isolatedExample, example: index }} />
+					<Slot
+						name="exampleToolbar"
+						props={{ name, isolated: displayMode === 'example', example: index }}
+					/>
 				}
 			/>
 		);

src/rsg-components/Playground/__snapshots__/Playground.spec.js.snap

@@ -77,7 +77,7 @@ exports[`should render component renderer 1`] = `
       props={
         Object {
           "example": 0,
-          "isolated": undefined,
+          "isolated": false,
           "name": "name",
         }
       }

src/rsg-components/ReactComponent/ReactComponent.js

@@ -20,7 +20,7 @@ export default class ReactComponent extends Component {
 	};
 	static contextTypes = {
 		config: PropTypes.object.isRequired,
-		isolatedComponent: PropTypes.bool,
+		displayMode: PropTypes.string,
 	};
 
 	constructor(props, context) {
@@ -42,7 +42,7 @@ export default class ReactComponent extends Component {
 
 	render() {
 		const { activeTab } = this.state;
-		const { isolatedComponent } = this.context;
+		const { displayMode } = this.context;
 		const { component, depth } = this.props;
 		const { name, slug, pathLine } = component;
 		const { description, examples = [], tags = {} } = component.props;
@@ -64,7 +64,7 @@ export default class ReactComponent extends Component {
 						slotName="componentToolbar"
 						slotProps={{
 							...component,
-							isolated: isolatedComponent,
+							isolated: displayMode !== 'all',
 						}}
 						depth={depth}
 					>

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

@@ -8,6 +8,7 @@ const options = {
 		config: {
 			showUsage: false,
 		},
+		displayMode: 'all',
 		slots,
 	},
 	metadata: {},
@@ -133,7 +134,7 @@ describe('ReactComponent', () => {
 		const actual = shallow(<ReactComponent component={component} depth={3} />, {
 			context: {
 				...options.context,
-				isolatedComponent: true,
+				displayMode: 'component',
 			},
 		});
 

src/rsg-components/ReactComponent/__snapshots__/ReactComponent.spec.js.snap

@@ -34,7 +34,7 @@ exports[`ReactComponent should pass rendered description, usage, examples, etc.
       slotName="componentToolbar"
       slotProps={
         Object {
-          "isolated": undefined,
+          "isolated": false,
           "metadata": Object {
             "tags": Array [
               "one",

src/rsg-components/Section/Section.js

@@ -5,7 +5,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, depth }, { isolatedSection = false }) {
+export default function Section({ section, depth }, { displayMode }) {
 	const { name, slug, content, components, sections } = section;
 
 	const contentJsx = content && <Examples examples={content} name={name} />;
@@ -19,7 +19,7 @@ export default function Section({ section, depth }, { isolatedSection = false })
 			content={contentJsx}
 			components={componentsJsx}
 			sections={sectionsJsx}
-			isolated={isolatedSection}
+			isolated={displayMode !== 'all'}
 			depth={depth}
 		/>
 	);
@@ -31,5 +31,5 @@ Section.propTypes = {
 };
 
 Section.contextTypes = {
-	isolatedSection: PropTypes.bool,
+	displayMode: PropTypes.string,
 };

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

@@ -6,6 +6,12 @@ import Sections from '../Sections';
 import Section from './Section';
 import { SectionRenderer } from './SectionRenderer';
 
+const options = {
+	context: {
+		displayMode: 'all',
+	},
+};
+
 const section = {
 	name: 'Foo',
 	slug: 'foo',
@@ -24,8 +30,8 @@ const section = {
 	sections: [],
 };
 
-it('should render component renderer', () => {
-	const actual = shallow(<Section section={section} depth={3} />);
+it('should render section renderer', () => {
+	const actual = shallow(<Section section={section} depth={3} />, options);
 
 	expect(actual).toMatchSnapshot();
 });
@@ -39,7 +45,8 @@ it('should render components list', () => {
 				components: [],
 			}}
 			depth={3}
-		/>
+		/>,
+		options
 	);
 
 	expect(actual).toMatchSnapshot();
@@ -53,7 +60,8 @@ it('should not render components list if not defined', () => {
 				slug: 'no-components',
 			}}
 			depth={3}
-		/>
+		/>,
+		options
 	);
 
 	expect(actual).toMatchSnapshot();
@@ -68,7 +76,8 @@ it('should render sections if defined', () => {
 				sections: [],
 			}}
 			depth={3}
-		/>
+		/>,
+		options
 	);
 
 	expect(actual).toMatchSnapshot();
@@ -82,13 +91,49 @@ it('should not render sections if not defined', () => {
 				slug: 'no-sections',
 			}}
 			depth={3}
-		/>
+		/>,
+		options
 	);
 
 	expect(actual).toMatchSnapshot();
 });
 
-it('render should render component', () => {
+test('should not render section in isolation mode by default', () => {
+	const actual = shallow(
+		<Section
+			section={{
+				name: 'A',
+				slug: 'a',
+			}}
+			depth={3}
+		/>,
+		options
+	);
+
+	expect(actual.prop('isolated')).toBeFalsy();
+});
+
+test('should render section in isolation mode', () => {
+	const actual = shallow(
+		<Section
+			section={{
+				name: 'A',
+				slug: 'a',
+			}}
+			depth={3}
+		/>,
+		{
+			context: {
+				...options.context,
+				displayMode: 'section',
+			},
+		}
+	);
+
+	expect(actual.prop('isolated')).toBeTruthy();
+});
+
+it('render should render section', () => {
 	const actual = shallow(
 		<SectionRenderer
 			classes={{}}
@@ -98,20 +143,24 @@ it('render should render component', () => {
 			components={<Components components={[]} depth={3} />}
 			sections={<Sections sections={[]} depth={3} />}
 			depth={3}
-		/>
+		/>,
+		options
 	);
 
 	expect(actual).toMatchSnapshot();
 });
 
 it('render should not render title if name is not set', () => {
-	const actual = shallow(<SectionRenderer classes={{}} depth={3} />);
+	const actual = shallow(<SectionRenderer classes={{}} depth={3} />, options);
 
 	expect(actual).toMatchSnapshot();
 });
 
 it('render should render title if name is set', () => {
-	const actual = shallow(<SectionRenderer classes={{}} name="test" slug="test" depth={3} />);
+	const actual = shallow(
+		<SectionRenderer classes={{}} name="test" slug="test" depth={3} />,
+		options
+	);
 
 	expect(actual).toMatchSnapshot();
 });

src/rsg-components/Section/__snapshots__/Section.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`render should not render title if name is not set 1`] = `<section />`;
 
-exports[`render should render component 1`] = `
+exports[`render should render section 1`] = `
 <section>
   <SectionHeading
     depth={3}
@@ -108,7 +108,22 @@ exports[`should not render sections if not defined 1`] = `
 />
 `;
 
-exports[`should render component renderer 1`] = `
+exports[`should render components list 1`] = `
+<Styled(Section)
+  components={
+    <Components
+      components={Array []}
+      depth={4}
+    />
+  }
+  depth={3}
+  isolated={false}
+  name="Components"
+  slug="components"
+/>
+`;
+
+exports[`should render section renderer 1`] = `
 <Styled(Section)
   components={
     <Components
@@ -147,21 +162,6 @@ exports[`should render component renderer 1`] = `
 />
 `;
 
-exports[`should render components list 1`] = `
-<Styled(Section)
-  components={
-    <Components
-      components={Array []}
-      depth={4}
-    />
-  }
-  depth={3}
-  isolated={false}
-  name="Components"
-  slug="components"
-/>
-`;
-
 exports[`should render sections if defined 1`] = `
 <Styled(Section)
   depth={3}