diff --git a/.babelrc b/.babelrc
index a0934e245..f25ec0471 100644
--- a/.babelrc
+++ b/.babelrc
@@ -26,7 +26,14 @@
"flow"
],
"plugins": [
- "flow-react-proptypes", [
+ "flow-react-proptypes",
+ [
+ "transform-es2015-arrow-functions",
+ {
+ "spec": true
+ }
+ ],
+ [
"react-intl",
{
"enforceDescriptions": true,
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 000000000..214c29d13
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/
diff --git a/README.md b/README.md
index 9936df7e0..a15e6acdb 100644
--- a/README.md
+++ b/README.md
@@ -70,60 +70,10 @@ Supported document file extensions: `pdf, doc, docx, ppt, pptx, xls, xlsm, xlsx`
Supported image file extensions: `ai, bmp, dcm, eps, gif, png, ps, psd, svs, tga, tif, tiff`
-## Development Setup
-
-1. Install Node v8.9.4 or higher.
-2. Install yarn package manager `https://yarnpkg.com/en/docs/install`. Alternatively, you can replace any `yarn` command with `npm`.
-3. Fork the upstream repo `https://github.com/box/box-annotations`.
-4. Clone your fork locally `git clone git@github.com:[YOUR GITHUB USERNAME]/box-annotations.git`.
-5. Navigate to the cloned folder `cd box-annotations`
-6. Add the upstream repo to your remotes `git remote add upstream git@github.com:box/box-annotations.git`.
-7. Verify your remotes are properly set up `git remote -v`. You should pull updates from the Box repo `upstream` and push changes to your fork `origin`.
-8. Install dependencies `yarn install`
-9. Test your first build! `yarn run build`
-10. To test only local annotation changes, see [instantiating a custom instance of Box Annotations](https://github.com/box/box-annotations/#passing-an-instance-of-box-annotations-into-box-content-preview).
-11. To link and test your local code changes along with your local Preview changes, run `yarn link` in this repository and `yarn link box-annotations` wherever [Box Content Preview](github.com/box/box-content-preview/) is cloned locally.
-12. To automatically rsync files after a Webpack build, add a build/rsync.json file with a `location` field. This file should look like:
-```
-{
- "location": "YOUR_DESIRED_RSYNC_LOCATION_HERE"
-}
-```
-
-For more information on contributing see [Contributing](docs/contributing.md).
-
-## While Developing
-
-Install the following plugins in your preferred editor
-
-* Editor Config (standardizes basic editor configuration)
-* ESLint (Javascript linting)
-* Prettier & Prettier - ESLint (Automatic Javascript formatting following ESLint config)
-* Stylelint (CSS linting)
-
-### Yarn commands
-
-* `yarn run build` to generate resource bundles and JS webpack bundles.
-* `yarn run watch` to only generate JS webpack bundles on file changes.
-* `yarn run test` launches jest.
-* `yarn run test -- --src=PATH/TO/SRC/FILENAME` launches test only for `src/PATH/TO/SRC/__tests__/FILENAME-test.js` instead of all tests. For example, `yarn run test -- --src=doc/DocAnnotator` launches tests for `src/doc/__tests__/DocAnnotator-test.js`. This also works for directories, e.g. `yarn run test -- --src=doc/`.
-* `yarn run debug` launches jest for debugging. Open the URL mentioned in the console.
-* `yarn run debug -- --src=path/to/src/FILENAME` launches debugging for `src/path/to/src/__tests__/FILENAME-test.js` instead of all tests. Open the URL mentioned in the console.
-
-For more script commands see `package.json`. Test coverage reports are available under reports/coverage.
-
-### Config files
+## Development
-* .babelrc - https://babeljs.io/docs/usage/babelrc/
-* .editorconfig - http://editorconfig.org/
-* .eslintignore - http://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories
-* .eslintrc - http://eslint.org/docs/user-guide/configuring
-* .gitignore - https://git-scm.com/docs/gitignore
-* .stylelintrc - https://stylelint.io/user-guide/configuration/
-* .travis.yml - https://docs.travis-ci.com/user/customizing-the-build
-* browserslist - https://github.com/ai/browserslist
-* commitlint.config.js - https://github.com/marionebl/commitlint
-* postcss.config.js - https://github.com/postcss/postcss-loader
+* [Dev Setup](docs/dev-setup.md)
+* [Contributing](docs/contributing.md)
## Support
diff --git a/build/webpack.config.js b/build/webpack.config.js
index 1d495d60e..dfa562784 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -43,6 +43,10 @@ const config = Object.assign(commonConfig(), {
'box-react-ui-locale-data': path.resolve(`node_modules/box-react-ui/i18n/${language}`),
moment: path.resolve('src/MomentShim') // Hack to leverage Intl instead
}
+ },
+ devServer: {
+ contentBase: './test',
+ inline: true
}
});
@@ -53,7 +57,7 @@ if (isDev) {
}
// Add inline source map
- config.devtool = 'inline-source-map';
+ config.devtool = 'source-map';
config.plugins.push(new TranslationsPlugin());
config.plugins.push(
new CircularDependencyPlugin({
diff --git a/docs/dev-setup.md b/docs/dev-setup.md
index 42fb5d52a..28d6781b8 100644
--- a/docs/dev-setup.md
+++ b/docs/dev-setup.md
@@ -11,6 +11,12 @@
9. Test your first build! `yarn run build`
10. To test only local annotation changes, see [instantiating a custom instance of Box Annotations](https://github.com/box/box-annotations/#passing-an-instance-of-box-annotations-into-box-content-preview).
11. To link and test your local code changes along with your local Preview changes, run `yarn link` in this repository and `yarn link box-annotations` wherever [Box Content Preview](github.com/box/box-content-preview/) is cloned locally.
+12. To automatically rsync files after a Webpack build, add a build/rsync.json file with a `location` field. This file should look like:
+```
+{
+ "location": "YOUR_DESIRED_RSYNC_LOCATION_HERE"
+}
+```
## While Developing
@@ -24,7 +30,7 @@ Install the following plugins in your preferred editor
### Yarn commands
* `yarn run build` to generate resource bundles and JS webpack bundles.
-* `yarn run watch` to only generate JS webpack bundles on file changes.
+* `yarn run start` to only generate JS webpack bundles on file changes.
* `yarn run test` launches jest.
* `yarn run test -- --src=PATH/TO/SRC/FILENAME` launches test only for `src/PATH/TO/SRC/__tests__/FILENAME-test.js` instead of all tests. For example, `yarn run test -- --src=doc/DocAnnotator` launches tests for `src/doc/__tests__/DocAnnotator-test.js`. This also works for directories, e.g. `yarn run test -- --src=doc/`.
* `yarn run debug` launches jest for debugging. Open the URL mentioned in the console.
diff --git a/package.json b/package.json
index 07e946354..111a3122c 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,7 @@
"webpack": "^4.12.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.0.7",
+ "webpack-dev-server": "^3.1.10",
"whatwg-fetch": "^2.0.3"
},
"scripts": {
@@ -139,7 +140,6 @@
"build-locales": "node ./build/props-to-es2015.js",
"build-prod": "BABEL_ENV=production NODE_ENV=production webpack --config build/webpack.config.js --mode production",
"build-variables": "node ./build/build-style-vars.js ./src/styles/_variables.scss ./src/styles/variables.js ./src/styles/variables.json",
- "watch": "yarn install && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack --watch --progress --colors --config build/webpack.config.js --mode development",
"test": "yarn install && NODE_ENV=test yarn run jest",
"debug": "yarn install && NODE_ENV=test yarn run jest --watch",
"setup-travis": "cd functional-tests && yarn install && node app.js",
@@ -160,6 +160,8 @@
"major": "./build/release.sh -m && ./build/publish.sh",
"patch": "./build/release.sh -p && ./build/publish.sh",
"upgrade-brui": "./build/upgrade_brui.sh",
+ "start": "yarn install && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack --watch --progress --colors --config build/webpack.config.js --mode development",
+ "start:dev": "yarn run pre-build && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack-dev-server --config build/webpack.config.js --mode development",
"styleguide": "yarn run pre-build && LANGUAGE=en-US REACT=true BABEL_ENV=dev NODE_ENV=dev node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js server --config build/styleguide.config.js --mode development",
"styleguide-static": "LANGUAGE=en-US REACT=true BABEL_ENV=production NODE_ENV=production node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js build --config build/styleguide.config.js --mode production"
},
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 000000000..b335e886d
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,88 @@
+
+