chore(lint): add linting and formatting to CI

.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

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.

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",

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

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

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

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

src/elements/content-preview/ContentPreview.js

@@ -829,6 +829,16 @@ class ContentPreview extends React.PureComponent<Props, State> {
             skipServerUpdate: true,
             useHotkeys: false,
         };
+
+
+
+
+
+
+
+
+
+
         const { Preview } = global.Box;
         this.preview = new Preview();
         this.preview.addListener('load', this.onPreviewLoad);