Merge pull request #31 from temporalio/ui-updates

UI Updates

Author: Alex-Tideman

README.md

@@ -1,38 +1,38 @@
 # OMS Web Application
 
-This repository contains a web application that enables one to interact with the Order 
-Management System (OMS) reference application. Code for the OMS is maintained in the 
+This repository contains a web application that enables one to interact with the Order
+Management System (OMS) reference application. Code for the OMS is maintained in the
 [reference-app-orders-go](https://github.com/temporalio/reference-app-orders-go)
-repository. Since this web application depends on services provided by the OMS, you will 
-need code from both repositories to run it. 
+repository. Since this web application depends on services provided by the OMS, you will
+need code from both repositories to run it.
 
-The steps below minimally cover how to run and build the web application. See the 
-[other repository](https://github.com/temporalio/reference-app-orders-go) 
-for detailed instructions on running and using the Order Management System. 
+The steps below minimally cover how to run and build the web application. See the
+[other repository](https://github.com/temporalio/reference-app-orders-go)
+for detailed instructions on running and using the Order Management System.
 
+Uses Svelte5 and Tailwind4
 
 ## Running the Web Application Locally
 
-After you start the API servers and one or more Workers, as [described in the 
-OMS instructions](https://github.com/temporalio/reference-app-orders-go?tab=readme-ov-file#quickstart), 
+After you start the API servers and one or more Workers, as [described in the
+OMS instructions](https://github.com/temporalio/reference-app-orders-go?tab=readme-ov-file#quickstart),
 run the following [`pnpm`](https://pnpm.io/) commands from the root directory of this project:
 
 ```bash
 pnpm i
 pnpm dev
 ```
 
-This starts a local server. You can navigate to http://127.0.0.1:5173/ to view the web application. 
-
-NOTE: As a workaround for deployment to [GitPod](https://gitpod.io/), in which the domain of each application 
-container is assigned dynamically, this application [disables the CSRF origin check](https://github.com/temporalio/reference-app-orders-web/blob/5a1044ddae5a5f110263b9c464f576384d533036/svelte.config.js#L10-L12). [Pull request #6](https://github.com/temporalio/reference-app-orders-web/pull/6) describes this in more detail, and we recommend reinstating this origin check for improved security in a 
-real-world deployment. 
+This starts a local server. You can navigate to http://127.0.0.1:5173/ to view the web application.
 
+NOTE: As a workaround for deployment to [GitPod](https://gitpod.io/), in which the domain of each application
+container is assigned dynamically, this application [disables the CSRF origin check](https://github.com/temporalio/reference-app-orders-web/blob/5a1044ddae5a5f110263b9c464f576384d533036/svelte.config.js#L10-L12). [Pull request #6](https://github.com/temporalio/reference-app-orders-web/pull/6) describes this in more detail, and we recommend reinstating this origin check for improved security in a
+real-world deployment.
 
 ## Building the Web Application
 
 Run `pnpm build` to create a production version of your app. You can then preview the production build by
 running `pnpm preview`.
 
-The [`.github/workflows/docker-publish.yml`](https://github.com/temporalio/reference-app-orders-web/blob/main/.github/workflows/docker-publish.yml) 
-file automates the creation and publication of Docker images in response to code changes. 
+The [`.github/workflows/docker-publish.yml`](https://github.com/temporalio/reference-app-orders-web/blob/main/.github/workflows/docker-publish.yml)
+file automates the creation and publication of Docker images in response to code changes.

package.json

@@ -11,6 +11,7 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@tailwindcss/postcss": "^4.1.4",
 		"@types/eslint": "^8.56.0",
 		"@typescript-eslint/eslint-plugin": "^7.0.0",
 		"@typescript-eslint/parser": "^7.0.0",
@@ -22,7 +23,6 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte-check": "^3.6.0",
-		"tailwindcss": "^3.4.10",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.2"
 	},
@@ -32,10 +32,11 @@
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-node": "^5.0.1",
 		"@sveltejs/kit": "^2.20.6",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+		"@tailwindcss/vite": "^4.1.4",
 		"chart.js": "^4.4.8",
-		"svelte": "^4.2.19",
-		"svelte-chartjs": "^3.1.5",
+		"svelte": "^5.28.2",
+		"tailwindcss": "^4.1.4",
 		"vite": "^5.4.16"
 	}
 }