docs(website): replace introduction

Author: christianalfoni

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

@@ -0,0 +1,108 @@
+import { tsAppIndex } from '../../templates'
+
+const javascript = {
+  react: [
+    {
+      fileName: 'overmind/index.js',
+      code: `
+import { createOvermind } from 'overmind'
+import { createHook } from 'overmind-react'
+
+export const overmind = createOvermind({
+  state: {
+    count: 0
+  },
+  actions: {
+    changeCount({ state }, countChange) {
+      state.count += countChange
+    }
+  }
+})
+
+export const useOvermind = createHook(overmind)
+`,
+    },
+  ],
+  vue: [
+    {
+      fileName: 'overmind/index.js',
+      code: `
+import { createOvermind } from 'overmind'
+import { createPlugin } from 'overmind-vue'
+
+export const overmind = createOvermind({
+  state: {
+    count: 0
+  },
+  actions: {
+    changeCount({ state }, countChange) {
+      state.count += countChange
+    }
+  }
+})
+
+export const OvermindPlugin = createPlugin(overmind)
+`,
+    },
+  ],
+}
+
+const typescript = {
+  react: [
+    {
+      fileName: 'overmind/actions.ts',
+      code: `
+import { Action } from 'overmind'
+
+export const changeCount: Action<number> = ({ state }, countChange) {
+  state.count += countChange
+}
+`,
+    },
+    {
+      fileName: 'overmind/index.ts',
+      code: tsAppIndex(
+        'react',
+        `
+import { state } from './state'
+import * as actions from './actions'
+
+const config = {
+  state,
+  actions
+}
+`
+      ),
+    },
+  ],
+  vue: javascript.vue,
+  angular: [
+    {
+      fileName: 'overmind/actions.ts',
+      code: `
+import { Action } from 'overmind'
+
+export const changeCount: Action<number> = ({ state }, countChange) {
+  state.count += countChange
+}
+`,
+    },
+    {
+      fileName: 'overmind/index.ts',
+      code: tsAppIndex(
+        'angular',
+        `
+import { state } from './state'
+import * as actions from './actions'
+
+const config = {
+  state,
+  actions
+}
+`
+      ),
+    },
+  ],
+}
+
+export default (ts, view) => (ts ? typescript[view] : javascript[view])

packages/overmind-website/examples/guide/getstarted/changestate.ts

@@ -1,23 +1,23 @@
 const javascript = {
   react: [
     {
-      fileName: 'Posts.js',
+      fileName: 'Count.js',
       target: 'jsx',
       code: `
 import React from 'react'
 import { useOvermind } from '../overmind'
 
-const Posts = () => {
+const Count = () => {
   const { state } = useOvermind()
 
-  if (state.isLoadingPosts) {
-    return <h4>Loading posts...</h4>
-  }
-
-  return <div />
+  return (
+    <div>
+      {state.count}
+    </div>
+  )
 }
 
-export default Posts
+export default Count
     `,
     },
   ],
@@ -27,13 +27,13 @@ export default Posts
       code: `
 import Vue from 'vue'
 import { OvermindPlugin } from './overmind'
-import Posts from './components/Posts'
+import Count from './components/Count'
 
 Vue.use(OvermindPlugin)
 
 new Vue({
   el: '#app',
-  render: (h) => h(App),
+  render: (h) => h(Count),
 })
 
 `,
@@ -44,45 +44,46 @@ new Vue({
 const typescript = {
   react: [
     {
-      fileName: 'components/Posts.tsx',
+      fileName: 'components/Count.tsx',
       code: `
 import * as React from 'react'
 import { useOvermind } from '../overmind'
 
-const Posts: React.FunctionComponent = () => {
+const Count: React.FunctionComponent = () => {
   const { state } = useOvermind()
 
-  if (state.isLoadingPosts) {
-    return <h4>Loading posts...</h4>
-  }
-
-  return <div />
+  return (
+    <div>
+      {state.count}
+    </div>
+  )
 }
 
 
-export default Posts
+export default Count
     `,
     },
   ],
   vue: javascript.vue,
   angular: [
     {
-      fileName: 'posts.component.ts',
+      fileName: 'count.component.ts',
       code: `
 import { Component } from '@angular/core';
-import { connect } from '../overmind'
+import { Store } from '../overmind'
 
 @Component({
-  selector: 'posts-list',
+  selector: 'count-component',
   template: \`
-  <h4 *ngIf="overmind.state.isLoadingPosts">
-    Loading posts...
-  </h4>
-  <div *ngIf="!overmind.state.isLoadingPosts"></div>
+<div *track>
+  {{ state.count }}
+</div>
   \`
 })
-@connect()
-export class PostsList {}
+export class CountComponent {
+  state = this.store.select()
+  constructor (private store: Store) {}
+}
     `,
     },
   ],

packages/overmind-website/examples/guide/getstarted/connectapp.ts

@@ -0,0 +1,74 @@
+const javascript = {
+  react: [
+    {
+      fileName: 'Count.js',
+      target: 'jsx',
+      code: `
+import React from 'react'
+
+const Count = () => {
+  return (
+    <div>
+      {state.count}
+    </div>
+  )
+}
+
+export default Count
+    `,
+    },
+  ],
+  vue: [
+    {
+      fileName: 'Count.vue (template)',
+      target: 'markup',
+      code: `
+<div>
+  {{ state.count }}
+</div>
+    `,
+    },
+  ],
+}
+
+const typescript = {
+  react: [
+    {
+      fileName: 'components/Count.tsx',
+      code: `
+import * as React from 'react'
+
+const Count: React.FunctionComponent = () => {
+  return (
+    <div>
+      {state.count}
+    </div>
+  )
+}
+
+export default Posts
+    `,
+    },
+  ],
+  vue: javascript.vue,
+  angular: [
+    {
+      fileName: 'count.component.ts',
+      code: `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'count-component',
+  template: \`
+<div>
+  {{ state.count }}
+</div>
+  \`
+})
+export class CountComponent {}
+    `,
+    },
+  ],
+}
+
+export default (ts, view) => (ts ? typescript[view] : javascript[view])