Storybooking an Elm App

This demo demonstrates a simple calendar built with Elm and "storybooked" using React Storybook.

React Storybook is an amazing tool that provides the ability to isolate UI Components for testing/documentation purposes.

• Elm App Demo

• StoryBook Demo

How can we achieve that ?

• The Calendar is broken down into two small Apps (CalendarHeader, CalendarDay)
• We use programWithFlagsso that we can inject data from Javascript to Elm
• We import these Elm Apps into ReactStoryBook thanks to the elm-webpack-loader
• These Elm Apps are then wrapped into React thanks to a small wrapper (see : src/stories/Elm.js)

We can now write happy Elm stories 😄

How to run the demo ?

• In case you don't have ELM :

npm install elm -g

• Elm-App Package Installation :

npm install create-elm-app -g

• Install project dependencies :

cd app
elm-package install
npm install

• Run Elm App :

elm-app start

• Run Storybook :

npm run storybook

---

Html and css is forked from http://codepen.io/miroot/pen/aHCIg from @mirot