Isolated mode should work with components inside nested sections (fix #…

…190).
styleguidist · Oct 12, 2016 · 93b7140 · 93b7140
1 parent bbec236
commit 93b7140
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 41 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import _ from 'lodash';
 import ReactDOM from 'react-dom';
-import { setComponentsNames, globalizeComponents, promoteInlineExamples, flattenChildren } from './utils/utils';
+import {
+	filterComponentsByExactName,
+	filterComponentsInSectionsByExactName,
+	flattenChildren,
+	globalizeComponents,
+	processComponents,
+	processSections,
+	promoteInlineExamples,
+	setComponentsNames,
+} from './utils/utils';
 import StyleGuide from 'rsg-components/StyleGuide';
 
 import 'highlight.js/styles/tomorrow.css';
@@ -18,22 +27,6 @@ if (module.hot) {
 // Load style guide
 let { config, components, sections } = require('styleguide!index.js');
 
-function processComponents(components) {
-	components = flattenChildren(components);
-	components = promoteInlineExamples(components);
-	components = setComponentsNames(components);
-	globalizeComponents(components);
-	return components;
-}
-
-function processSections(sections) {
-	return sections.map(section => {
-		section.components = processComponents(section.components || []);
-		section.sections = processSections(section.sections || []);
-		return section;
-	});
-}
-
 components = processComponents(components);
 sections = processSections(sections || []);
 
@@ -42,14 +35,12 @@ function renderStyleguide() {
 	const app = document.getElementById('app');
 
 	if (window.location.hash.substr(0, 3) === '#!/') {
-		const filterTargetComponents = list => list.filter(component => component.name === targetComponentName);
-
 		const targetComponentName = window.location.hash.substr(3);
-		const filteredComponents = filterTargetComponents(components);
 
-		sections.forEach(section => {
-			_.merge(filteredComponents, filterTargetComponents(section.components));
-		});
+		const filteredComponents = [
+			...filterComponentsByExactName(components, targetComponentName),
+			...filterComponentsInSectionsByExactName(sections, targetComponentName),
+		];
 
 		ReactDOM.render(
 			<StyleGuide

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -42,6 +42,22 @@ export function flattenChildren(components) {
 	});
 }
 
+export function processComponents(components) {
+	components = flattenChildren(components);
+	components = promoteInlineExamples(components);
+	components = setComponentsNames(components);
+	globalizeComponents(components);
+	return components;
+}
+
+export function processSections(sections) {
+	return sections.map(section => {
+		section.components = processComponents(section.components || []);
+		section.sections = processSections(section.sections || []);
+		return section;
+	});
+}
+
 /**
  * Fuzzy filters components list by component name.
  *
@@ -67,3 +83,34 @@ export function getFilterRegExp(query) {
 export function filterComponentsByName(components, query) {
 	return components.filter(({ name }) => name.match(getFilterRegExp(query)));
 }
+
+/**
+ * Filters list of components by component name.
+ *
+ * @param {Array} componens
+ * @param {string} name
+ * @return {Array}
+ */
+export function filterComponentsByExactName(componens, name) {
+	return componens.filter(component => component.name === name);
+}
+
+/**
+ * Recursively filters all components in all sections by component name.
+ *
+ * @param {object} sections
+ * @param {string} name
+ * @return {Array}
+ */
+ export function filterComponentsInSectionsByExactName(sections, name) {
+	let components = [];
+	sections.forEach(section => {
+		if (section.components) {
+			components.push(...filterComponentsByExactName(section.components, name));
+		}
+		if (section.sections) {
+			components.push(...filterComponentsInSectionsByExactName(section.sections, name));
+		}
+	});
+	return components;
+}
diff --git a/test/utils.utils.spec.js b/test/utils.utils.spec.js
@@ -2,6 +2,43 @@ import test from 'ava';
 const _ = require('lodash');
 import * as utils from '../src/utils/utils';
 
+const COMPONENTS = [
+	{
+		name: 'Button',
+	},
+	{
+		name: 'Image',
+	},
+	{
+		name: 'Input',
+	},
+	{
+		name: 'Link',
+	},
+	{
+		name: 'Textarea',
+	},
+];
+
+const SECTIONS = [
+	{
+		name: 'General',
+		sections: [
+			{
+				name: 'Particles',
+				components: [
+					{
+						name: 'Button',
+					},
+					{
+						name: 'Image',
+					},
+				],
+			},
+		],
+	},
+];
+
 let sourceGlobalLength;
 test.beforeEach(() => {
 	sourceGlobalLength = Object.keys(global).length;
@@ -92,24 +129,6 @@ test('RegExp should ignore non-alphanumeric characters', t => {
 
 // filterComponentsByName
 
-const COMPONENTS = [
-	{
-		name: 'Button',
-	},
-	{
-		name: 'Image',
-	},
-	{
-		name: 'Input',
-	},
-	{
-		name: 'Link',
-	},
-	{
-		name: 'Textarea',
-	},
-];
-
 test('should return initial list with empty query', t => {
 	const result = utils.filterComponentsByName(COMPONENTS, '');
 	t.deepEqual(result, COMPONENTS);
@@ -124,3 +143,17 @@ test('should return empty list when nothing found', t => {
 	const result = utils.filterComponentsByName(COMPONENTS, 'pizza');
 	t.deepEqual(result, []);
 });
+
+// filterComponentsByExactName
+
+test('should return components with exact name', t => {
+	const result = utils.filterComponentsByExactName(COMPONENTS, 'Image');
+	t.deepEqual(result, [COMPONENTS[1]]);
+});
+
+// filterComponentsInSectionsByExactName
+
+test('should return components at any level with exact name', t => {
+	const result = utils.filterComponentsInSectionsByExactName(SECTIONS, 'Image');
+	t.deepEqual(result, [COMPONENTS[1]]);
+});