Feat: Added codeSamples and propsMethods settings per sections #941

rafaesc · 2018-04-17T21:42:32Z

First PR to abstract the sections setting, related with #892

rafaesc · 2018-04-18T23:44:41Z

src/utils/getPageTitle.js

 		return `${sections[0].components[0].name} — ${baseTitle}`;
-	} else if (displayMode === DisplayModes.section) {
+	} else if (displayMode === DisplayModes.section || displayMode === DisplayModes.example) {
 		return `${sections[0].name} — ${baseTitle}`;


sapegin · 2018-04-19T06:48:16Z

docs/Configuration.md

@@ -664,7 +664,7 @@ module.exports = {

 > **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.

-> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
+> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `MiniHtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.


Looks like some merge issue — these changes are from another PR ;-/

okonet

Nice work! Please merge in master plus see my comments.

okonet · 2018-04-19T07:05:27Z

src/rsg-components/Playground/Playground.js

 		const preview = <Preview code={code} evalInContext={evalInContext} />;
-		if (settings.noeditor) {
+		if (settings.noeditor || hideEditor) {


Can we move both conditions to the const?

okonet · 2018-04-19T07:06:45Z

src/rsg-components/Playground/Playground.js

 		const { displayMode } = this.context;
+		const hideEditor = codeSamples === CodeSamplesModes.hide;


If hideEditor is true we should not render preview since it will take time. Let put it into the condition below.

But I have understood that preview always should render, like this
https://github.com/styleguidist/react-styleguidist/blob/master/src/rsg-components/Playground/Playground.js#L68-L72, or how would I have to create the condition?, Thanks!

okonet · 2018-04-19T07:09:38Z

src/utils/getRouteData.js

-		const filteredComponents = filterComponentsInSectionsByExactName(sections, targetName);
-		if (filteredComponents.length) {
-			sections = [{ components: filteredComponents }];
+		const filteredSections = filterComponentsInSectionsByExactName(sections, targetName);


What are these changes about?

yes, it's because in this case tries isolated so if I want that use the same section setting, its necessary that the sections have codeSamples and propsMethods if you see on the function filterComponentsInSectionsByExactName, right now returns a section.
https://github.com/styleguidist/react-styleguidist/pull/941/files#diff-5cafb86def7c61e87a06ed3f7c5b95cc

This reverts commit bd70102.

arielsalminen · 2018-04-25T05:43:54Z

@rafaesc Nice work! Let me know if I can help in any way here.

sapegin · 2018-05-02T08:24:04Z

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

@@ -3,6 +3,8 @@ import ReactComponent from '../ReactComponent';
 import Components from './Components';
 import ComponentsRenderer from './ComponentsRenderer';

+const codeSamples = 'collapse';


Shouldn't it be CodeSamplesModes.collapse?

sapegin · 2018-05-02T08:25:23Z

src/consts.js

@@ -11,3 +11,15 @@ export const DisplayModes = Object.freeze({
 	example: 'example',
 	// TODO: error (404)
 });
+
+export const CodeSamplesModes = Object.freeze({


I think ExampleModes would be better.

sapegin · 2018-05-02T08:26:54Z

src/consts.js

+	expand: 'expand',
+});
+
+export const PropsMethodsModes = Object.freeze({


And UsageModes, we have the Usage component to render props and methods.

sapegin · 2018-05-02T08:30:21Z

src/utils/__tests__/filterComponentsInSectionsByExactName.spec.js

@@ -23,6 +23,6 @@ const sections = deepfreeze([
 describe('filterComponentsInSectionsByExactName', () => {
 	it('should return components at any level with exact name', () => {
 		const result = filterComponentsInSectionsByExactName(sections, 'Image');
-		expect(result.map(x => x.name)).toEqual(['Image']);
+		expect(result[0].components.map(x => x.name)).toEqual(['Image']);


What was the reason for this change? Suspicious ;-)

Yes, because before returned a component list to isolate them, but how I need the codeSample and propsMethods section setting to mantain the setting, now it returns section list

sapegin · 2018-05-02T08:45:24Z

src/utils/filterComponentsInSectionsByExactName.js

@@ -5,17 +5,24 @@ import filterComponentsByExactName from './filterComponentsByExactName';
 *
 * @param {object} sections
 * @param {string} name
- * @return {Array}
+ * @return {Array} sections


Return shouldn't have a variable name.

sapegin · 2018-05-02T08:46:49Z

src/utils/filterComponentsInSectionsByExactName.js

 */
 export default function filterComponentsInSectionsByExactName(sections, name) {
-	const components = [];
+	const output = [];


output is a very non-descriptive name. If you want to use components inside the loop, use something like filteredComponents instead of output.

sapegin · 2018-05-08T07:26:31Z

Do we have any breaking changes here? Do we need any docs updates (I guess we do)?

codecov-io · 2018-05-08T07:59:46Z

Codecov Report

Merging #941 into master will increase coverage by 0.02%.
The diff coverage is 100%.

Impacted Files	Coverage Δ
scripts/schemas/config.js	`87.5% <ø> (ø)`	⬆️
scripts/utils/mergeWebpackConfig.js	`100% <ø> (ø)`	⬆️
src/rsg-components/Section/Section.js	`100% <100%> (ø)`	⬆️
src/utils/getRouteData.js	`100% <100%> (ø)`	⬆️
src/rsg-components/Playground/Playground.js	`93.54% <100%> (+0.69%)`	⬆️
src/utils/filterComponentsInSectionsByExactName.js	`100% <100%> (ø)`	⬆️
loaders/utils/getSections.js	`100% <100%> (ø)`	⬆️
...rc/rsg-components/ReactComponent/ReactComponent.js	`85.18% <100%> (+1.85%)`	⬆️
src/rsg-components/Components/Components.js	`100% <100%> (ø)`	⬆️
src/rsg-components/Examples/Examples.js	`100% <100%> (ø)`	⬆️
... and 2 more

…yleguidist into section-setting

…uidist into section-setting

sapegin · 2018-05-13T07:42:21Z

docs/Components.md

@@ -109,6 +109,8 @@ 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.
+* `codeSamples` — Settings documentation initially of example code tab, uses [codeSamples](Configuration.md#codesamples).


“Initial state of the code example tab”? And similarly the next one.

sapegin

And I still have a question about breaking changes: will deprecated options work? Can we make a minor release?

sapegin · 2018-05-13T07:44:46Z

docs/Configuration.md

+
+Allows to config documentation initially of example code tab
+
+* when is `collapse`: collapses the tab by default.


I'd remove “when is”.

sapegin · 2018-05-13T07:47:11Z

docs/Configuration.md

@@ -664,7 +672,7 @@ module.exports = {

 > **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.

-> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `MiniHtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
+> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.


sapegin · 2018-05-13T07:47:32Z

docs/Configuration.md

+
+Type: `String`, default: `collapse`
+
+Allows to config documentation initially of example code tab


Defines the initial state of the example code tab:

sapegin · 2018-05-13T07:47:51Z

docs/Configuration.md

@@ -55,6 +55,16 @@ Type: `String`, optional

 Your application static assets folder, will be accessible as `/` in the style guide dev server.

+#### `codeSamples`


They are examples, not samples — I think I’ve mentioned that before ;-)

sapegin · 2018-05-13T07:47:57Z

docs/Configuration.md

@@ -335,6 +345,16 @@ module.exports = {
 }
 ```

+#### `propsMethods`


And I’d keep “usage” here.

sapegin · 2018-05-13T07:48:21Z

docs/Webpack.md

@@ -43,7 +43,7 @@ module.exports = {

 > **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.

-> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `MiniHtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
+> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.


Some unrelated changes in this file — probably merge issue.

rafaesc added 10 commits April 17, 2018 16:17

Feat: Added codeSamples and propsMethods settings per sections

58c9379

Fix: props table expand

cc9ef7d

fix: updated tests

3c49c1f

Fix: tests

bb90e06

Fix: updated snapshots

450b77b

Fix: updated section.spec.js

5bb5dbc

Fix: updated snapshot

6787b0d

Fix: updated section snapshot

564d44b

Merge branch 'section-setting' of https://github.com/rafaesc/react-st…

cf31c41

…yleguidist into page-section

Fix: keep setting section in isolate mode

94b5de0

rafaesc commented Apr 18, 2018

View reviewed changes

sapegin reviewed Apr 19, 2018

View reviewed changes

sapegin requested a review from okonet April 19, 2018 06:48

okonet requested changes Apr 19, 2018

View reviewed changes

rafaesc added 3 commits April 19, 2018 09:35

Revert "Fix: Ignore mini-html-webpack-plugin (styleguidist#938)"

cbb8aaa

This reverts commit bd70102.

Fix: updated

b763407

Fix: updated section styleguide.config.js

f35ae15

This was referenced Apr 25, 2018

Separate pages & URLs for all nav items to allow richer documentation of components arielsalminen/vue-design-system#63

Closed

Switch to using official Vue Styleguidist dependency arielsalminen/vue-design-system#75

Closed

okonet approved these changes Apr 29, 2018

View reviewed changes

sapegin requested changes May 2, 2018

View reviewed changes

sapegin mentioned this pull request May 3, 2018

Clicking the title when using pagePerSection will result in a faulty URL #951

Closed

rafaesc and others added 2 commits May 3, 2018 14:32

Fix: variable names changed

c4c9c06

Merge branch 'master' into section-setting

93d9def

rafaesc added 3 commits May 9, 2018 18:33

Doc: Added codesamples and propsmethods

86347ee

Merge branch 'section-setting' of https://github.com/rafaesc/react-st…

0bfb2e1

…yleguidist into section-setting

Merge branch 'master' of https://github.com/styleguidist/react-styleg…

c5078e5

…uidist into section-setting

sapegin reviewed May 13, 2018

View reviewed changes

sapegin requested changes May 13, 2018

View reviewed changes

rafaesc closed this Jul 2, 2018

rafaesc deleted the section-setting branch July 2, 2018 02:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Added codeSamples and propsMethods settings per sections #941

Feat: Added codeSamples and propsMethods settings per sections #941

rafaesc commented Apr 17, 2018

rafaesc Apr 18, 2018

sapegin Apr 19, 2018

okonet left a comment

okonet Apr 19, 2018

okonet Apr 19, 2018

rafaesc Apr 19, 2018

okonet Apr 19, 2018

rafaesc Apr 19, 2018

arielsalminen commented Apr 25, 2018

sapegin May 2, 2018

sapegin May 2, 2018

sapegin May 2, 2018

sapegin May 2, 2018

rafaesc May 3, 2018

sapegin May 2, 2018

sapegin May 2, 2018

sapegin commented May 8, 2018

codecov-io commented May 8, 2018 •

edited

Loading

sapegin May 13, 2018

sapegin left a comment

sapegin May 13, 2018

sapegin May 13, 2018

sapegin May 13, 2018

sapegin May 13, 2018

sapegin May 13, 2018

sapegin May 13, 2018

		const { displayMode } = this.context;
		const hideEditor = codeSamples === CodeSamplesModes.hide;


		Allows to config documentation initially of example code tab

		* when is `collapse`: collapses the tab by default.


		Type: `String`, default: `collapse`

		Allows to config documentation initially of example code tab

		@@ -55,6 +55,16 @@ Type: `String`, optional

		Your application static assets folder, will be accessible as `/` in the style guide dev server.

		#### `codeSamples`

Feat: Added codeSamples and propsMethods settings per sections #941

Feat: Added codeSamples and propsMethods settings per sections #941

Conversation

rafaesc commented Apr 17, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

okonet left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arielsalminen commented Apr 25, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sapegin commented May 8, 2018

codecov-io commented May 8, 2018 • edited Loading

Codecov Report

Choose a reason for hiding this comment

sapegin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-io commented May 8, 2018 •

edited

Loading