Include css in root and add less -> css to build process (spotify#63)

* Include css in root and add to build process

* Update readme directions to run examples

README.md

@@ -1,15 +1,20 @@
 ## WARNING: THIS IS NOT YET PRODUCTION-QUALITY CODE. Docs and Tests are still being written. Use at your own risk. If your project requires composable React charts, we recommend using [Victory](https://github.com/FormidableLabs/victory).
 
 # reactochart
+
 Charting library for React
 
 # API
 
+[comment]: <> (TODO: Update readme to include directions on importing base styles)
+
 ### Non-XY charts
+
 * PieChart
 * TreeMap
 
 ### XYPlot & XY charts
+
 * XYPlot
 * BarChart
 * RangeBarChart
@@ -19,40 +24,43 @@ Charting library for React
 * AreaHeatmap
 * Histogram
 * KernelDensityEstimation
-* *planned: AreaChart, StackedBarChart, GroupedBarChart*
+* _planned: AreaChart, StackedBarChart, GroupedBarChart_
 
 ### XY Axis Components
+
 * XAxis, YAxis
 * XAxisTitle, YAxisTitle
 * XAxisLabels, YAxisLabels
 * XTicks, YTicks
 * XGrid, YGrid
 
 ### XY datum components (used by charts/axes)
-* Bar 
+
+* Bar
 * RangeRect
 * XLine, YLine
-* *planned: AreaRect?, AreaCircle?*
+* _planned: AreaRect?, AreaCircle?_
 
 ### Higher-order components
+
 * resolveXYScales
 
 ### Utilities
+
 * Data
 * Scale
 * Axis
 * Label
 * Margin
 * depthEqual
 
-
 # Examples
 
 If you just want to run the examples locally:
 
-1. Clone this repo and `cd` to the newly-created directory
-2. Run `npm serve` in your terminal
-3. Go to [http://localhost:8000](http://localhost:8000)
+1.  Clone this repo and `cd` to the newly-created directory
+2.  Run `npm run serve` in your terminal (note: if you're running Python in v3 or higher you'll need to run `python -m http.server`)
+3.  Go to [http://localhost:8000](http://localhost:8000)
 
 # Development
 
@@ -61,34 +69,34 @@ If you'd like to contribute to the development this project, first fork & clone
 ### Global dependencies
 
 * This project uses NPM to manage dependencies and run scripts. Run `npm -v` to check if you already have it installed.
-If you don't have it, NPM is packaged with Node.js - download and run the
-[install package located on nodejs.org](https://nodejs.org/) to install.
+  If you don't have it, NPM is packaged with Node.js - download and run the
+  [install package located on nodejs.org](https://nodejs.org/) to install.
 * Babel is used to transpile ES6+ code to ES5 syntax. Install by running `npm install --global babel`
 * Webpack is used to bundle the JS & styles for the examples. Install by running `npm install --global webpack`
 
 ### Project dependencies
 
 * Run `npm install` in the project root directory. This will install all of the project dependencies into the
-`node_modules` directory.
+  `node_modules` directory.
 
 ### Development process
 
 * Run `npm run dev` to run the development server (webpack-dev-server), which will serve a live development version of
-the examples at [localhost:9876](http://localhost:9876)
+  the examples at [localhost:9876](http://localhost:9876)
 * Make changes to the library code in the `src` directory, and/or changes to the examples in the `examples/src`
-directory.
+  directory.
 * Once you are happy with your changes, run `npm run build` to generate a production build. (This transpiles the ES6
-library code, and transpiles + bundles the examples).
+  library code, and transpiles + bundles the examples).
 * `git commit` and `git push` your changes to your forked version of the repo.
 * Open a Github pull request if you'd like to get your changes merged into the official repository.
 
 ### Notes
 
 * **Do not make any changes in the `lib` or `examples/build` directories**, as these directories are destroyed and
-regenerated on each build.
+  regenerated on each build.
 * The development server uses [react-hot-loader](https://github.com/gaearon/react-hot-loader) to automatically
-"hot reload" changes to React components, so refreshing your web browser is usually not necessary. However, some
-changes will still require a refresh to propagate.
+  "hot reload" changes to React components, so refreshing your web browser is usually not necessary. However, some
+  changes will still require a refresh to propagate.
 
 # TO DO:
 
@@ -97,8 +105,9 @@ changes will still require a refresh to propagate.
 * documentation
 
 ## additional chart types
+
 * Range-Value Bar Chart
 * Value-Range Bar Chart
 * Range-Range Bar Chart
 * 2D Histogram (heatmap)
-* 2D KDE?
+* 2D KDE?

package.json

@@ -7,6 +7,7 @@
   "files": [
     "*.js",
     "*.js.map",
+    "styles.css",
     "utils/",
     "src/"
   ],
@@ -17,10 +18,11 @@
     "lint": "eslint ./src",
     "lint-fix": "eslint ./src --ext .js --fix",
     "prepublish": "npm run build",
-    "build": "npm run build-lib && npm run docs",
+    "build": "npm run build-lib && npm run build-css && npm run docs",
     "dev": "webpack-dev-server --config webpack.config.base.js",
     "docs": "npm run make-docs && npm run build-docs",
     "build-lib": "npm run clean && babel src --out-dir ./ --source-maps",
+    "build-css": "lessc ./styles/charts.less ./styles.css",
     "build-docs": "BABEL_ENV=production webpack --config webpack.config.build.js",
     "make-docs": "node scripts/makeDocs.js",
     "clean": "node scripts/clean.js",
@@ -69,7 +71,7 @@
     "html-webpack-plugin": "^2.30.1",
     "jsdom": "^9.12.0",
     "json-loader": "^0.5.2",
-    "less": "^2.5.1",
+    "less": "^3.0.4",
     "less-loader": "^4.0.5",
     "mocha": "^3.5.0",
     "prettier": "^1.12.1",

scripts/clean.js

@@ -1,7 +1,7 @@
 const fs = require("fs");
 const sh = require("shelljs");
 
-const {fileExists, dirExists} = require("./utils");
+const { fileExists, dirExists } = require("./utils");
 
 const srcContents = sh.ls("src");
 
@@ -22,8 +22,13 @@ srcContents.forEach(fileOrDir => {
     sh.rm("-rf", `./${fileOrDir}`);
   }
   // check for source maps too
-  if(fileExists(`./${fileOrDir}.map`)) {
+  if (fileExists(`./${fileOrDir}.map`)) {
     console.log(`deleting file ./${fileOrDir}.map`);
     sh.rm(`./${fileOrDir}.map`);
   }
 });
+
+// Clean compiled css file
+if (fileExists("./styles.css")) {
+  sh.rm("./styles.css");
+}