Catchup with master

CONTRIBUTING.md

@@ -2,16 +2,16 @@ Use [Github issues](https://github.com/adazzle/react-data-grid/issues) for featu
 
 ## <a name="question"></a> Got a Question or Problem?
 
-If you have questions about how to *use* react-data-grid, please direct them to [StackOverflow](https://www.stackoverflow.com). We are also available on our Slack channel
+If you have questions about how to *use* react-data-grid, please direct them to [StackOverflow](http://stackoverflow.com/questions/tagged/react-data-grid). We are also available on our Slack channel
 
 ## <a name="issue"></a> Found an Issue?
 If you find a bug in the source code or a mistake in the documentation, you can help us by
-[submitting an issue](#submit-issue) to our [GitHub Repository][github]. Even better, you can
+[submitting an issue](#submit-issue) to our [GitHub Repository](https://github.com/adazzle/react-data-grid). Even better, you can
 [submit a Pull Request](#submit-pr) with a fix.
 
 ## <a name="feature"></a> Want a Feature?
 You can *request* a new feature by submitting an issue to our [GitHub
-Repository][github]. If you would like to *implement* a new feature, please submit an issue with
+Repository](https://github.com/adazzle/react-data-grid). If you would like to *implement* a new feature, please submit an issue with
 a proposal for your work first, to be sure that we can use it. 
 Please consider what kind of change it is:
 
@@ -20,14 +20,85 @@ discussed. This will also allow us to better coordinate our efforts, prevent dup
 and help you to craft the change so that it is successfully accepted into the project.
 * **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
 
-## Docs
-
-Please update the docs with any API changes, the code and docs should
-always be in sync.
 
 ## Development
+We want anyone contributing to react-data-grid to have the best experience possible.
+
+### tl;dr
+You can start coding in 5 minutes.
+
+```sh
+git clone https://github.com/adazzle/react-data-grid.git
+cd react-data-grid
+npm install
+npm run dev-server
+```
+
+command                | outcome                                                                                               |
+-----------------------|-------------------------------------------------------------------------------------------------------|
+npm test               | runs tests in release mode                                                                            |
+npm run dev-test       | runs tests in debug mode                                                                              |
+npm run dev-server     | starts webpack dev server                                                                             |
+npm run eslint         | runs the eslint task (runs automatically before npm test)                                             |
+npm run build          | build the project in release mode                                                                     |
+npm run postinstall    | boostraps the packages and fetches the individual dependencies (runs automatically after npm install) |
+
+
+### Project structure
+react-data-grid is a monorepo containing a total of three packages:
+- **react-data-grid** the core package of the grid, contains all the core functionality of the project
+- **react-data-grid-addons** a set of addons for the base grid, containing things like toolbars, custom editors...
+- **react-data-grid-examples** a playground for the project, this is where you can check your changes for real, it's also what gets deployed to the public page.
+
+To manage the multiple packages in the project we use [lerna](https://lernajs.io/), It allows us to have an independent release process for each package,
+individual and shared dependencies between packages and an automated bootstrap system to link packages together during development time.
+This also means that you **must not add any path reference between packages**, when you need to use something in a different package you just need to import it as if
+it was a standard npm package. (for example you if need something from react-data-grid package when developing in react-data-grid-addons you need to `import { something } from 'react-data-grid';`).
+
+### Enviroment
+We use webpack-dev-server for development. If you're fancy about knowing the tools you’re working with you can find the details about this awesome tool [in here](https://webpack.github.io/docs/webpack-dev-server.html).
+To run webpack-dev-server all you need to do is to run the following command:
+```sh
+npm run dev-server
+```
+This will open your default browser at `http://localhost:8080/webpack-dev-server/` an you can navigate in our examples from there. 
+HMR is enabled, that means you won't need to reload the page wherever you make a change, webpack-dev-server will watch for any changes in the source code.
+
+### Testing
+We use [karma](https://karma-runner.github.io/1.0/index.html) as our test runner combined with [Phantom JS](http://phantomjs.org/) and [jasmine](https://jasmine.github.io/). You can run your test in debug or release mode.
+To run tests in release and dev mode you just need to run:
+`npm test` for release
+`npm dev-test` for debug
+
+When testing react components we encourage the use of [enzyme](https://github.com/airbnb/enzyme) as it presents a clean and descriptive interface for component testing.
+
+We want to keep our test coverage high, so when contributing you will need to test the changes you’re making and all the tests need to run successfully.
+
+Any file inside a `__tests__` subfolder in the packages folder that looks like `*.spec.js` will be picked up an executed by the test runner.
+When writing new tests you must follow the following guidelines:
+-	If it is a test for a functionality that is already tested you need to write your tests in the existing spec file for that component.
+-	If you’re adding a new functionality, or testing a untested one you will need to add a spec file (and maybe a `__tests__` folder if that directory level doesn’t have one),
+  that spec file must be in the same deep level as the file your testing and by standard it will need to have the same name.
+
+### Code style
+We use [eslint](http://eslint.org/) to enforce some code standards.
+An npm script will run automatically before testing to check if there are any violations to the set of rules we defined, you can also run that same script independently by running `npm run eslint` on your console.
+The easiest way to be aware of any violation on coding time is to have a plugin in you text editor that will be checking for any violation on the run. 
+Most modern text editor have their own plugins, you can find them in here for this popular editors:
+
+- [VS Code eslint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [Atom eslint plugin](https://atom.io/packages/linter-eslint)
+- [Sublime Text](https://github.com/roadhump/SublimeLinter-eslint)
+
+### Text Editor
+Internally we use [VS Code](https://code.visualstudio.com/) as our main text editor, it is quite extensible and fully configurable.
+It doesn’t mean you need to use it to contribute to our community.
+You can use whatever is your personal preference, although it would be nice if it supports a eslint plugin as it would make your life a lot easier.
+
+### Build
+To build the project you will need to run `npm run build`.
+It will create a dist folder for each package, that dist folder will be what is published to npm after your code being released.
 
-- `npm test` will fire up a karma test runner and run tests in Phantom JS
-- `npm run debug-test` will fire up a karma test runner and run tests in chrome. This can be used for debugging purposes
-- `npm run examples` will load a webpack dev server that will watch
-for changes and build the examples
+### Review process
+To be accepted your code needs to be mergeable with the master branch, and the CI builds needs to be passing. After a sign of from those requirements you code will be subject of a code review by one of the team members. 
+All contributions are encouraged and most of all we hope you will have some fun writing code for react-data-grid.

README.md

@@ -1,6 +1,7 @@
 # React Data Grid 
 [![Build status](https://ci.appveyor.com/api/projects/status/smciktvlkvp6r8w7/branch/master?svg=true)](https://ci.appveyor.com/project/adazzle/react-data-grid/branch/master)[![Coverage Status](https://coveralls.io/repos/adazzle/react-data-grid/badge.svg?branch=master)](https://coveralls.io/r/adazzle/react-data-grid?branch=master) [![npm version](https://badge.fury.io/js/react-data-grid.svg)](http://badge.fury.io/js/react-data-grid) 
 ![npm dependencies](https://david-dm.org/adazzle/react-data-grid.svg)
+[![CDNJS](https://img.shields.io/cdnjs/v/react-data-grid.svg)](https://cdnjs.com/libraries/react-data-grid)
 [![React Data Grid chat](https://react-data-grid.herokuapp.com/badge.svg)](https://react-data-grid.herokuapp.com/)
 
 Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/  
@@ -22,32 +23,9 @@ Overview
 --------
 ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React
 
-Exported Modules
+Migrations
 --------
-ReactDataGrid exposes two possible modules, `react-data-grid` and `react-data-grid/addons`.
-What's included in each module depends on ReactDataGrid's version you're using.
-We have made a major change to this in v1, so please read below.
-
-### 0.X.X
-
-  - You can import `react-data-grid` **or** `react-data-grid/addons`  depending if you want to have access to the add-ons or not. 
-  - `react-data-grid/addons` contains `react-data-grid` so in 0.X.X you *only* need to imort this module to get the addon extras *and* the grid itself.
-  - `react-data-grid/addons` points to `react-data-grid-with-addons.js` on dist folder.  
-  - #### Known Issues:
-    -  Some external dependencies in `react-data-grid/addons` don't offer support for older browsers like **IE8**, so you *cannot* use this on a page with IE* as babel generated script will break (using `default` and other issues that break in IE8)
-    -  This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat
-
-### 1.0.0
- We have made a breaking change, so `react-data-grid/addons` will *not* include the grid itself, it is *only* for importing the addons and you need to also import `react-data-grid`
- This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports.
- This will allow you to simply include `react-data-grid/addons` to get everything, but also to include single addons (a la lodash)
-  - If you just want the basic grid import `react-data-grid`
-  - If you want the addons (rich editors, etc) import `react-data-grid` **and** `react-data-grid/addons`
-  - Both modules are **completely independent and can be used separately**.
-  - `react-data-grid/addons` points to `react-data-grid.ui-plugins.js`` on dist folder. 
-
-#### Migration from 0.X to 1.X
-  If you previously had an import for `react-data-grid/addons` you will need to now add `react-data-grid` as well
+If you intend to do a major release update for you react-data-grid check [the migration documents](migrations).
 
 Features
 --------

appveyor.yml

@@ -18,30 +18,31 @@ environment:
 # Install scripts. (runs after repo cloning)
 install:
   # Decrypt .npmrc.enc file for publishing purposes if not pull request build and not scheduled build
+  # Lerna needs to have a npmrc for each package folder as it does not use the root npmrc https://github.com/lerna/lerna/issues/296#issuecomment-261080345
   - ps: >-
       if($env:APPVEYOR_REPO_BRANCH -ne 'master'){
         ./ci/publish/decrypt-npmrc.ps1
+        ./ci/publish/copy-npmrc.ps1
       }
       if(!$env:APPVEYOR_SCHEDULED_BUILD -and !$env:appveyor_pull_request_number -and $env:APPVEYOR_REPO_BRANCH -eq 'master') {
         ./ci/publish/decrypt-npmrc.ps1
+        ./ci/publish/copy-npmrc.ps1
       }
   - ps: Install-Product node 4
   - npm -g install npm@3
   - set PATH=%APPDATA%\npm;%PATH%
   - npm cache clean
   - npm install -g gulp
   - npm install
-  - gulp flow
-  - gulp dist
-  - gulp examples
+  - ps: ./ci/buildScripts/build.ps1
 
 # Post-install test scripts.
 test_script:
   # Output useful info for debugging.
   - node --version
   - npm --version
   # run tests
-  - gulp test --release true
+  - npm test
   - ps: ./test/uploadResults.ps1
   - gulp coveralls
 
@@ -55,10 +56,11 @@ build: off
 on_success:
 # If it is not a scheduled build/pr build and the current branch is master publish a new package.
 # If it is not build on master publish npm tag.
-- ps: >-
-    if(!$env:APPVEYOR_SCHEDULED_BUILD -and !$env:appveyor_pull_request_number -and $env:APPVEYOR_REPO_BRANCH -eq 'master') {
-      ./ci/publish/publishMaster.ps1
-    }
-    if ($env:APPVEYOR_REPO_BRANCH -ne 'master') {
-      ./ci/publish/publishBranch.ps1
-    }
+  - npm run beforepublish
+  - ps: >-
+      if(!$env:APPVEYOR_SCHEDULED_BUILD -and !$env:appveyor_pull_request_number -and $env:APPVEYOR_REPO_BRANCH -eq 'master') {
+        ./ci/publish/publishMaster.ps1
+      }
+      if ($env:APPVEYOR_REPO_BRANCH -ne 'master') {
+        ./ci/publish/publishBranch.ps1
+      }

ci/buildScripts/build.ps1

@@ -0,0 +1,22 @@
+function Clear-Dist () {
+  $distFolders= dir packages/*/dist | ?{$_.PSISContainer}
+
+  foreach ($folder in $distFolders){
+    $path = Join-Path -Path $folder.FullName -ChildPath "*"
+    Remove-Item $path -recurse
+    Write-Host "Cleaned dist folder in $($path)"
+  }
+}
+
+function Build () {
+  npm run build
+}
+
+Write-Host "-- Cleaning files in dist folders --"
+Clear-Dist
+Write-Host "-- File cleanup finished --"
+Write-Host "-- Build process --"
+Build
+Write-Host "-- Build completed --"
+
+exit $lastexitcode

ci/publish/copy-npmrc.ps1

@@ -0,0 +1,12 @@
+$dir = dir packages | ?{$_.PSISContainer}
+
+foreach ($d in $dir){
+    $path = Join-Path -Path $d.FullName -ChildPath ""
+    $name = $d.Name
+    $root = Get-Location
+    $fileToCopyPath = "$($root)\.npmrc"
+
+    Write-Host "Copy .npmrc to package $($name) from $($fileToCopyPath) to $($path)"
+
+    Copy-Item $fileToCopyPath $path
+}

ci/publish/publishBranch.ps1

@@ -5,11 +5,10 @@ Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:access_token):x-
 git config --global user.name $env:APPVEYOR_REPO_COMMIT_AUTHOR
 git config --global user.email $env:APPVEYOR_REPO_COMMIT_AUTHOR_EMAIL
 git checkout $env:APPVEYOR_REPO_BRANCH
-npm version $nextVersion --message "Version Bump : $($nextVersion) [ci skip]"
 Write-Host "Publishing $($nextVersion) to npm"
 if($?)
 {
-  npm publish . --tag $env:APPVEYOR_REPO_BRANCH
+  ./node_modules/.bin/lerna publish --repo-version $nextVersion --npm-tag=$env:APPVEYOR_REPO_BRANCH --yes --skip-git
 }
 
 exit $lastexitcode

ci/publish/publishExamples.js

@@ -0,0 +1,13 @@
+const ghpages = require('gh-pages');
+const path = require('path');
+
+const publishToGhPages = () => {
+  ghpages.publish(
+    path.join(__dirname, '../../packages/react-data-grid-examples'),
+    (err) => {
+      if (err) throw new Error(err);
+    }
+  );
+};
+
+publishToGhPages();

ci/publish/publishMaster.ps1

@@ -5,26 +5,20 @@ Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:access_token):x-
 git config --global user.name $env:APPVEYOR_REPO_COMMIT_AUTHOR
 git config --global user.email $env:APPVEYOR_REPO_COMMIT_AUTHOR_EMAIL
 git checkout master
-
-#docs task currently broken needs investigation
-#gulp docs:regenerate
-#git add -A
-#git commit -m "Docs Regeneration"
-
-npm version patch --message "Version Bump [ci skip]"
 $currentVersion = node ./ci/publish/getCurrentVersion
-git commit --amend -m "Version Bump to $($currentVersion) [ci skip]"
-git fetch
-git pull --rebase
-git push
-git push --tags
 Write-Host "Publishing $($currentVersion) to npm"
+
 if($?)
 {
-  npm publish
+  ./node_modules/.bin/lerna publish --repo-version $currentVersion --yes --skip-git
+  git commit -m "Version Bump to $($currentVersion) [ci skip]"
+  git fetch
+  git pull --rebase
+  git push
+  git push --tags
   if($?){
     Write-Host "regenerating public site and examples"
-    gulp docs
+    node ./ci/publish/publishExamples.js
   }
 }
 

ci/publish/replacePackageEntry.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+const scriptArgs = process.argv.slice(2);
+const packageName = scriptArgs[0];
+const publish = scriptArgs[1];
+
+const getPathToPackageEntry = () => path.join(__dirname, `../../packages/${packageName}/index.js`);
+const getPublishEntryData = () => `module.exports = require('./dist/${packageName}');`;
+const getDevEntryData = () => "module.exports = require('./src');";
+
+const replacePackageEntry = () => {
+  const entryData = publish ? getPublishEntryData() : getDevEntryData();
+  console.log(` --- Overriding ${packageName} entry point ---`);
+  fs.writeFile(
+    getPathToPackageEntry(),
+    entryData,
+    (err) => {
+      if (err) throw new Error(errr);
+      const env = publish ? 'publish' : 'dev';
+      console.log(` --- ${packageName} entry point was overriden to ${env}`);
+    }
+  );
+};
+
+replacePackageEntry();

config/karma.js

@@ -2,7 +2,7 @@
 * In local config, only run tests using phantom js. No code coverage reports applied
 */
 var webpack = require('webpack');
-var webpackConfig = require('./webpack.common.js');
+var webpackConfig = require('./webpack.common.config.js');
 var RewirePlugin = require("rewire-webpack");
 var path = require('path');
 var argv = require('minimist')(process.argv.slice(2));
@@ -102,7 +102,7 @@ module.exports = function (config) {
         extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
       },
       plugins: [
-      new RewirePlugin()
+        new RewirePlugin()
       ],
       externals: {
         'cheerio': 'window',