From f6ff7054d906d8186d0e4469456e257050415f99 Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Thu, 17 Aug 2017 09:36:34 -0700 Subject: [PATCH] Switch to yarnpkg client, upgrade typings & dev dependencies (#1276) --- .gitignore | 4 - README.md | 22 +- circle.yml | 36 +- gulp/hygiene.js | 2 +- gulp/typescript.js | 2 +- lerna.json | 1 + package.json | 140 +- packages/core/examples/buttonsExample.tsx | 60 +- packages/core/examples/controlExamples.tsx | 4 +- packages/core/examples/dialogExample.tsx | 2 +- .../core/examples/editableTextExample.tsx | 2 +- packages/core/examples/hotkeyPiano.tsx | 2 +- packages/core/examples/menuExample.tsx | 2 +- packages/core/examples/tabs2Example.tsx | 2 +- .../core/src/components/collapse/collapse.tsx | 11 +- .../core/src/components/slider/coreSlider.tsx | 8 +- .../core/src/components/slider/handle.tsx | 13 +- .../core/src/components/spinner/spinner.tsx | 8 +- .../core/src/components/toast/toaster.tsx | 2 +- packages/core/test/controls/controlsTests.tsx | 4 +- .../test/editable-text/editableTextTests.tsx | 12 +- packages/core/test/hotkeys/hotkeysTests.tsx | 4 +- packages/core/test/menu/menuTests.tsx | 4 +- packages/core/test/popover/popoverTests.tsx | 8 +- packages/core/test/tabs/tabs2Tests.tsx | 4 +- packages/core/test/text/textTests.tsx | 8 +- packages/core/test/tooltip/tooltipTests.tsx | 2 +- packages/core/yarn.lock | 160 + packages/datetime/package.json | 10 +- packages/datetime/src/datePickerCaption.tsx | 2 +- packages/datetime/yarn.lock | 176 + packages/docs/package.json | 4 +- packages/docs/yarn.lock | 897 ++ packages/labs/examples/omniboxExample.tsx | 2 +- packages/labs/package.json | 10 +- packages/labs/test/popover2Tests.tsx | 8 +- packages/labs/yarn.lock | 194 + packages/site-docs/package.json | 20 +- .../src/components/blueprintDocs.tsx | 16 +- .../src/components/navbarActions.tsx | 2 +- packages/site-docs/yarn.lock | 175 + packages/site-landing/package.json | 44 +- packages/site-landing/yarn.lock | 3117 +++++++ .../table/examples/cellLoadingExample.tsx | 2 +- packages/table/package.json | 25 +- .../src/cell/formats/truncatedFormat.tsx | 2 +- packages/table/yarn.lock | 2623 ++++++ tslint.json | 1 + yarn.lock | 7452 +++++++++++++++++ 49 files changed, 15069 insertions(+), 242 deletions(-) create mode 100644 packages/core/yarn.lock create mode 100644 packages/datetime/yarn.lock create mode 100644 packages/docs/yarn.lock create mode 100644 packages/labs/yarn.lock create mode 100644 packages/site-docs/yarn.lock create mode 100644 packages/site-landing/yarn.lock create mode 100644 packages/table/yarn.lock create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore index 83f23c6090..4b3b27f372 100644 --- a/.gitignore +++ b/.gitignore @@ -13,10 +13,6 @@ npm-debug.log lerna-debug.log package-lock.json -# Gradle -.gradle/ -.node/ - # Sass .sass-cache/ diff --git a/README.md b/README.md index 024f20cdb3..cad8bc75c5 100644 --- a/README.md +++ b/README.md @@ -34,13 +34,23 @@ The other packages (`site-docs` and `site-landing`) are not published to NPM as We use [Lerna](https://lernajs.io/) to manage inter-package dependencies in this monorepo. Builds are orchestrated via [Gulp](http://gulpjs.com/) tasks. -__Prerequisite__: Node.js v6 or v7 +__Prerequisites__: Node.js v6+, Yarn v0.28+ -1. `git clone` this repository (or fork if you lack permissions) -1. `npm install` to install build dependencies -1. `npm run bootstrap` to install and link each package using [Lerna](https://lernajs.io/) -1. `npm run gulp` to compile and start the server and watcher -1. Open your browser to [localhost:9000/packages/site-docs/dist/](http://localhost:9000/packages/site-docs/dist/) +1. `git clone` this repository (or fork if you lack permissions). +1. `yarn` to install dependencies at the root of the repo. +1. `yarn bootstrap` to install package dependencies install and symlink them using [Lerna](https://lernajs.io/). +1. `yarn gulp` to compile and start the server and watcher. +1. Open your browser to [localhost:9000/packages/site-docs/dist/](http://localhost:9000/packages/site-docs/dist/). + +### Updating build dependencies + +1. `yarn add ` or `yarn upgrade `. +1. Commit the result. + +### Updating package dependencies + +1. Update the relevant `package.json` file. Make sure to retain the `^` semver range. +1. Run `yarn bootstrap` and commit the result. ## Contributing diff --git a/circle.yml b/circle.yml index 1e6740793f..053ad5bce1 100644 --- a/circle.yml +++ b/circle.yml @@ -16,27 +16,41 @@ general: - packages/table/preview # GH Pages content - docs + machine: + pre: + - mkdir ~/yarn + environment: + YARN_VERSION: 0.28.4 + PATH: $PATH:$HOME/$CIRCLE_PROJECT_REPONAME/node_modules/.bin node: - version: 6.1.0 + version: 7.10.0 + dependencies: cache_directories: - - packages/core/node_modules - - packages/datetime/node_modules - - packages/docs/node_modules - - packages/labs/node_modules - - packages/site-docs/node_modules - - packages/site-landing/node_modules - - packages/table/node_modules + - ~/yarn + - ~/.cache/yarn + - ~/$CIRCLE_PROJECT_REPONAME/packages/core/node_modules + - ~/$CIRCLE_PROJECT_REPONAME/packages/datetime/node_modules + - ~/$CIRCLE_PROJECT_REPONAME/packages/docs/node_modules + - ~/$CIRCLE_PROJECT_REPONAME/packages/labs/node_modules + - ~/$CIRCLE_PROJECT_REPONAME/packages/site-docs/node_modules + - ~/$CIRCLE_PROJECT_REPONAME/packages/site-landing/node_modules + - ~/$CIRCLE_PROJECT_REPONAME/packages/table/node_modules # non-zero exit codes in `dependencies` group will fail the build early # so these following commands will block the build and prevent tests - post: - - lerna bootstrap - - npm run build:gulp + override: + - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $YARN_VERSION + - yarn install --pure-lockfile + - echo "Checking if yarn.lock changed..." && git diff --exit-code + - yarn bootstrap + - yarn build:gulp + test: override: - gulp check - gulp test + deployment: preview: branch: /.*/ diff --git a/gulp/hygiene.js b/gulp/hygiene.js index 7beef17b01..81fe1d7766 100644 --- a/gulp/hygiene.js +++ b/gulp/hygiene.js @@ -19,7 +19,7 @@ module.exports = (blueprint, gulp, plugins) => { gulp.task("tslint-gulp", () => ( gulp.src(["*.js", "gulp/**/*.js"]) - .pipe(plugins.tslint({ formatter: "verbose" })) + .pipe(plugins.tslint({ formatter: "codeFrame" })) .pipe(plugins.tslint.report()) .pipe(plugins.count("## javascript files linted")) )); diff --git a/gulp/typescript.js b/gulp/typescript.js index 6747f33fa6..dd8d76eb3e 100644 --- a/gulp/typescript.js +++ b/gulp/typescript.js @@ -18,7 +18,7 @@ module.exports = (blueprint, gulp, plugins) => { // exclude nested dist directories (ex: table/preview/dist) "!" + path.join(project.cwd, "*", "dist", "**", "*.{js,jsx,ts,tsx}"), ]) - .pipe(plugins.tslint({ formatter: "verbose" })) + .pipe(plugins.tslint({ formatter: "codeFrame" })) .pipe(plugins.tslint.report({ emitError: true })) .pipe(plugins.count(`${project.id}: ## files tslinted`)) )); diff --git a/lerna.json b/lerna.json index ac296ea593..989a8a8d8c 100644 --- a/lerna.json +++ b/lerna.json @@ -1,4 +1,5 @@ { "lerna": "2.0.0", + "npmClient": "yarn", "version": "independent" } diff --git a/package.json b/package.json index 280536e258..8aa9c78855 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "blueprint", + "name": "blueprint-monorepo", "version": "1.25.0", "private": true, "description": "A React UI toolkit for the web.", @@ -28,80 +28,80 @@ "@types/react-addons-transition-group": "0.14.17", "@types/react-dom": "15.5.0", "@types/tether": "1.1.27", - "autoprefixer": "7.1.2", + "autoprefixer": "^7.1.2", "better-handlebars": "github:wmeldon/better-handlebars", - "chai": "4.1.0", - "del": "3.0.0", - "documentalist": "0.0.6", - "enzyme": "2.9.1", - "gulp": "3.9.1", - "gulp-concat": "2.6.1", - "gulp-connect": "5.0.0", - "gulp-count": "0.3.0", - "gulp-insert": "0.5.0", - "gulp-less": "3.3.2", - "gulp-load-plugins": "1.5.0", - "gulp-mocha": "4.3.1", - "gulp-postcss": "7.0.0", - "gulp-rename": "1.2.2", - "gulp-replace": "0.6.1", - "gulp-sass": "3.1.0", - "gulp-sourcemaps": "2.6.0", - "gulp-strip-css-comments": "1.2.0", - "gulp-stylelint": "4.0.0", - "gulp-tslint": "8.1.1", - "gulp-typescript": "3.2.1", - "gulp-util": "3.0.8", - "highlights": "3.0.1", - "http-server": "0.10.0", - "istanbul-instrumenter-loader": "0.2.0", - "json-loader": "0.5.4", - "karma": "1.7.0", - "karma-chai": "0.1.0", - "karma-chrome-launcher": "2.2.0", - "karma-coverage": "1.1.1", - "karma-firefox-launcher": "1.0.1", - "karma-mocha": "1.3.0", - "karma-mocha-reporter": "2.2.3", - "karma-phantomjs-launcher": "1.0.4", - "karma-phantomjs-shim": "1.4.0", - "karma-sinon": "1.0.5", - "karma-sourcemap-loader": "0.3.7", - "karma-webpack": "2.0.4", + "chai": "^4.1.0", + "del": "^3.0.0", + "documentalist": "^0.0.6", + "enzyme": "^2.9.1", + "gulp": "^3.9.1", + "gulp-concat": "^2.6.1", + "gulp-connect": "^5.0.0", + "gulp-count": "^0.3.0", + "gulp-insert": "^0.5.0", + "gulp-less": "^3.3.2", + "gulp-load-plugins": "^1.5.0", + "gulp-mocha": "^4.3.1", + "gulp-postcss": "^7.0.0", + "gulp-rename": "^1.2.2", + "gulp-replace": "^0.6.1", + "gulp-sass": "^3.1.0", + "gulp-sourcemaps": "^2.6.0", + "gulp-strip-css-comments": "^1.2.0", + "gulp-stylelint": "^4.0.0", + "gulp-tslint": "^7.1.0", + "gulp-typescript": "^3.2.1", + "gulp-util": "^3.0.8", + "highlights": "^3.0.1", + "http-server": "^0.10.0", + "istanbul-instrumenter-loader": "^0.2.0", + "json-loader": "^0.5.4", + "karma": "^1.7.0", + "karma-chai": "^0.1.0", + "karma-chrome-launcher": "^2.2.0", + "karma-coverage": "^1.1.1", + "karma-firefox-launcher": "^1.0.1", + "karma-mocha": "^1.3.0", + "karma-mocha-reporter": "^2.2.3", + "karma-phantomjs-launcher": "^1.0.4", + "karma-phantomjs-shim": "^1.4.0", + "karma-sinon": "^1.0.5", + "karma-sourcemap-loader": "^0.3.7", + "karma-webpack": "^2.0.4", "language-less": "github:atom/language-less", "language-typescript": "github:giladgray/language-typescript#10.1.15", - "lerna": "2.0.0", - "lodash": "4.17.4", - "marked": "0.3.6", - "merge-stream": "1.0.1", - "mocha": "3.4.2", - "node-sass-package-importer": "3.0.4", - "npm-run-all": "4.0.2", - "phantomjs-prebuilt": "2.1.14", - "postcss-import": "10.0.0", - "postcss-url": "7.1.1", - "react": "15.5.1", - "react-dom": "15.5.1", - "react-test-renderer": "15.5.4", - "run-sequence": "2.0.0", - "sinon": "1.17.6", - "sorted-object": "2.0.1", - "source-map-loader": "0.2.1", - "string-replace-loader": "1.3.0", - "stylelint": "8.0.0", - "stylelint-config-palantir": "2.1.0", - "stylelint-config-standard": "17.0.0", - "stylelint-scss": "1.5.1", - "ts-loader": "1.3.3", - "ts-quick-docs": "0.5.1", - "tslint": "4.5.1", - "tslint-react": "2.4.0", - "typescript": "2.2.1", - "vinyl-source-stream": "1.1.0", - "webpack": "1.13.2" + "lerna": "^2.0.0", + "lodash": "^4.17.4", + "marked": "^0.3.6", + "merge-stream": "^1.0.1", + "mocha": "^3.4.2", + "node-sass-package-importer": "^3.0.4", + "npm-run-all": "^4.0.2", + "phantomjs-prebuilt": "^2.1.14", + "postcss-import": "^10.0.0", + "postcss-url": "^7.1.1", + "react": "^15.5.1", + "react-dom": "^15.5.1", + "react-test-renderer": "^15.5.4", + "run-sequence": "^2.0.0", + "sinon": "^1.17.6", + "sorted-object": "^2.0.1", + "source-map-loader": "^0.2.1", + "string-replace-loader": "^1.3.0", + "stylelint": "^8.0.0", + "stylelint-config-palantir": "^2.1.0", + "stylelint-config-standard": "^17.0.0", + "stylelint-scss": "^1.5.1", + "ts-loader": "^1.3.3", + "ts-quick-docs": "^0.5.1", + "tslint": "^4.5.1", + "tslint-react": "^2.4.0", + "typescript": "~2.2.1", + "vinyl-source-stream": "^1.1.0", + "webpack": "^1.13.2" }, "engines": { - "node": ">= 5.1" + "node": ">=6.1" }, "repository": { "type": "git", diff --git a/packages/core/examples/buttonsExample.tsx b/packages/core/examples/buttonsExample.tsx index 0ecd8fce28..41de9ebc11 100644 --- a/packages/core/examples/buttonsExample.tsx +++ b/packages/core/examples/buttonsExample.tsx @@ -51,36 +51,38 @@ export class ButtonsExample extends BaseExample { [Classes.MINIMAL]: this.state.minimal, }); - return
-
- Button

-
+
+ AnchorButton

+ +
-
- AnchorButton

- -
- ; + ); } protected renderOptions() { diff --git a/packages/core/examples/controlExamples.tsx b/packages/core/examples/controlExamples.tsx index d6b320fc64..3061338ab4 100644 --- a/packages/core/examples/controlExamples.tsx +++ b/packages/core/examples/controlExamples.tsx @@ -15,7 +15,7 @@ export class CheckboxExample extends BaseExample<{}> { return (
- +
@@ -31,7 +31,7 @@ export class SwitchExample extends BaseExample { Enabled} /> Public} /> - Cooperative} defaultChecked /> + Cooperative} defaultChecked={true} /> This example uses labelElement to demonstrate JSX labels. ); diff --git a/packages/core/examples/dialogExample.tsx b/packages/core/examples/dialogExample.tsx index 9db3cfb570..daa9a01b33 100644 --- a/packages/core/examples/dialogExample.tsx +++ b/packages/core/examples/dialogExample.tsx @@ -40,7 +40,7 @@ export class DialogExample extends OverlayExample {
- + diff --git a/packages/core/examples/editableTextExample.tsx b/packages/core/examples/editableTextExample.tsx index 40bc9cd20b..a7d37a55c0 100644 --- a/packages/core/examples/editableTextExample.tsx +++ b/packages/core/examples/editableTextExample.tsx @@ -48,7 +48,7 @@ export class EditableTextExample extends BaseExample maxLength={this.state.maxLength} maxLines={12} minLines={3} - multiline + multiline={true} placeholder="Edit report... (controlled)" selectAllOnFocus={this.state.selectAllOnFocus} confirmOnEnterKey={this.state.confirmOnEnterKey} diff --git a/packages/core/examples/hotkeyPiano.tsx b/packages/core/examples/hotkeyPiano.tsx index 1a486edfb8..c86860b27c 100644 --- a/packages/core/examples/hotkeyPiano.tsx +++ b/packages/core/examples/hotkeyPiano.tsx @@ -158,7 +158,7 @@ export class HotkeyPiano extends BaseExample { /* tslint:disable:max-line-length */ public renderHotkeys() { return - + diff --git a/packages/core/examples/menuExample.tsx b/packages/core/examples/menuExample.tsx index 4b406239db..4d5cdd6373 100644 --- a/packages/core/examples/menuExample.tsx +++ b/packages/core/examples/menuExample.tsx @@ -31,7 +31,7 @@ export class MenuExample extends BaseExample<{}> { - + diff --git a/packages/core/examples/tabs2Example.tsx b/packages/core/examples/tabs2Example.tsx index 048e14e7c1..34400eee44 100644 --- a/packages/core/examples/tabs2Example.tsx +++ b/packages/core/examples/tabs2Example.tsx @@ -66,7 +66,7 @@ export class Tabs2Example extends BaseExample { } /> } /> } /> - } /> + } /> diff --git a/packages/core/src/components/collapse/collapse.tsx b/packages/core/src/components/collapse/collapse.tsx index 816587b612..fd1db90a1a 100644 --- a/packages/core/src/components/collapse/collapse.tsx +++ b/packages/core/src/components/collapse/collapse.tsx @@ -133,15 +133,16 @@ export class Collapse extends AbstractComponent transition: isAutoHeight ? "none" : undefined, }; - // quick type cast because there's no single overload that supports all three ReactTypes (str | Cmp | SFC) - return React.createElement(this.props.component as string, { + // HACKHACK: type cast because there's no single overload that supports all + // three ReactTypes (string | ComponentClass | StatelessComponent) + return React.createElement(this.props.component as any, { className: classNames(Classes.COLLAPSE, this.props.className), style: containerStyle, - }, + }, (
{showContents ? this.props.children : null} -
, - ); +
+ )); } public componentDidMount() { diff --git a/packages/core/src/components/slider/coreSlider.tsx b/packages/core/src/components/slider/coreSlider.tsx index 81ea3c580c..56570b66de 100644 --- a/packages/core/src/components/slider/coreSlider.tsx +++ b/packages/core/src/components/slider/coreSlider.tsx @@ -121,7 +121,7 @@ export abstract class CoreSlider

extends AbstractCom this.updateTickSize(); } - public componentWillReceiveProps(props: P) { + public componentWillReceiveProps(props: P & { children: React.ReactNode }) { super.componentWillReceiveProps(props); this.setState({ labelPrecision: this.getLabelPrecision(props) }); } @@ -153,7 +153,11 @@ export abstract class CoreSlider

extends AbstractCom } private maybeRenderAxis() { - const { max, min, labelStepSize } = this.props; + // explicit typedefs are required because tsc (rightly) assumes that props might be overriden with different + // types in subclasses + const max: number = this.props.max; + const min: number = this.props.min; + const labelStepSize: number = this.props.labelStepSize; if (this.props.renderLabel === false) { return undefined; } const stepSize = Math.round(this.state.tickSize * labelStepSize); diff --git a/packages/core/src/components/slider/handle.tsx b/packages/core/src/components/slider/handle.tsx index 5c90ab25cf..7b440771ab 100644 --- a/packages/core/src/components/slider/handle.tsx +++ b/packages/core/src/components/slider/handle.tsx @@ -15,16 +15,19 @@ import * as Keys from "../../common/keys"; import { IProps } from "../../common/props"; import { clamp, safeInvoke } from "../../common/utils"; +/** + * N.B. some properties need to be optional for spread in slider.tsx to work + */ export interface IHandleProps extends IProps { disabled?: boolean; label: React.ReactChild; - max: number; - min: number; + max?: number; + min?: number; onChange?: (newValue: number) => void; onRelease?: (newValue: number) => void; - stepSize: number; - tickSize: number; - value: number; + stepSize?: number; + tickSize?: number; + value?: number; } export interface IHandleState { diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx index 75c5556088..2896450ca4 100644 --- a/packages/core/src/components/spinner/spinner.tsx +++ b/packages/core/src/components/spinner/spinner.tsx @@ -53,14 +53,14 @@ export class Spinner extends React.Component { d: SPINNER_TRACK, pathLength: PATH_LENGTH, style, - }); + } as React.DOMAttributes); - return this.renderContainer(classes, + return this.renderContainer(classes, ( = 0 ? "-15 -15 130 130" : "0 0 100 100"}> {headElement} - , - ); + + )); } // abstract away the container elements so SVGSpinner can do its own thing diff --git a/packages/core/src/components/toast/toaster.tsx b/packages/core/src/components/toast/toaster.tsx index 96ff71586f..040b555d5c 100644 --- a/packages/core/src/components/toast/toaster.tsx +++ b/packages/core/src/components/toast/toaster.tsx @@ -98,7 +98,7 @@ export class Toaster extends AbstractComponent imp } const containerElement = document.createElement("div"); container.appendChild(containerElement); - return ReactDOM.render( , containerElement) as Toaster; + return ReactDOM.render( , containerElement) as Toaster; } public state = { diff --git a/packages/core/test/controls/controlsTests.tsx b/packages/core/test/controls/controlsTests.tsx index 3972d816b4..f09ec2c7d2 100644 --- a/packages/core/test/controls/controlsTests.tsx +++ b/packages/core/test/controls/controlsTests.tsx @@ -20,12 +20,12 @@ describe("Controls:", () => { const handleInputRef = (ref: HTMLInputElement) => input = ref; it("prop sets element state", () => { - mount(); + mount(); assert.isTrue(input.indeterminate); }); it("default prop sets element state", () => { - mount(); + mount(); assert.isTrue(input.indeterminate); }); }); diff --git a/packages/core/test/editable-text/editableTextTests.tsx b/packages/core/test/editable-text/editableTextTests.tsx index 305cb9da94..64e3df1ead 100644 --- a/packages/core/test/editable-text/editableTextTests.tsx +++ b/packages/core/test/editable-text/editableTextTests.tsx @@ -182,7 +182,7 @@ describe("", () => { }); it("applies defaultValue only on initial render", () => { - const wrapper = mount(); + const wrapper = mount(); assert.strictEqual(wrapper.state("value"), "default"); // type new value, then change a prop to cause re-render wrapper.find("input").simulate("change", { target: { value: "hello" } }); @@ -202,12 +202,12 @@ describe("", () => { describe("multiline", () => { it("renders a