From 42ad725fabbb719db29d1175b7642738edd3ec16 Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Sat, 10 Feb 2018 22:22:43 -0800 Subject: [PATCH 1/7] move gif --- README.md | 2 +- {assets => docs}/react-circular-progressbar.gif | Bin 2 files changed, 1 insertion(+), 1 deletion(-) rename {assets => docs}/react-circular-progressbar.gif (100%) diff --git a/README.md b/README.md index eaac0a1..174d1b9 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A circular progress indicator component, built with SVG. Easily customizable wit [![npm version](https://badge.fury.io/js/react-circular-progressbar.svg)](https://badge.fury.io/js/react-circular-progressbar) [![Build Status](https://travis-ci.org/iqnivek/react-circular-progressbar.svg?branch=master)](https://travis-ci.org/iqnivek/react-circular-progressbar) -[![react-circular-progressbar animated gif](/assets/react-circular-progressbar.gif?raw=true)](http://www.kevinqi.com/react-circular-progressbar/) +[![react-circular-progressbar animated gif](/docs/react-circular-progressbar.gif?raw=true)](http://www.kevinqi.com/react-circular-progressbar/) ## Installation diff --git a/assets/react-circular-progressbar.gif b/docs/react-circular-progressbar.gif similarity index 100% rename from assets/react-circular-progressbar.gif rename to docs/react-circular-progressbar.gif From 8a5a31de155ea788f6df41c0ec5e80e061e05487 Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Sat, 10 Feb 2018 22:44:38 -0800 Subject: [PATCH 2/7] move build => dist, include styles.css in dist --- .gitignore | 1 - README.md | 8 +++++--- {src => dist}/styles.css | 0 package.json | 8 ++++++-- 4 files changed, 11 insertions(+), 6 deletions(-) rename {src => dist}/styles.css (100%) diff --git a/.gitignore b/.gitignore index 000fe4a..edc3a0a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ node_modules npm-debug.log .DS_Store -build .cache *.iml .idea diff --git a/README.md b/README.md index 174d1b9..a857439 100644 --- a/README.md +++ b/README.md @@ -15,14 +15,16 @@ Install the npm module: npm install react-circular-progressbar ``` -**Important**: you'll also need to copy [src/styles.css](src/styles.css) into your repo to use the default styling! - ## Usage Import the component: ```javascript import CircularProgressbar from 'react-circular-progressbar'; + +// If you have a CSS loader configured, you can import the stylesheet. +// Otherwise, you can copy this CSS file into your project. +import 'react-circular-progressbar/dist/styles.css'; ``` ..and use the component in your JSX: @@ -52,7 +54,7 @@ For more in-depth examples, take a look at the [demo code](docs/demo.jsx) to see ## Customizing styles -Use plain CSS to customize the styling - the [default CSS](src/styles.css) is a good starting point, but you can modify it as needed. +Use plain CSS to customize the styling - the default CSS is a good starting point, but you can override it as needed. #### CSS hooks diff --git a/src/styles.css b/dist/styles.css similarity index 100% rename from src/styles.css rename to dist/styles.css diff --git a/package.json b/package.json index 1ec63d3..f592f2c 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.7.0", "description": "A circular progress indicator component", "author": "Kevin Qi ", - "main": "./build/index.js", + "main": "./dist/index.js", "repository": "https://github.com/iqnivek/react-circular-progressbar.git", "license": "MIT", "keywords": [ @@ -12,9 +12,13 @@ "react-component", "svg" ], + "style": "dist/styles.css", + "files": { + "dist" + }, "scripts": { "build": "NODE_ENV=production webpack && npm run build:demo", - "build:demo": "NODE_ENV=demo webpack && cp ./src/styles.css ./docs/styles.css", + "build:demo": "NODE_ENV=demo webpack && cp ./dist/styles.css ./docs/styles.css", "clean": "rimraf build", "lint": "eslint src test", "prepare": "npm run clean && npm run build", From c2ab33da39ddfaa3eadfe3f37dcba3a72b9cc95f Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Sat, 10 Feb 2018 22:45:55 -0800 Subject: [PATCH 3/7] fix files directive --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f592f2c..ba66ef5 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,9 @@ "svg" ], "style": "dist/styles.css", - "files": { + "files": [ "dist" - }, + ], "scripts": { "build": "NODE_ENV=production webpack && npm run build:demo", "build:demo": "NODE_ENV=demo webpack && cp ./dist/styles.css ./docs/styles.css", From bf87c9ff1353dd5125d4a770b06ce1d336980034 Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Sat, 10 Feb 2018 22:51:06 -0800 Subject: [PATCH 4/7] fix build script --- docs/index.js | 2 +- package.json | 7 ++++--- {dist => src}/styles.css | 0 3 files changed, 5 insertions(+), 4 deletions(-) rename {dist => src}/styles.css (100%) diff --git a/docs/index.js b/docs/index.js index c4e7ce9..36a7f55 100644 --- a/docs/index.js +++ b/docs/index.js @@ -10373,7 +10373,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -console.log('react-circular-progressbar v' + "0.6.0"); +console.log('react-circular-progressbar v' + "0.7.0"); var githubURL = 'https://github.com/iqnivek/react-circular-progressbar'; diff --git a/package.json b/package.json index ba66ef5..e5171b9 100644 --- a/package.json +++ b/package.json @@ -17,9 +17,10 @@ "dist" ], "scripts": { - "build": "NODE_ENV=production webpack && npm run build:demo", - "build:demo": "NODE_ENV=demo webpack && cp ./dist/styles.css ./docs/styles.css", - "clean": "rimraf build", + "build": "NODE_ENV=production webpack && npm run build:demo && npm run build:css", + "build:css": "cp ./src/styles.css ./dist/styles.css && cp ./src/styles.css ./docs/styles.css", + "build:demo": "NODE_ENV=demo webpack", + "clean": "rimraf dist", "lint": "eslint src test", "prepare": "npm run clean && npm run build", "test": "mocha --compilers js:babel-register --recursive --require ./test/setup.js", diff --git a/dist/styles.css b/src/styles.css similarity index 100% rename from dist/styles.css rename to src/styles.css From 287604e78f93b0586b7579786e59dc2ed1a2e5c1 Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Sat, 10 Feb 2018 22:56:21 -0800 Subject: [PATCH 5/7] fix config and script, add dist files --- dist/index.js | 1 + dist/styles.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- webpack.config.js | 2 +- 4 files changed, 64 insertions(+), 2 deletions(-) create mode 100644 dist/index.js create mode 100644 dist/styles.css diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..671fe9e --- /dev/null +++ b/dist/index.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CircularProgressbar=t(require("react")):e.CircularProgressbar=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=7)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var r=0;r + */ +.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background { + fill: #3e98c7; +} + +.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text { + fill: #fff; +} + +.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path { + stroke: #fff; +} + +.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail { + stroke: transparent; +} diff --git a/package.json b/package.json index e5171b9..56b5dd1 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ ], "scripts": { "build": "NODE_ENV=production webpack && npm run build:demo && npm run build:css", - "build:css": "cp ./src/styles.css ./dist/styles.css && cp ./src/styles.css ./docs/styles.css", + "build:css": "mkdir -p dist && cp ./src/styles.css ./dist/styles.css && cp ./src/styles.css ./docs/styles.css", "build:demo": "NODE_ENV=demo webpack", "clean": "rimraf dist", "lint": "eslint src test", diff --git a/webpack.config.js b/webpack.config.js index ea0a514..5bb90e1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -70,7 +70,7 @@ if (nodeEnv === 'production') { amd: 'react' } }; - webpackConfig.output.path = path.resolve(__dirname, 'build'); + webpackConfig.output.path = path.resolve(__dirname, 'dist'); webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: false From 34e20e26d08ab05c6f00d395b61d2e952dc31a09 Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Sat, 10 Feb 2018 23:05:51 -0800 Subject: [PATCH 6/7] tweak readme --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a857439..60ddc68 100644 --- a/README.md +++ b/README.md @@ -21,13 +21,15 @@ Import the component: ```javascript import CircularProgressbar from 'react-circular-progressbar'; +``` -// If you have a CSS loader configured, you can import the stylesheet. -// Otherwise, you can copy this CSS file into your project. +If you have a CSS loader configured, you can import the stylesheet (if not, you can copy [styles.css](dist/styles.css) directly into your project): + +```javascript import 'react-circular-progressbar/dist/styles.css'; ``` -..and use the component in your JSX: +Now you can use the component: ```javascript From 776be33288e60952e214c7206aa8f10955f47152 Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Sat, 10 Feb 2018 23:11:32 -0800 Subject: [PATCH 7/7] update readme --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 60ddc68..713d8a8 100644 --- a/README.md +++ b/README.md @@ -23,12 +23,14 @@ Import the component: import CircularProgressbar from 'react-circular-progressbar'; ``` -If you have a CSS loader configured, you can import the stylesheet (if not, you can copy [styles.css](dist/styles.css) directly into your project): +If you have a CSS loader configured, you can import the stylesheet: ```javascript import 'react-circular-progressbar/dist/styles.css'; ``` +If not, you can copy [styles.css](dist/styles.css) into your project instead and use `` in your ``. + Now you can use the component: ```javascript