Storybook is the UI Development Environment that I've been looking for. You can:
- Manually Test
- Automate Visual Test
- Produce a Static output of the Storybook that can be hosted/shared
- Plus much more with these addons or you can create your own
The Storybook devs have put in a good amount of effort but there were some issues on getting it working in Emberjs. I hope with this post, I can share my setup so we can make it easier in the future.
Notable links that helped me setup the project:
yarncan be switched for
- Yarn scripts can be found in the package.json
4) Run Ember and Run Storyboard
$ yarn start
$ yarn storybook
- NOTE: had issues making this one command so thats why it they are separate commands that should be ran in different terminals.
$ yarn jest:integration
6) Create a share able Storybook distribution
$ yarn storybook:dist
- Knobs lets you create color pickers, dropdowns and ability to change text. Great for manual testing during development.
- Notes Allows you to document the component
- Viewport allows you to visualize the look on different screens.
Still new to Storybook and know this wasn't an in depth tutorial so tweet at me if you need help or want to see more.