Suggestions

[reintroducing]

I wasn't sure where to post this so I'm just putting it in an issue. After having worked with this awesome tool a bit over the weekend here are some suggestions which I think would make it more extensible for larger projects:

• Set path to styleguide.config.js
• Set path to template for output
• Set a different syntax highlighter
• If a type is "union" list out the possible types within it
• Ability to toggle showing/hiding code examples
• Ability to somehow group components with a navigation so you can show/hide only what section you want to see

As for the last item, I think this is pretty important for larger codebases where there are lots of components to be shown. It would be fantastic to have something that functions similar to this:

http://spothero.com/uniform/#ui/css

What do you think about these?

[reintroducing]

I just realized that you're using CodeMirror and took a look at it. It's actually really nice so I would say instead of a different syntax highlighter that would change to different theme for the syntax highlighting.

[sapegin]

Thanks for your comments! Pull request or an issue with any ideas on how to better implement each of these would be very cool.

[reintroducing]

I was looking at the code earlier and will look at it some more to see if I can figure out some good ideas for it or open some PRs that would add this functionality. As I mentioned in another issue I'm not a webpack user though I have wanted to try it out for some time now so maybe this would be a good way for me to do that. I think the first five items I mentioned would be relatively trivial with the last one being the most complex as it would require rewriting of some of the components to support this.

I'm really wanting to make a nice version of our React component library to go along with the other style guide items that I made at the link above for Uniform so I'm going to dedicate some time to this as I feel like this is a great plugin but I can't commit to any time when I'll get to it so I don't want to make empty promises. We work on 2 week sprints so as time becomes available to me when I get my other work done I'll be looking into this.

Thanks again for all your hard work and I'll think through these items and get back to you.

[sapegin]

Thank you very much, I appreciate any help. If you need to discuss something feel free to contact me.

[sapegin]

And for the first item I think it’s already there.

[reintroducing]

Yep, you're absolutely correct, it is there. :)

[reintroducing]

I opened a PR for the template. Let me know if this works for you.

I was thinking a bit more about the ability to switch the syntax highlighting theme. The catch here is that I don't know how to pull the config variables into the Editor component so that it can be set in the config and then read in there to set the theme. I think (althought I don't really know, I thought I remember reading it somewhere) Webpack also has dynamic module paths which would be nice so we can set the theme and pull the necessary CSS file based on that. Does Webpack have any mechanisms to get that info into the component for use?

I'm going to next focus on toggling code and the union type.

[sapegin]

I already pass the title from config to React so it’s easy to extend this to other options (or the whole config).

[reintroducing]

Fantastic! That answers my email question as well (and I did see your response, thanks).

[onemanstartup]

@sapegin is there a plan to automatically setup prop toggles to change state? It will be great for discovery how component behave if you have many props.

[sapegin]

@onemanstartup Not a plan but a wish ;-) Pull request are very welcome.

[paul-sachs]

Hi all, I've spent some time fiddling with this repo and it's shown really great promise but I had an idea that may help with all the above. Right now the repo allows us to specify a relatively limited html template. What I am suggesting is that the user could provide their own StyleGuide component and add whatever flavor of filtering/grouping that they feel necessary. We would have to make sure the component has the proper props (currently title, hilighttheme, components) but that would allow us to potentially filter the results in a very react-ish manner.

This requires that the project make accessible all the components used but it also extends the ability quite handily.

What do you folks think?

[sapegin]

@psachs21 That could be useful but I have no idea how to implement it in a good way.

[paul-sachs]

I have figured a way to allow us to specify a component which works fine, I just need to figure out how we want to expose it. Right now, requiring the tool just provides the build function (from build.js) but we could make it instead return an object that has the build function and the components. The only question is how to make sure their in a format that is compatible with the user's component (ES5, ES6.) A first draft could just assume both are using babel.

[paul-sachs]

But I'm still thinking about it, so maybe i'll come up with something more resilient.

[sapegin]

@psachs21 Probably we can specify a module with the custom StyleGuide component, require it in src/index.js and render instead of the standard one. Not sure if it works ;-)

[paul-sachs]

It does, but it needs to do it in the styleguide loader (config isn't available in index.js) that's what my fork is doing.

[paul-sachs]

Just need to figure out the best way to import the styleguide's components into my custom components.

[paul-sachs]

We'd probably need a lib directory that would contain the components in a compiled state (ES5) and add an install step that compiles them.

Or probably a dist directory makes more sense.

[sapegin]

@psachs21 Not sure it’s a good idea. I’ll look at your fork later, maybe I’ll came up with something.

[paul-sachs]

@sapegin I haven't done the dist directory, just poking the idea. But any comments would be hugely appreciated. I'm still really just playing with these ideas.

[jeroenverfallie]

Perhaps it might be a clean solution to just extract the entire styleguide loader part, then anyone is free to use the data in any way they want.

[sapegin]

@jeroenverfallie There are three loaders but it’s a good idea, I thought about that.

[paul-sachs]

@jeroenverfallie @sapegin I was intrigued by the idea of separating the loaders but I liked what the makeWebpackConfig utility provides. I've updated my fork to move all the components into the example. I am not in love with the way everything is organized but it is working. I will likely refine the organization of the configurations. Also, I'll likely trim the library's dependencies now that the project itself will shoulder more of it.

[sapegin]

I’ve tried another approach to extending style guide and it could be enough for some use cases. In my case it was react-intl integration. I’ve added two container components StyleGuide and Wrapper where you can inject your code using Webpack’s aliases.

styleguide.config.js:

webpackConfig.resolve.alias['components/Wrapper'] = path.join(__dirname, 'lib/styleguide/Wrapper');

lib/styleguide/Wrapper.js:

import React, { PropTypes } from 'react';
import { IntlProvider } from 'react-intl';

export default React.createClass({
    displayName: 'Wrapper',
    propTypes: {
        children: PropTypes.node.isRequired
    },

    render() {
        return (
            <IntlProvider locale="en">
                {this.props.children}
            </IntlProvider>
        );
    }
});

[paul-sachs]

Hmm, interesting. I should have tried that myself, it would have required
less hacking and slashing. It may be enough for what I need to do. I added
a few other things to my fork (multiple component directories) but these
modifications may be sufficient.

Thanks.

On Wed, Oct 28, 2015 at 11:22 AM, Artem Sapegin notifications@github.com
wrote:

I’ve tried another approach to extending style guide and it could be
enough some use cases. In my case it was react-intl
https://github.com/yahoo/react-intl integration. I’ve added two
container components StyleGuide and Wrapper where you can inject your
code using Webpack’s aliases.

styleguide.config.js:

webpackConfig.resolve.alias['components/Wrapper'] = path.join(__dirname, 'lib/styleguide/Wrapper');

lib/styleguide/Wrapper.js:

import React, { PropTypes } from 'react';
import { IntlProvider } from 'react-intl';

export default React.createClass({
displayName: 'Wrapper',
propTypes: {
children: PropTypes.node.isRequired
},

render() {
    return (
        <IntlProvider locale="en">
            {this.props.children}
        </IntlProvider>
    );
}

});

—
Reply to this email directly or view it on GitHub
#12 (comment)
.

[mik01aj]

@reintroducing I opened #28 to discuss your last point.

[mik01aj]

Quoting first post:

Ability to toggle showing/hiding code examples

Will be done in #86.

Ability to somehow group components with a navigation so you can show/hide only what section you want to see

So #28 didn't really end up with grouping, but maybe #98 will do.

So, as these issues are reported elsewhere, I close this one.