mirror of
https://github.com/vercel/workflow.git
synced 2026-09-14 19:59:43 +08:00
Nathan Rajlich
173756dc4d
* [docs] Rename workflowdevkit references to workflowsdk * [docs] Rename useworkflow.dev to workflow-sdk.dev * [chore] Add changeset for domain rename * [docs] Revert sitemap rewrite to useworkflow.dev (crawled-sitemap not yet available for new domain)
57 lines
1.7 KiB
Markdown
57 lines
1.7 KiB
Markdown
# @workflow/web-shared
|
|
|
|
Workflow Observability UI primitives. See [Workflow SDK](https://workflow-sdk.dev/docs/observability) for more information.
|
|
|
|
## Usage
|
|
|
|
This package contains:
|
|
- pre-styled, prop-driven UI components (no data fetching)
|
|
|
|
If you want a full observability experience with server actions already wired, take a look at
|
|
[`@workflow/web`](../web/README.md) instead.
|
|
|
|
It comes with pre-styled UI components that accept data + callbacks:
|
|
|
|
```tsx
|
|
import { WorkflowTraceViewer } from '@workflow/web-shared';
|
|
|
|
export default function MyRunDetailView({
|
|
run,
|
|
steps,
|
|
hooks,
|
|
events,
|
|
onSpanSelect,
|
|
}) {
|
|
return (
|
|
<WorkflowTraceViewer
|
|
run={run}
|
|
steps={steps}
|
|
hooks={hooks}
|
|
events={events}
|
|
onSpanSelect={onSpanSelect}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
Server actions and data fetching are intentionally **not** part of `web-shared`. Implement those in your app
|
|
and pass data + callbacks into these components. If you need world run helpers, use `@workflow/core/runtime`.
|
|
|
|
> **Security notice:** If you implement server-side data fetching using `@workflow/world-vercel` or similar backends,
|
|
> ensure that user-supplied IDs (runId, stepId, etc.) are validated before passing them to world functions.
|
|
> The server actions in `@workflow/web` do not include authentication — see that package's README for details on securing self-hosted deployments.
|
|
|
|
## Styling
|
|
|
|
In order for tailwind classes to be picked up correctly, you might need to configure your NextJS app
|
|
to use the correct CSS processor. E.g. if you're using PostCSS with TailwindCSS, you can do the following:
|
|
|
|
```tsx
|
|
// postcss.config.mjs in your NextJS app
|
|
const config = {
|
|
plugins: ['@tailwindcss/postcss'],
|
|
};
|
|
|
|
export default config;
|
|
```
|