chore(demo): add demo

Author: christianalfoni

packages/demos/todomvc/package.json

@@ -1,5 +1,6 @@
 {
-	"name": "todomvc",
+  "name": "todomvc",
+  "private": true,
 	"version": "1.0.0-alpha1",
 	"description": "Overmind todomvc demo",
 	"author": "Christian Alfoni <[email protected]>",

packages/demos/todomvc/src/app/actions.ts

@@ -1,8 +1,16 @@
 import * as React from 'react'
 import { Action } from './'
+import { Todo } from './state'
+import * as helpers from './helpers'
+import * as mutations from './mutations'
 
 export default (action: Action) => ({
   changeNewTodoTitle: action<React.ChangeEvent<HTMLInputElement>>()
-    .map((event) => event.currentTarget.value)
-    .mutation((value, state) => (state.newTodoTitle = value)),
+    .map(helpers.getEventValue)
+    .mutation(mutations.setNewTodoTitle),
+  addTodo: action<React.FormEvent>()
+    .do(helpers.preventEventDefault)
+    .mutation(mutations.addTodo)
+    .mutation(mutations.clearNewTodoTitle),
+  toggleCompleted: action<Todo>().mutation(mutations.toggleCompleted),
 })

packages/demos/todomvc/src/app/helpers.ts

@@ -0,0 +1,5 @@
+export const getEventValue = (event: React.ChangeEvent<HTMLInputElement>) =>
+  event.currentTarget.value
+
+export const preventEventDefault = (event: React.FormEvent) =>
+  event.preventDefault()

packages/demos/todomvc/src/app/mutations.ts

@@ -0,0 +1,15 @@
+import { State, Todo } from './state'
+
+export const setNewTodoTitle = (value: string, state: State) =>
+  (state.newTodoTitle = value)
+
+export const addTodo = (_, state: State) =>
+  state.todos.unshift({
+    title: state.newTodoTitle,
+    completed: false,
+  })
+
+export const clearNewTodoTitle = (_, state: State) => (state.newTodoTitle = '')
+
+export const toggleCompleted = (todo: Todo) =>
+  (todo.completed = !todo.completed)

packages/demos/todomvc/src/components/AddTodo/elements.tsx

@@ -0,0 +1,49 @@
+import styled from '../../styled-components'
+
+export const Wrapper = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) =>
+    theme.color.lighten(theme.color.dark, 0.2)};
+  padding: ${({ theme }) => theme.padding.small};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+`
+
+export const Form = styled.form`
+  display: flex;
+`
+
+export const Input = styled.input`
+  flex: 1;
+  display: block;
+  border: 0;
+  margin: 0;
+  outline: none;
+  background-color: transparent;
+  font-size: ${({ theme }) => theme.fontSize.larger};
+  color: ${({ theme }) => theme.color.white};
+  height: 40px;
+  ::placeholder {
+    color: ${({ theme }) => theme.color.fade(theme.color.white, 0.5)};
+  }
+`
+
+export const Button = styled.button`
+  flex: 0 0 50px;
+  outline: none;
+  border-radius: ${({ theme }) => theme.borderRadius.normal};
+  background-color: ${({ theme }) => theme.color.primary};
+  padding: ${({ theme }) => theme.padding.smaller};
+  text-transform: uppercase;
+  border: 0;
+  color: ${({ theme }) => theme.color.white};
+  font-weight: bold;
+  cursor: pointer;
+  :hover:enabled {
+    background-color: ${({ theme }) =>
+      theme.color.lighten(theme.color.primary, 0.1)};
+  }
+  :disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+`

packages/demos/todomvc/src/components/AddTodo/index.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { connect, Connect } from '../../app'
+import { Wrapper, Input, Button, Form } from './elements'
+
+const AddTodo: React.SFC<Connect> = ({ appState, actions }) => (
+  <Wrapper>
+    <Form onSubmit={actions.addTodo}>
+      <Input
+        placeholder="I need to..."
+        value={appState.newTodoTitle}
+        onChange={actions.changeNewTodoTitle}
+      />
+      <Button disabled={!appState.newTodoTitle}>add</Button>
+    </Form>
+  </Wrapper>
+)
+
+export default connect(AddTodo)

packages/demos/todomvc/src/components/App/elements.tsx

@@ -4,4 +4,13 @@ export const Wrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100%;
+`
+
+export const InnerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 50%;
 `

packages/demos/todomvc/src/components/App/index.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react'
 import { connect, Connect } from '../../app'
-import actions from '../../app/actions'
+import { Wrapper, InnerWrapper } from './elements'
+import AddTodo from '../AddTodo'
+import Todos from '../Todos'
 
 const App: React.SFC<Connect> = ({ appState, actions }) => (
-  <div>
-    <h1>hello ({appState.todos.length})</h1>
-    <input
-      value={appState.newTodoTitle}
-      onChange={actions.changeNewTodoTitle}
-    />
-  </div>
+  <Wrapper>
+    <InnerWrapper>
+      <AddTodo />
+      <Todos />
+    </InnerWrapper>
+  </Wrapper>
 )
 
 export default connect(App)

packages/demos/todomvc/src/components/Todo/elements.tsx

@@ -0,0 +1,26 @@
+import styled from '../../styled-components'
+
+export const Item = styled.li`
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  padding: ${({ theme }) => theme.padding.normal};
+  font-size: ${({ theme }) => theme.fontSize.larger};
+`
+
+export const Completed = styled<
+  {
+    completed: boolean
+  },
+  'button'
+>('button')`
+  outline: none;
+  border: 0;
+  background: transparent;
+  margin-right: ${({ theme }) => theme.padding.normal};
+  font-size: ${({ theme }) => theme.fontSize.larger};
+  color: ${({ theme, completed }) =>
+    completed
+      ? theme.color.secondary
+      : theme.color.fade(theme.color.secondary, 0.8)};
+`

packages/demos/todomvc/src/components/Todo/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { connect, Connect } from '../../app'
+import { Todo } from '../../app/state'
+import { Item, Completed } from './elements'
+
+type Props = {
+  todo: Todo
+} & Connect
+
+const Todo: React.SFC<Props> = ({ todo, actions }) => (
+  <Item onClick={() => actions.toggleCompleted(todo)}>
+    <Completed completed={todo.completed}>✔</Completed> {todo.title}
+  </Item>
+)
+
+export default connect(Todo)