Lodestone 0.4.2

README.md

@@ -1,5 +1,4 @@
 [![Lodestone Screen Shot](/public/assets/readmeRender.png)](https://www.lodestone.cc/)
-*Note: design above will launch at a later date.*
 
 [![Contributors][contributors-shield]][contributors-url]
 [![Issues][issues-shield]][issues-url]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lodestone",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",
@@ -21,7 +21,7 @@
     "@headlessui/react": "^1.7.0",
     "@headlessui/tailwindcss": "^0.1.2",
     "@monaco-editor/react": "^4.4.6",
-    "@next/font": "^13.0.0",
+    "@next/font": "^13.1.6",
     "@tanstack/react-query": "^4.13.5",
     "@tanstack/react-virtual": "^3.0.0-beta.32",
     "@tauri-apps/api": "^1.2.0",
@@ -37,13 +37,14 @@
     "minecraft-motd-util": "^1.1.12",
     "monaco-editor": "^0.34.0",
     "msw": "^0.47.4",
-    "msw-storybook-addon": "^1.6.3",
-    "next": "^13.0.0",
+    "msw-storybook-addon": "^1.7.0",
+    "next": "^13.1.6",
     "npm": "^8.19.2",
     "patch-package": "^6.4.7",
     "rc-tooltip": "^5.2.2",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.3.1",
+    "react-circular-progressbar": "^2.1.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
@@ -53,22 +54,22 @@
     "react-spinners": "^0.13.4",
     "react-toastify": "^9.1.1",
     "semver": "^7.3.8",
-    "storybook-addon-next-router": "^4.0.0",
+    "storybook-addon-next-router": "^4.0.2",
     "tailwind-merge": "^1.8.1",
     "usehooks-ts": "^2.6.0",
     "variant": "^3.0.0-dev.24",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/react": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@svgr/webpack": "^6.5.1",
     "@tailwindcss/container-queries": "^0.1.0",
@@ -86,7 +87,7 @@
     "eslint": "^8.22.0",
     "eslint-config-next": "^13.0.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-storybook": "^0.6.4",
+    "eslint-plugin-storybook": "^0.6.10",
     "eslint-plugin-tailwindcss": "^3.8.0",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",

pages/_app.tsx

@@ -8,9 +8,10 @@ import axios from 'axios';
 import NoSSR from 'react-no-ssr';
 import { BrowserRouter } from 'react-router-dom';
 import { BrowserLocationContextProvider } from 'data/BrowserLocationContext';
-import { toast, ToastContainer, Zoom } from 'react-toastify';
+import { ToastContainer, Zoom, IconProps } from 'react-toastify';
 import LoadingStatusIcon from 'components/Atoms/LoadingStatusIcon';
 import ReactGA from 'react-ga4';
+import localFont from '@next/font/local';
 
 config.autoAddCss = false;
 axios.defaults.timeout = 5000;
@@ -25,33 +26,50 @@ const contextClass = {
   success: '!bg-green',
 };
 
+
 function MyApp({ Component, pageProps }: AppProps) {
+  const renderIcon = (props: IconProps) => {
+    // Cannot assign 'Success' to EventLevel, so I guess there won't be a success toast
+    switch (props.type) {
+      case 'error':
+        return <LoadingStatusIcon level={'Error'} bright={true} />;
+      case 'warning':
+        return <LoadingStatusIcon level={'Warning'} bright={true} />;
+      default:
+        return <LoadingStatusIcon level={'Info'} bright={true} />;
+    }
+  }
+
   return (
-    <NoSSR>
-      <ToastContainer
-        toastClassName="!bg-gray-850 cursor-pointer"
-        bodyClassName={() =>
-          'text-medium font-medium tracking-medium font-gray-300 p-1 flex flex-row'
-        }
-        progressClassName={(context) => {
-          const type = context?.type || 'info';
-          return contextClass[type] + ' relative ' + context?.defaultClassName;
-        }}
-        icon={<LoadingStatusIcon level={'Info'} bright={true} />}
-        position={'bottom-right'}
-        closeButton={false}
-        pauseOnFocusLoss={false}
-        draggable={false}
-        pauseOnHover
-        theme="dark"
-        transition={Zoom}
-      />
-      <BrowserRouter>
-        <BrowserLocationContextProvider>
-          <Component {...pageProps} />
-        </BrowserLocationContextProvider>
-      </BrowserRouter>
-    </NoSSR>
+    <main>
+      <NoSSR>
+        <ToastContainer
+          toastClassName="!bg-gray-850 cursor-pointer"
+          bodyClassName={() =>
+            'text-medium font-medium tracking-medium font-gray-300 p-1 flex flex-row'
+          }
+          progressClassName={(context) => {
+            const type = context?.type || 'info';
+            return (
+              contextClass[type] + ' relative ' + context?.defaultClassName
+            );
+          }}
+          icon={renderIcon}
+          position={'bottom-right'}
+          closeButton={false}
+          pauseOnFocusLoss={false}
+          draggable={false}
+          pauseOnHover
+          theme="dark"
+          transition={Zoom}
+        />
+        <BrowserRouter>
+          <BrowserLocationContextProvider>
+            <Component {...pageProps} />
+          </BrowserLocationContextProvider>
+        </BrowserRouter>
+      </NoSSR>
+    </main>
   );
 }
 

pages/_document.tsx

@@ -5,10 +5,6 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
-          <link
-            href="https://api.fontshare.com/v2/css?f[]=chillax@1&f[]=satoshi@1,2&f[]=jet-brains-mono@1,2&f[]=clash-grotesk@1&display=swap"
-            rel="stylesheet"
-          />
         </Head>
 
         <body>

pages/index.tsx

@@ -42,6 +42,7 @@ import { InstanceViewLayout } from 'components/DashboardLayout/InstanceViewLayou
 import { SettingsLayout } from 'components/DashboardLayout/SettingsLayout';
 import { toast } from 'react-toastify';
 import RequireSetup from 'utils/router/RequireSetup';
+import InstanceTabs from 'pages/InstanceTabs/InstanceTabs';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -52,6 +53,15 @@ const queryClient = new QueryClient({
   },
 });
 
+const InstanceTabList = [
+  'overview',
+  'settings',
+  'console',
+  'files',
+  'tasks',
+  'logs',
+];
+
 export default function App() {
   const { location, setSearchParam } = useContext(BrowserLocationContext);
 
@@ -226,7 +236,7 @@ export default function App() {
         >
           <Routes>
             <Route element={<LoginLayout />}>
-              <Route path="/first_setup" element={<FirstTime />}  />
+              <Route path="/first_setup" element={<FirstTime />} />
               <Route
                 path="/login/core/select"
                 element={
@@ -279,7 +289,14 @@ export default function App() {
               }
             >
               <Route element={<InstanceViewLayout />}>
-                <Route path="/dashboard" element={<Dashboard />} />
+                {/* <Route path="/dashboard" element={<Dashboard />} /> */}
+                {InstanceTabList.map((path, i) => (
+                  <Route
+                    path={`/dashboard/${path}`}
+                    element={<InstanceTabs />}
+                    key={i}
+                  />
+                ))}
                 <Route path="/" element={<Home />} />
               </Route>
               <Route element={<SettingsLayout />}>