commit dd6dec2ab61cab634ba6fca920a2829b702cd0c3 Author: Kevin Qi Date: Sun May 29 16:26:52 2016 -0400 Initialize from structure based on react-calendar-heatmap@74eaf47d7a 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;