import React, { StrictMode } from 'react'
import { styled } from 'view-container'
import { configure } from 'xmobx/mobx'

// can style all stories here
const StyledStory = styled.div`
  * {
    font-family: "Roboto";
    box-sizing: border-box;
  }
`

// !!! STRICT !!!
configure({ enforceActions: true })

const toStyledStory = story => {
  class StoryApp extends React.PureComponent {
    render() {
      console.log('rendering: ' + story.name)
      return <StyledStory><StrictMode>{story()}</StrictMode></StyledStory>
    }
  }
  return <StoryApp />
}

export { StyledStory }
export { toStyledStory }