feat(explorer): add mui, fix nx config

.eslintignore

@@ -0,0 +1 @@
+node_modules

.vscode/settings.json

@@ -10,4 +10,7 @@
   },
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
 }

nx.json

@@ -1,24 +1,25 @@
 {
-  "extends": "@nrwl/workspace/presets/core.json",
-  "npmScope": "dstack-js",
   "affected": {
     "defaultBase": "main"
   },
   "cli": {
     "defaultCollection": "@nrwl/workspace"
   },
+  "extends": "@nrwl/workspace/presets/core.json",
+  "npmScope": "dstack-js",
   "tasksRunnerOptions": {
     "default": {
-      "runner": "@nrwl/nx-cloud",
       "options": {
+        "accessToken": "MjBiYTU3ODktZDVlZC00MmNkLWI2YmQtNmNlNDIwOWY3ZDU1fHJlYWQtd3JpdGU=",
         "cacheableOperations": [
           "build",
           "lint",
           "test",
-          "e2e"
-        ],
-        "accessToken": "MjBiYTU3ODktZDVlZC00MmNkLWI2YmQtNmNlNDIwOWY3ZDU1fHJlYWQtd3JpdGU="
-      }
+          "e2e",
+          "serve"
+        ]
+      },
+      "runner": "@nrwl/nx-cloud"
     }
   }
 }

package.json

@@ -1,20 +1,7 @@
 {
-  "name": "dstack-js",
-  "version": "0.2.30",
-  "license": "GPl-3.0",
-  "scripts": {
-    "prepare": "husky install",
-    "build": "nx run-many --all --target=build",
-    "release": "standard-version --bumpFiles package.json packages/lib/package.json packages/ipfs/package.json packages/relay/package.json"
-  },
-  "private": true,
   "dependencies": {
     "tslib": "^2.0.0"
   },
-  "workspaces": [
-    "packages/*",
-    "docs"
-  ],
   "devDependencies": {
     "@commitlint/cli": "^16.1.0",
     "@commitlint/config-conventional": "^16.0.0",
@@ -48,10 +35,25 @@
     "yaml-crypt": "^0.7.6",
     "zx": "^4.3.0"
   },
+  "license": "GPl-3.0",
   "lint-staged": {
     "*.{js,ts,css,md}": [
       "prettier --write",
       "eslint --cache --fix"
     ]
-  }
+  },
+  "name": "dstack-js",
+  "private": true,
+  "scripts": {
+    "build": "nx run-many --all --target=build",
+    "lint": "nx run-many --all --target=lint",
+    "prepare": "husky install",
+    "release": "standard-version --bumpFiles package.json packages/lib/package.json packages/ipfs/package.json packages/relay/package.json",
+    "serve": "nx run-many --all --target=serve"
+  },
+  "version": "0.2.30",
+  "workspaces": [
+    "packages/*",
+    "docs"
+  ]
 }

packages/explorer/.babelrc

@@ -1,5 +1,6 @@
 {
   "plugins": [
-    "@emotion/babel-plugin"
+    "@emotion/babel-plugin",
+    "babel-plugin-styled-components"
   ]
 }

packages/explorer/.parcelrc

@@ -1,7 +1,6 @@
 {
   "compressors": {
     "*.{html,css,js,svg,map}": [
-      "...",
       "@parcel/compressor-gzip",
       "@parcel/compressor-brotli"
     ]

packages/explorer/package.json

@@ -7,7 +7,9 @@
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "dependencies": {
     "@emotion/react": "^11.7.1",
-    "awesome-react-repl": "^1.0.0",
+    "@emotion/styled": "^11.6.0",
+    "@mui/lab": "^5.0.0-alpha.67",
+    "@mui/material": "^5.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -21,17 +23,16 @@
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "autoprefixer": "^10.4.2",
+    "babel-plugin-styled-components": "^2.0.2",
     "parcel": "^2.2.1",
-    "parcel-resolver-ts-base-url": "^1.1.5",
-    "postcss": "^8.4.5",
-    "tailwindcss": "^3.0.16"
+    "parcel-resolver-ts-base-url": "^1.1.5"
   },
   "license": "GPL-3.0",
   "name": "@dstack-js/explorer",
   "private": true,
   "repository": "https://github.com/dstack-js/dstack.git",
   "scripts": {
-    "build": "parcel build",
+    "build": "parcel build src/index.html --experimental-scope-hoisting",
     "serve": "parcel"
   },
   "source": "src/index.html",

packages/explorer/project.json

@@ -1,31 +1,49 @@
 {
+  "implicitDependencies": [
+    "lib",
+    "ipfs"
+  ],
   "projectType": "application",
   "root": "packages/explorer",
-  "serve": {
-    "executor": "@nrwl/workspace:run-commands",
-    "options": {
-      "commands": [
-        "nx build lib",
-        "nx build ipfs",
-        "cd packages/explorer && yarn serve"
-      ],
-      "cwd": "/"
-    }
-  },
   "sourceRoot": "packages/explorer/src",
   "tags": [],
   "targets": {
-    "executor": "@nrwl/workspace:run-commands",
-    "options": {
-      "commands": [
-        "nx build lib",
-        "nx build ipfs",
-        "yarn build"
+    "build": {
+      "dependsOn": [
+        {
+          "projects": "dependencies",
+          "target": "build"
+        }
       ],
-      "cwd": "/"
+      "executor": "@nrwl/workspace:run-commands",
+      "options": {
+        "commands": [
+          "yarn build"
+        ],
+        "cwd": "packages/explorer"
+      },
+      "outputs": [
+        "packages/explorer/dist",
+        ".parcel-cache"
+      ]
     },
-    "outputs": [
-      "packages/explorer/dist"
-    ]
+    "serve": {
+      "dependsOn": [
+        {
+          "projects": "dependencies",
+          "target": "build"
+        }
+      ],
+      "executor": "@nrwl/workspace:run-commands",
+      "options": {
+        "commands": [
+          "yarn serve"
+        ],
+        "cwd": "packages/explorer"
+      },
+      "outputs": [
+        ".parcel-cache"
+      ]
+    }
   }
 }

packages/explorer/src/app.tsx

@@ -1,15 +1,18 @@
 import { create } from '@dstack-js/ipfs';
 import { Stack, Shard, ShardKind } from '@dstack-js/lib';
+import Box from '@mui/material/Box';
+import LoadingButton from '@mui/lab/LoadingButton';
+import TextField from '@mui/material/TextField';
 import React, { useState } from 'react';
 import { Dashboard } from './dashboard';
 
 export const App: React.FunctionComponent<{}> = () => {
   const [stack, setStack] = useState<Stack | null>(null);
-  const [fillInfo, setFillInfo] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [namespace, setNamespace] = useState('dstack');
 
   const init = async (): Promise<void> => {
-    setFillInfo(false);
+    setLoading(true);
     localStorage.setItem('debug', '*');
 
     const ipfs = await create();
@@ -22,21 +25,32 @@ export const App: React.FunctionComponent<{}> = () => {
     // @ts-expect-error
     window.ShardKind = ShardKind;
 
+    setLoading(false);
     setStack(stack);
   };
 
-  if (fillInfo) {
+  if (!stack) {
     return (
-      <div>
-        <input
-          type="text"
-          value={namespace}
+      <Box
+        component="form"
+        sx={{
+          '& > :not(style)': { m: 1, width: '25ch' },
+        }}
+        noValidate
+        autoComplete="off"
+      >
+        <TextField
+          label="Stack namespace"
           onChange={(e) => setNamespace(e.target.value)}
-        ></input>
-        <button onClick={init}>Start</button>
-      </div>
+          value={namespace}
+          focused
+        />
+        <LoadingButton loading={loading} onClick={init}>
+          Create
+        </LoadingButton>
+      </Box>
     );
   }
 
-  return stack ? <Dashboard stack={stack} /> : <h3>Initializing</h3>;
+  return <Dashboard stack={stack} />;
 };

packages/explorer/src/index.html

@@ -5,6 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Explorer</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
   </head>
   <body>
     <div id="root"></div>

packages/lib/project.json

@@ -1,33 +1,43 @@
 {
+  "projectType": "library",
   "root": "packages/lib",
   "sourceRoot": "packages/lib/src",
-  "projectType": "library",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@nrwl/js:tsc",
-      "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/packages/lib",
+        "assets": [
+          "packages/lib/*.md"
+        ],
         "main": "packages/lib/src/index.ts",
-        "tsConfig": "packages/lib/tsconfig.lib.json",
-        "assets": ["packages/lib/*.md"]
-      }
+        "outputPath": "dist/packages/lib",
+        "tsConfig": "packages/lib/tsconfig.lib.json"
+      },
+      "outputs": [
+        "{options.outputPath}"
+      ]
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["packages/lib/**/*.ts"]
-      }
+        "lintFilePatterns": [
+          "packages/lib/**/*.ts"
+        ]
+      },
+      "outputs": [
+        "{options.outputFile}"
+      ]
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/packages/lib"],
       "options": {
         "jestConfig": "packages/lib/jest.config.js",
         "passWithNoTests": true
-      }
+      },
+      "outputs": [
+        "coverage/packages/lib"
+      ]
     }
-  },
-  "tags": []
+  }
 }