import { storiesOf } from 'dev-novel'
 
storiesOf('My first story')
  .add('Hello world', (container: HTMLDivElement) => {
    // create `<h1>Hello world</h1>`
    const title = document.createElement('h1')
    title.innerText = 'Hello world'
 
    // display it into the story result
    container.appendChild(title)
  })

import { registerInitializer, registerDisposer, storiesOf } from 'dev-novel'
 
registerInitializer(() => {
  window._appState = {
    user: {
      firstName: 'Max',
      lastName: 'Tyler'
    }
  }
})
 
registerDisposer(() => {
  window._appState = undefined
  delete window._appState
})
 
storiesOf('User profile')
  .add('Display user fullname', (container: HTMLDivElement) => {
    const span = document.createElement('span')
    span.innerText = `${window._appState.user.firstName} ${window._appState.user.lastName}`
 
    container.appendChild(span)
  })

import { start, storiesOf } from 'dev-novel'
 
[...]
 
start({
  projectName: ?string // name of the project to display in header of sidebar
  projectLink: ?string // URL to link on the projectName
  openAllStories?: boolean // open all parent stories item in the menu by default
})

import { action, registerDisposer, storiesOf } from 'dev-novel'
 
// remove all event listeners when switching to another story
let eventDisposers = []
registerDisposer(() => {
  eventDisposers.forEach(disposer => disposer())
  eventDisposers = []
})
 
storiesOf('Button')
  .add('click', container => {
    const handler = action('button-click')
    const button = document.createElement('button')
    button.innerText = 'Click me!'
    button.addEventListener('click', handler, false)
 
    // remove event listener after story ran
    const disposer = () => button.removeEventListener('click', handler, false)
    eventDisposers.push(disposer)
 
    // append button
    container.appendChild(button)
  })