diff --git a/.circleci/config.yml b/.circleci/config.yml index b9e131a3d9..a5ca619748 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -86,6 +86,15 @@ jobs: name: Flow command: yarn --cwd /buie flow check + typescript: + executor: default + steps: + - checkout + - setup-workspace + - run: + name: Typescript + command: yarn --cwd /buie tsc + build-unit-tests: executor: default steps: @@ -137,6 +146,9 @@ workflows: - flow: requires: - setup + - typescript: + requires: + - setup - build-unit-tests: requires: - setup diff --git a/DEVELOPING.md b/DEVELOPING.md index 5c16e5244a..a2b7a08b5e 100644 --- a/DEVELOPING.md +++ b/DEVELOPING.md @@ -75,8 +75,8 @@ To test the Box UI Elements with your own project use local Yarn linking. - `yarn start:npm` to symlink Elements via `yarn link` to a parent project. - `yarn start:dev` to launch a local webpack dev server. Uses your own data for Elements. - `yarn lint` to lint js and css. -- `yarn lint:js --fix` to lint js and fix issues. -- `yarn lint:css --fix` to lint styles and fix issues. +- `yarn lint:code --fix` to lint js, ts and fix issues. +- `yarn lint:styles --fix` to lint styles and fix issues. - `yarn test` to launch tests with jest. - `yarn test --watch` to launch tests with jest in watch mode. - `yarn test --coverage` to launch tests with jest with coverage. diff --git a/package.json b/package.json index 1f2ebd7070..b00abf7c54 100644 --- a/package.json +++ b/package.json @@ -61,10 +61,12 @@ "cy:open": "yarn cy:wait; yarn cypress open", "cy:run": "yarn cy:wait; yarn cypress run --spec \"test/integration/**/*.cy.js\"", "cy:wait": "wait-on http-get://127.0.0.1:6060/#", - "lint": "npm-run-all lint:*", - "lint:js": "eslint --max-warnings=0 .", + "lint": "npm-run-all lint:ts lint:ci", "lint:ts": "tsc", - "lint:css": "stylelint \"src/**/*.scss\" --syntax scss", + "lint:code": "./scripts/lint-code.sh", + "lint:css": "./scripts/lint-styles.sh", + "lint:misc": "./scripts/lint-misc.sh", + "lint:ci": "./scripts/lint-all.sh", "prebuild:es": "npm-run-all copy:styles ts:defs copy:flow", "release": "yarn release:beta", "release:beta": "DIST=beta BRANCH=master ./scripts/release.sh", diff --git a/scripts/lint-all.sh b/scripts/lint-all.sh new file mode 100755 index 0000000000..77c066ae2f --- /dev/null +++ b/scripts/lint-all.sh @@ -0,0 +1,14 @@ +#!/usr/bin/env bash + +lint_all(){ + local fix_flag=$1 + local exit_code=0 + + ./scripts/lint-code.sh $fix_flag || exit_code=$? + ./scripts/lint-styles.sh $fix_flag || exit_code=$? + ./scripts/lint-misc.sh $fix_flag || exit_code=$? + + return $exit_code +}; + +lint_all $1 diff --git a/scripts/lint-code.sh b/scripts/lint-code.sh new file mode 100755 index 0000000000..d2502231b3 --- /dev/null +++ b/scripts/lint-code.sh @@ -0,0 +1,28 @@ +#!/usr/bin/env bash + +lint_code(){ + local fix_flag=$1 + local eslint_cmd="eslint --max-warnings 0" + local prettier_cmd="prettier --check" + local exit_code=0 + local color="\033[1;34m" + local no_color="\033[0m" + + if [ "$fix_flag" == "--fix" ]; then + eslint_cmd="eslint --fix --max-warnings 0" + prettier_cmd="prettier --write" + fi + + echo -e "${color}Running: $prettier_cmd --parser=flow src/**/*.js${no_color}" + $prettier_cmd --parser=flow "src/**/*.js" --ignore-path .gitignore || exit_code=$? + + echo -e "${color}Running: $prettier_cmd --parser=typescript src/**/*.{ts,tsx}${no_color}" + $prettier_cmd --parser=typescript "src/**/*.{ts,tsx}" --ignore-path .gitignore || exit_code=$? + + echo -e "${color}Running: $eslint_cmd src/**/*.{js,ts,tsx}${no_color}" + $eslint_cmd "src/**/*.{js,ts,tsx}" || exit_code=$? + + return $exit_code +}; + +lint_code $1 diff --git a/scripts/lint-misc.sh b/scripts/lint-misc.sh new file mode 100755 index 0000000000..20275ca688 --- /dev/null +++ b/scripts/lint-misc.sh @@ -0,0 +1,26 @@ +#!/usr/bin/env bash + +lint_misc(){ + local fix_flag=$1 + local prettier_cmd="prettier --check" + local exit_code=0 + local color="\033[1;34m" + local no_color="\033[0m" + + if [ "$fix_flag" == "--fix" ]; then + prettier_cmd="prettier --write" + fi + + echo -e "${color}Running: $prettier_cmd --parser=markdown ./**/*.md${no_color}" + $prettier_cmd --parser=markdown "./**/*.md" --ignore-path .gitignore || exit_code=$? + + echo -e "${color}Running: $prettier_cmd --parser=json ./**/*.json${no_color}" + $prettier_cmd --parser=json "./**/*.json" --ignore-path .gitignore || exit_code=$? + + echo -e "${color}Running: $prettier_cmd --parser=html ./**/*.html${no_color}" + $prettier_cmd --parser=html "./**/*.html" --ignore-path .gitignore || exit_code=$? + + return $exit_code +}; + +lint_misc $1 diff --git a/scripts/lint-styles.sh b/scripts/lint-styles.sh new file mode 100755 index 0000000000..bf97e7d1b6 --- /dev/null +++ b/scripts/lint-styles.sh @@ -0,0 +1,31 @@ +#!/usr/bin/env bash + +lint_styles(){ + local fix_flag=$1 + local stylelint_cmd="stylelint --max-warnings 0" + local prettier_cmd="prettier --check" + local exit_code=0 + local color="\033[1;34m" + local no_color="\033[0m" + + if [ "$fix_flag" == "--fix" ]; then + stylelint_cmd="stylelint --fix --max-warnings 0" + prettier_cmd="prettier --write" + fi + + echo -e "${color}Running: $prettier_cmd --parser=scss src/**/*.scss${no_color}" + $prettier_cmd --parser=scss "src/**/*.scss" --ignore-path .gitignore || exit_code=$? + + echo -e "${color}Running: $stylelint_cmd --syntax scss '**/*.scss'${no_color}" + $stylelint_cmd --syntax scss "**/*.scss" --ignore-path .gitignore || exit_code=$? + + echo -e "${color}Running: $prettier_cmd --parser=css ./**/*.css${no_color}" + $prettier_cmd --parser=css "./**/*.css" --ignore-path .gitignore || exit_code=$? + + echo -e "${color}Running: $stylelint_cmd --syntax css '**/*.css'${no_color}" + $stylelint_cmd --syntax css "**/*.css" --ignore-path .gitignore || exit_code=$? + + return $exit_code +}; + +lint_styles $1 diff --git a/src/elements/content-preview/ContentPreview.js b/src/elements/content-preview/ContentPreview.js index 0e4a93a416..f3a39b406d 100644 --- a/src/elements/content-preview/ContentPreview.js +++ b/src/elements/content-preview/ContentPreview.js @@ -829,6 +829,16 @@ class ContentPreview extends React.PureComponent { skipServerUpdate: true, useHotkeys: false, }; + + + + + + + + + + const { Preview } = global.Box; this.preview = new Preview(); this.preview.addListener('load', this.onPreviewLoad);