Enable isolation of a single fenced block example #225

cef62 · 2016-11-14T08:37:22Z

Hi @sapegin
first of all thanks for this project! I really love it and we use it in several projects.
In many of our library projects is the only available compiled output and we often need to isolate a single example from a readme file.

This PR add the ability to isolate a single code example to simplify the development process.
Would you like to add this feature to the official repo?

I'd love to have your feedback!
Cheers

sapegin · 2016-11-14T08:47:17Z

Hi @cef62! That looks very interesting, thank you very much for the PR!

I’ll review the code a bit later.

Using indexes looks fragile (what if you add or move an example?) but I have no better idea how to implement it.

cef62 · 2016-11-14T08:55:03Z

Thanks @sapegin, let me knows you want me to change something!

Using indexes looks fragile (what if you add or move an example?) but I have no better idea how to implement it.

I agree with you but I didn't want to touch too much your current code structure and all texts and fenced blocks are stored in a single array with just numeric indexes. Anyway I don't think should be a real problem because the index will change only if you add other texts or fenced blocks to the readme file and that shouldn't happen while you are debugging a single example.
Probably the only problematic scenario is if you bookmark a single example and then the readme file changes.

I think I can get a more robust solution but that would involve the user somehow to explicitly always specify an ID for the fenced block; personally, as user, I'd prefer avoiding it but it's a viable option.

sapegin · 2016-11-14T09:41:05Z

I think indexes are fine unless someone find better solution that doesn’t affect developer experience.

sapegin

We need to do something with the UI. Right now it’s inconsistent and a bit too loud for such a feature. (But I we can merge it and think more later.)

Otherwise it’s great ;-)

sapegin · 2016-11-14T09:46:43Z

src/index.js

 	if (targetComponentName) {
 		components = [
 			...filterComponentsByExactName(components, targetComponentName),
 			...filterComponentsInSectionsByExactName(sections, targetComponentName),
 		];
 		sections = [];
 		sidebar = false;
+
+		if (components.length === 1 && _.isFinite(targetComponentIndex)) {


Please use cherry-picking for Lodash for consistency: import isFinite from 'lodash/isFinite'.

Looks like we need some comments here to explain all the things we’re doing: isolated component, isolated example, etc.

sapegin · 2016-11-14T09:52:13Z

src/rsg-components/Playground/Playground.css

@@ -14,7 +14,7 @@
 	composes: font from "../../styles/common.css";
 	composes: border link from "../../styles/colors.css";
 	position: absolute;
-	right: -1px;
+	right: 138px;


This is not cool ;-)

sapegin · 2016-11-14T09:55:29Z

src/index.js

@@ -43,6 +50,7 @@ function renderStyleguide() {
 			components={components}
 			sections={sections}
 			sidebar={sidebar}
+			singleExample={singleExample}


I thinks it would be better to use context here, like for config. Probably make a new object in config for sidebar and singleExample.

cef62 · 2016-11-14T13:28:22Z

We need to do something with the UI. Right now it’s inconsistent and a bit too loud for such a feature (But I we can merge it and think more later.)

Yep the UI is not that good... my intention was to understand if you'd like the feature before thinking on the look & feel.

Otherwise it’s great ;-)
Thanks :)

I've addressed your comments, let me know if you want further tweaks.

sapegin · 2016-11-14T14:17:01Z

Thanks! Do you have any ideas on how to improve the UI? If not I’d merge it and try to do something myself before releasing a new version.

cef62 · 2016-11-14T14:21:12Z

I was thinking to move the link to isolate a single example to the upper-right of the rendered fenced block. Something similar the link you already have in place in the upper-right corner of every rendered component.

What do you think? Would you like I add it to the PR?

sapegin · 2016-11-14T14:23:09Z

I was thinking about that too. And show it on hover. At least it would be more consistent with component isolation UI. So please add it to the PR and I’ll merge it.

cef62 · 2016-11-14T14:24:11Z

Great! I'll add it to the PR.

cef62 · 2016-11-14T15:30:58Z

I've made the discussed changes, let me know if it's ok for you!

sapegin · 2016-11-14T15:58:21Z

Cool, that’s much better!

cef62 · 2016-11-14T15:58:56Z

Thanks! I'm happy you liked the addition 👍

@cef62

## New features Now you can open single example (not a whole component) in isolated mode: ![](http://wow.sapegin.me/2037140t1y0O/Image%202016-11-14%20at%206.19.19%20PM.png) (#225 by @cef62)

@cef62

## New features ### Isolated mode for examples Now you can open single example (not a whole component) in isolated mode: ![](http://wow.sapegin.me/2037140t1y0O/Image%202016-11-14%20at%206.19.19%20PM.png) (#225 by @cef62) ### Config option to debounce preview rendering while live editing Default value is 500. That means you’ll not see that annoying red error message box while you’re typing. (#227 by @cef62)

Feat: Enable isolation of a single fenced block example

1eabc68

cef62 changed the title ~~Feat: Enable isolation of a single fenced block example~~ Enable isolation of a single fenced block example Nov 14, 2016

sapegin reviewed Nov 14, 2016

View reviewed changes

cef62 added 3 commits November 14, 2016 11:10

Chore: cherry-picked lodash deps and added missing comments

6385d57

Refactor: moved singleExample prop to context

dba6891

Fix: improved css management in PlaygroundRenderer component

dd0d657

feat: improved isolate example UI

ef042ba

sapegin merged commit c26ec66 into styleguidist:master Nov 14, 2016

sapegin added a commit that referenced this pull request Nov 14, 2016

Changelog: ☁

81368e2

## New features Now you can open single example (not a whole component) in isolated mode: ![](http://wow.sapegin.me/2037140t1y0O/Image%202016-11-14%20at%206.19.19%20PM.png) (#225 by @cef62)

snyk-bot mentioned this pull request Nov 16, 2022

[Snyk] Fix for 1 vulnerabilities Yoasia1985/react-styleguidist#58

Open

Yoasia1985 mentioned this pull request Nov 29, 2022

[Snyk] Fix for 1 vulnerabilities Yoasia1985/react-styleguidist#64

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable isolation of a single fenced block example #225

Enable isolation of a single fenced block example #225

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016

sapegin left a comment

sapegin Nov 14, 2016

sapegin Nov 14, 2016

sapegin Nov 14, 2016

sapegin Nov 14, 2016

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016 •

edited

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016

cef62 commented Nov 14, 2016

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016

cef62 commented Nov 14, 2016

Enable isolation of a single fenced block example #225

Enable isolation of a single fenced block example #225

Conversation

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016

sapegin left a comment

Choose a reason for hiding this comment

sapegin Nov 14, 2016

Choose a reason for hiding this comment

sapegin Nov 14, 2016

Choose a reason for hiding this comment

sapegin Nov 14, 2016

Choose a reason for hiding this comment

sapegin Nov 14, 2016

Choose a reason for hiding this comment

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016 • edited

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016

cef62 commented Nov 14, 2016

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016

cef62 commented Nov 14, 2016

sapegin commented Nov 14, 2016 •

edited