76 lines
2.8 KiB
Plaintext
76 lines
2.8 KiB
Plaintext
---
|
|
description: Overriding the UI of Steps in Motia
|
|
globs: steps/**/*.step.tsx,steps/**/*.step.jsx,steps/**/*_step.tsx,steps/**/*_step.jsx
|
|
alwaysApply: true
|
|
---
|
|
|
|
# UI Steps Guide for Motia
|
|
|
|
UI Steps provide a powerful way to create custom, visually appealing representations of your workflow steps in the Workbench flow visualization tool.
|
|
|
|
With UI Steps, you can enhance the user experience by designing intuitive, context-aware visual components that clearly communicate your flow's sequencing and events.
|
|
|
|
## Overview
|
|
|
|
To create a custom UI for a step, create a .tsx or .jsx file next to your step file with the same base name:
|
|
|
|
```
|
|
steps/
|
|
└── myStep/
|
|
├── myStep.step.ts # Step definition
|
|
└── myStep.step.tsx # Visual override
|
|
```
|
|
|
|
## Basic Usage
|
|
|
|
Let's override an EventNode but keeping the same look. Like the image below. We're going to add an image on the side and show the description.
|
|
|
|
```typescript
|
|
// myStep.step.tsx
|
|
|
|
import { EventNode, EventNodeProps } from 'motia/workbench'
|
|
import React from 'react'
|
|
|
|
export const Node: React.FC<EventNodeProps> = (props) => {
|
|
return (
|
|
<EventNode {...props}>
|
|
<div className="flex flex-row items-start gap-2">
|
|
<div className="text-sm text-gray-400 font-mono">{props.data.description}</div>
|
|
<img
|
|
style={{ width: '64px', height: '64px' }}
|
|
src="https://www.motia.dev/icon.png"
|
|
/>
|
|
</div>
|
|
</EventNode>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Components
|
|
|
|
Motia Workbench provides out of the box components that you can use to create custom UI steps, which apply to different types of steps.
|
|
|
|
### Available Components
|
|
|
|
| Component | Props Type | Description |
|
|
|-----------|------------|-------------|
|
|
| EventNode | EventNodeProps | Base component for Event Steps, with built-in styling and connection points |
|
|
| ApiNode | ApiNodeProps | Component for API Steps, includes request/response visualization capabilities |
|
|
| CronNode | CronNodeProps | Base component for Cron Steps, displays timing information |
|
|
| NoopNode | NoopNodeProps | Base component for NoopNodes with a different color to comply workbench legend |
|
|
|
|
|
|
## Styling guidelines
|
|
|
|
- Use Tailwind's utility classes only: Stick to Tailwind CSS utilities for consistent styling
|
|
- Avoid arbitrary values: Use predefined scales from the design system
|
|
- Keep components responsive: Ensure UI elements adapt well to different screen sizes
|
|
- Follow Motia's design system: Maintain consistency with Motia's established design patterns
|
|
|
|
## Best practices
|
|
|
|
- Use base components: Use EventNode and ApiNode when possible
|
|
- Keep it simple: Maintain simple and clear visualizations
|
|
- Optimize performance: Minimize state and computations
|
|
- Documentation: Document custom components and patterns
|
|
- Style sharing: Share common styles through utility classes |