From dd6dec2ab61cab634ba6fca920a2829b702cd0c3 Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Sun, 29 May 2016 16:26:52 -0400 Subject: [PATCH] Initialize from structure based on react-calendar-heatmap@74eaf47d7a --- .babelrc | 6 ++ .eslintrc | 9 +++ .gitignore | 6 ++ .npmignore | 5 ++ .travis.yml | 6 ++ CHANGELOG.md | 22 ++++++ README.md | 32 +++++++++ demo/demo.jsx | 60 ++++++++++++++++ demo/index.html | 27 ++++++++ demo/styles.css | 1 + package.json | 55 +++++++++++++++ scripts/build_ghpages.sh | 17 +++++ src/index.jsx | 28 ++++++++ src/styles.css | 5 ++ test/components/CircularProgressbar.spec.js | 10 +++ test/setup.js | 18 +++++ webpack.config.js | 77 +++++++++++++++++++++ 17 files changed, 384 insertions(+) create mode 100644 .babelrc create mode 100644 .eslintrc create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 .travis.yml create mode 100644 CHANGELOG.md create mode 100644 README.md create mode 100644 demo/demo.jsx create mode 100644 demo/index.html create mode 120000 demo/styles.css create mode 100644 package.json create mode 100755 scripts/build_ghpages.sh create mode 100644 src/index.jsx create mode 100644 src/styles.css create mode 100644 test/components/CircularProgressbar.spec.js create mode 100644 test/setup.js create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..e7bacab --- /dev/null +++ b/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "react", + "es2015" + ] +} diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..1cbf9cf --- /dev/null +++ b/.eslintrc @@ -0,0 +1,9 @@ +{ + "extends": "airbnb", + "rules": { + "max-len": 0 + }, + "env": { + "mocha": true + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..69b1a79 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +node_modules +npm-debug.log +.DS_Store +build +demo/index.js +.cache diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..de6e676 --- /dev/null +++ b/.npmignore @@ -0,0 +1,5 @@ +node_modules +demo +src +assets +test diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..026222b --- /dev/null +++ b/.travis.yml @@ -0,0 +1,6 @@ +language: node_js +node_js: + - "4" +script: + - npm run lint + - npm test diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..dc87c8b --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,22 @@ +## 1.0.0 + +* Improve tooltip support with tooltipDataAttrs prop, allowing usage of e.g. bootstrap tooltips +* titleForValue now sets a square's title attribute instead of setting svg `` element + +## 0.4.3 + +* Build configuration updates + +## 0.4.2 + +* Allow endDate to be string/milliseconds +* Don't show titles by default + +## 0.4.1 + +* Fix broken package issue +* Stop loading CSS through webpack + +## 0.4.0 + +* Add `horizontal` prop, which allows switching between horizontal and vertical orientations diff --git a/README.md b/README.md new file mode 100644 index 0000000..f3be05d --- /dev/null +++ b/README.md @@ -0,0 +1,32 @@ +# React Circular Progressbar + +## Installation + +Install the npm module: + +```bash +npm install react-circular-progressbar +``` + +Include the default styles into your CSS by copying [src/styles.css](src/styles.css) into your repo. + +## Usage + +Import the component: + +```javascript +import CircularProgressbar from 'react-circular-progressbar'; +``` + +## Development + +To run demo locally on localhost:8080: + +```bash +npm install +npm start +``` + +Keep CI tests passing by running `npm test` and `npm run lint` often. + +Deploy updates to the demo page with `npm run deploy:demo`. diff --git a/demo/demo.jsx b/demo/demo.jsx new file mode 100644 index 0000000..67f8daa --- /dev/null +++ b/demo/demo.jsx @@ -0,0 +1,60 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import CircularProgressbar from '../src'; + +console.log(`react-circular-progressbar v${COMPONENT_VERSION}`); + +const githubURL = 'https://github.com/iqnivek/react-circular-progressbar'; + +const DemoItem = (props) => ( + <div className="row m-b-3"> + <div className="col-xs-12 col-md-6 offset-md-3"> + <p><code>{props.name}</code><small className="text-muted m-l-1">{props.example ? `e.g. ${props.example}` : null}</small></p> + <p>{props.description}</p> + <div className="row"> + <div className="col-xs-6 offset-xs-3"> + {props.children} + </div> + </div> + </div> + </div> +); + +class Demo extends React.Component { + render() { + return ( + <div className="container"> + <div className="row m-y-3"> + <div className="col-xs-12"> + <div className="text-md-center"> + <h1 className="m-b-2">{COMPONENT_NAME}</h1> + <p>{COMPONENT_DESCRIPTION}</p> + </div> + </div> + </div> + + <div className="row m-b-3"> + <div className="col-xs-12 col-md-6"> + <CircularProgressbar /> + </div> + </div> + + <div className="text-xs-center m-y-3"> + <p>Install with npm:</p> + <p className="m-b-3"><code>npm install {COMPONENT_NAME}</code></p> + <a className="btn btn-info btn-lg" href={githubURL}>View project on Github</a> + </div> + + <hr /> + <h2 className="text-md-center m-y-3">Configuration</h2> + + <hr /> + <div className="text-xs-center m-y-3"> + <a className="btn btn-info btn-lg" href={githubURL}>View project on Github</a> + </div> + </div> + ); + } +} + +ReactDOM.render(React.createElement(Demo), document.getElementById('demo')); diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..b2d4cbd --- /dev/null +++ b/demo/index.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + + <title>react-circular-progressbar + + + + + + + +
+ + + diff --git a/demo/styles.css b/demo/styles.css new file mode 120000 index 0000000..bca2a0f --- /dev/null +++ b/demo/styles.css @@ -0,0 +1 @@ +../src/styles.css \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..f42d205 --- /dev/null +++ b/package.json @@ -0,0 +1,55 @@ +{ + "name": "react-circular-progressbar", + "version": "0.1.0", + "description": "A circular progressbar svg component", + "author": "Kevin Qi ", + "main": "./build/index.js", + "repository": { + "type": "git", + "url": "https://github.com/patientslikeme/react-circular-progressbar.git" + }, + "license": "MIT", + "keywords": [ + "react", + "react-component", + "svg" + ], + "scripts": { + "build": "NODE_ENV=production webpack", + "build:demo": "NODE_ENV=demo webpack", + "deploy:demo": "npm run build:demo && ./scripts/build_ghpages.sh", + "clean": "rimraf build", + "lint": "eslint src test", + "prepublish": "npm run clean && npm run build", + "test": "mocha --compilers js:babel-register --recursive --require ./test/setup.js", + "test:watch": "npm test -- --watch", + "start": "webpack-dev-server --progress --inline" + }, + "devDependencies": { + "babel-core": "^6.3.15", + "babel-eslint": "^6.0.4", + "babel-loader": "^6.2.0", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-register": "^6.8.0", + "chai": "^3.5.0", + "enzyme": "^2.3.0", + "eslint": "^2.9.0", + "eslint-config-airbnb": "^9.0.1", + "eslint-plugin-react": "^5.0.1", + "jsdom": "^9.0.0", + "mocha": "^2.4.5", + "react-addons-test-utils": "^15.0.2", + "react-dom": "^15.0.1", + "rimraf": "^2.3.4", + "webpack": "^1.12.9", + "webpack-dev-server": "^1.14.1" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0" + }, + "dependencies": { + "lodash.range": "^3.1.4", + "lodash.reduce": "^4.3.0" + } +} diff --git a/scripts/build_ghpages.sh b/scripts/build_ghpages.sh new file mode 100755 index 0000000..4b32384 --- /dev/null +++ b/scripts/build_ghpages.sh @@ -0,0 +1,17 @@ +#!/bin/sh + +cp -R ./demo .cache + +rm .cache/demo.jsx +rm .cache/styles.css +cp src/styles.css .cache + +git checkout gh-pages + +mv ./.cache/* . +rm -rf .cache + +# git add . +# git commit -m "Update demo page" +# git push +# git checkout master diff --git a/src/index.jsx b/src/index.jsx new file mode 100644 index 0000000..470eb20 --- /dev/null +++ b/src/index.jsx @@ -0,0 +1,28 @@ +import React, { PropTypes } from 'react'; + +class CircularProgressbar extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( + + Hello + + ); + } +} + +CircularProgressbar.propTypes = { + +}; + +CircularProgressbar.defaultProps = { + +}; + +export default CircularProgressbar; diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..d6f0ed1 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,5 @@ +/* + * react-circular-progressbar styles + * + * All of the styles in this file are optional and configurable! + */ diff --git a/test/components/CircularProgressbar.spec.js b/test/components/CircularProgressbar.spec.js new file mode 100644 index 0000000..2cb145a --- /dev/null +++ b/test/components/CircularProgressbar.spec.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { assert } from 'chai'; +import { shallow } from 'enzyme'; +import CircularProgressbar from '../../src'; + +describe('CircularProgressbar', () => { + it('should not throw exceptions in base case', () => { + assert.doesNotThrow(() => ); + }); +}); diff --git a/test/setup.js b/test/setup.js new file mode 100644 index 0000000..6444328 --- /dev/null +++ b/test/setup.js @@ -0,0 +1,18 @@ +// https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md#using-enzyme-with-jsdom + +const jsdom = require('jsdom').jsdom; + +const exposedProperties = ['window', 'navigator', 'document']; + +global.document = jsdom(''); +global.window = document.defaultView; +Object.keys(document.defaultView).forEach((property) => { + if (typeof global[property] === 'undefined') { + exposedProperties.push(property); + global[property] = document.defaultView[property]; + } +}); + +global.navigator = { + userAgent: 'node.js', +}; diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..e15e7f6 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,77 @@ +const webpack = require('webpack'); +const path = require('path'); +const pak = require('./package.json'); +const nodeEnv = process.env.NODE_ENV || 'development'; + +const webpackConfig = { + context: __dirname, + entry: { + 'react-circular-progressbar': [ + path.resolve(__dirname, 'src', 'index.jsx') + ] + }, + output: { + path: path.resolve(__dirname), + filename: 'index.js', + library: 'CircularProgressbar', + libraryTarget: 'umd' + }, + resolve: { + extensions: ['', '.js', '.jsx'], + modulesDirectories: ['node_modules'] + }, + module: { + loaders: [ + { + test: /\.jsx?$/, + exclude: /(node_modules)/, + loader: 'babel' + } + ] + }, + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }) + ] +}; + +if (nodeEnv === 'development') { + webpackConfig.devtool = 'source-map'; + webpackConfig.debug = true; + webpackConfig.devServer = { contentBase: './demo'}; + webpackConfig.entry['react-circular-progressbar'].unshift('webpack-dev-server/client?http://0.0.0.0:8080/'); + webpackConfig.entry['react-circular-progressbar'].push(path.resolve(__dirname, 'demo', 'demo.jsx')); + webpackConfig.output.publicPath = '/'; +} + +if (nodeEnv === 'demo') { + webpackConfig.entry['react-circular-progressbar'].push(path.resolve(__dirname, 'demo', 'demo.jsx')); + webpackConfig.output.path = path.resolve(__dirname, 'demo'); +} + +if (nodeEnv === 'development' || nodeEnv === 'demo') { + webpackConfig.plugins.push(new webpack.DefinePlugin({ + 'COMPONENT_NAME': JSON.stringify(pak.name), + 'COMPONENT_VERSION': JSON.stringify(pak.version), + 'COMPONENT_DESCRIPTION': JSON.stringify(pak.description) + })); +} + +if (nodeEnv === 'production') { + webpackConfig.externals = { + 'react': { + root: 'React', + commonjs2: 'react', + commonjs: 'react', + amd: 'react' + } + }; + webpackConfig.output.path = path.resolve(__dirname, 'build'); + webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({ + compress: { warnings: false }, + sourceMap: false + })); +} + +module.exports = webpackConfig;