This is a simple emulation of Chromatic and react-storybook for blaze-based projects.
It grew out of my appreciation for how useful it would be, but my unwillingness to rewrite my whole apps using react.
- put your UI components in a separate package
- create a new package yourapp-catalogue depending on blaze-styleguide and your
UI packages. In this package, describe your components and call
SG.configure({basePath: "/styleguide/"})
. Make itdebugOnly
so it's not included in production. - add yourapp-catalogue to your app,
- add this to your app client code:
- navigate to http://localhost:3000/styleguide/catalogue
- you've already got your UI components in packages, right?
- create a new package yourapp-catalogue depending on blaze-styleguide and your UI packages. In this package, describe your components.
- create a new yourapp-showcatalogue application depending on yourapp-catalogue and call
SG.configure()
in its client code. - Run yourapp-showcatalogue instead of your app while you're focusing on UI design.
- navigate to http://localhost:3000/catalogue
Checkout blaze-styleguide-example.
SG.register("sgScreen")
.add("default", function() {
return {
screens: SG.screens,
selected: function() {
return (this.name === SG.screens[0].name);
},
action: function() {}
};
});
This project can be improved in any of its aspects.
I'd be very pleased to see it grow, but be even more pleased to see Chromatic support Blaze and kill this project.
With that in mind, contributions are welcome :-)
blaze-styleguide is licensed under the MIT License.