From 77d68057f489ef6eb2a59a637aae6db53448c57a Mon Sep 17 00:00:00 2001 From: Rafael Quintanilha Date: Tue, 7 Jun 2016 18:23:51 -0300 Subject: [PATCH] Removed unnecessary dependencies --- .eslintrc | 2 +- .npmignore | 7 +++ package.json | 16 ++----- package.json~ | 22 ++++----- src/actions/actions.js | 6 --- src/businessLogic/dateHelper.js | 10 ---- src/businessLogic/dateHelper.spec.js | 24 ---------- src/businessLogic/numberFormatter.js | 58 ----------------------- src/businessLogic/numberFormatter.spec.js | 36 -------------- src/components/{App.js => GreetingBox.js} | 4 +- src/containers/AppContainer.js | 43 ++++++----------- src/index.js | 8 +--- src/reducers/index.js | 8 ---- src/reducers/reducer.js | 17 ------- src/store/configureStore.dev.js | 24 ---------- src/store/configureStore.js | 5 -- src/store/configureStore.prod.js | 6 --- tools/distServer.js | 19 -------- webpack.config.js | 20 ++++++-- 19 files changed, 55 insertions(+), 280 deletions(-) create mode 100644 .npmignore delete mode 100644 src/actions/actions.js delete mode 100644 src/businessLogic/dateHelper.js delete mode 100644 src/businessLogic/dateHelper.spec.js delete mode 100644 src/businessLogic/numberFormatter.js delete mode 100644 src/businessLogic/numberFormatter.spec.js rename src/components/{App.js => GreetingBox.js} (83%) delete mode 100644 src/reducers/index.js delete mode 100644 src/reducers/reducer.js delete mode 100644 src/store/configureStore.dev.js delete mode 100644 src/store/configureStore.js delete mode 100644 src/store/configureStore.prod.js delete mode 100644 tools/distServer.js diff --git a/.eslintrc b/.eslintrc index cf14c43..64c31e5 100755 --- a/.eslintrc +++ b/.eslintrc @@ -51,7 +51,7 @@ "react/no-did-update-set-state": 1, "react/no-direct-mutation-state": 1, "react/no-multi-comp": 1, - "react/no-set-state": 1, + "react/no-set-state": 0, "react/no-unknown-property": 1, "react/prefer-es6-class": 1, "react/prop-types": 1, diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..7818097 --- /dev/null +++ b/.npmignore @@ -0,0 +1,7 @@ +node_modules +src +tools +webpack.config.js +.babelrc +.editoconfig +.eslintrc \ No newline at end of file diff --git a/package.json b/package.json index f187329..6bae82e 100644 --- a/package.json +++ b/package.json @@ -1,31 +1,25 @@ { "name": "react-linechart", - "version": "0.1", + "version": "1.0.0", "description": "Highly customizable line chart with React", "scripts": { "prestart": "npm run remove-dist", "start": "npm-run-all --parallel lint:tools test:watch open:src", "open:src": "babel-node tools/srcServer.js", - "open:dist": "babel-node tools/distServer.js", "lint:tools": "eslint webpack.config.js tools", "clean-dist": "npm run remove-dist && mkdir dist", "remove-dist": "node_modules/.bin/rimraf ./dist", - "build:html": "babel-node tools/buildHtml.js", "build:js": "babel-node tools/build.js ", "prebuild": "npm run clean-dist", - "build": "npm-run-all --parallel test build:html build:js", - "postbuild": "npm run open:dist", + "build": "npm-run-all --parallel test build:js", "test": "cross-env NODE_ENV=test mocha --reporter progress --compilers js:babel-core/register --recursive \"./src/**/*.spec.js\" --require ignore-styles", "test:watch": "npm run test -- --watch" }, "author": "Rafael Quintanilha", "license": "MIT", "dependencies": { - "object-assign": "4.0.1", - "react": "0.14.7", - "react-dom": "0.14.7", - "react-redux": "4.4.0", - "redux": "3.3.1" + "react": "15.0.1", + "react-dom": "15.0.1" }, "devDependencies": { "babel-cli": "6.5.1", @@ -57,7 +51,7 @@ "rimraf": "2.5.0", "sass-loader": "3.1.2", "style-loader": "0.13.0", - "webpack": "1.12.11", + "webpack": "1.13.1", "webpack-dev-middleware": "1.4.0", "webpack-hot-middleware": "2.6.0", "yargs": "3.32.0" diff --git a/package.json~ b/package.json~ index b99b44c..f187329 100644 --- a/package.json~ +++ b/package.json~ @@ -1,7 +1,7 @@ { - "name": "simple-frontend-boilerplate", - "version": "1.0.0", - "description": "Simple boilerplate with React, Redux, Mocha, ESlint based on React Slinghsot", + "name": "react-linechart", + "version": "0.1", + "description": "Highly customizable line chart with React", "scripts": { "prestart": "npm run remove-dist", "start": "npm-run-all --parallel lint:tools test:watch open:src", @@ -66,19 +66,13 @@ "react", "reactjs", "react-router", - "hot", - "reload", - "hmr", - "live", - "edit", - "webpack", - "redux", - "flux", - "boilerplate", - "starter" + "d3", + "linechart", + "line-chart", + "chart" ], "repository": { "type": "git", - "url": "https://bitbucket.org/rafaelquintanilha/simple-frontend-boilerplate" + "url": "https://github.com/rafaelquintanilha/react-linechart" } } diff --git a/src/actions/actions.js b/src/actions/actions.js deleted file mode 100644 index c4b4f90..0000000 --- a/src/actions/actions.js +++ /dev/null @@ -1,6 +0,0 @@ -export function setGreetingText(text) { - return { - type: "SET_GREETING_TEXT", - text - }; -} \ No newline at end of file diff --git a/src/businessLogic/dateHelper.js b/src/businessLogic/dateHelper.js deleted file mode 100644 index b5e1f19..0000000 --- a/src/businessLogic/dateHelper.js +++ /dev/null @@ -1,10 +0,0 @@ -export default class DateHelper { - //See tests for desired format. - static getFormattedDateTime(date) { - return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${this.padLeadingZero(date.getMinutes())}:${this.padLeadingZero(date.getSeconds())}`; - } - - static padLeadingZero(value) { - return value > 9 ? value : '0' + value; - } -} diff --git a/src/businessLogic/dateHelper.spec.js b/src/businessLogic/dateHelper.spec.js deleted file mode 100644 index 7c06e8b..0000000 --- a/src/businessLogic/dateHelper.spec.js +++ /dev/null @@ -1,24 +0,0 @@ -import chai, {should} from 'chai'; -import DateHelper from './dateHelper'; - -describe('Date Helper', () => { - describe('getFormattedDateTime', () => { - it('returns mm/dd hh:mm:ss formatted time when passed a date', () => { - //arrange - //The 7 numbers specify the year, month, day, hour, minute, second, and millisecond, in that order - let date = new Date(99,0,24,11,33,30,0); - - //assert - DateHelper.getFormattedDateTime(date).should.equal('1/24 11:33:30'); - }); - - it('pads single digit minute and second values with leading zeros', () => { - //arrange - //The 7 numbers specify the year, month, day, hour, minute, second, and millisecond, in that order - let date = new Date(99,0,4,11,3,2,0); - - //assert - DateHelper.getFormattedDateTime(date).should.equal('1/4 11:03:02'); - }); - }); -}); diff --git a/src/businessLogic/numberFormatter.js b/src/businessLogic/numberFormatter.js deleted file mode 100644 index ddd73a8..0000000 --- a/src/businessLogic/numberFormatter.js +++ /dev/null @@ -1,58 +0,0 @@ -import MathHelper from './mathHelper'; - -class NumberFormatter { - static getCurrencyFormattedNumber(value) { - if (value === null) { - return ''; - } - - value = this.getFormattedNumber(value); - return '$' + value; - } - - static getFormattedNumber(value) { - if (value === 0) { - return 0; - } - - if (!value) { - return ''; - } - - if (!this.isInt(this.scrubFormatting(value))) { - return ''; //if it's not a number after scrubbing formatting, just return empty. - } - - let roundedValue = MathHelper.roundNumber(value, 2); //round if more than 2 decimal points - roundedValue = roundedValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //add commas for 1,000's. RegEx from http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript - const roundedValueContainsDecimalPlace = (roundedValue.indexOf('.') !== -1); - - if (roundedValueContainsDecimalPlace) { - const numbersToTheRightOfDecimal = roundedValue.split('.')[1]; - - switch (numbersToTheRightOfDecimal.length) { - case 0: - return roundedValue.replace('.', ''); //no decimal necessary since no numbers after decimal - case 1: - return roundedValue + '0'; - default: - return roundedValue; - } - } - return roundedValue; - } - - static isInt(n) { - if (n === '' || n === null) { - return false; - } - - return n % 1 === 0; - } - - static scrubFormatting(value) { - return value.toString().replace('$', '').replace(',', '').replace('.', ''); - } -} - -export default NumberFormatter; diff --git a/src/businessLogic/numberFormatter.spec.js b/src/businessLogic/numberFormatter.spec.js deleted file mode 100644 index bbc4111..0000000 --- a/src/businessLogic/numberFormatter.spec.js +++ /dev/null @@ -1,36 +0,0 @@ -import NumberFormatter from './numberFormatter'; -import chai, {should} from 'chai'; - -describe('Number Formatter', () => { - describe('getCurrencyFormattedNumber', () => { - it('returns $5.50 when passed 5.5', () => { - NumberFormatter.getCurrencyFormattedNumber(5.5).should.equal("$5.50"); - }); - }); - - describe('isInt', () => { - it('returns true when passed 0', () => { - NumberFormatter.isInt(0).should.equal(true); - }); - - it('returns false when passed an empty string', () => { - NumberFormatter.isInt('').should.equal(false); - }); - - it('returns true when passed int as a string', () => { - NumberFormatter.isInt('5').should.equal(true); - }); - }); - - describe('scrubFormatting', () => { - it('strips commas and decimals', () => { - NumberFormatter.scrubFormatting('1,234.56').should.equal('123456'); - }); - }); - - describe('getFormattedNumber', () => { - it('returns 0 if passed 0', () => { - NumberFormatter.getFormattedNumber(0).should.equal(0); - }); - }); -}); diff --git a/src/components/App.js b/src/components/GreetingBox.js similarity index 83% rename from src/components/App.js rename to src/components/GreetingBox.js index 059a62f..f0bfd01 100644 --- a/src/components/App.js +++ b/src/components/GreetingBox.js @@ -1,6 +1,6 @@ import React, { PropTypes } from 'react'; -export default class App extends React.Component { +export default class GreetingBox extends React.Component { handleChange(e) { const value = e.target.value; @@ -18,7 +18,7 @@ export default class App extends React.Component { } } -App.propTypes = { +GreetingBox.propTypes = { greetingText: PropTypes.string.isRequired, setGreetingText: PropTypes.func.isRequired }; \ No newline at end of file diff --git a/src/containers/AppContainer.js b/src/containers/AppContainer.js index 6a75d98..be2ed11 100644 --- a/src/containers/AppContainer.js +++ b/src/containers/AppContainer.js @@ -1,38 +1,23 @@ -import React, { Component, PropTypes } from 'react'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import * as actions from '../actions/actions'; -import App from '../components/App'; +import React, { Component } from 'react'; +import GreetingBox from '../components/GreetingBox'; -class AppContainer extends Component { +class GreetingBoxComponent extends Component { - static propTypes = { - actions: PropTypes.object.isRequired, - state: PropTypes.object.isRequired - }; + constructor(props) { + super(props); + this.state = { greetingText: "Hello, friend!" }; + } + + setGreetingText(text) { + this.setState({ greetingText: text }); + } render() { - const { greetingText } = this.props.state; - const { setGreetingText } = this.props.actions; + const { greetingText } = this.state; return ( - + ); } } -function mapStateToProps(state) { - return { - state: state.reducer - }; -} - -function mapDispatchToProps(dispatch) { - return { - actions: bindActionCreators(actions, dispatch) - }; -} - -export default connect( - mapStateToProps, - mapDispatchToProps -)(AppContainer); +export default GreetingBoxComponent; \ No newline at end of file diff --git a/src/index.js b/src/index.js index a3c5da4..d32c8fc 100755 --- a/src/index.js +++ b/src/index.js @@ -1,15 +1,9 @@ import React from 'react'; import {render} from 'react-dom'; -import { Provider } from 'react-redux'; -import configureStore from './store/configureStore'; import AppContainer from './containers/AppContainer'; import './styles/styles.scss'; -const store = configureStore(); - render( - - - , document.getElementById('app') + , document.getElementById('app') ); diff --git a/src/reducers/index.js b/src/reducers/index.js deleted file mode 100644 index be6c399..0000000 --- a/src/reducers/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import { combineReducers } from 'redux'; -import reducer from './reducer'; - -const rootReducer = combineReducers({ - reducer -}); - -export default rootReducer; \ No newline at end of file diff --git a/src/reducers/reducer.js b/src/reducers/reducer.js deleted file mode 100644 index 9912e72..0000000 --- a/src/reducers/reducer.js +++ /dev/null @@ -1,17 +0,0 @@ -const initialState = { - 'greetingText': "Hello my friend!" -}; - -export default function reducer(state = initialState, action) { - switch (action.type) { - case "SET_GREETING_TEXT": - return Object.assign( - {}, - state, - { greetingText: action.text } - ); - - default: - return state; - } -} diff --git a/src/store/configureStore.dev.js b/src/store/configureStore.dev.js deleted file mode 100644 index 4c47a83..0000000 --- a/src/store/configureStore.dev.js +++ /dev/null @@ -1,24 +0,0 @@ -//This file merely configures the store for hot reloading. -//This boilerplate file is likely to be the same for each project that uses Redux. -//With Redux, the actual stores are in /reducers. - -import { createStore, compose } from 'redux'; -import rootReducer from '../reducers'; - -export default function configureStore(initialState) { - let store = createStore(rootReducer, initialState, compose( - // Add other middleware on this line... - window.devToolsExtension ? window.devToolsExtension() : f => f //add support for Redux dev tools - ) - ); - - if (module.hot) { - // Enable Webpack hot module replacement for reducers - module.hot.accept('../reducers', () => { - const nextReducer = require('../reducers').default; - store.replaceReducer(nextReducer); - }); - } - - return store; -} diff --git a/src/store/configureStore.js b/src/store/configureStore.js deleted file mode 100644 index 01d1506..0000000 --- a/src/store/configureStore.js +++ /dev/null @@ -1,5 +0,0 @@ -if (process.env.NODE_ENV === 'production') { - module.exports = require('./configureStore.prod'); -} else { - module.exports = require('./configureStore.dev'); -} diff --git a/src/store/configureStore.prod.js b/src/store/configureStore.prod.js deleted file mode 100644 index 73b217d..0000000 --- a/src/store/configureStore.prod.js +++ /dev/null @@ -1,6 +0,0 @@ -import { createStore } from 'redux'; -import rootReducer from '../reducers'; - -export default function configureStore(initialState) { - return createStore(rootReducer, initialState); -} diff --git a/tools/distServer.js b/tools/distServer.js deleted file mode 100644 index fe9b5e4..0000000 --- a/tools/distServer.js +++ /dev/null @@ -1,19 +0,0 @@ -// This file configures a web server for testing the production build -// on your local machine. - -import browserSync from 'browser-sync'; - -// Run Browsersync -browserSync({ - port: 3000, - ui: { - port: 3001 - }, - server: { - baseDir: 'dist' - }, - - files: [ - 'src/*.html' - ] -}); diff --git a/webpack.config.js b/webpack.config.js index df99446..eeb7704 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -43,7 +43,9 @@ const getEntry = function (env) { entry.push('webpack-hot-middleware/client?reload=true'); } - entry.push('./src/index'); + // entry.push('./src/index'); + + entry.push('./src/containers/AppContainer.js'); return entry; }; @@ -72,12 +74,24 @@ function getConfig(env) { output: { path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`. publicPath: '/', - filename: 'bundle.js' + filename: 'bundle.js', + libraryTarget: 'umd' }, plugins: getPlugins(env), module: { loaders: getLoaders(env) - } + }, + externals: [ + { + 'react': { + root: 'React', + commonjs2: 'react', + commonjs: 'react', + amd: 'react' + }, + 'react-dom': 'react-dom' + } + ], }; }