Chapter1

README.md

@@ -1,20 +1,26 @@
-Kanban React.js App
-=====================
+Kanban React.js App - Chapter 1
+=================================
 
-Kanban-style project management tool built throughout the Pro React book
+Kanban-style project management tool built throughout the Pro React book. End of chapter 1.
 
-![Snapshot](https://cloud.githubusercontent.com/assets/33676/10969936/76e8f39e-83b2-11e5-8a36-0c5632850711.png)
+### Summary
+
+Implemented the basic structure of the project. All data is hard-coded and React warns about missing `key` props (which are implemented in chapter 2).
+
+![end_of_chapter1](https://cloud.githubusercontent.com/assets/33676/10971478/9db2d9d2-83bb-11e5-8603-5a19b21376a8.png)
 
 
 ### How the repository is organized
 
+You are in the Chapter 1 Branch.
+
 The repository is organized in branches: Each branch corresponds to the end of a specific chapter. The master branch contains the final source code.
 
 After cloning and fetching all of the remote branches, you can switch branches using `git checkout`, for example:
 
 ```
 git clone git@github.com:pro-react/kanban-app.git
-git fetch
+git fetch --all
 git checkout chapter3
 ```
 

app/Card.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import CheckList from './CheckList';
+
+class Card extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      showDetails: false
+    }
+  };
+
+  render() {
+    let cardDetails;
+    if (this.state.showDetails) {
+      cardDetails = (
+        <div className="card__details">
+          {this.props.description}
+          <CheckList cardId={this.props.id} tasks={this.props.tasks} />
+        </div>
+      );
+    };
+    return (
+      <div className="card">
+        <div className="card__title" onClick={
+          ()=>this.setState({showDetails: !this.state.showDetails})
+        }>{this.props.title}</div>
+        {cardDetails}
+      </div>
+    );
+  }
+}
+
+export default Card;

app/CheckList.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+class CheckList extends Component {
+  render() {
+    let tasks = this.props.tasks.map((task) => (
+      <li className="checklist__task">
+        <input type="checkbox" defaultChecked={task.done} />
+        {task.name}
+        <a href="#" className="checklist__task--remove" />
+      </li>
+    ));
+
+    return (
+      <div className="checklist">
+        <ul>{tasks}</ul>
+      </div>
+    );
+  }
+}
+
+export default CheckList;

app/KanbanBoard.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import List from './List';
+
+class KanbanBoard extends Component {
+  render(){
+    return (
+      <div className="app">
+        <List id='todo'
+              title="To Do"
+              cards={this.props.cards.filter((card) => card.status === "todo")} />
+        <List id='in-progress'
+              title="In Progress"
+              cards={this.props.cards.filter((card) => card.status === "in-progress")} />
+        <List id='done'
+              title='Done'
+              cards={this.props.cards.filter((card) => card.status === "done")} />
+      </div>
+    );
+  }
+};
+
+export default KanbanBoard;

app/List.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import Card from './Card';
+
+class List extends Component {
+  render() {
+    var cards = this.props.cards.map((card) => {
+      return <Card id={card.id}
+                   title={card.title}
+                   description={card.description}
+                   tasks={card.tasks} />
+    });
+
+    return (
+      <div className="list">
+        <h1>{this.props.title}</h1>
+        {cards}
+      </div>
+    );
+  }
+};
+
+export default List;

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "kanban-app",
+  "version": "0.1.0",
+  "description": "Pro React sample kanban app project",
+  "author": "Cássio Zen",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --progress",
+    "build": "NODE_ENV=production webpack -p --progress --colors"
+  },
+  "devDependencies": {
+    "babel-core": "~6.7.*",
+    "babel-loader": "~6.2.*",
+    "babel-preset-es2015": "~6.6.*",
+    "babel-preset-react": "~6.5.*",
+    "webpack": "~1.12.*",
+    "webpack-dev-server": "~1.14.*"
+  },
+  "dependencies": {
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
+  }
+}

public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Pro-React Kanban</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <div id='root'>
+    </div>
+    <script src="bundle.js"></script>
+  </body>
+</html>

public/styles.css

@@ -0,0 +1,92 @@
+*{
+  box-sizing: border-box;
+}
+
+html,body,#root {
+  height:100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #eee;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+h1{
+  font-weight: 200;
+  color: #3b414c;
+  font-size: 20px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.app {
+  white-space: nowrap;
+  height:100%;
+}
+
+.list {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
+  height: 100%;
+  width: 33%;
+  padding: 0 20px;
+  overflow: auto;
+}
+
+.list:not(:last-child):after{
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 99%;
+  background: linear-gradient(to bottom, #eee 0%, #ccc 50%, #eee 100%) fixed;
+}
+
+.card {
+  position: relative;
+  z-index: 1;
+  background: #fff;
+  width: 100%;
+  padding: 10px 10px 10px 15px;
+  margin: 0 0 10px 0;
+  overflow: auto;
+  border: 1px solid #e5e5df;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.card__title {
+  font-weight: bold;
+  border-bottom: solid 5px transparent;
+}
+
+.card__title:before {
+  display: inline-block;
+  width: 1em;
+  content: '▸';
+}
+
+.card__title--is-open:before {
+  content: '▾';
+}
+
+.checklist__task:first-child {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: dashed 1px #ddd;
+}
+
+.checklist__task--remove:after{
+  display: inline-block;
+  color: #d66;
+  content: "✖";
+}

webpack.config.js

@@ -0,0 +1,45 @@
+var webpack = require('webpack');
+
+/*
+ * Default webpack configuration for development
+ */
+var config = {
+  devtool: 'eval-source-map',
+  entry:  __dirname + "/app/App.js",
+  output: {
+    path: __dirname + "/public",
+    filename: "bundle.js"
+  },
+  module: {
+    loaders: [{
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: 'babel',
+      query: {
+        presets: ['es2015','react']
+      }
+    }]
+  },
+  devServer: {
+    contentBase: "./public",
+    colors: true,
+    historyApiFallback: true,
+    inline: true
+  },
+}
+
+/*
+ * If bundling for production, optimize output
+ */
+if (process.env.NODE_ENV === 'production') {
+  config.devtool = false;
+  config.plugins = [
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin({comments: false}),
+    new webpack.DefinePlugin({
+      'process.env': {NODE_ENV: JSON.stringify('production')}
+    })
+  ];
+};
+
+module.exports = config;