Storybook: How can I customize the UI?

[vhflat]

I'm looking at the REAME under storybook/lib/ui and I dont understad In what file I'm supposed to use the renderStorybookUI method.

Could you specify the filenames and paths for the example code in the README?

In the storybook/lib/ui/example you use a new webpack-dev-server with a new webpack config, does that mean I should change the webpack config in the .storybook directory in my project to have a new entry point which is a file containing renderStorybookU?

[ndelangen]

Here's where this function is called in the react app:
https://github.com/storybooks/storybook/blob/master/app/react/src/client/manager/index.js

[ndelangen]

If you want to customize the Storybook UI visually this is currently very impractical.
There are options for changing the 'logo text' and url on the top left, via addon/options.
So if this is all you wanted: 🎉

It's also possible to inject css using a manager-head.html, but because of the lack of css classes selecting elements will be a major pain. Besides theming something by adding css overrides is fragile!

What we want to do in the near future is port the components used in lib/ui to lib/components. And we also want to redo their styling using glamorous.

Then to finish the epic, we'll expose an api to wrap any of the storybook components with a user-provided component. Allowing full customizability. This is on our roadmap.

Work on migrating the components to lib/components has started.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[ndelangen]

Related: #2101 (work in progress)

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[ndelangen]

Anyone interested in helping out?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[davidowens]

@ndelangen If I can help, I'd be more than happy to chip in. The design team on my project would like the pattern library to use more of the patterns :)

Is #2101 the best place to join in?

[danielduan]

@davidowens thanks for offering to help.

@ndelangen I'm gonna ask you to create a new issue (or issues) to define what this change would look like, where to start, etc. so it's easier for someone to pick up the work without having to read through all this.

[ndelangen]

@davidowens Sorry your kind offer for help slipped under my radar for so long. If you'd like, I can invite you to our slack (or you can self-invite). We have @orta currently working on some redesign work. I'm sure you could provide valuable insight what your team would like changed to the storybook app.

Very much interested in what sort of changes you'd like to make to the app 🙇

[orta]

Yep, definitely interested!

[danielduan]

I'm gonna close this issue since there's nothing actionable here.

For anyone who's interested in helping out with the redesign, please find us on Slack. There's a link in the README at the root of the repo.