From 491cd9d0c0f45221e839519829d0c3a5b71d16f3 Mon Sep 17 00:00:00 2001 From: tizah Date: Fri, 23 Apr 2021 11:23:00 +0100 Subject: [PATCH] feat_fix_n_refactor: exptracted checkbox as a reusable component and fix selec all and auto run, --- libs/remix-ui/checkbox/.babelrc | 4 + libs/remix-ui/checkbox/.eslintrc | 19 ++ libs/remix-ui/checkbox/README.md | 7 + libs/remix-ui/checkbox/src/index.ts | 1 + .../checkbox/src/lib/remix-ui-checkbox.css | 0 .../checkbox/src/lib/remix-ui-checkbox.tsx | 47 ++++ libs/remix-ui/checkbox/tsconfig.json | 16 ++ libs/remix-ui/checkbox/tsconfig.lib.json | 13 + .../src/lib/Button/StaticAnalyserButton.tsx | 8 +- .../lib/Checkbox/StaticAnalyserCheckedBox.tsx | 8 +- .../static-analyser/src/lib/ErrorRenderer.tsx | 31 +-- .../src/lib/remix-ui-static-analyser.tsx | 260 +++++++++--------- nx.json | 3 + package.json | 2 +- tsconfig.json | 3 +- workspace.json | 16 ++ 16 files changed, 273 insertions(+), 165 deletions(-) create mode 100644 libs/remix-ui/checkbox/.babelrc create mode 100644 libs/remix-ui/checkbox/.eslintrc create mode 100644 libs/remix-ui/checkbox/README.md create mode 100644 libs/remix-ui/checkbox/src/index.ts create mode 100644 libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.css create mode 100644 libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx create mode 100644 libs/remix-ui/checkbox/tsconfig.json create mode 100644 libs/remix-ui/checkbox/tsconfig.lib.json diff --git a/libs/remix-ui/checkbox/.babelrc b/libs/remix-ui/checkbox/.babelrc new file mode 100644 index 0000000000..09d67939cc --- /dev/null +++ b/libs/remix-ui/checkbox/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["@nrwl/react/babel"], + "plugins": [] +} diff --git a/libs/remix-ui/checkbox/.eslintrc b/libs/remix-ui/checkbox/.eslintrc new file mode 100644 index 0000000000..dae5c6feeb --- /dev/null +++ b/libs/remix-ui/checkbox/.eslintrc @@ -0,0 +1,19 @@ +{ + "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" + } +} diff --git a/libs/remix-ui/checkbox/README.md b/libs/remix-ui/checkbox/README.md new file mode 100644 index 0000000000..56f9b617b0 --- /dev/null +++ b/libs/remix-ui/checkbox/README.md @@ -0,0 +1,7 @@ +# remix-ui-checkbox + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test remix-ui-checkbox` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/remix-ui/checkbox/src/index.ts b/libs/remix-ui/checkbox/src/index.ts new file mode 100644 index 0000000000..27b694c6bd --- /dev/null +++ b/libs/remix-ui/checkbox/src/index.ts @@ -0,0 +1 @@ +export * from './lib/remix-ui-checkbox' diff --git a/libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.css b/libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx b/libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx new file mode 100644 index 0000000000..5535a05971 --- /dev/null +++ b/libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx @@ -0,0 +1,47 @@ +import React from 'react' //eslint-disable-line +import './remix-ui-checkbox.css' + +/* eslint-disable-next-line */ +export interface RemixUiCheckboxProps { + onClick?: (event) => void + onChange?: (event) => void + label?: string + inputType?: string + name?: string + checked?: boolean + id?: string + itemName?: string + categoryId?: string +} + +export const RemixUiCheckbox = ({ + id, + label, + onClick, + inputType, + name, + checked, + onChange, + itemName, + categoryId +}: RemixUiCheckboxProps) => { + return ( +
+ + +
+ ) +} + +export default RemixUiCheckbox diff --git a/libs/remix-ui/checkbox/tsconfig.json b/libs/remix-ui/checkbox/tsconfig.json new file mode 100644 index 0000000000..6b65264565 --- /dev/null +++ b/libs/remix-ui/checkbox/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "jsx": "react", + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + } + ] +} diff --git a/libs/remix-ui/checkbox/tsconfig.lib.json b/libs/remix-ui/checkbox/tsconfig.lib.json new file mode 100644 index 0000000000..b560bc4dec --- /dev/null +++ b/libs/remix-ui/checkbox/tsconfig.lib.json @@ -0,0 +1,13 @@ +{ + "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"] +} diff --git a/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx b/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx index 336a0fe56a..2a67c82cf8 100644 --- a/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx +++ b/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx @@ -12,11 +12,9 @@ const StaticAnalyserButton = ({ disabled }: StaticAnalyserButtonProps) => { return ( -
- -
+ ) } diff --git a/libs/remix-ui/static-analyser/src/lib/Checkbox/StaticAnalyserCheckedBox.tsx b/libs/remix-ui/static-analyser/src/lib/Checkbox/StaticAnalyserCheckedBox.tsx index 2326a39122..e42caa4851 100644 --- a/libs/remix-ui/static-analyser/src/lib/Checkbox/StaticAnalyserCheckedBox.tsx +++ b/libs/remix-ui/static-analyser/src/lib/Checkbox/StaticAnalyserCheckedBox.tsx @@ -24,7 +24,7 @@ const StaticAnalyserCheckedBox = ({ categoryId }: StaticAnalyserCheckBoxProps) => { return ( -
+
-
) diff --git a/libs/remix-ui/static-analyser/src/lib/ErrorRenderer.tsx b/libs/remix-ui/static-analyser/src/lib/ErrorRenderer.tsx index 878cccb7da..b31a62b9de 100644 --- a/libs/remix-ui/static-analyser/src/lib/ErrorRenderer.tsx +++ b/libs/remix-ui/static-analyser/src/lib/ErrorRenderer.tsx @@ -4,20 +4,12 @@ interface ErrorRendererProps { message: any; opt: any, warningErrors: any + editor: any } -const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => { - const [, setError] = useState( - { - row: null, - column: null, - text: null, - type: null, - errFile: null - } - ) +const ErrorRenderer = ({ message, opt, editor }: ErrorRendererProps) => { const getPositionDetails = (msg: any) => { - const result = { } as any + const result = { } as Record // To handle some compiler warning without location like SPDX license warning etc if (!msg.includes(':')) return { errLine: -1, errCol: -1, errFile: msg } @@ -32,6 +24,12 @@ const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => { result.errFile = position ? position[1] : '' return result } + + const handlePointToErrorOnClick = () => { + const result = opt.locationString.split(':') + editor._components.registry.get('editor').api.gotoLine(parseInt(result[0]) - 1, parseInt(result[1])) + } + if (!message) return let position = getPositionDetails(message) if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) { @@ -43,15 +41,6 @@ const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => { 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 (
@@ -59,7 +48,7 @@ const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
- + {opt.name} { opt.item.warning } {opt.item.more diff --git a/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx b/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx index 2fb460eec9..21acfe376a 100644 --- a/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx +++ b/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx @@ -1,10 +1,11 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState } from 'react' import ReactDOM from 'react-dom' //eslint-disable-line import CheckBox from './Checkbox/StaticAnalyserCheckedBox' // eslint-disable-line import Button from './Button/StaticAnalyserButton' // eslint-disable-line import remixLib from '@remix-project/remix-lib' import _ from 'lodash' import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-line +import { RemixUiCheckbox } from '@remix-ui/checkbox' // eslint-disable-line import ErrorRenderer from './ErrorRenderer' // eslint-disable-line const StaticAnalysisRunner = require('@remix-project/remix-analyzer').CodeAnalysis const utils = remixLib.util @@ -60,12 +61,12 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => { } return indexOfCategory } - + const [autoRun, setAutoRun] = useState(true) const [categoryIndex, setCategoryIndex] = useState(groupedModuleIndex(groupedModules)) const warningContainer = React.useRef(null) const [runButtonState, setRunButtonState] = useState(true) - const [autoRun, setAutoRun] = useState(false) + const [result, setResult] = useState({ lastCompilationResult: null, lastCompilationSource: null, @@ -81,136 +82,129 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => { const [warningState, setWarningState] = useState([]) useEffect(() => { - if (autoRun) { const setCompilationResult = async (data, source, file) => { await setResult({ lastCompilationResult: data, lastCompilationSource: source, currentFile: file }) } - + if (props.analysisModule) { - props.analysisModule.on( 'solidity', 'compilationFinished', (file, source, languageVersion, data) => { if (languageVersion.indexOf('soljson') !== 0) return setCompilationResult(data, source, file) - if(categoryIndex.length > 0){ + if (categoryIndex.length > 0) { run(data, source, file) } - } ) } - } else { - setAutoRun(true) } return () => { } }, [autoRun, categoryIndex]) const run = (lastCompilationResult, lastCompilationSource, currentFile) => { - // const highlightLocation = async (location, fileName) => { - // await props.analysisModule.call('editor', 'discardHighlight') - // await props.analysisModule.call('editor', 'highlight', location, fileName) - // } - setResult({ lastCompilationResult, lastCompilationSource, currentFile }) - if (lastCompilationResult && categoryIndex.length) { - setRunButtonState(false) - let warningCount = 0 - const warningMessage = [] + if (autoRun) { + setResult({ lastCompilationResult, lastCompilationSource, currentFile }) + if (lastCompilationResult && categoryIndex.length > 0) { + setRunButtonState(false) + let warningCount = 0 + const warningMessage = [] - runner.run(lastCompilationResult, categoryIndex, results => { - results.map((result) => { - let moduleName - Object.keys(groupedModules).map(key => { - groupedModules[key].forEach(el => { - if (el.name === result.name) { - moduleName = groupedModules[key][0].categoryDisplayName - } + runner.run(lastCompilationResult, categoryIndex, results => { + results.map((result) => { + let moduleName + Object.keys(groupedModules).map(key => { + groupedModules[key].forEach(el => { + if (el.name === result.name) { + moduleName = groupedModules[key][0].categoryDisplayName + } + }) }) - }) - setModuleNameResult(moduleName) - const warningErrors = [] - result.report.map((item) => { - let location: any = {} - let locationString = 'not available' - let column = 0 - let row = 0 - let fileName = currentFile - if (item.location) { - var split = item.location.split(':') - var file = split[2] - location = { - start: parseInt(split[0]), - length: parseInt(split[1]) + setModuleNameResult(moduleName) + const warningErrors = [] + result.report.map((item) => { + let location: any = {} + let locationString = 'not available' + let column = 0 + let row = 0 + let fileName = currentFile + if (item.location) { + const split = item.location.split(':') + const file = split[2] + location = { + start: parseInt(split[0]), + length: parseInt(split[1]) + } + location = props.analysisModule._deps.offsetToLineColumnConverter.offsetToLineColumn( + location, + parseInt(file), + lastCompilationSource.sources, + lastCompilationResult.sources + ) + row = location.start.line + column = location.start.column + locationString = row + 1 + ':' + column + ':' + fileName = Object.keys(lastCompilationResult.contracts)[file] } - location = props.analysisModule._deps.offsetToLineColumnConverter.offsetToLineColumn( - location, - parseInt(file), - lastCompilationSource.sources, - lastCompilationResult.sources - ) - row = location.start.line - column = location.start.column - locationString = row + 1 + ':' + column + ':' - fileName = Object.keys(lastCompilationResult.contracts)[file] - } - warningCount++ - const msg = ` - - ${result.name} - ${item.warning} - ${item.more - ? `more` - : ' ' + warningCount++ + const msg = ` + + ${result.name} + ${item.warning} + ${item.more + ? `more` + : ' ' + } + Pos: ${locationString} + ` + const options = { + type: 'warning', + useSpan: true, + errFile: fileName, + errLine: row, + errCol: column, + item: item, + name: result.name, + locationString, + more: item.more } - Pos: ${locationString} - ` - const options = { - type: 'warning', - useSpan: true, - errFile: fileName, - errLine: row, - errCol: column, - item: item, - name: result.name, - locationString, - more: item.more - } - warningErrors.push(options) - setWarning({ msg, hasWarning: true, options, warningErrors: warningErrors }) - warningMessage.push({ msg, options, hasWarning: true, warningModuleName: moduleName }) + warningErrors.push(options) + setWarning({ msg, hasWarning: true, options, warningErrors: warningErrors }) + warningMessage.push({ msg, options, hasWarning: true, warningModuleName: moduleName }) + }) }) + const resultArray = [] + warningMessage.map(x => { + resultArray.push(x) + }) + function groupBy (objectArray, property) { + return objectArray.reduce((acc, obj) => { + const key = obj[property] + if (!acc[key]) { + acc[key] = [] + } + // Add object to list for given key's value + acc[key].push(obj) + return acc + }, {}) + } + + const groupedCategory = groupBy(resultArray, 'warningModuleName') + setWarningState(groupedCategory) }) - const resultArray = [] - warningMessage.map(x => { - resultArray.push(x) - }) - function groupBy (objectArray, property) { - return objectArray.reduce((acc, obj) => { - const key = obj[property] - if (!acc[key]) { - acc[key] = [] - } - // Add object to list for given key's value - acc[key].push(obj) - return acc - }, {}) + if (categoryIndex.length > 0) { + props.event.trigger('staticAnaysisWarning', [warningCount]) } - - const groupedCategory = groupBy(resultArray, 'warningModuleName') - setWarningState(groupedCategory) - }) - if(categoryIndex.length > 0){ - props.event.trigger('staticAnaysisWarning', [warningCount]) - } - } else { - setRunButtonState(true) - if (categoryIndex.length) { - warningContainer.current.innerText = 'No compiled AST available' + } else { + setRunButtonState(true) + if (categoryIndex.length) { + warningContainer.current.innerText = 'No compiled AST available' + } + props.event.trigger('staticAnaysisWarning', [-1]) } - props.event.trigger('staticAnaysisWarning', [-1]) } } @@ -223,9 +217,8 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => { }) ) } else { - setCategoryIndex(_.uniq([...categoryIndex])) + setCategoryIndex(_.uniq([...categoryIndex, ...index])) } - } const handleCheckOrUncheckCategory = (category) => { @@ -261,7 +254,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => { const categoryItem = (categoryId, item, i) => { return (
- { } - expand={true} + expand={false} >
- handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} /> + handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} />
{category.map((item, i) => { @@ -314,31 +307,27 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => { } return ( -
+
-
- { - return (value.map(x => { - return x._index.toString() - })) - }).flat().every(el => categoryIndex.includes(el))} - label="Select all" - onClick={() => handleCheckAllModules(groupedModules)} - /> -
-
- -
+ { + return (value.map(x => { + return x._index.toString() + })) + }).flat().every(el => categoryIndex.includes(el))} + label="Select all" + onClick={() => handleCheckAllModules(groupedModules)} + /> +
@@ -368,7 +357,12 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => { <> {element[0]} {element[1].map(x => ( - x.hasWarning ? () : null + x.hasWarning ? ( +
+ +
+ + ) : null ))} ))) diff --git a/nx.json b/nx.json index 802b6fe374..a63c015d64 100644 --- a/nx.json +++ b/nx.json @@ -98,6 +98,9 @@ }, "remix-ui-static-analyser": { "tags": [] + }, + "remix-ui-checkbox": { + "tags": [] } } } diff --git a/package.json b/package.json index 03cd967635..5de719a8cd 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "workspace-schematic": "nx workspace-schematic", "dep-graph": "nx dep-graph", "help": "nx help", - "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer,remix-ui-debugger-ui,remix-ui-workspace", + "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox", "build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd", "test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd", "publish:libs": "npm run build:libs & lerna publish --skip-git & npm run bumpVersion:libs", diff --git a/tsconfig.json b/tsconfig.json index c90ed09031..75db5bc6ff 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -39,7 +39,8 @@ "@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/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"] + "@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"], + "@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"] } }, "exclude": ["node_modules", "tmp"] diff --git a/workspace.json b/workspace.json index 9c734f96a7..5d2bf912c0 100644 --- a/workspace.json +++ b/workspace.json @@ -744,6 +744,22 @@ } } } + }, + "remix-ui-checkbox": { + "root": "libs/remix-ui/checkbox", + "sourceRoot": "libs/remix-ui/checkbox/src", + "projectType": "library", + "schematics": {}, + "architect": { + "lint": { + "builder": "@nrwl/linter:lint", + "options": { + "linter": "eslint", + "tsConfig": ["libs/remix-ui/checkbox/tsconfig.lib.json"], + "exclude": ["**/node_modules/**", "!libs/remix-ui/checkbox/**/*"] + } + } + } } }, "cli": {