Build and extend Team Topologies drag-and-drop shapes for Miro using React, TypeScript, and Miro Web SDK v2. Includes adding new team elements, styling, and shape creation patterns.
Expert guidance for building and extending the Miro Web SDK v2 plugin that provides drag-and-drop Team Topologies shapes. Built with React 18, TypeScript, and Vite.
This is a Miro plugin that allows users to drag Team Topologies shapes (Stream-Aligned Teams, Platform Teams, Enabling Teams, etc.) onto Miro boards with proper styling and interactions.
**Factory Pattern**: All team elements are instantiated through `TeamFactory` (src/team-logic/team-factory.ts)
**Interface Pattern**: Every team element implements `TeamElementInterface`:
```bash
npm install # Install dependencies
npm start # Dev server at localhost:3000
npm run build # Production build
```
**File: team-type.ts**
**File: team-supplementary.ts**
**File: team-interaction.ts**
**File: team-other.ts**
Follow these steps to add a new team element to the plugin:
Add the new team type to `TEAM_ENUM` in `src/team-logic/team-static.ts`
Add SVG icon to:
Choose the appropriate class file (team-type.ts, team-interaction.ts, etc.) and:
1. Add enum to static `TeamEnums` array
2. Add cases to all switch statements:
- `getShape()` - Define the Miro shape type
- `getStyle()` - Define colors, border style, opacity
- `getName()` - Define label text
- `getRotation()` - Define rotation angle
- `getShapeSize()` - Define dimensions
- `getIcon()` - Define icon path
- `getClassName()` - Define CSS class for drag handling
Update `TeamFactory.getTeamElementFromClassList()` to map the CSS class to the new team element.
Add descriptive text in `src/team-text/team-info.ts` for the information panel.
Define colors per-team in the `getStyle()` method using hex codes.
The `miro` object is loaded from CDN (see HTML files). Types come from `@mirohq/websdk-types`.
```typescript
await miro.board.createShape({
shape: 'rectangle',
style: {
fillColor: '#ff0000',
borderColor: '#000000',
borderStyle: 'normal',
fillOpacity: 0.5
},
x: 0,
y: 0,
width: 200,
height: 100,
rotation: 0,
content: 'Label text'
})
```
```typescript
await miro.board.createText({
x: 0,
y: 0,
width: 200,
content: 'Text content',
style: { fontSize: 14 }
})
```
```typescript
await miro.board.group({ items: [shape, text] })
```
```typescript
miro.board.ui.on('drop', async (event) => {
// Handle drop event
})
miro.board.ui.on('icon:click', async () => {
// Handle icon click
})
```
When a shape has rotation, text inside it also rotates. To keep text upright on rotated shapes:
1. Create the shape with empty `content`
2. Create a separate text element at the same position
3. Group the shape and text together using `board.group()`
**Example implementation**: See `createTeamShape()` function in `src/app.tsx`
| File | Purpose |
|------|---------|
| `src/team-logic/team-static.ts` | TEAM_ENUM definitions and interfaces |
| `src/team-logic/team-factory.ts` | Factory pattern implementation |
| `src/team-logic/team-type.ts` | Example team element class |
| `src/app.tsx` | Main React app with drop handling |
| `src/helpers/ShapeTypes.ts` | Miro shape type enum |
| `src/team-text/team-info.ts` | Team descriptions |
```
src/
components/{Name}/index.tsx # React components
team-logic/team-*.ts # Team element classes
team-text/ # Display text content
assets/images/tt/ # Team type icons
assets/images/ti/ # Interaction icons
helpers/ShapeTypes.ts # Miro shape enum
```
1. **Always read existing code first** before making changes
2. **Follow the factory pattern** - all team elements go through TeamFactory
3. **Implement all interface methods** - missing methods will break the plugin
4. **Update type definitions** - Keep `@mirohq/websdk-types` updated for latest API support
5. **Test rotation and grouping** - Ensure text remains readable on rotated shapes
6. **Maintain consistent styling** - Follow border and color conventions for team types vs interactions
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/miro-team-topologies-plugin-development/raw