From 3b4c1e9236bc52b2fb91d170c1c2575df5f1d939 Mon Sep 17 00:00:00 2001
From: Teo Koon Peng <teokoonpeng@gmail.com>
Date: Thu, 5 Sep 2024 02:36:44 +0000
Subject: [PATCH] simplify getting started setup

Signed-off-by: Teo Koon Peng <teokoonpeng@gmail.com>
---
 .../docs/getting-started.md                   | 31 ++++++++++---------
 .../src/components/rmf-dashboard.tsx          |  2 --
 .../src/micro-apps/index.tsx                  |  4 +--
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/rmf-dashboard-framework/docs/getting-started.md b/packages/rmf-dashboard-framework/docs/getting-started.md
index 5ef1c1cb8..9fbd4a3d0 100644
--- a/packages/rmf-dashboard-framework/docs/getting-started.md
+++ b/packages/rmf-dashboard-framework/docs/getting-started.md
@@ -5,8 +5,9 @@ Welcome to RMF Dashboard Framework! This tutorial will guide you through the ini
 ### Setup
 
 Prerequisites:
-* pnpm
-* Latest Nodejs LTS
+
+- pnpm
+- Latest Nodejs LTS
 
 Follow https://pnpm.io/installation to install pnpm, you can then install nodejs using pnpm
 
@@ -16,32 +17,29 @@ pnpm env use --global lts
 
 Clone this repo and install deps
 
+<!-- TODO(koonpeng): install from npmjs after package is published. -->
+
 ```bash
 pnpm create vite -t react-ts basic-dashboard
 cd basic-dashboard
-# TODO(koonpeng): install from npmjs after package is published.
 git clone --depth 1 https://github.com/open-rmf/rmf-web
 ```
 
 <!-- TODO(koonpeng): not needed after package is published -->
-Add modify the following to resolve `rmf-dashboard-framework` as if it is installed from npmjs.
 
-pnpm-workspace.yaml (create if not exist)
-```yaml
-packages:
-  - "."
-  - "rmf-web/**/*"
-```
+Modify the following to resolve `rmf-dashboard-framework` as if it is installed from npmjs.
 
 package.json
+
 ```
 "dependencies": {
   ...
-  "rmf-dashboard-framework": "workspace:*"
+  "rmf-dashboard-framework": "rmf-web/packages/rmf-dashboard-framework"
 }
 ```
 
 tsconfig.app.json
+
 ```
 "paths": {
   "rmf-dashboard-framework/*": ["./node_modules/rmf-dashboard-framework/src/*"]
@@ -51,9 +49,13 @@ tsconfig.app.json
 Finally install and build the deps
 
 ```bash
-# TODO(koonpeng): -w flag not needed after rmf-dashboard-framework is published
-pnpm install --filter basic-dashboard...
-pnpm --filter basic-dashboard^... build
+# install and build rmf-dashboard-framework
+cd rmf-web
+pnpm install --filter=rmf-dashboard-framework...
+pnpm --filter=rmf-dashboard-framework^... build
+# install basic-dashboard deps
+cd ..
+pnpm install
 ```
 
 ### Creating a Basic Dashboard
@@ -69,6 +71,7 @@ pnpm add -w @fontsource/roboto
 Before starting the dev server, we need a rmf api server backend for the frontend to connect to. If you are targeting an existing deployment, change the `apiServerUrl` prop to connect to the correct url. If you do not have an existing server, you can start a local server with docker.
 
 <!-- FIXME(koonpeng): ROS_DOMAIN_ID and RMW_IMPLEMENTATION will be confusing to people not familiar with ROS. Also we can't really set the RMW_IMPLEMENTATION if the image does not have it installed. -->
+
 ```bash
 docker run \
   --network host -it --rm \
diff --git a/packages/rmf-dashboard-framework/src/components/rmf-dashboard.tsx b/packages/rmf-dashboard-framework/src/components/rmf-dashboard.tsx
index 974b88d3f..84fa896c4 100644
--- a/packages/rmf-dashboard-framework/src/components/rmf-dashboard.tsx
+++ b/packages/rmf-dashboard-framework/src/components/rmf-dashboard.tsx
@@ -32,8 +32,6 @@ import { DashboardThemes } from './theme';
 
 const DefaultAlertDuration = 2000;
 
-export interface DashboardHome {}
-
 export interface DashboardTab {
   name: string;
   route: string;
diff --git a/packages/rmf-dashboard-framework/src/micro-apps/index.tsx b/packages/rmf-dashboard-framework/src/micro-apps/index.tsx
index 2ab25e8a1..b698c87f7 100644
--- a/packages/rmf-dashboard-framework/src/micro-apps/index.tsx
+++ b/packages/rmf-dashboard-framework/src/micro-apps/index.tsx
@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
-import { useAppController } from 'rmf-dashboard-framework/hooks/use-app-controller';
 
 import { Window, WindowProps } from '../components/window';
+import { useAppController } from '../hooks/use-app-controller';
 import { useSettings } from '../hooks/use-settings';
 import { Settings } from '../services/settings';
 
@@ -15,7 +15,7 @@ export interface MicroAppManifest {
 
 /**
  * Creates a micro app from a component. The component must be loaded using dynamic import.
- * Note that the map should be created in a different module than the component.
+ * Note that the micro app should be created in a different module than the component.
  *
  * Example:
  * ```ts