Style guide for Styleguidist UI

[sapegin]

We have quite a lot of UI components in Styleguidist now and sometimes it’s hard to find an existing component and how to use it for some new feature. But we have a great tool exactly for that — Styleguidist itself. Let’s make a style guide for our own components.

• Setup a style guide
• Publish to the site

[allison-zhao]

I can try to help if no one is working on it?

[sapegin]

@leahzxxz Sounds great!

[allison-zhao]

@sapegin Any design/sketch files I should be referring to?

[sapegin]

@leahzxxz Nope, it's about adding a style guide for existing components in src/rsg-components folder. So adding styleguide.config.js into a root folder and pointing it to src/rsg-components/**/[A-Z]*.js should be enough. So your style guide config should look like this:

module.exports = {
	components: 'src/rsg-components/**/[A-Z]*.js',
	webpackConfig: {
		module: {
			rules: [
				{
					test: /\.jsx?$/,
					exclude: /node_modules/,
					loader: 'babel-loader',
				},
				{
					test: /\.css$/,
					loader: 'style-loader!css-loader',
				},
			],
		},
	},
};

[allison-zhao]

I see - just want to clarify: adding styleguide.config.js is enough? Do I need to add any pages or anything else? (sorry still a new dev)

[sapegin]

Yep, similar to examples style guides we have (examples folder) but to show components that is used in Styleguidist itself.

You may see some components twice (Component + ComponentRenderer) because of how we structure the code but I would ignore that for now.

And also a new script here:

react-styleguidist/package.json

Lines 143 to 145 in 4396dc2

	"start": "node bin/styleguidist.js server --config examples/basic/styleguide.config.js",
	"start:customised": "node bin/styleguidist.js server --config examples/customised/styleguide.config.js",
	"start:sections": "node bin/styleguidist.js server --config examples/sections/styleguide.config.js",

(You don't need to specify a config path for that case, it will use a default one.)

[allison-zhao]

Thanks for explaining - I think I understand better now (was wondering why I added the file but it was still only loading the buttons - now I know it's pointing to the examples folder 😅 ).
Before I put up the PR, do I need to change anything in package.json?
(Like adding "start:styleguide": "node bin/styleguidist.js server styleguide.config.js")

[sapegin]

Yup, you need to add a command to run your new style guide like this:

"start:ui": "node bin/styleguidist.js server", 

[allison-zhao]

Thanks! A few follow up questions:

• Is there a deadline for when this should be done? Getting a bunch of cross-origin and other errors (none of the examples or code snippets load at the moment) and I think it will take me a while to figure out
• Are there code examples for the components? I'm not familiar with the codebase enough, would appreciate some help
• Do all components in rsg-components need to go on the style guide?

P.S. I'm happy to continue working on this, but if you feel like you might want someone more experienced to get it done faster/with less help, I'm happy to submit what I have so far and let someone take over 💃

[sapegin]

Is there a deadline for when this should be done? Getting a bunch of cross-origin and other errors (none of the examples or code snippets load at the moment) and I think it will take me a while to figure out

No deadlines in open source, it's our free time and we don't have that many of it usually ;-) Feel free to open a pull request with WIP in a title if you're stuck. I'll have a look.

Are there code examples for the components? I'm not familiar with the codebase enough, would appreciate some help

Not now, just having all the component in the style guide is enough for now.

Do all components in rsg-components need to go on the style guide?

Yup, you'll have that with default settings.

[allison-zhao]

Thanks @sapegin ! PR is #926

I just added the config file and start script, getting a bunch of errors in the console. Can you point me in the direction of what these errors are? Also in general, how do the components render in the style guide? Since they are all inheriting props, I was wondering where the props are coming from. Thanks!