Feat: Page per section upgraded with page not found

docs/Components.md

@@ -109,6 +109,9 @@ Each section consists of (all fields are optional):
 * `components` — a glob pattern string, an array of component paths or a function returning a list of components. The same rules apply as for the root `components` option.
 * `sections` — array of subsections (can be nested).
 * `description` — A small description of this section.
+* `sectionDepth` — Number of subsections with single pages, only available with [pagePerSection](Configuration.md#pagepersection) is enabled.
+* `exampleMode` — Initial state of the code example tab, uses [exampleMode](Configuration.md#examplemode).
+* `usageMode` — Initial state of the props and methods tab, uses [usageMode](Configuration.md#usagemode).
 * `ignore` — string/array of globs that should not be included in the section.
 
 Configuring a style guide with textual documentation section and a list of components would look like:
@@ -137,7 +140,9 @@ module.exports = {
     {
       name: 'UI Components',
       content: 'docs/ui.md',
-      components: 'lib/components/ui/*.js'
+      components: 'lib/components/ui/*.js',
+      exampleMode: 'expand', // 'hide' | 'collapse' | 'expand'
+      usageMode: 'expand' // 'hide' | 'collapse' | 'expand'
     }
   ]
 }

docs/Configuration.md

@@ -15,6 +15,7 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje
 * [`dangerouslyUpdateWebpackConfig`](#dangerouslyupdatewebpackconfig)
 * [`defaultExample`](#defaultexample)
 * [`editorConfig`](#editorconfig)
+* [`exampleMode`](#examplemode)
 * [`getComponentPathLine`](#getcomponentpathline)
 * [`getExampleFilename`](#getexamplefilename)
 * [`handlers`](#handlers)
@@ -31,8 +32,6 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje
 * [`sections`](#sections)
 * [`serverHost`](#serverhost)
 * [`serverPort`](#serverport)
-* [`showCode`](#showcode)
-* [`showUsage`](#showusage)
 * [`showSidebar`](#showsidebar)
 * [`skipComponentsWithoutExample`](#skipcomponentswithoutexample)
 * [`sortProps`](#sortprops)
@@ -44,6 +43,7 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje
 * [`title`](#title)
 * [`updateDocs`](#updatedocs)
 * [`updateExample`](#updateexample)
+* [`usageMode`](#usagemode)
 * [`verbose`](#verbose)
 * [`webpackConfig`](#webpackconfig)
 
@@ -197,6 +197,16 @@ module.exports = {
 }
 ```
 
+#### `exampleMode`
+
+Type: `String`, default: `collapse`
+
+Defines the initial state of the example code tab:
+
+* `collapse`: collapses the tab by default.
+* `hide`: hide the tab and it can´t be toggled in the UI.
+* `expand`: expand the tab by default.
+
 #### `handlers`
 
 Type: `Function`, optional, default: [[react-docgen-displayname-handler](https://github.com/nerdlabs/react-docgen-displayname-handler)]
@@ -272,7 +282,7 @@ 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.
+If set to `true`, each first level section will be single pages.
 
 The value may be differ on each environment.
 
@@ -282,6 +292,47 @@ module.exports = {
 }
 ```
 
+You can set the number of subpages of each section by adding`sectionDepth` in each first level section.
+
+```javascript
+module.exports = {
+  pagePerSection: true,
+  sections: [
+    {
+      name: 'Documentation',
+      sections: [
+        {
+          name: 'Files',
+          sections: [
+            {
+              name: 'First File'
+            },
+            {
+              name: 'Second File'
+            }
+          ]
+        }
+      ],
+      sectionDepth: 2 // It will show Documentation, Files and First file as single pages
+    },
+    {
+      name: 'Components',
+      sections: [
+        {
+          name: 'Buttons',
+          sections: [
+            {
+              name: 'WrapperButton'
+            }
+          ]
+        }
+      ]
+			sectionDepth: 1, // It will show Components and Buttons as single pages
+    }
+  ]
+}
+```
+
 #### `printBuildInstructions`
 
 Type: `Function`, optional
@@ -419,18 +470,6 @@ Type: `Number`, default: `6060`
 
 Dev server port.
 
-#### `showCode`
-
-Type: `Boolean`, default: `false`
-
-Show or hide example code initially. It can be toggled in the UI by clicking the Code button after each example.
-
-#### `showUsage`
-
-Type: `Boolean`, default: `false`
-
-Show or hide props and methods documentation initially. It can be toggled in the UI by clicking the Props & methods button after each component description.
-
 #### `showSidebar`
 
 Type: `Boolean`, default: `true`
@@ -590,6 +629,16 @@ module.exports = {
 }
 ```
 
+#### `usageMode`
+
+Type: `String`, default: `collapse`
+
+Defines the initial state of the props and methods tab:
+
+* `collapse`: collapses the tab by default.
+* `hide`: hide the tab and it can´t be toggled in the UI.
+* `expand`: expand the tab by default.
+
 Use it like this in your Markdown files:
 
     ```js { "file": "./some/file.js" }

examples/sections/docs/Components.md

@@ -0,0 +1,9 @@
+Tempor qui ad ad sint nulla sint magna aliquip qui ex. Non commodo mollit et exercitation nostrud esse. Minim aliqua cillum est amet dolore ipsum qui tempor eu ea.
+
+Ut veniam sit pariatur deserunt non officia. Esse commodo proident quis culpa esse enim occaecat occaecat laborum nostrud non non sunt. Labore incididunt reprehenderit sunt elit reprehenderit nulla nulla Lorem aliquip incididunt. Qui cillum consectetur Lorem anim amet ex magna deserunt sunt.
+
+List of components:
+
+* [Buttons](#/Components?id=buttons)
+* [Fields](#/Components?id=fields)
+* [Others](#/Components?id=others)

examples/sections/docs/Documentation.md

@@ -0,0 +1,5 @@
+Excepteur ullamco ut ea laborum in duis fugiat in dolor minim non. Minim amet velit duis fugiat nisi excepteur occaecat elit exercitation eiusmod est aute nulla. Et deserunt labore consectetur elit nostrud consequat commodo occaecat consectetur mollit sunt. Eiusmod laboris incididunt consectetur nisi nulla cupidatat. Velit consequat voluptate eiusmod aliqua esse culpa tempor quis tempor dolor dolor irure.
+
+Proident laboris esse do culpa ullamco proident deserunt minim nostrud et ut deserunt. Pariatur cillum et nulla labore proident nisi eu veniam. Nulla aute non incididunt laboris dolor magna laborum eu incididunt est.
+
+Ut culpa non sint eiusmod ut duis. Cillum consequat labore cupidatat eiusmod aute aute. Minim irure labore ea cillum id consectetur incididunt ex tempor deserunt labore. Officia deserunt consequat cupidatat nulla quis aute. Enim laborum aliquip aliquip sit exercitation sint eiusmod do do. Irure esse aliqua veniam do laborum cillum dolor nulla laborum consequat velit amet. Mollit ullamco incididunt Lorem dolor ut qui sunt proident.

examples/sections/docs/Files.md

@@ -0,0 +1,9 @@
+Qui adipisicing officia voluptate cillum duis magna eu esse. Officia velit do tempor veniam exercitation ullamco irure. Reprehenderit laborum aliquip ipsum dolore ullamco. Consequat irure commodo culpa id nostrud. Aute et officia esse cillum amet commodo consequat nulla amet aute sint elit proident. Incididunt sunt tempor in ullamco ea eiusmod quis mollit occaecat ea. Sint minim eu mollit occaecat cupidatat velit sunt aliqua reprehenderit do minim anim magna dolore.
+
+Aute fugiat nulla eu cillum dolore proident eu nisi sint minim veniam. Sunt velit aliqua ullamco quis qui sint aliqua incididunt irure dolor sint nulla commodo qui. Eu nisi pariatur Lorem dolore id aute occaecat adipisicing. Consectetur cupidatat magna magna aute anim eu non officia Lorem esse. Pariatur exercitation id velit anim id laborum dolore laboris esse est in anim dolor. Aute ea in et laboris culpa voluptate laboris ipsum nisi.
+
+List of files:
+
+* [First File](#/Documentation/Files/First%20File)
+* [Second File](#/Documentation/Files/Second%20File)
+* [WrappedButton](#/Documentation/Files/WrappedButton)

examples/sections/styleguide.config.js

@@ -6,14 +6,18 @@ module.exports = {
 	sections: [
 		{
 			name: 'Documentation',
+			content: 'docs/Documentation.md',
 			sections: [
 				{
 					name: 'Files',
+					content: 'docs/Files.md',
+					components: () => ['./src/components/WrappedButton/WrappedButton.js'],
 					sections: [
 						{
 							name: 'First File',
 							content: 'docs/One.md',
 							description: 'This is the first section description',
+							components: () => ['./src/components/Label/Label.js'],
 						},
 						{
 							name: 'Second File',
@@ -22,26 +26,32 @@ module.exports = {
 					],
 				},
 			],
+			sectionDepth: 2,
 		},
 		{
 			name: 'Components',
+			content: 'docs/Components.md',
 			sections: [
 				{
 					name: 'Buttons',
-					components: () => [
-						'./src/components/Button/Button.js',
-						'./src/components/RandomButton/RandomButton.js',
-						'./src/components/WrappedButton/WrappedButton.js',
-					],
+					components: () => ['./src/components/Button/Button.js'],
+					exampleMode: 'expand', // 'hide' | 'collapse' | 'expand'
+					usageMode: 'hide', // 'hide' | 'collapse' | 'expand'
 				},
 				{
 					name: 'Fields',
-					components: () => [
-						'./src/components/Label/Label.js',
-						'./src/components/Placeholder/Placeholder.js',
-					],
+					components: () => ['./src/components/Placeholder/Placeholder.js'],
+					exampleMode: 'expand', // 'hide' | 'collapse' | 'expand'
+					usageMode: 'expand', // 'hide' | 'collapse' | 'expand'
+				},
+				{
+					name: 'Others',
+					components: () => ['./src/components/RandomButton/RandomButton.js'],
+					exampleMode: 'collapse', // 'hide' | 'collapse' | 'expand'
+					usageMode: 'collapse', // 'hide' | 'collapse' | 'expand'
 				},
 			],
+			sectionDepth: 0,
 		},
 	],
 	require: [path.join(__dirname, 'src/styles.css')],

loaders/utils/__tests__/__snapshots__/getSections.spec.js.snap

@@ -8,10 +8,13 @@ Array [
       "require": "!!~/loaders/examples-loader.js!~/test/components/Button/Readme.md",
     },
     "description": undefined,
+    "exampleMode": "collapse",
     "filepath": "components/Button/Readme.md",
     "name": "Readme",
+    "sectionDepth": 0,
     "sections": Array [],
     "slug": "readme-1",
+    "usageMode": "collapse",
   },
   Object {
     "components": Array [
@@ -85,10 +88,13 @@ Array [
     ],
     "content": undefined,
     "description": undefined,
+    "exampleMode": "collapse",
     "filepath": undefined,
     "name": "Components",
+    "sectionDepth": 0,
     "sections": Array [],
     "slug": "components-1",
+    "usageMode": "collapse",
   },
   Object {
     "components": Array [
@@ -149,10 +155,13 @@ Array [
     ],
     "content": undefined,
     "description": undefined,
+    "exampleMode": "collapse",
     "filepath": undefined,
     "name": "Ignore",
+    "sectionDepth": 0,
     "sections": Array [],
     "slug": "ignore-1",
+    "usageMode": "collapse",
   },
 ]
 `;
@@ -230,10 +239,13 @@ Object {
   ],
   "content": undefined,
   "description": undefined,
+  "exampleMode": "collapse",
   "filepath": undefined,
   "name": "Components",
+  "sectionDepth": 0,
   "sections": Array [],
   "slug": "components",
+  "usageMode": "collapse",
 }
 `;
 
@@ -244,10 +256,13 @@ Object {
     "require": "!!~/loaders/examples-loader.js!~/test/components/Button/Readme.md",
   },
   "description": undefined,
+  "exampleMode": "collapse",
   "filepath": "components/Button/Readme.md",
   "name": "Readme",
+  "sectionDepth": 0,
   "sections": Array [],
   "slug": "readme",
+  "usageMode": "collapse",
 }
 `;
 
@@ -311,9 +326,12 @@ Object {
   ],
   "content": undefined,
   "description": undefined,
+  "exampleMode": "collapse",
   "filepath": undefined,
   "name": "Ignore",
+  "sectionDepth": 0,
   "sections": Array [],
   "slug": "ignore",
+  "usageMode": "collapse",
 }
 `;

loaders/utils/__tests__/getSections.spec.js

@@ -19,6 +19,8 @@ const sections = [
 ];
 const config = {
 	configDir,
+	exampleMode: 'collapse',
+	usageMode: 'collapse',
 	getExampleFilename: a => a,
 	getComponentPathLine: a => a,
 };

loaders/utils/getSections.js

@@ -15,10 +15,11 @@ const examplesLoader = path.resolve(__dirname, '../examples-loader.js');
  *
  * @param {Array} sections
  * @param {object} config
+ * @param {number} sectionDepth
  * @returns {Array}
  */
-function getSections(sections, config) {
-	return sections.map(section => processSection(section, config));
+function getSections(sections, config, sectionDepth = 0) {
+	return sections.map(section => processSection(section, config, sectionDepth, true));
 }
 
 const getSectionComponents = (section, config) => {
@@ -34,9 +35,11 @@ const getSectionComponents = (section, config) => {
  * Return an object for a given section with all components and subsections.
  * @param {object} section
  * @param {object} config
+ * @param {number} sectionDepth
+ * @param {boolean} firstDepth
  * @returns {object}
  */
-function processSection(section, config) {
+function processSection(section, config, sectionDepth = 0, firstDepth = false) {
 	const contentRelativePath = section.content;
 
 	// Try to load section content file
@@ -48,12 +51,19 @@ function processSection(section, config) {
 		}
 		content = requireIt(`!!${examplesLoader}!${contentAbsolutePath}`);
 	}
+	sectionDepth =
+		section.sectionDepth !== undefined && firstDepth ? section.sectionDepth : sectionDepth;
+
+	const childrenSectionDepth = sectionDepth === 0 ? sectionDepth : sectionDepth - 1;
 
 	return {
 		name: section.name,
+		exampleMode: section.exampleMode || config.exampleMode,
+		usageMode: section.usageMode || config.usageMode,
+		sectionDepth,
 		description: section.description,
 		slug: slugger.slug(section.name),
-		sections: getSections(section.sections || [], config),
+		sections: getSections(section.sections || [], config, childrenSectionDepth),
 		filepath: contentRelativePath,
 		components: getSectionComponents(section, config),
 		content,