From 2b197698749b512d55cdcc92ee7a68b4592cfcdf Mon Sep 17 00:00:00 2001
From: Greg Wong <gregorywong@box.com>
Date: Fri, 20 Dec 2024 16:18:56 -0500
Subject: [PATCH 1/3] chore(lint-staged): added lint-staged to yarn lint

---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 1f2ebd7070..8cf47a7477 100644
--- a/package.json
+++ b/package.json
@@ -61,10 +61,11 @@
         "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": "npm-run-all lint:js lint:ts lint:staged",
         "lint:js": "eslint --max-warnings=0 .",
         "lint:ts": "tsc",
         "lint:css": "stylelint \"src/**/*.scss\" --syntax scss",
+        "lint:staged": "lint-staged -c scripts/lint-staged.config.js",
         "prebuild:es": "npm-run-all copy:styles ts:defs copy:flow",
         "release": "yarn release:beta",
         "release:beta": "DIST=beta BRANCH=master ./scripts/release.sh",
@@ -96,7 +97,7 @@
     },
     "husky": {
         "hooks": {
-            "pre-commit": "lint-staged -c scripts/lint-staged.config.js",
+            "pre-commit": "yarn lint:staged",
             "pre-push": "scripts/prepush.sh",
             "commit-msg": "commitlint -e"
         }

From a8dc4161b35047ef026c6fdcc9d2a0a075e7b628 Mon Sep 17 00:00:00 2001
From: Greg Wong <gregorywong@box.com>
Date: Fri, 20 Dec 2024 16:33:10 -0500
Subject: [PATCH 2/3] chore(lint): lint on ci

---
 package.json                                  |  7 ++-
 scripts/lint.sh                               | 51 +++++++++++++++++++
 .../content-preview/ContentPreview.js         |  1 +
 3 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100755 scripts/lint.sh

diff --git a/package.json b/package.json
index 8cf47a7477..7c9af1b66e 100644
--- a/package.json
+++ b/package.json
@@ -61,11 +61,10 @@
         "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:js lint:ts lint:staged",
+        "lint": "npm-run-all lint:js lint:ts lint:ci",
         "lint:js": "eslint --max-warnings=0 .",
         "lint:ts": "tsc",
-        "lint:css": "stylelint \"src/**/*.scss\" --syntax scss",
-        "lint:staged": "lint-staged -c scripts/lint-staged.config.js",
+        "lint:ci": "./scripts/lint.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",
@@ -97,7 +96,7 @@
     },
     "husky": {
         "hooks": {
-            "pre-commit": "yarn lint:staged",
+            "pre-commit": "lint-staged -c scripts/lint-staged.config.js",
             "pre-push": "scripts/prepush.sh",
             "commit-msg": "commitlint -e"
         }
diff --git a/scripts/lint.sh b/scripts/lint.sh
new file mode 100755
index 0000000000..4dbf21e79d
--- /dev/null
+++ b/scripts/lint.sh
@@ -0,0 +1,51 @@
+#!/usr/bin/env bash
+
+lint(){
+    local fix_flag=$1
+    local eslint_cmd="eslint --max-warnings 0"
+    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
+        eslint_cmd="eslint --fix --max-warnings 0"
+        stylelint_cmd="stylelint --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=$?
+
+    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=$?
+
+    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 $1
diff --git a/src/elements/content-preview/ContentPreview.js b/src/elements/content-preview/ContentPreview.js
index 0e4a93a416..fb20d6c0e8 100644
--- a/src/elements/content-preview/ContentPreview.js
+++ b/src/elements/content-preview/ContentPreview.js
@@ -829,6 +829,7 @@ 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);

From e3e1e47ecca046a7f8c2999cc256959ec7f477bd Mon Sep 17 00:00:00 2001
From: Greg Wong <gregorywong@box.com>
Date: Fri, 20 Dec 2024 17:31:17 -0500
Subject: [PATCH 3/3] chore(wip): lint

---
 .circleci/config.yml                          | 12 +++++
 DEVELOPING.md                                 |  4 +-
 package.json                                  |  8 +--
 scripts/lint-all.sh                           | 14 +++++
 scripts/lint-code.sh                          | 28 ++++++++++
 scripts/lint-misc.sh                          | 26 ++++++++++
 scripts/lint-styles.sh                        | 31 +++++++++++
 scripts/lint.sh                               | 51 -------------------
 .../content-preview/ContentPreview.js         |  9 ++++
 9 files changed, 127 insertions(+), 56 deletions(-)
 create mode 100755 scripts/lint-all.sh
 create mode 100755 scripts/lint-code.sh
 create mode 100755 scripts/lint-misc.sh
 create mode 100755 scripts/lint-styles.sh
 delete mode 100755 scripts/lint.sh

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 7c9af1b66e..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:js lint:ts lint:ci",
-        "lint:js": "eslint --max-warnings=0 .",
+        "lint": "npm-run-all lint:ts lint:ci",
         "lint:ts": "tsc",
-        "lint:ci": "./scripts/lint.sh",
+        "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/scripts/lint.sh b/scripts/lint.sh
deleted file mode 100755
index 4dbf21e79d..0000000000
--- a/scripts/lint.sh
+++ /dev/null
@@ -1,51 +0,0 @@
-#!/usr/bin/env bash
-
-lint(){
-    local fix_flag=$1
-    local eslint_cmd="eslint --max-warnings 0"
-    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
-        eslint_cmd="eslint --fix --max-warnings 0"
-        stylelint_cmd="stylelint --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=$?
-
-    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=$?
-
-    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 $1
diff --git a/src/elements/content-preview/ContentPreview.js b/src/elements/content-preview/ContentPreview.js
index fb20d6c0e8..f3a39b406d 100644
--- a/src/elements/content-preview/ContentPreview.js
+++ b/src/elements/content-preview/ContentPreview.js
@@ -830,6 +830,15 @@ class ContentPreview extends React.PureComponent<Props, State> {
             useHotkeys: false,
         };
 
+
+
+
+
+
+
+
+
+
         const { Preview } = global.Box;
         this.preview = new Preview();
         this.preview.addListener('load', this.onPreviewLoad);