Skip to content

Commit 55e2d0b

Browse files
VaguelySeriousVaguelySerious
authored
Extract web UI API client and trace viewer into shared package (#125)
1 parent 297a281 commit 55e2d0b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+615
-279
lines changed

‎.changeset/pre.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@workflow/tsconfig": "4.0.0",
1313
"@workflow/typescript-plugin": "4.0.0",
1414
"@workflow/web": "4.0.0",
15+
"@workflow/web-shared": "4.0.0",
1516
"workflow": "4.0.0",
1617
"@workflow/world": "4.0.0",
1718
"@workflow/world-local": "4.0.0",

‎.changeset/warm-files-attack.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@workflow/web-shared": patch
3+
"@workflow/web": patch
4+
---
5+
6+
Extract reusable web UI code into shared package

‎packages/nitro/src/builders.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,13 @@ export class LocalBuilder extends BaseBuilder {
7171
}
7272

7373
export function getWorkflowDirs(nitro: Nitro) {
74-
return unique([
75-
...(nitro.options.workflow?.dirs ?? []),
76-
join(nitro.options.rootDir, 'workflows'),
77-
...nitro.options.scanDirs.map((dir) => join(dir, 'workflows')),
78-
].map((dir) => resolve(nitro.options.rootDir, dir))).sort();
74+
return unique(
75+
[
76+
...(nitro.options.workflow?.dirs ?? []),
77+
join(nitro.options.rootDir, 'workflows'),
78+
...nitro.options.scanDirs.map((dir) => join(dir, 'workflows')),
79+
].map((dir) => resolve(nitro.options.rootDir, dir))
80+
).sort();
7981
}
8082

8183
function unique<T>(array: T[]): T[] {

‎packages/nitro/src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export interface ModuleOptions {
1+
export interface ModuleOptions {
22
/**
33
* Directories to scan for workflows and steps.
44
*

‎packages/nitro/test/dirs.test.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { describe, expect, test } from 'vitest';
33
import { getWorkflowDirs } from '../src/builders.ts';
44

55
const nitroMock = (dirs: string[]) => {
6-
return ({
7-
options: {
8-
rootDir: '/root',
9-
scanDirs: ['/root/server/'],
10-
workflow: { dirs: dirs },
11-
},
12-
}) as unknown as Nitro;
13-
}
6+
return {
7+
options: {
8+
rootDir: '/root',
9+
scanDirs: ['/root/server/'],
10+
workflow: { dirs: dirs },
11+
},
12+
} as unknown as Nitro;
13+
};
1414

1515
describe('nitro:getWorkflowDirs', () => {
1616
test('default dirs', () => {
@@ -19,7 +19,9 @@ describe('nitro:getWorkflowDirs', () => {
1919
});
2020

2121
test('custom dirs', () => {
22-
const result = getWorkflowDirs(nitroMock(['./relative/dir1', '/custom/dir2']));
22+
const result = getWorkflowDirs(
23+
nitroMock(['./relative/dir1', '/custom/dir2'])
24+
);
2325
expect(result).toEqual([
2426
'/custom/dir2',
2527
'/root/relative/dir1',

‎packages/web-shared/.gitignore‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts
42+
.env*.local

‎packages/web-shared/LICENSE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../LICENSE.md

‎packages/web-shared/README.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# @workflow/web-shared
2+
3+
Workflow Observability tools for NextJS. See [Workflow DevKit](https://useworkflow.dev/docs/observability) for more information.
4+
5+
## Usage
6+
7+
This package contains client and server code to interact with the Workflow API.
8+
You can use it like so to display your own runs list:
9+
10+
```tsx
11+
import { useWorkflowRuns } from '@workflow/web-shared';
12+
13+
export default function MyRunsList() {
14+
const {
15+
data,
16+
error,
17+
nextPage,
18+
previousPage,
19+
hasNextPage,
20+
hasPreviousPage,
21+
reload,
22+
pageInfo,
23+
} = useWorkflowRuns(env, {
24+
sortOrder,
25+
workflowName: workflowNameFilter === 'all' ? undefined : workflowNameFilter,
26+
status: status === 'all' ? undefined : status,
27+
});
28+
29+
// Shows an interactive trace viewer for the given run
30+
return <div>{runs.map((run) => (
31+
<div key={run.runId}>
32+
{run.workflowName}
33+
{run.status}
34+
{run.startedAt}
35+
{run.completedAt}
36+
</div>
37+
))}</div>;
38+
}
39+
```
40+
41+
It also comes with a pre-styled interactive trace viewer that you can use to display the trace for a given run:
42+
43+
```tsx
44+
import { RunTraceView } from '@workflow/web-shared';
45+
46+
export default function MyRunDetailView({ env, runId }: { env: EnvMap, runId: string }) {
47+
// ... your other code
48+
49+
// Shows an interactive trace viewer for the given run
50+
return <RunTraceView env={env} runId={runId} />;
51+
}
52+
```
53+
54+
## Environment Variables
55+
56+
For API calls to work, you'll need to pass the same environment variables that are used by the Workflow CLI.
57+
See `npx workflow inspect --help` for more information.
58+
59+
If you're deploying this as part of your Vercel NextJS app, setting `WORKFLOW_TARGET_WORLD` to `vercel` is enough
60+
to infer your other project details from the Vercel environment variables.
61+
62+
## Styling
63+
64+
In order for tailwind classes to be picked up correctly, you might need to configure your NextJS app
65+
to use the correct CSS processor. E.g. if you're using PostCSS with TailwindCSS, you can do the following:
66+
67+
```tsx
68+
// postcss.config.mjs in your NextJS app
69+
const config = {
70+
plugins: ['@tailwindcss/postcss'],
71+
};
72+
73+
export default config;
74+
```

‎packages/web-shared/package.json‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "@workflow/web-shared",
3+
"description": "Shared components for Workflow Observability UI",
4+
"version": "4.0.1-beta.4",
5+
"private": false,
6+
"files": [
7+
"dist"
8+
],
9+
"publishConfig": {
10+
"access": "public"
11+
},
12+
"license": "MIT",
13+
"exports": {
14+
".": {
15+
"types": "./dist/index.d.ts",
16+
"default": "./dist/index.js"
17+
},
18+
"./server": {
19+
"types": "./dist/api/workflow-server-actions.d.ts",
20+
"default": "./dist/api/workflow-server-actions.js"
21+
}
22+
},
23+
"repository": {
24+
"type": "git",
25+
"url": "https://github.com/vercel/workflow.git",
26+
"directory": "packages/web-shared"
27+
},
28+
"scripts": {
29+
"build": "tsc && cp -r src/trace-viewer/*.css dist/trace-viewer/",
30+
"dev": "tsc --watch",
31+
"clean": "tsc --build --clean && rm -r dist ||:",
32+
"typecheck": "tsc --noEmit",
33+
"lint": "biome check",
34+
"format": "biome format --write"
35+
},
36+
"dependencies": {
37+
"@tailwindcss/postcss": "^4",
38+
"@workflow/core": "workspace:*",
39+
"@workflow/world": "workspace:*",
40+
"class-variance-authority": "^0.7.1",
41+
"clsx": "^2.1.1",
42+
"date-fns": "^4.1.0",
43+
"lucide-react": "^0.469.0",
44+
"react": "19.1.0",
45+
"react-dom": "19.1.0",
46+
"sonner": "^2.0.7",
47+
"swr": "^2.3.6",
48+
"tailwind-merge": "^2.5.5",
49+
"tailwindcss": "^4"
50+
},
51+
"devDependencies": {
52+
"@biomejs/biome": "catalog:",
53+
"@types/node": "catalog:",
54+
"@types/react": "^19",
55+
"@types/react-dom": "^19",
56+
"typescript": "catalog:",
57+
"@workflow/tsconfig": "workspace:*"
58+
}
59+
}

‎packages/web-shared/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const config = {
2+
plugins: ['@tailwindcss/postcss'],
3+
};
4+
5+
export default config;

0 commit comments

Comments
 (0)