refactor: added custom checkbox for static analyser plugin

apps/remix-ide/src/app/tabs/analysis-tab.js

+import React from 'react' // eslint-disable-line
 import { ViewPlugin } from '@remixproject/engine-web'
+import ReactDOM from 'react-dom'
 import { EventEmitter } from 'events'
+import {RemixUiStaticAnalyser} from '@remix-ui/static-analyser' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
+var Renderer = require('../ui/renderer')
 
-var yo = require('yo-yo')
-var StaticAnalysis = require('./staticanalysis/staticAnalysisView')
 var EventManager = require('../../lib/events')
 
 const profile = {
@@ -25,24 +27,39 @@ class AnalysisTab extends ViewPlugin {
     this.event = new EventManager()
     this.events = new EventEmitter()
     this.registry = registry
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'staticAnalyserView')
+    this._components = {
+      renderer: new Renderer(this)
+    }
+    this._components.registry = this.registry
+    this._deps = {
+      offsetToLineColumnConverter: this.registry.get(
+        'offsettolinecolumnconverter').api
+    }
+  }
+
+  onActivation () {
+    this.renderComponent()
   }
 
   render () {
-    this.staticanalysis = new StaticAnalysis(this.registry, this)
-    this.staticanalysis.event.register('staticAnaysisWarning', (count) => {
-      if (count > 0) {
-        this.emit('statusChanged', { key: count, title: `${count} warning${count === 1 ? '' : 's'}`, type: 'warning' })
-      } else if (count === 0) {
-        this.emit('statusChanged', { key: 'succeed', title: 'no warning', type: 'success' })
-      } else {
-        // count ==-1 no compilation result
-        this.emit('statusChanged', { key: 'none' })
-      }
-    })
-    this.registry.put({ api: this.staticanalysis, name: 'staticanalysis' })
-
-    return yo`<div class="px-3 pb-1" id="staticanalysisView">${this.staticanalysis.render()}</div>`
+    return this.element
   }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiStaticAnalyser
+        analysisRunner={this.runner}
+        registry={this.registry}
+        staticanalysis={this.staticanalysis}
+        analysisModule={this}
+        event={this.event}
+      />,
+      this.element
+    )
+  }
+
 }
 
 module.exports = AnalysisTab

libs/remix-ui/static-analyser/.babelrc

+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/static-analyser/.eslintrc

+{
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "extends": "../../../.eslintrc",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 11,
+      "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"  
+  }
+} 

libs/remix-ui/static-analyser/README.md

+# remix-ui-static-analyser
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-static-analyser` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/static-analyser/src/index.ts

+export * from './lib/remix-ui-static-analyser'

libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx

+import React from 'react'  //eslint-disable-line
+
+interface StaticAnalyserButtonProps {
+  onClick: (event) => void
+  buttonText: string,
+  disabled?: boolean
+}
+
+const StaticAnalyserButton = ({
+  onClick,
+  buttonText,
+  disabled
+}: StaticAnalyserButtonProps) => {
+  return (
+    <div className="remixui-button-container">
+      <button className="btn btn-sm w-31 btn-primary" onClick={onClick} disabled={disabled}>
+        {buttonText}
+      </button>
+    </div>
+  )
+}
+
+export default StaticAnalyserButton

libs/remix-ui/static-analyser/src/lib/Checkbox/StaticAnalyserCheckedBox.tsx

+import React from 'react' //eslint-disable-line
+
+interface StaticAnalyserCheckBoxProps {
+  onClick?: (event) => void
+  onChange?: (event) => void
+  label?: string
+  inputType?: string
+  name?: string
+  checked?: boolean
+  id?: string
+  itemName?: string
+  categoryId?: string
+}
+
+const StaticAnalyserCheckedBox = ({
+  id,
+  label,
+  onClick,
+  inputType,
+  name,
+  checked,
+  onChange,
+  itemName,
+  categoryId
+}: StaticAnalyserCheckBoxProps) => {
+  return (
+    <div className="pt-1 h-80 mx-3 align-items-center listenOnNetwork_2A0YE0 custom-control custom-checkbox " onClick={onClick}>
+      <input
+        id={id}
+        type={inputType}
+        onChange={onChange}
+        style={{ verticalAlign: 'bottom' }}
+        name={name}
+        className="custom-control-input"
+        checked={checked}
+      />
+      <label className="pt-1 form-check-label custom-control-label" id={`heading${categoryId}`} >
+        {name ? <h6>{itemName}</h6> : ''}
+        <p>{label}</p>
+      </label>
+    </div>
+  )
+}
+
+export default StaticAnalyserCheckedBox

libs/remix-ui/static-analyser/src/lib/ErrorRenderer.tsx

+import React, { useState } from 'react' //eslint-disable-line
+
+interface ErrorRendererProps {
+  message: any;
+  opt: any,
+  warningErrors: any
+}
+
+const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
+  const [, setError] = useState(
+    {
+      row: null,
+      column: null,
+      text: null,
+      type: null,
+      errFile: null
+    }
+  )
+  const getPositionDetails = (msg: any) => {
+    const result = { } as any
+
+    // To handle some compiler warning without location like SPDX license warning etc
+    if (!msg.includes(':')) return { errLine: -1, errCol: -1, errFile: msg }
+
+    // extract line / column
+    let position = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/)
+    result.errLine = position ? parseInt(position[2]) - 1 : -1
+    result.errCol = position ? parseInt(position[3]) : -1
+
+    // extract file
+    position = msg.match(/^(https:.*?|http:.*?|.*?):/)
+    result.errFile = position ? position[1] : ''
+    return result
+  }
+  if (!message) return
+  let position = getPositionDetails(message)
+  if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) {
+    // Updated error reported includes '-->' before file details
+    const errorDetails = message.split('-->')
+    // errorDetails[1] will have file details
+    if (errorDetails.length > 1) position = getPositionDetails(errorDetails[1])
+  }
+  opt.errLine = position.errLine
+  opt.errCol = position.errCol
+  opt.errFile = position.errFile.trim()
+  if (!opt.noAnnotations && opt.errFile) {
+    setError({
+      errFile: opt.errFile,
+      row: opt.errLine,
+      column: opt.errCol,
+      text: message,
+      type: opt.type
+    })
+  }
+  const classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
+  return (
+    <div>
+      <div className={`sol ${opt.type} ${classList}`}>
+        <div className="close" data-id="renderer">
+          <i className="fas fa-times"></i>
+        </div>
+        <span className='d-flex flex-column'>
+          <span className='h6 font-weight-bold'>{opt.item.name}</span>
+          { opt.item.warning }
+          {opt.item.more
+            ? <span><a href={opt.item.more} target='_blank'>more</a></span>
+            : <span> </span>
+          }
+          <span title={`Position in ${opt.errFile}`}>Pos: {opt.locationString}</span>
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default ErrorRenderer

libs/remix-ui/static-analyser/tsconfig.json

+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/static-analyser/tsconfig.lib.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

nx.json

@@ -95,6 +95,9 @@
     },
     "remix-ui-workspace": {
       "tags": []
+    },
+    "remix-ui-static-analyser": {
+      "tags": []
     }
   }
 }

package-lock.json

@@ -25004,9 +25004,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.19",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash-es": {
       "version": "4.17.15",

package.json

@@ -154,6 +154,7 @@
     "http-server": "^0.11.1",
     "isbinaryfile": "^3.0.2",
     "jszip": "^3.6.0",
+    "lodash": "^4.17.21",
     "merge": "^1.2.0",
     "npm-install-version": "^6.0.2",
     "react": "16.13.1",

tsconfig.json

@@ -11,7 +11,7 @@
     "target": "es2015",
     "module": "commonjs",
     "typeRoots": ["node_modules/@types"],
-    "lib": ["es2017", "dom"],
+    "lib": ["es2017", "es2019", "dom"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
@@ -38,7 +38,8 @@
       "@remix-ui/modal-dialog": ["libs/remix-ui/modal-dialog/src/index.ts"],
       "@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"],
       "@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"],
-      "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"]
+      "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"],
+      "@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -725,6 +725,25 @@
           }
         }
       }
+    },
+    "remix-ui-static-analyser": {
+      "root": "libs/remix-ui/static-analyser",
+      "sourceRoot": "libs/remix-ui/static-analyser/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/static-analyser/tsconfig.lib.json"],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/static-analyser/**/*"
+            ]
+          }
+        }
+      }
     }
   },
   "cli": {