-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Chore: Add webpack-dev-server and basic fixture for local dev (#316)
- Loading branch information
Showing
9 changed files
with
279 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| registry=https://registry.npmjs.org/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 [email protected]:[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 [email protected]: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 | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| <html> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <link rel="stylesheet" href='./styles.css' /> | ||
| <link rel="stylesheet" href='https://cdn01.boxcdn.net/platform/preview/1.60.0/en-US/preview.css' /> | ||
| <link rel="stylesheet" href='./annotations.css' /> | ||
| <script src='https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js'></script> | ||
| <script src='https://cdn01.boxcdn.net/platform/preview/1.60.0/en-US/preview.js'></script> | ||
| <script src='./annotations.js'></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class='setters-container'> | ||
| <div class='container' id='token'> | ||
| <div> Token: <span id='token-display'></span> </div> | ||
| <input id='token-set' placeholder='Enter token' /> | ||
| <button onClick="setProperty('token')">Set new token</button> | ||
| </div> | ||
|
|
||
| <div class='container' id='file'> | ||
| <div> File ID: <span id='fileid-display'></span></div> | ||
| <input id='fileid-set' placeholder='Enter file ID' /> | ||
| <button onClick="setProperty('fileid')">Set new file ID</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class='preview-container'> </div> | ||
| <script> | ||
| function setProperty(selector) { | ||
| // Get new value, fallback to local storage | ||
| const inputValue = document.querySelector('#' + selector + '-set') | ||
| value = inputValue && inputValue.value || localStorage.getItem(selector); | ||
|
|
||
|
|
||
| if (!value) { | ||
| return; | ||
| } | ||
|
|
||
| // Set it for display purposes | ||
| displayElement = document.querySelector('#' + selector + '-display'); | ||
| displayElement.textContent = value; | ||
|
|
||
| // Cache it in local storage | ||
| localStorage.setItem(selector, value) | ||
|
|
||
| // Attempt to load Preview + Annotations | ||
| loadPreview(); | ||
| } | ||
|
|
||
| function loadPreview() { | ||
| const token = localStorage.getItem('token'); | ||
| const fileid = localStorage.getItem('fileid'); | ||
|
|
||
| if ( !token || !fileid) { | ||
| return; | ||
| } | ||
|
|
||
| // Load Preview + Annotations with the passed in file ID | ||
| const options = { | ||
| Image: { | ||
| enabledTypes: ["point"] | ||
| }, | ||
| Document: { | ||
| enabledTypes: ["draw", "point", "highlight-comment", "highlight"] | ||
| }, | ||
| Presentation: { | ||
| enabledTypes: ["draw", "point", "highlight-comment", "highlight"] | ||
| } | ||
| }; | ||
|
|
||
| /* global BoxAnnotations */ | ||
| const annotations = new BoxAnnotations(options); | ||
|
|
||
| /* global Box */ | ||
| var preview = new Box.Preview(); | ||
| preview.show(fileid, token, { | ||
| container: ".preview-container", | ||
| boxAnnotations: annotations | ||
| }); | ||
|
|
||
| } | ||
|
|
||
| // Try to load all properties from storage on page load | ||
| setProperty('token'); | ||
| setProperty('fileid'); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| * { | ||
| font-family: sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| .setters-container { | ||
| height: 25vh; | ||
| display: flex; | ||
| font-size: 75%; | ||
| justify-content: space-around; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .setters-container button,input { | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .container { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .container > input { | ||
| text-align: center; | ||
| } | ||
|
|
||
| #preview-container { | ||
| width: 100vw; | ||
| height: 75vh; | ||
| } |
Oops, something went wrong.