New UI devel docs in Storybook

There’s new documentation of the javascript stack in Foreman, which has been published on github pages:
https://theforeman.github.io/foreman/

It covers initial development setup, how-to on creating components, some info about adding new dependencies and a section for plugin authors about how to use existing components in plugins and how to set up the webpack stack.

The docs have been created in Storybook and that gave us the benefit of having examples of available components at the same place. You’ll find them all in the “Components” menu. This section deserves more structure and I’d also like to group them by purpose, add description and docs of components’ properties. For now you can enjoy playing with how the components behave when you change their properties via the knobs panel.

For the future the plan is to extend this docs with additional info and stories for reusable components.

The immediate todo is adding links to the UI docs from our developer handbook and possibly from other places where it makes sense and finding a way how to update the storybook from the develop branch automatically when changes are merged.
For now the maintainers need to deploy the changes by hand:

npm run deploy-storybook -- --remote=upstream
4 Likes