move workspace to a react component

apps/remix-ide/src/app.js

@@ -486,6 +486,5 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   migrateToWorkspace(fileManager)
 
-  filePanel.initWorkspace()
   if (params.embed) framingService.embed()
 }

apps/remix-ide/src/app/panels/styles/file-panel-styles.js

-var csjs = require('csjs-inject')
-
-var css = csjs`
-  .container {
-    display           : flex;
-    flex-direction    : row;
-    width             : 100%;
-    height            : 100%;
-    box-sizing        : border-box;
-  }
-  .fileexplorer       {
-    display           : flex;
-    flex-direction    : column;
-    position          : relative;
-    width             : 100%;
-    padding-left      : 6px;
-    padding-top       : 6px;
-  }
-  .fileExplorerTree   {
-    cursor            : default;
-  }
-  .gist            {
-    padding           : 10px;
-  }
-  .gist i          {
-    cursor            : pointer;
-  }
-  .gist i:hover    {
-    color             : orange;
-  }
-  .connectToLocalhost {
-    padding           : 10px;
-  }
-  .connectToLocalhost i {
-    cursor            : pointer;
-  }
-  .connectToLocalhost i:hover   {
-    color             : var(--secondary)
-  }
-  .uploadFile         {
-    padding           : 10px;
-  }
-  .uploadFile label:hover   {
-    color             : var(--secondary)
-  }
-  .uploadFile label   {
-    cursor            : pointer;
-  }
-  .treeview {
-    overflow-y        : auto;
-  }  
-  .dialog {
-    display: flex;
-    flex-direction: column;
-  }
-  .dialogParagraph {
-    margin-bottom: 2em;
-    word-break: break-word;
-  }
-`
-
-module.exports = css

libs/remix-ui/workspace/.babelrc

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

libs/remix-ui/workspace/.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/workspace/README.md

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

libs/remix-ui/workspace/src/index.ts

+export * from './lib/remix-ui-workspace';

apps/remix-ide/src/app/panels/styles/file-panel-styles.css → libs/remix-ui/workspace/src/lib/remix-ui-workspace.css

 .remixui_container {
-  display           : flex;
-  flex-direction    : row;
-  width             : 100%;
-  height            : 100%;
-  box-sizing        : border-box;
-}
-.remixui_fileexplorer       {
-  display           : flex;
-  flex-direction    : column;
-  position          : relative;
-  width             : 100%;
-  padding-left      : 6px;
-  padding-top       : 6px;
-}
-.remixui_fileExplorerTree   {
-  cursor            : default;
-}
-.remixui_gist            {
-  padding           : 10px;
-}
-.remixui_gist i          {
-  cursor            : pointer;
-}
-.remixui_gist i:hover    {
-  color             : orange;
-}
-.remixui_connectToLocalhost {
-  padding           : 10px;
-}
-.remixui_connectToLocalhost i {
-  cursor            : pointer;
-}
-.remixui_connectToLocalhost i:hover   {
-  color             : var(--secondary)
-}
-.remixui_uploadFile         {
-  padding           : 10px;
-}
-.remixui_uploadFile label:hover   {
-  color             : var(--secondary)
-}
-.remixui_uploadFile label   {
-  cursor            : pointer;
-}
-.remixui_treeview {
-  overflow-y        : auto;
-}  
-.remixui_dialog {
-  display: flex;
-  flex-direction: column;
-}
-.remixui_dialogParagraph {
-  margin-bottom: 2em;
-  word-break: break-word;
-}
-.remixui_menuicon {
-  padding-right   : 10px;
-}
+    display           : flex;
+    flex-direction    : row;
+    width             : 100%;
+    height            : 100%;
+    box-sizing        : border-box;
+  }
+  .remixui_fileexplorer       {
+    display           : flex;
+    flex-direction    : column;
+    position          : relative;
+    width             : 100%;
+    padding-left      : 6px;
+    padding-top       : 6px;
+  }
+  .remixui_fileExplorerTree   {
+    cursor            : default;
+  }
+  .remixui_gist            {
+    padding           : 10px;
+  }
+  .remixui_gist i          {
+    cursor            : pointer;
+  }
+  .remixui_gist i:hover    {
+    color             : orange;
+  }
+  .remixui_connectToLocalhost {
+    padding           : 10px;
+  }
+  .remixui_connectToLocalhost i {
+    cursor            : pointer;
+  }
+  .remixui_connectToLocalhost i:hover   {
+    color             : var(--secondary)
+  }
+  .remixui_uploadFile         {
+    padding           : 10px;
+  }
+  .remixui_uploadFile label:hover   {
+    color             : var(--secondary)
+  }
+  .remixui_uploadFile label   {
+    cursor            : pointer;
+  }
+  .remixui_treeview {
+    overflow-y        : auto;
+  }  
+  .remixui_dialog {
+    display: flex;
+    flex-direction: column;
+  }
+  .remixui_dialogParagraph {
+    margin-bottom: 2em;
+    word-break: break-word;
+  }
+  .remixui_menuicon {
+    padding-right   : 10px;
+  }
+  
\ No newline at end of file

libs/remix-ui/workspace/tsconfig.json

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

libs/remix-ui/workspace/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

@@ -92,6 +92,9 @@
     },
     "debugger": {
       "tags": []
+    },
+    "remix-ui-workspace": {
+      "tags": []
     }
   }
 }

tsconfig.json

@@ -20,7 +20,9 @@
       "@remix-project/remix-astwalker": ["dist/libs/remix-astwalker/index.js"],
       "@remix-project/remix-debug": ["dist/libs/remix-debug/src/index.js"],
       "@remix-project/remix-lib": ["dist/libs/remix-lib/src/index.js"],
-      "@remix-project/remix-simulator": ["dist/libs/remix-simulator/src/index.js"],
+      "@remix-project/remix-simulator": [
+        "dist/libs/remix-simulator/src/index.js"
+      ],
       "@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"],
       "@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"],
       "@remix-project/remix-url-resolver": [
@@ -35,7 +37,8 @@
       "@remix-project/remix-solidity-ts": ["libs/remix-solidity/src/index.ts"],
       "@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/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"],
+      "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -347,7 +347,11 @@
             "linter": "eslint",
             "config": "libs/remix-tests/.eslintrc",
             "tsConfig": ["libs/remix-tests/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "libs/remix-tests/tests/**/*", "**/dist/**"]
+            "exclude": [
+              "**/node_modules/**",
+              "libs/remix-tests/tests/**/*",
+              "**/dist/**"
+            ]
           }
         },
         "test": {
@@ -705,6 +709,22 @@
           }
         }
       }
+    },
+    "remix-ui-workspace": {
+      "root": "libs/remix-ui/workspace",
+      "sourceRoot": "libs/remix-ui/workspace/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/workspace/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/workspace/**/*"]
+          }
+        }
+      }
     }
   },
   "cli": {