From 211be3f4762364641ebf3711e647b47a0faf3b0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1ssio=20Zen?= Date: Thu, 5 Nov 2015 12:41:30 -0200 Subject: [PATCH 1/6] First commit on chapter 1 --- app/App.js | 1 + app/Card.js | 33 +++++++++++++++++ app/CheckList.js | 21 +++++++++++ app/KanbanBoard.js | 22 +++++++++++ app/List.js | 22 +++++++++++ package.json | 23 ++++++++++++ public/index.html | 13 +++++++ public/styles.css | 92 ++++++++++++++++++++++++++++++++++++++++++++++ webpack.config.js | 49 ++++++++++++++++++++++++ 9 files changed, 276 insertions(+) create mode 100755 app/App.js create mode 100644 app/Card.js create mode 100644 app/CheckList.js create mode 100644 app/KanbanBoard.js create mode 100644 app/List.js create mode 100755 package.json create mode 100755 public/index.html create mode 100755 public/styles.css create mode 100755 webpack.config.js diff --git a/app/App.js b/app/App.js new file mode 100755 index 0000000..e7fe28e --- /dev/null +++ b/app/App.js @@ -0,0 +1 @@ +import React from 'react'; import {render} from 'react-dom'; import KanbanBoard from './KanbanBoard'; let cardsList = [ { id: 1, title: "Read the Book", description: "I should read the whole book", status: "in-progress", tasks: [] }, { id: 2, title: "Write some code", description: "Code along with the samples in the book", status: "todo", tasks: [ { id: 1, name: "ContactList Example", done: true }, { id: 2, name: "Kanban Example", done: false }, { id: 3, name: "My own experiments", done: false } ] } ]; render(, document.getElementById('root')); \ No newline at end of file diff --git a/app/Card.js b/app/Card.js new file mode 100644 index 0000000..856627d --- /dev/null +++ b/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 = ( +
+ {this.props.description} + +
+ ); + }; + return ( +
+
this.setState({showDetails: !this.state.showDetails}) + }>{this.props.title}
+ {cardDetails} +
+ ); + } +} + +export default Card; diff --git a/app/CheckList.js b/app/CheckList.js new file mode 100644 index 0000000..23cc0ed --- /dev/null +++ b/app/CheckList.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; + +class CheckList extends Component { + render() { + let tasks = this.props.tasks.map((task) => ( +
  • + + {task.name} + +
    • + )); + + return ( +
    +
      {tasks}
    +
    + ); + } +} + +export default CheckList; diff --git a/app/KanbanBoard.js b/app/KanbanBoard.js new file mode 100644 index 0000000..20f2b07 --- /dev/null +++ b/app/KanbanBoard.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react'; +import List from './List'; + +class KanbanBoard extends Component { + render(){ + return ( +
    + card.status === "todo")} /> + card.status === "in-progress")} /> + card.status === "done")} /> +
    + ); + } +}; + +export default KanbanBoard; diff --git a/app/List.js b/app/List.js new file mode 100644 index 0000000..7321fde --- /dev/null +++ b/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 + }); + + return ( +
    +

    {this.props.title}

    + {cards} +
    + ); + } +}; + +export default List; diff --git a/package.json b/package.json new file mode 100755 index 0000000..af4665e --- /dev/null +++ b/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": "node_modules/.bin/webpack-dev-server --progress", + "build": "NODE_ENV=production node_modules/.bin/webpack -p --progress --colors" + }, + "devDependencies": { + "babel-core": "~6.0.*", + "babel-loader": "~6.0.*", + "babel-preset-es2015": "~6.0.*", + "babel-preset-react": "~6.0.*", + "webpack": "~1.12.*", + "webpack-dev-server": "~1.12.*" + }, + "dependencies": { + "react": "~0.14.*", + "react-dom": "~0.14.*" + } +} diff --git a/public/index.html b/public/index.html new file mode 100755 index 0000000..4e1565a --- /dev/null +++ b/public/index.html @@ -0,0 +1,13 @@ + + + + + Pro-React Kanban + + + +
    +
    + + + diff --git a/public/styles.css b/public/styles.css new file mode 100755 index 0000000..056f027 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,92 @@ +*{ + box-sizing: border-box; +} + +html,body,#app { + 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: "✖"; +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100755 index 0000000..4e37637 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,49 @@ +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'] + } + }] + }, + plugins: [ + new webpack.HotModuleReplacementPlugin() + ], + devServer: { + contentBase: "./public", + colors: true, + historyApiFallback: true, + hot: true, + inline: true + }, +} + +/* + * If bundling for production, optimize output + */ +if (process.env.NODE_ENV === 'production') { + config.devtool = false; + config.plugins = config.plugins.concat([ + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.UglifyJsPlugin({comments: false}), + new webpack.DefinePlugin({ + 'process.env': {NODE_ENV: JSON.stringify('production')} + }) + ]); +}; + +module.exports = config; From 84539520a59dae285f6a64bd79c50b8a551e9e3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1ssio=20Zen?= Date: Thu, 5 Nov 2015 12:49:53 -0200 Subject: [PATCH 2/6] Typo fix --- public/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/styles.css b/public/styles.css index 056f027..b934ab3 100755 --- a/public/styles.css +++ b/public/styles.css @@ -2,7 +2,7 @@ box-sizing: border-box; } -html,body,#app { +html,body,#root { height:100%; margin: 0; padding: 0; From 521112205864e02a08e6e2074e9c1b2092407241 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1ssio=20Zen?= Date: Thu, 5 Nov 2015 12:53:30 -0200 Subject: [PATCH 3/6] Chapter 1 Readme --- README.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9597d74..8f9c560 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,19 @@ -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: From 0a635a48945747b40976739f66f93b3993f5f16e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1ssio=20Souza?= Date: Wed, 11 Nov 2015 10:59:28 -0200 Subject: [PATCH 4/6] Update webpack.config.js --- webpack.config.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 4e37637..4c490a0 100755 --- a/webpack.config.js +++ b/webpack.config.js @@ -20,14 +20,10 @@ var config = { } }] }, - plugins: [ - new webpack.HotModuleReplacementPlugin() - ], devServer: { contentBase: "./public", colors: true, historyApiFallback: true, - hot: true, inline: true }, } @@ -37,13 +33,13 @@ var config = { */ if (process.env.NODE_ENV === 'production') { config.devtool = false; - config.plugins = config.plugins.concat([ + 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; From 00100594574c1588debf395754e59401d60b7293 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1ssio=20Souza?= Date: Mon, 18 Jan 2016 12:05:13 -0200 Subject: [PATCH 5/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8f9c560..5c3fb85 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ After cloning and fetching all of the remote branches, you can switch branches u ``` git clone git@github.com:pro-react/kanban-app.git -git fetch +git fetch --all git checkout chapter3 ``` From 561cdf09f50c999bc9d648b4d4d7815430d257c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1ssio=20Zen?= Date: Fri, 8 Apr 2016 11:46:06 -0300 Subject: [PATCH 6/6] Updated React & Babel versions --- package.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index af4665e..9c86840 100755 --- a/package.json +++ b/package.json @@ -5,19 +5,19 @@ "author": "Cássio Zen", "license": "MIT", "scripts": { - "start": "node_modules/.bin/webpack-dev-server --progress", - "build": "NODE_ENV=production node_modules/.bin/webpack -p --progress --colors" + "start": "webpack-dev-server --progress", + "build": "NODE_ENV=production webpack -p --progress --colors" }, "devDependencies": { - "babel-core": "~6.0.*", - "babel-loader": "~6.0.*", - "babel-preset-es2015": "~6.0.*", - "babel-preset-react": "~6.0.*", + "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.12.*" + "webpack-dev-server": "~1.14.*" }, "dependencies": { - "react": "~0.14.*", - "react-dom": "~0.14.*" + "react": "^15.0.0", + "react-dom": "^15.0.0" } }