├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── client
    ├── actions
    │   └── todos.js
    ├── components
    │   ├── Footer
    │   │   ├── index.js
    │   │   └── style.js
    │   ├── Header
    │   │   ├── index.js
    │   │   └── style.js
    │   ├── MainSection
    │   │   ├── index.js
    │   │   └── style.js
    │   ├── TodoItem
    │   │   ├── index.js
    │   │   └── style.js
    │   └── TodoTextInput
    │   │   ├── index.js
    │   │   └── style.js
    ├── constants
    │   └── filters.js
    ├── containers
    │   └── App
    │   │   ├── index.js
    │   │   └── style.js
    ├── index.html
    ├── index.js
    ├── middleware
    │   ├── index.js
    │   └── logger.js
    ├── prod-index.js
    ├── reducers
    │   ├── index.js
    │   └── todos.js
    ├── shared
    │   └── style.js
    └── store
    │   └── index.js
├── docs
    ├── bundle.js
    ├── index.html
    └── vendor.bundle.js
├── package.json
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["es2015", "stage-0", "react"],
 3 |   "plugins": ["transform-decorators-legacy", "transform-runtime"],
 4 |   "env": {
 5 |     "STATIC": {
 6 |       "plugins": [
 7 |         [
 8 |           "babel-plugin-webpack-loaders",
 9 |           {
10 |             "config": "./webpack.config.js",
11 |             "verbose": false
12 |           }
13 |         ]
14 |       ]
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | 
26 | # Dependency directory
27 | node_modules
28 | 
29 | # Optional npm cache directory
30 | .npm
31 | 
32 | # Optional REPL history
33 | .node_repl_history
34 | 
35 | # OS-specific temporary files
36 | Thumbs.db
37 | .DS_Store
38 | 
39 | # Ignore build files
40 | static/bundle.js
41 | static/vendor.bundle.js
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Matthew DeLambo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JSS Todomvc Example
 2 | 
 3 | Most of this code was lifted from [Matt Delambo's Aphrodite Todomvc Example](https://github.com/delambo/react-todomvc-aphrodite) (which in turn is lifted from [TJ's Frontend Boilerplate](https://github.com/tj/frontend-boilerplate)).
 4 | 
 5 | I replaced [Aphrodite](https://github.com/Khan/aphrodite) inline styles with [JSS](https://github.com/jsstyles/jss).
 6 | 
 7 | ## Development
 8 | 
 9 | ```
10 | npm start
11 | ```
12 | 
13 | ## Production Build and Run
14 | 
15 | The following commands will build the app to `docs/` with the styles dehydrated and included inline in the html, and run it:
16 | 
17 | ```
18 | npm run build
19 | static docs
20 | ```
21 | 


--------------------------------------------------------------------------------
/client/actions/todos.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { createAction } from 'redux-actions'
 3 | 
 4 | export const addTodo = createAction('add todo')
 5 | export const deleteTodo = createAction('delete todo')
 6 | export const editTodo = createAction('edit todo')
 7 | export const completeTodo = createAction('complete todo')
 8 | export const completeAll = createAction('complete all')
 9 | export const clearCompleted = createAction('clear complete')
10 | 


--------------------------------------------------------------------------------
/client/components/Footer/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { Component } from 'react'
 3 | import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../../constants/filters'
 4 | import classnames from 'classnames'
 5 | import useSheet from 'react-jss'
 6 | import styles from './style'
 7 | 
 8 | const FILTER_TITLES = {
 9 |   [SHOW_ALL]: 'All',
10 |   [SHOW_ACTIVE]: 'Active',
11 |   [SHOW_COMPLETED]: 'Completed',
12 | }
13 | 
14 | @useSheet(styles)
15 | class Footer extends Component {
16 |   renderTodoCount() {
17 |     const { activeCount, sheet: {classes} } = this.props
18 |     const itemWord = activeCount === 1 ? 'item' : 'items'
19 | 
20 |     return (
21 |       <span className={classes.count}>
22 |         <strong className={classes.strong}>{activeCount || 'No'}</strong> {itemWord} left
23 |       </span>
24 |     )
25 |   }
26 | 
27 |   renderFilterLink(filter) {
28 |     const title = FILTER_TITLES[filter]
29 |     const { filter: selectedFilter, onShow, sheet: {classes} } = this.props
30 | 
31 |     return (
32 |       <a className={classnames(classes.filterLink, { [classes.filterLinkHighlight]: filter === selectedFilter })}
33 |          style={{ cursor: 'pointer' }}
34 |          onClick={() => onShow(filter)}>
35 |         {title}
36 |       </a>
37 |     )
38 |   }
39 | 
40 |   renderClearButton() {
41 |     const { completedCount, onClearCompleted, sheet: {classes} } = this.props
42 |     if (completedCount > 0) {
43 |       return (
44 |         <button className={classes.clearCompleted} onClick={onClearCompleted}>
45 |           Clear completed
46 |         </button>
47 |       )
48 |     }
49 |   }
50 | 
51 |   render() {
52 |     const {classes} = this.props.sheet;
53 |     return (
54 |       <footer className={classnames(classes.normal, classes.smallNormal)}>
55 |         {this.renderTodoCount()}
56 |         <ul className={classnames(classes.filters, classes.smallFilters)}>
57 |           {[SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED].map(filter =>
58 |             <li className={classes.filtersItem} key={filter}>
59 |               {this.renderFilterLink(filter)}
60 |             </li>
61 |           )}
62 |         </ul>
63 |         {this.renderClearButton()}
64 |       </footer>
65 |     )
66 |   }
67 | }
68 | 
69 | export default Footer
70 | 


--------------------------------------------------------------------------------
/client/components/Footer/style.js:
--------------------------------------------------------------------------------
  1 | import shared from './../../shared/style'
  2 | 
  3 | const filterLinkHighlight = {
  4 |   borderColor: 'rgba(175, 47, 47, 0.1)',
  5 | }
  6 | 
  7 | export default {
  8 |   normal: {
  9 |     color: '#777',
 10 |     padding: '10px 15px',
 11 |     height: '20px',
 12 |     textAlign: 'center',
 13 |     borderTop: '1px solid #e6e6e6',
 14 | 
 15 |     '&:before': {
 16 |       content: '""',
 17 |       position: 'absolute',
 18 |       right: 0,
 19 |       bottom: 0,
 20 |       left: 0,
 21 |       height: '50px',
 22 |       overflow: 'hidden',
 23 |       boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2)',
 24 |     },
 25 |   },
 26 | 
 27 |   '@media (max-width: 430px)': {
 28 |     smallNormal: {
 29 |       height: '50px',
 30 |     },
 31 |   },
 32 | 
 33 |   filters: {
 34 |     margin: 0,
 35 |     padding: 0,
 36 |     listStyle: 'none',
 37 |     position: 'absolute',
 38 |     right: 0,
 39 |     left: 0,
 40 |   },
 41 | 
 42 |   '@media (max-width: 430px)': {
 43 |     smallFilters: {
 44 |       bottom: '10px',
 45 |     },
 46 |   },
 47 | 
 48 |   filtersItem: {
 49 |     display: 'inline',
 50 |   },
 51 | 
 52 |   filterLink: {
 53 |     color: 'inherit',
 54 |     margin: '3px',
 55 |     padding: '3px 7px',
 56 |     textDecoration: 'none',
 57 |     border: '1px solid transparent',
 58 |     borderRadius: '3px',
 59 | 
 60 |     '&:hover': filterLinkHighlight
 61 |   },
 62 | 
 63 |   filterLinkHighlight: filterLinkHighlight,
 64 | 
 65 |   count: {
 66 |     float: 'left',
 67 |     textAlign: 'left',
 68 |   },
 69 | 
 70 |   strong: {
 71 |     fontWeight: 300,
 72 |   },
 73 | 
 74 |   clearCompleted: {
 75 |     ...shared.button,
 76 |     ...shared.formEl,
 77 | 
 78 |     float: 'right',
 79 |     position: 'relative',
 80 |     lineHeight: '20px',
 81 |     textDecoration: 'none',
 82 |     cursor: 'pointer',
 83 |     visibility: 'hidden',
 84 |     position: 'relative',
 85 | 
 86 |     '&:active': {
 87 |       float: 'right',
 88 |       position: 'relative',
 89 |       lineHeight: '20px',
 90 |       textDecoration: 'none',
 91 |       cursor: 'pointer',
 92 |       visibility: 'hidden',
 93 |       position: 'relative',
 94 |     },
 95 | 
 96 |     '&:after': {
 97 |       visibility: 'visible',
 98 |       content: '"Clear completed"',
 99 |       position: 'absolute',
100 |       right: 0,
101 |       whiteSpace: 'nowrap',
102 |     },
103 | 
104 |     '&:hover': {
105 |       '&:after': {
106 |         textDecoration: 'underline',
107 |       },
108 |     },
109 |   },
110 | 
111 | }
112 | 


--------------------------------------------------------------------------------
/client/components/Header/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { Component } from 'react'
 3 | import TodoTextInput from '../TodoTextInput'
 4 | import useSheet from 'react-jss'
 5 | import styles from './style'
 6 | 
 7 | @useSheet(styles)
 8 | class Header extends Component {
 9 |   handleSave(text) {
10 |     if (text.length) {
11 |       this.props.addTodo(text)
12 |     }
13 |   }
14 | 
15 |   render() {
16 |     const {classes} = this.props.sheet
17 |     return (
18 |       <header>
19 |         <h1 className={classes.h1}>Todos</h1>
20 |         <TodoTextInput
21 |           newTodo
22 |           onSave={::this.handleSave}
23 |           placeholder="What needs to be done?" />
24 |       </header>
25 |     )
26 |   }
27 | }
28 | 
29 | export default Header
30 | 


--------------------------------------------------------------------------------
/client/components/Header/style.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 | 
 3 |   h1: {
 4 |     position: 'absolute',
 5 |     top: '-155px',
 6 |     width: '100%',
 7 |     fontSize: '100px',
 8 |     fontWeight: '100',
 9 |     textAlign: 'center',
10 |     textRendering: 'optimizeLegibility',
11 |     color: 'rgba(175, 47, 47, 0.15)',
12 |   },
13 | 
14 | }
15 | 


--------------------------------------------------------------------------------
/client/components/MainSection/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { Component } from 'react'
 3 | import TodoItem from '../TodoItem'
 4 | import Footer from '../Footer'
 5 | import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../../constants/filters'
 6 | import styles from './style'
 7 | import useSheet from 'react-jss'
 8 | import classnames from 'classnames'
 9 | 
10 | const TODO_FILTERS = {
11 |   [SHOW_ALL]: () => true,
12 |   [SHOW_ACTIVE]: todo => !todo.completed,
13 |   [SHOW_COMPLETED]: todo => todo.completed
14 | }
15 | 
16 | @useSheet(styles)
17 | class MainSection extends Component {
18 |   constructor(props, context) {
19 |     super(props, context)
20 |     this.state = { filter: SHOW_ALL }
21 |   }
22 | 
23 |   handleClearCompleted() {
24 |     const atLeastOneCompleted = this.props.todos.some(todo => todo.completed)
25 |     if (atLeastOneCompleted) {
26 |       this.props.actions.clearCompleted()
27 |     }
28 |   }
29 | 
30 |   handleShow(filter) {
31 |     this.setState({ filter })
32 |   }
33 | 
34 |   renderToggleAll(completedCount) {
35 |     const { todos, actions, sheet: {classes} } = this.props
36 |     if (todos.length > 0) {
37 |       return <input
38 |         className={classnames(classes.toggleAll, classes.toggleDevice)}
39 |         type="checkbox"
40 |         checked={completedCount === todos.length}
41 |         onChange={actions.completeAll} />
42 |     }
43 |   }
44 | 
45 |   renderFooter(completedCount) {
46 |     const { todos } = this.props
47 |     const { filter } = this.state
48 |     const activeCount = todos.length - completedCount
49 | 
50 |     if (todos.length) {
51 |       return (
52 |         <Footer completedCount={completedCount}
53 |           activeCount={activeCount}
54 |           filter={filter}
55 |           onClearCompleted={::this.handleClearCompleted}
56 |           onShow={::this.handleShow} />
57 |       )
58 |     }
59 |   }
60 | 
61 |   render() {
62 |     const { todos, actions, sheet: {classes} } = this.props
63 |     const { filter } = this.state
64 | 
65 |     const filteredTodos = todos.filter(TODO_FILTERS[filter])
66 |     const completedCount = todos.reduce((count, todo) => {
67 |       return todo.completed ? count + 1 : count
68 |     }, 0)
69 | 
70 |     return (
71 |       <section className={classes.main}>
72 |         {this.renderToggleAll(completedCount)}
73 |         <ul className={classes.normal}>
74 |           {filteredTodos.map(todo =>
75 |             <TodoItem key={todo.id} todo={todo} {...actions} />
76 |           )}
77 |         </ul>
78 |         {this.renderFooter(completedCount)}
79 |       </section>
80 |     )
81 |   }
82 | }
83 | 
84 | export default MainSection
85 | 


--------------------------------------------------------------------------------
/client/components/MainSection/style.js:
--------------------------------------------------------------------------------
 1 | import shared from './../../shared/style'
 2 | 
 3 | export default {
 4 |   main: {
 5 |     position: 'relative',
 6 |     zIndex: 2,
 7 |     borderTop: '1px solid #e6e6e6',
 8 |   },
 9 | 
10 |   normal: {
11 |     margin: 0,
12 |     padding: 0,
13 |     listStyle: 'none',
14 |   },
15 | 
16 |   toggleAll: {
17 |     ...shared.formEl,
18 | 
19 |     position: 'absolute',
20 |     top: '-55px',
21 |     left: '-12px',
22 |     width: '60px',
23 |     height: '34px',
24 |     textAlign: 'center',
25 |     border: 'none', /* Mobile Safari */
26 | 
27 |     '&:before': {
28 |       content: '"❯"',
29 |       fontSize: '22px',
30 |       color: '#e6e6e6',
31 |       padding: '10px 27px 10px 27px',
32 |     },
33 | 
34 |     '&:checked:before': {
35 |       color: '#737373',
36 |     },
37 |   },
38 | 
39 |   /*
40 |     Hack to remove background from Mobile Safari.
41 |     Can't use it globally since it destroys checkboxes in Firefox
42 |   */
43 |     '@media screen and (-webkit-min-device-pixel-ratio:0)': {
44 |       toggleDevice: {
45 |         transform: 'rotate(90deg)',
46 |         appearance: 'none',
47 |         '-webkit-appearance': 'none',
48 |       },
49 |     },
50 | 
51 | }
52 | 


--------------------------------------------------------------------------------
/client/components/TodoItem/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { Component } from 'react'
 3 | import TodoTextInput from '../TodoTextInput'
 4 | import classnames from 'classnames'
 5 | import styles from './style'
 6 | import useSheet from 'react-jss'
 7 | 
 8 | @useSheet(styles)
 9 | class TodoItem extends Component {
10 |   constructor(props, context) {
11 |     super(props, context)
12 |     this.state = {
13 |       editing: false
14 |     }
15 |   }
16 | 
17 |   handleDoubleClick() {
18 |     this.setState({ editing: true })
19 |   }
20 | 
21 |   handleSave(id, text) {
22 |     if (text.length === 0) {
23 |       this.props.deleteTodo(id)
24 |     } else {
25 |       this.props.editTodo({ id, text })
26 |     }
27 |     this.setState({ editing: false })
28 |   }
29 | 
30 |   render() {
31 |     const {todo, completeTodo, deleteTodo, sheet: {classes}} = this.props
32 | 
33 |     let element
34 |     if (this.state.editing) {
35 |       element = (
36 |         <TodoTextInput text={todo.text}
37 |            editing={this.state.editing}
38 |            onSave={(text) => this.handleSave(todo.id, text)} />
39 |       )
40 |     } else {
41 |       element = (
42 |         <div className={classnames({[classes.hideView]: this.state.editing})}>
43 |           <input className={classnames(classes.toggle, classes.toggleDevice)}
44 |              type="checkbox"
45 |              checked={todo.completed}
46 |              onChange={() => completeTodo(todo.id)} />
47 | 
48 |           <label className={classnames(classes.label, { [classes.completedLabel]: todo.completed})} onDoubleClick={::this.handleDoubleClick}>
49 |             {todo.text}
50 |           </label>
51 | 
52 |           <button className={classnames(classes.destroy, 'destroy')} onClick={() => deleteTodo(todo.id)} />
53 |         </div>
54 |       )
55 |     }
56 | 
57 |     // TODO: compose
58 |     const liClasses = classnames(classes.normal, {
59 |       [classes.completed]: todo.completed,
60 |       [classes.editing]: this.state.editing
61 |     })
62 | 
63 |     return (
64 |       <li className={liClasses}>
65 |         {element}
66 |       </li>
67 |     )
68 |   }
69 | }
70 | 
71 | export default TodoItem
72 | 


--------------------------------------------------------------------------------
/client/components/TodoItem/style.js:
--------------------------------------------------------------------------------
  1 | import shared from './../../shared/style'
  2 | 
  3 | export default {
  4 | 
  5 |   normal: {
  6 |     position: 'relative',
  7 |     fontSize: '24px',
  8 |     borderBottom: '1px solid #ededed',
  9 | 
 10 |     '&:last-child': {
 11 |       borderBottom: 'none',
 12 |     },
 13 | 
 14 |     '&:hover .destroy': {
 15 |       display: 'block',
 16 |     },
 17 |   },
 18 | 
 19 |   hideView: {
 20 |     display: 'none',
 21 |   },
 22 | 
 23 |   toggle: {
 24 |     ...shared.formEl,
 25 | 
 26 |     textAlign: 'center',
 27 |     width: '40px',
 28 |     /* auto, since non-WebKit browsers doesn't support input styling */
 29 |     height: 'auto',
 30 |     position: 'absolute',
 31 |     top: 0,
 32 |     bottom: 0,
 33 |     margin: 'auto 0',
 34 |     border: 'none', /* Mobile Safari */
 35 |     appearance: 'none',
 36 |     '-webkit-appearance': 'none',
 37 | 
 38 |     '&:after': {
 39 |       content: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>\')',
 40 |     },
 41 | 
 42 |     '&:checked:after': {
 43 |       content: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>\')',
 44 |     },
 45 |   },
 46 | 
 47 |   label: {
 48 |     whiteSpace: 'pre-line',
 49 |     wordBreak: 'break-all',
 50 |     padding: '15px 60px 15px 15px',
 51 |     marginLeft: '45px',
 52 |     display: 'block',
 53 |     lineHeight: '1.2',
 54 |     transition: 'color 0.4s',
 55 |   },
 56 | 
 57 |   destroy: {
 58 |     ...shared.button,
 59 |     ...shared.formEl,
 60 | 
 61 |     display: 'none',
 62 |     position: 'absolute',
 63 |     top: 0,
 64 |     right: '10px',
 65 |     bottom: 0,
 66 |     width: '40px',
 67 |     height: '40px',
 68 |     margin: 'auto 0',
 69 |     fontSize: '30px',
 70 |     color: '#cc9a9a',
 71 |     marginBottom: '11px',
 72 |     transition: 'color 0.2s ease-out',
 73 | 
 74 |     '&:hover': {
 75 |       color: '#af5b5e',
 76 |     },
 77 | 
 78 |     '&:after': {
 79 |       content: '"×"',
 80 |     },
 81 |   },
 82 | 
 83 |   editing: {
 84 |     borderBottom: 'none',
 85 |     padding: 0,
 86 |     composes: 'normal',
 87 | 
 88 |     '&:last-child': {
 89 |       marginBottom: '-1px',
 90 |     },
 91 |   },
 92 | 
 93 |   completedLabel: {
 94 |     color: '#d9d9d9',
 95 |     textDecoration: 'line-through',
 96 |   },
 97 | 
 98 |   '@media screen and (-webkit-min-device-pixel-ratio:0)': {
 99 |     toggleDevice: {
100 |       background: 'none',
101 |       height: '40px',
102 |     },
103 |   },
104 | 
105 | }
106 | 


--------------------------------------------------------------------------------
/client/components/TodoTextInput/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { Component } from 'react'
 3 | import classnames from 'classnames'
 4 | import styles from './style'
 5 | import useSheet from 'react-jss'
 6 | 
 7 | @useSheet(styles)
 8 | class TodoTextInput extends Component {
 9 |   constructor(props, context) {
10 |     super(props, context)
11 |     this.state = {
12 |       text: this.props.text || ''
13 |     }
14 |   }
15 | 
16 |   handleSubmit(e) {
17 |     const text = e.target.value.trim()
18 |     if (e.which === 13) {
19 |       this.props.onSave(text)
20 |       if (this.props.newTodo) {
21 |         this.setState({ text: '' })
22 |       }
23 |     }
24 |   }
25 | 
26 |   handleChange(e) {
27 |     this.setState({ text: e.target.value })
28 |   }
29 | 
30 |   handleBlur(e) {
31 |     const text = e.target.value.trim()
32 |     if (!this.props.newTodo) {
33 |       this.props.onSave(text)
34 |     }
35 |   }
36 | 
37 |   render() {
38 |     const {classes} = this.props.sheet
39 | 
40 |     const cls = classnames({
41 |       [classes.edit]: this.props.editing,
42 |       [classes.new]: this.props.newTodo
43 |     })
44 | 
45 |     return (
46 |       <input className={cls}
47 |         type="text"
48 |         autoFocus="true"
49 |         placeholder={this.props.placeholder}
50 |         value={this.state.text}
51 |         onBlur={::this.handleBlur}
52 |         onChange={::this.handleChange}
53 |         onKeyDown={::this.handleSubmit} />
54 |     )
55 |   }
56 | }
57 | 
58 | export default TodoTextInput
59 | 


--------------------------------------------------------------------------------
/client/components/TodoTextInput/style.js:
--------------------------------------------------------------------------------
 1 | const newState = {
 2 |   position: 'relative',
 3 |   margin: 0,
 4 |   width: '100%',
 5 |   fontSize: '24px',
 6 |   fontFamily: 'inherit',
 7 |   fontWeight: 'inherit',
 8 |   lineHeight: '1.4em',
 9 |   border: 0,
10 |   outline: 'none',
11 |   color: 'inherit',
12 |   padding: '6px',
13 |   border: '1px solid #999',
14 |   boxShadow: 'inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2)',
15 |   boxSizing: 'border-box',
16 |   fontSmoothing: 'antialiased',
17 | }
18 | 
19 | 
20 | export default {
21 | 
22 |   'new': {
23 |     ...newState,
24 |     padding: '16px 16px 16px 60px',
25 |     border: 'none',
26 |     background: 'rgba(0, 0, 0, 0.003)',
27 |     boxShadow: 'inset 0 -2px 1px rgba(0, 0, 0, 0.03)',
28 |   },
29 | 
30 |   edit: newState,
31 | 
32 |   editing: {
33 |     display: 'block',
34 |     width: '506px',
35 |     padding: '13px 17px 12px 17px',
36 |     margin: '0 0 0 43px',
37 |   },
38 | 
39 | }
40 | 


--------------------------------------------------------------------------------
/client/constants/filters.js:
--------------------------------------------------------------------------------
1 | 
2 | export const SHOW_ALL = 'show_all'
3 | export const SHOW_COMPLETED = 'show_completed'
4 | export const SHOW_ACTIVE = 'show_active'
5 | 


--------------------------------------------------------------------------------
/client/containers/App/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { Component } from 'react'
 3 | import { bindActionCreators } from 'redux'
 4 | import { connect } from 'react-redux'
 5 | import Header from '../../components/Header'
 6 | import MainSection from '../../components/MainSection'
 7 | import * as TodoActions from '../../actions/todos'
 8 | import styles from './style'
 9 | import useSheet from 'react-jss'
10 | 
11 | @useSheet(styles)
12 | class App extends Component {
13 | 
14 |   render() {
15 |     const { todos, actions, children, sheet: {classes} } = this.props
16 |     return (
17 |       <div>
18 |         <div className={classes.normal}>
19 |           <Header addTodo={actions.addTodo} />
20 |           <MainSection todos={todos} actions={actions} />
21 |           {children}
22 |         </div>
23 |       </div>
24 |     )
25 |   }
26 | }
27 | 
28 | function mapStateToProps(state) {
29 |   return {
30 |     todos: state.todos
31 |   }
32 | }
33 | 
34 | function mapDispatchToProps(dispatch) {
35 |   return {
36 |     actions: bindActionCreators(TodoActions, dispatch)
37 |   }
38 | }
39 | 
40 | export default connect(
41 |   mapStateToProps,
42 |   mapDispatchToProps
43 | )(App)
44 | 


--------------------------------------------------------------------------------
/client/containers/App/style.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   normal: {
3 |     background: '#fff',
4 |     margin: '200px 0 40px 0',
5 |     position: 'relative',
6 |     boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)',
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Boilerplate Todos</title>
 6 |     <style>
 7 |       html,
 8 |       body {
 9 |         margin: 0;
10 |         padding: 0;
11 |       }
12 | 
13 |       body {
14 |         font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
15 |         line-height: 1.4em;
16 |         background: #f5f5f5;
17 |         color: #4d4d4d;
18 |         min-width: 230px;
19 |         max-width: 550px;
20 |         margin: 0 auto;
21 |         -webkit-font-smoothing: antialiased;
22 |         -moz-font-smoothing: antialiased;
23 |         -ms-font-smoothing: antialiased;
24 |         font-smoothing: antialiased;
25 |         font-weight: 300;
26 |       }
27 |     </style>
28 |   </head>
29 |   <body>
30 |     <div id="root"></div>
31 |     <!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
32 |     <script>
33 |       var WebFontConfig = {
34 |         google: { families: [ 'Roboto:400,300,500:latin' ] }
35 |       };
36 |       (function() {
37 |         var wf = document.createElement('script');
38 |         wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
39 |           '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
40 |         wf.type = 'text/javascript';
41 |         wf.async = 'true';
42 |         var s = document.getElementsByTagName('script')[0];
43 |         s.parentNode.insertBefore(wf, s);
44 |       })();
45 |     </script>
46 |     <script src="./vendor.bundle.js"></script>
47 |     <script src="./bundle.js"></script>
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/client/index.js:
--------------------------------------------------------------------------------
 1 | import { Router, Route, browserHistory } from 'react-router'
 2 | import { syncHistoryWithStore } from 'react-router-redux'
 3 | import { Provider } from 'react-redux'
 4 | import ReactDOM from 'react-dom'
 5 | import React from 'react'
 6 | 
 7 | import App from './containers/App'
 8 | import configure from './store'
 9 | 
10 | const store = configure()
11 | const history = syncHistoryWithStore(browserHistory, store)
12 | 
13 | ReactDOM.render(
14 |   <Provider store={store}>
15 |     <Router history={history}>
16 |       <Route path="*" component={App} />
17 |     </Router>
18 |   </Provider>,
19 |   document.getElementById('root'), () => {
20 |       if (process.env.NODE_ENV === 'production') {
21 |         // In production, remove the server-side generated styles and let
22 |         // the live app take over (for auto-mount/unmount and lazy-loading)
23 |         const ssStyles = document.getElementById('server-side-styles')
24 |         ssStyles.parentNode.removeChild(ssStyles)
25 |       }
26 |   }
27 | )
28 | 


--------------------------------------------------------------------------------
/client/middleware/index.js:
--------------------------------------------------------------------------------
1 | 
2 | import logger from './logger'
3 | 
4 | export {
5 |   logger
6 | }


--------------------------------------------------------------------------------
/client/middleware/logger.js:
--------------------------------------------------------------------------------
1 | 
2 | export default store => next => action  => {
3 |   console.log(action)
4 |   return next(action)
5 | }


--------------------------------------------------------------------------------
/client/prod-index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | // This script will create a static index.html
  3 | // with styles compiled inline. To build a static
  4 | // production version of the app, run the following:
  5 | //
  6 | //  npm run build
  7 | //  cd docs/
  8 | //  python -m SimpleHTTPServer 3001
  9 | //
 10 | 
 11 | import React from 'react'
 12 | import {SheetsRegistryProvider, SheetsRegistry} from 'react-jss'
 13 | import { renderToString } from 'react-dom/server'
 14 | import App from './containers/App/'
 15 | import fs from 'fs'
 16 | import cleancss from 'clean-css'
 17 | import { Provider } from 'react-redux'
 18 | import configure from './store'
 19 | 
 20 | const store = configure()
 21 | const sheets = new SheetsRegistry()
 22 | 
 23 | // Render the app to generate the css and html.
 24 | const html = renderToString(
 25 |   <SheetsRegistryProvider registry={sheets}>
 26 |     <Provider store={store}>
 27 |       <App />
 28 |     </Provider>
 29 |   </SheetsRegistryProvider>
 30 | )
 31 | 
 32 | fs.writeFile('./docs/index.html', `
 33 | 
 34 | <!doctype html>
 35 | <html>
 36 |   <head>
 37 |     <meta charset="utf-8">
 38 |     <title>Boilerplate Todos</title>
 39 |     <style>
 40 |       html,
 41 |       body {
 42 |         margin: 0;
 43 |         padding: 0;
 44 |       }
 45 | 
 46 |       body {
 47 |         font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
 48 |         line-height: 1.4em;
 49 |         background: #f5f5f5;
 50 |         color: #4d4d4d;
 51 |         min-width: 230px;
 52 |         max-width: 550px;
 53 |         margin: 0 auto;
 54 |         -webkit-font-smoothing: antialiased;
 55 |         -moz-font-smoothing: antialiased;
 56 |         -ms-font-smoothing: antialiased;
 57 |         font-smoothing: antialiased;
 58 |         font-weight: 300;
 59 |       }
 60 |       /*!
 61 |        * "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
 62 |        * https://github.com/simonwhitaker/github-fork-ribbon-css
 63 |       */
 64 | 
 65 |       .github-fork-ribbon {
 66 |         width: 12.1em;
 67 |         height: 12.1em;
 68 |         position: absolute;
 69 |         overflow: hidden;
 70 |         top: 0;
 71 |         right: 0;
 72 |         z-index: 9999;
 73 |         pointer-events: none;
 74 |         font-size: 13px;
 75 |         text-decoration: none;
 76 |         text-indent: -999999px;
 77 |       }
 78 |       .github-fork-ribbon:before, .github-fork-ribbon:after {
 79 |         /* The right and left classes determine the side we attach our banner to */
 80 |         position: absolute;
 81 |         display: block;
 82 |         width: 15.38em;
 83 |         height: 1.54em;
 84 | 
 85 |         top: 3.23em;
 86 |         right: -3.23em;
 87 | 
 88 |         -webkit-box-sizing: content-box;
 89 |         -moz-box-sizing: content-box;
 90 |         box-sizing: content-box;
 91 | 
 92 |         -webkit-transform: rotate(45deg);
 93 |         -moz-transform: rotate(45deg);
 94 |         -ms-transform: rotate(45deg);
 95 |         -o-transform: rotate(45deg);
 96 |         transform: rotate(45deg);
 97 |       }
 98 | 
 99 |       .github-fork-ribbon:before {
100 |         content: "";
101 | 
102 |         /* Add a bit of padding to give some substance outside the "stitching" */
103 |         padding: .38em 0;
104 | 
105 |         /* Set the base colour */
106 |         background-color: #333;
107 | 
108 |         /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
109 |         background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
110 |         background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
111 |         background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
112 |         background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
113 |         background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
114 |         background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
115 | 
116 |         /* Add a drop shadow */
117 |         -webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
118 |         -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
119 |         box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
120 | 
121 |         pointer-events: auto;
122 |       }
123 | 
124 |       .github-fork-ribbon:after {
125 |         /* Set the text from the title attribute */
126 |         content: attr(title);
127 | 
128 |         /* Set the text properties */
129 |         color: #fff;
130 |         font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
131 |         line-height: 1.54em;
132 |         text-decoration: none;
133 |         text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
134 |         text-align: center;
135 |         text-indent: 0;
136 | 
137 |         /* Set the layout properties */
138 |         padding: .15em 0;
139 |         margin: .15em 0;
140 | 
141 |         /* Add "stitching" effect */
142 |         border-width: .08em 0;
143 |         border-style: dotted;
144 |         border-color: #fff;
145 |         border-color: rgba(255, 255, 255, 0.7);
146 |       }
147 |     </style>
148 |     <style type="text/css" id="server-side-styles">
149 |       ${new cleancss().minify(sheets.toString()).styles}
150 |     </style>
151 |   </head>
152 |   <body>
153 |     <a href="https://github.com/cssinjs/react-todomvc-jss" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
154 |     <div id="root"></div>
155 |     <!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
156 |     <script>
157 |       var WebFontConfig = {
158 |         google: { families: [ 'Roboto:400,300,500:latin' ] }
159 |       };
160 |       (function() {
161 |         var wf = document.createElement('script');
162 |         wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
163 |           '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
164 |         wf.type = 'text/javascript';
165 |         wf.async = 'true';
166 |         var s = document.getElementsByTagName('script')[0];
167 |         s.parentNode.insertBefore(wf, s);
168 |       })();
169 |     </script>
170 | 
171 |     <script src="./vendor.bundle.js"></script>
172 |     <script src="./bundle.js"></script>
173 | 
174 |   </body>
175 | </html>
176 | 
177 | `, function (err) {
178 |   if (err) throw err
179 |   console.log('Saved docs/index.html')
180 | })
181 | 


--------------------------------------------------------------------------------
/client/reducers/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { routerReducer as routing } from 'react-router-redux'
 3 | import { combineReducers } from 'redux'
 4 | import todos from './todos'
 5 | 
 6 | export default combineReducers({
 7 |   routing,
 8 |   todos
 9 | })
10 | 


--------------------------------------------------------------------------------
/client/reducers/todos.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { handleActions } from 'redux-actions'
 3 | 
 4 | const initialState = [{
 5 |   text: 'Use Redux',
 6 |   completed: false,
 7 |   id: 0
 8 | }]
 9 | 
10 | export default handleActions({
11 |   'add todo' (state, action) {
12 |     return [{
13 |       id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
14 |       completed: false,
15 |       text: action.payload
16 |     }, ...state]
17 |   },
18 | 
19 |   'delete todo' (state, action) {
20 |     return state.filter(todo => todo.id !== action.payload )
21 |   },
22 | 
23 |   'edit todo' (state, action) {
24 |     return state.map(todo => {
25 |       return todo.id === action.payload.id
26 |         ? { ...todo, text: action.payload.text }
27 |         : todo
28 |     })
29 |   },
30 | 
31 |   'complete todo' (state, action) {
32 |     return state.map(todo => {
33 |       return todo.id === action.payload
34 |         ? { ...todo, completed: !todo.completed }
35 |         : todo
36 |     })
37 |   },
38 | 
39 |   'complete all' (state, action) {
40 |     const areAllMarked = state.every(todo => todo.completed)
41 |     return state.map(todo => {
42 |       return {
43 |         ...todo,
44 |         completed: !areAllMarked
45 |       }
46 |     })
47 |   },
48 | 
49 |   'clear complete' (state, action) {
50 |     return state.filter(todo => todo.completed === false)
51 |   }
52 | }, initialState)
53 | 


--------------------------------------------------------------------------------
/client/shared/style.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   button: {
 3 |     margin: 0,
 4 |     padding: 0,
 5 |     border: 0,
 6 |     background: 'none',
 7 |     fontSize: '100%',
 8 |     verticalAlign: 'baseline',
 9 |     fontFamily: 'inherit',
10 |     fontWeight: 'inherit',
11 |     color: 'inherit',
12 |     appearance: 'none',
13 |     fontSmoothing: 'antialiased',
14 |   },
15 | 
16 |   formEl: {
17 |     outline: 'none',
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/client/store/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { createStore, applyMiddleware } from 'redux'
 3 | 
 4 | import { logger } from '../middleware'
 5 | import rootReducer from '../reducers'
 6 | 
 7 | if (typeof window === 'undefined') var window = {}
 8 | 
 9 | export default function configure(initialState) {
10 |   const create = window.devToolsExtension
11 |     ? window.devToolsExtension()(createStore)
12 |     : createStore
13 | 
14 |   const createStoreWithMiddleware = applyMiddleware(
15 |     logger
16 |   )(create)
17 | 
18 |   const store = createStoreWithMiddleware(rootReducer, initialState)
19 | 
20 |   if (module.hot) {
21 |     module.hot.accept('../reducers', () => {
22 |       const nextReducer = require('../reducers')
23 |       store.replaceReducer(nextReducer)
24 |     })
25 |   }
26 | 
27 |   return store
28 | }
29 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | <!doctype html>
  4 | <html>
  5 |   <head>
  6 |     <meta charset="utf-8">
  7 |     <title>Boilerplate Todos</title>
  8 |     <style>
  9 |       html,
 10 |       body {
 11 |         margin: 0;
 12 |         padding: 0;
 13 |       }
 14 | 
 15 |       body {
 16 |         font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
 17 |         line-height: 1.4em;
 18 |         background: #f5f5f5;
 19 |         color: #4d4d4d;
 20 |         min-width: 230px;
 21 |         max-width: 550px;
 22 |         margin: 0 auto;
 23 |         -webkit-font-smoothing: antialiased;
 24 |         -moz-font-smoothing: antialiased;
 25 |         -ms-font-smoothing: antialiased;
 26 |         font-smoothing: antialiased;
 27 |         font-weight: 300;
 28 |       }
 29 |       /*!
 30 |        * "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
 31 |        * https://github.com/simonwhitaker/github-fork-ribbon-css
 32 |       */
 33 | 
 34 |       .github-fork-ribbon {
 35 |         width: 12.1em;
 36 |         height: 12.1em;
 37 |         position: absolute;
 38 |         overflow: hidden;
 39 |         top: 0;
 40 |         right: 0;
 41 |         z-index: 9999;
 42 |         pointer-events: none;
 43 |         font-size: 13px;
 44 |         text-decoration: none;
 45 |         text-indent: -999999px;
 46 |       }
 47 |       .github-fork-ribbon:before, .github-fork-ribbon:after {
 48 |         /* The right and left classes determine the side we attach our banner to */
 49 |         position: absolute;
 50 |         display: block;
 51 |         width: 15.38em;
 52 |         height: 1.54em;
 53 | 
 54 |         top: 3.23em;
 55 |         right: -3.23em;
 56 | 
 57 |         -webkit-box-sizing: content-box;
 58 |         -moz-box-sizing: content-box;
 59 |         box-sizing: content-box;
 60 | 
 61 |         -webkit-transform: rotate(45deg);
 62 |         -moz-transform: rotate(45deg);
 63 |         -ms-transform: rotate(45deg);
 64 |         -o-transform: rotate(45deg);
 65 |         transform: rotate(45deg);
 66 |       }
 67 | 
 68 |       .github-fork-ribbon:before {
 69 |         content: "";
 70 | 
 71 |         /* Add a bit of padding to give some substance outside the "stitching" */
 72 |         padding: .38em 0;
 73 | 
 74 |         /* Set the base colour */
 75 |         background-color: #333;
 76 | 
 77 |         /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
 78 |         background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
 79 |         background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
 80 |         background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
 81 |         background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
 82 |         background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
 83 |         background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
 84 | 
 85 |         /* Add a drop shadow */
 86 |         -webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
 87 |         -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
 88 |         box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
 89 | 
 90 |         pointer-events: auto;
 91 |       }
 92 | 
 93 |       .github-fork-ribbon:after {
 94 |         /* Set the text from the title attribute */
 95 |         content: attr(title);
 96 | 
 97 |         /* Set the text properties */
 98 |         color: #fff;
 99 |         font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
100 |         line-height: 1.54em;
101 |         text-decoration: none;
102 |         text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
103 |         text-align: center;
104 |         text-indent: 0;
105 | 
106 |         /* Set the layout properties */
107 |         padding: .15em 0;
108 |         margin: .15em 0;
109 | 
110 |         /* Add "stitching" effect */
111 |         border-width: .08em 0;
112 |         border-style: dotted;
113 |         border-color: #fff;
114 |         border-color: rgba(255, 255, 255, 0.7);
115 |       }
116 |     </style>
117 |     <style type="text/css" id="server-side-styles">
118 |       .edit-742767875,.new-2169031081{width:100%;color:inherit;margin:0;position:relative;font-size:24px;box-sizing:border-box;line-height:1.4em;font-weight:inherit;font-family:inherit;font-smoothing:antialiased;outline:0}.new-2169031081{border:none;padding:16px 16px 16px 60px;box-shadow:inset 0 -2px 1px rgba(0,0,0,.03);background:rgba(0,0,0,.003)}.edit-742767875{border:1px solid #999;padding:6px;box-shadow:inset 0 -1px 5px 0 rgba(0,0,0,.2)}.editing-1472000183{width:506px;margin:0 0 0 43px;display:block;padding:13px 17px 12px}.h1-978538726{top:-155px;width:100%;color:rgba(175,47,47,.15);position:absolute;font-size:100px;text-align:center;font-weight:100;text-rendering:optimizeLegibility}.normal-2589104342{position:relative;font-size:24px;border-bottom:1px solid #ededed}.normal-2589104342:last-child{border-bottom:none}.normal-2589104342:hover .destroy{display:block}.hideView-1544743564{display:none}.toggle-2826752056{top:0;width:40px;height:auto;border:none;margin:auto 0;bottom:0;outline:0;position:absolute;text-align:center;appearance:none;-webkit-appearance:none}.clearCompleted-1361872290,.destroy-100464025{background:0 0;appearance:none;font-family:inherit;font-smoothing:antialiased;vertical-align:baseline;outline:0}.toggle-2826752056:after{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>')}.toggle-2826752056:checked:after{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>')}.label-1125018473{padding:15px 60px 15px 15px;display:block;word-break:break-all;transition:color .4s;white-space:pre-line;margin-left:45px;line-height:1.2}.destroy-100464025{top:0;color:#cc9a9a;right:10px;width:40px;height:40px;bottom:0;border:0;margin:auto 0 11px;padding:0;display:none;position:absolute;font-size:30px;transition:color .2s ease-out;font-weight:inherit}.destroy-100464025:hover{color:#af5b5e}.destroy-100464025:after{content:"×"}.editing-3605364288{padding:0;border-bottom:none}.editing-3605364288:last-child{margin-bottom:-1px}.completedLabel-2893086861{color:#d9d9d9;text-decoration:line-through}@media screen and (-webkit-min-device-pixel-ratio:0){.toggleDevice-1249215194{height:40px;background:0 0}.toggleDevice-2409062937{transform:rotate(90deg);appearance:none;-webkit-appearance:none}}.normal-2732105718{color:#777;height:20px;padding:10px 15px;text-align:center;border-top:1px solid #e6e6e6}.normal-2732105718:before{left:0;right:0;bottom:0;height:50px;content:"";position:absolute;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.2),0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0,0,0,.2),0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0,0,0,.2)}@media (max-width:430px){.smallFilters-3753464373{bottom:10px}}.filters-893748750{left:0;right:0;margin:0;padding:0;position:absolute;list-style:none}.filtersItem-779330851{display:inline}.filterLink-1374094601{color:inherit;margin:3px;border:1px solid transparent;padding:3px 7px;border-radius:3px;text-decoration:none}.filterLink-1374094601:hover,.filterLinkHighlight-2157159820{border-color:rgba(175,47,47,.1)}.count-1511004672{float:left;text-align:left}.clearCompleted-1361872290,.clearCompleted-1361872290:active{float:right;cursor:pointer;position:relative;visibility:hidden;line-height:20px;text-decoration:none}.strong-3115020274{font-weight:300}.clearCompleted-1361872290{color:inherit;margin:0;border:0;padding:0;font-size:100%;font-weight:inherit}.clearCompleted-1361872290:after{right:0;content:"Clear completed";position:absolute;visibility:visible;white-space:nowrap}.clearCompleted-1361872290:hover:after{text-decoration:underline}.main-1774113569{z-index:2;position:relative;border-top:1px solid #e6e6e6}.normal-2368337329{margin:0;padding:0;list-style:none}.toggleAll-3455386897{top:-55px;left:-12px;width:60px;height:34px;border:none;outline:0;position:absolute;text-align:center}.toggleAll-3455386897:before{color:#e6e6e6;content:"❯";padding:10px 27px;font-size:22px}.toggleAll-3455386897:checked:before{color:#737373}.normal-2415893616{margin:200px 0 40px;position:relative;background:#fff;box-shadow:0 2px 4px 0 rgba(0,0,0,.2),0 25px 50px 0 rgba(0,0,0,.1)}
119 |     </style>
120 |   </head>
121 |   <body>
122 |     <a href="https://github.com/cssinjs/react-todomvc-jss" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
123 |     <div id="root"></div>
124 |     <!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
125 |     <script>
126 |       var WebFontConfig = {
127 |         google: { families: [ 'Roboto:400,300,500:latin' ] }
128 |       };
129 |       (function() {
130 |         var wf = document.createElement('script');
131 |         wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
132 |           '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
133 |         wf.type = 'text/javascript';
134 |         wf.async = 'true';
135 |         var s = document.getElementsByTagName('script')[0];
136 |         s.parentNode.insertBefore(wf, s);
137 |       })();
138 |     </script>
139 | 
140 |     <script src="./vendor.bundle.js"></script>
141 |     <script src="./bundle.js"></script>
142 | 
143 |   </body>
144 | </html>
145 | 
146 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todos",
 3 |   "version": "0.0.1",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 4000",
 8 |     "production": "NODE_ENV=production webpack --progress --colors",
 9 |     "build": "BABEL_DISABLE_CACHE=1 node_modules/.bin/babel-node client/prod-index.js && npm run production"
10 |   },
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "babel-cli": "^6.10.1",
14 |     "babel-core": "^6.5.2",
15 |     "babel-loader": "^6.2.3",
16 |     "babel-plugin-transform-decorators-legacy": "^1.3.4",
17 |     "babel-plugin-transform-runtime": "^6.5.2",
18 |     "babel-plugin-webpack-loaders": "^0.7.0",
19 |     "babel-preset-es2015": "^6.5.0",
20 |     "babel-preset-react": "^6.5.0",
21 |     "babel-preset-stage-0": "^6.5.0",
22 |     "babel-runtime": "^6.5.0",
23 |     "classnames": "^2.2.3",
24 |     "clean-css": "^3.4.18",
25 |     "file-loader": "^0.9.0",
26 |     "json-loader": "^0.5.4",
27 |     "postcss": "^5.0.21",
28 |     "postcss-js": "^0.1.3",
29 |     "react": "^0.14.7",
30 |     "react-dom": "^0.14.7",
31 |     "react-hot-loader": "^1.3.0",
32 |     "react-jss": "^5.1.1",
33 |     "react-redux": "^4.4.0",
34 |     "react-router": "^2.0.0",
35 |     "react-router-redux": "^4.0.0",
36 |     "redux": "^3.3.1",
37 |     "redux-actions": "^0.9.1",
38 |     "webpack": "^1.12.14",
39 |     "webpack-dev-server": "^1.14.1",
40 |     "webpack-hot-middleware": "^2.7.1"
41 |   },
42 |   "dependencies": {}
43 | }
44 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const webpack = require('webpack')
 3 | const path =  require('path')
 4 | 
 5 | const env = process.env.NODE_ENV || 'development';
 6 | 
 7 | module.exports = {
 8 |   context: path.join(__dirname, './client'),
 9 |   node: { fs: 'empty' },
10 |   entry: Object.assign({
11 |       jsx: './index.js',
12 |       vendor: ['react']
13 |     },
14 |     env === 'development' ? { html: './index.html' } : {}
15 |   ),
16 |   output: {
17 |     path: path.join(__dirname, './docs'),
18 |     filename: 'bundle.js',
19 |   },
20 |   module: {
21 |     loaders: [
22 |       {
23 |         test: /\.html$/,
24 |         loader: 'file?name=[name].[ext]'
25 |       },
26 |       {
27 |         test: /\.js$/,
28 |         exclude: /node_modules/,
29 |         loaders: [
30 |           'react-hot',
31 |           'babel-loader'
32 |         ]
33 |       },
34 |       {
35 |         test: /\.json$/,
36 |         loader: 'json-loader',
37 |       }
38 |     ],
39 |   },
40 |   resolve: {
41 |     extensions: ['', '.js', '.jsx'],
42 |     root: [
43 |       path.resolve('node_modules'),
44 |     ]
45 |   },
46 |   plugins: [
47 |     new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
48 |     new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(env) }})
49 |   ],
50 |   devServer: {
51 |     contentBase: './client',
52 |     hot: true
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------