docs(website): update to new connect api

Author: christianalfoni

packages/overmind-website/examples/api/connect.ts

@@ -4,7 +4,7 @@ const javascript = {
       fileName: 'SomeComponent.js',
       code: `
 import React from 'react'
-import app from '../app'
+import { connect } from '../app'
 
 const SomeComponent = ({ app }) => {
   return (
@@ -14,7 +14,7 @@ const SomeComponent = ({ app }) => {
   )
 }
 
-export default app.connect(SomeComponent)
+export default connect(SomeComponent)
     `,
     },
   ],
@@ -30,9 +30,9 @@ export default app.connect(SomeComponent)
     {
       fileName: 'SomeComponent.vue (script)',
       code: `
-import app from '../app'
+import { connect } from '../app'
 
-export default app.connect({})
+export default connect({})
   `,
     },
   ],
@@ -44,7 +44,7 @@ const typescript = {
       fileName: 'SomeComponent.tsx',
       code: `
 import * as React from 'react'
-import app, { Connect } from '../app'
+import { connect, Connect } from '../app'
 
 const SomeComponent: React.SFC<Connect> = ({ app }) => {
   return (
@@ -54,7 +54,7 @@ const SomeComponent: React.SFC<Connect> = ({ app }) => {
   )
 }
 
-export default app.connect(SomeComponent)
+export default connect(SomeComponent)
     `,
     },
   ],
@@ -64,7 +64,7 @@ export default app.connect(SomeComponent)
       fileName: 'some.component.ts',
       code: `
 import { Component } from '@angular/core';
-import app from '../app'
+import { connect } from '../app'
 
 @Component({
   selector: 'some-component',
@@ -74,7 +74,7 @@ import app from '../app'
   </div>
   \`
 })
-@app.connect()
+@connect()
 export class SomeComponent {}    
     `,
     },

packages/overmind-website/examples/api/reaction_component.ts

@@ -4,7 +4,7 @@ const javascript = {
       fileName: 'components/SomeComponent.js',
       code: `
 import React from 'react'
-import app from '../app'
+import { connect } from '../app'
 
 class SomeComponent extends React.Component {
   componentDidMount () {
@@ -21,7 +21,7 @@ class SomeComponent extends React.Component {
   }
 }
 
-export default app.connect(SomeComponent)
+export default connect(SomeComponent)
     `,
     },
   ],
@@ -35,9 +35,9 @@ export default app.connect(SomeComponent)
     {
       fileName: 'SomeComponent.vue (script)',
       code: `
-import app from '../app'
+import { connect } from '../app'
 
-export default app.connect({
+export default connect({
   mounted() {
     this.app.reaction(
       'scrollUpOnNotification',
@@ -76,7 +76,7 @@ class SomeComponent extends React.Component<Connect, {}> {
   }
 }
 
-export default app.connect(SomeComponent)
+export default connect(SomeComponent)
     `,
     },
   ],
@@ -86,15 +86,15 @@ export default app.connect(SomeComponent)
       fileName: 'some.component.ts',
       code: `
 import { Component } from '@angular/core';
-import app from '../app'
+import { connect } from '../app'
 
 @Component({
   selector: 'some-component',
   template: \`
   <h1>foo</h1>
   \`
 })
-@app.connect()
+@connect()
 export class SomeComponent {
   constructor() {
     this.app.reaction(

packages/overmind-website/examples/guide/connectingcomponents/actions.ts

@@ -15,15 +15,15 @@ export const toggleAwesomeApp = action =>
       target: 'jsx',
       code: `
 import React from 'react'
-import app from './app'
+import { connect } from '../app'
 
 const App = ({ app }) => (
   <button onClick={() => app.actions.toggleAwesomeApp()}>
     Toggle awesome
   </button>
 )
 
-export default app.connect(App)
+export default connect(App)
     `,
     },
   ],
@@ -50,9 +50,9 @@ export const toggleAwesomeApp: Action = action =>
     {
       fileName: 'components/App.vue (script)',
       code: `
-import app from './app'
+import { connect } from '../app'
 
-export default app.connect({})
+export default connect({})
   `,
     },
   ],
@@ -82,7 +82,7 @@ const App: React.SFC<Connect> = ({ app }) => (
   </button>
 )
 
-export default app.connect(App)
+export default connect(App)
     `,
     },
   ],
@@ -102,7 +102,7 @@ export const toggleAwesomeApp: Action = action =>
       fileName: 'components/app.component.ts',
       code: `
 import { Component } from '@angular/core';
-import app from '../app'
+import { connect } from '../app'
 
 @Component({
   selector: 'app-root',
@@ -112,7 +112,7 @@ import app from '../app'
   </button>
   \`
 })
-@app.connect()
+@connect()
 export class App {}
     `,
     },

packages/overmind-website/examples/guide/connectingcomponents/array_1.ts

@@ -5,13 +5,13 @@ const javascript = {
       target: 'jsx',
       code: `
 import React from 'react'
-import app from './app'
+import { connect } from '../app'
 
 const List = ({ app }) => (
   <h1>{app.state.items}</h1>
 )
 
-export default app.connect(List)
+export default connect(List)
     `,
     },
   ],
@@ -26,9 +26,9 @@ export default app.connect(List)
     {
       fileName: 'components/List.vue (script)',
       code: `
-import app from './app'
+import { connect } from '../app'
 
-export default app.connect({})
+export default connect({})
   `,
     },
   ],
@@ -46,7 +46,7 @@ const List: React.SFC<Connect> = ({ app }) => (
   <h1>{app.state.items}</h1>
 )
 
-export default app.connect(List)
+export default connect(List)
     `,
     },
   ],
@@ -56,15 +56,15 @@ export default app.connect(List)
       fileName: 'components/list.component.ts',
       code: `
 import { Component } from '@angular/core';
-import app from '../app'
+import { connect } from '../app'
 
 @Component({
   selector: 'app-list',
   template: \`
   <h1>{{app.state.items}}</h1>
   \`
 })
-@app.connect()
+@connect()
 export class List {}
     `,
     },

packages/overmind-website/examples/guide/connectingcomponents/array_2.ts

@@ -5,7 +5,7 @@ const javascript = {
       target: 'jsx',
       code: `
 import React from 'react'
-import app from './app'
+import { connect } from '../app'
 
 const List = ({ app }) => (
   <ul>
@@ -15,7 +15,7 @@ const List = ({ app }) => (
   </ul>
 )
 
-export default app.connect(List)
+export default connect(List)
     `,
     },
   ],
@@ -34,9 +34,9 @@ export default app.connect(List)
     {
       fileName: 'components/List.vue (script)',
       code: `
-import app from './app'
+import { connect } from '../app'
 
-export default app.connect({})
+export default connect({})
   `,
     },
   ],
@@ -58,7 +58,7 @@ const List: React.SFC<Connect> = ({ app }) => (
   </ul>
 )
 
-export default app.connect(App)
+export default connect(App)
     `,
     },
   ],
@@ -68,7 +68,7 @@ export default app.connect(App)
       fileName: 'components/list.component.ts',
       code: `
 import { Component } from '@angular/core';
-import app from '../app'
+import { connect } from '../app'
 
 @Component({
   selector: 'app-list',
@@ -80,7 +80,7 @@ import app from '../app'
   </ul>
   \`
 })
-@app.connect()
+@connect()
 export class List {
   trackById(index, item) {
     return item.id