MockRoadmap

Timeline de roadmap com iniciativas laterais e barras de progresso. Estilo Linear.

Visão Geral

O MockRoadmap simula uma visualização de roadmap com timeline mensal e barras de progresso para cada item. Sidebar lateral mostra iniciativas com contadores.

Importação

import {
  MockRoadmap,
  demoInitiatives,
  demoRoadmapItems
} from '@/components/linear/mock-roadmap'

Props

Prop	Tipo	Default	Descrição
`initiatives`	`Initiative[]`	—	Lista de iniciativas
`items`	`RoadmapItem[]`	—	Items na timeline
`months`	`string[]`	`['MAR', 'ABR', ...]`	Meses da timeline
`className`	`string`	—	Classes adicionais

Initiative

interface Initiative {
  id: string;
  name: string;
  icon: React.ReactNode;
  count: number;
  color?: string;
}

RoadmapItem

interface RoadmapItem {
  id: string;
  name: string;
  initiativeId: string;    // Referência à iniciativa
  startMonth: number;      // 0-indexed
  endMonth: number;        // 0-indexed
  progress: number;        // 0-100
  status?: 'on-track' | 'at-risk' | 'completed';
}

Uso Básico

<MockRoadmap
  initiatives={demoInitiatives}
  items={demoRoadmapItems}
  className="h-80"
/>

Dados de Demo

Iniciativas

export const demoInitiatives: Initiative[] = [
  {
    id: 'recebimento',
    name: 'Conferência Digital',
    count: 24,
    icon: <SquareIcon className="size-4" />,
  },
  {
    id: 'compras',
    name: 'Pedido Automático',
    count: 18,
    icon: <CircleIcon className="size-4" />,
  },
  // ...
]

Items

export const demoRoadmapItems: RoadmapItem[] = [
  {
    id: '1',
    name: 'App conferência + bloqueio canhoto',
    initiativeId: 'recebimento',
    startMonth: 0,
    endMonth: 2,
    progress: 90,
  },
  {
    id: '2',
    name: 'Sugestão de pedido por velocidade',
    initiativeId: 'compras',
    startMonth: 1,
    endMonth: 4,
    progress: 60,
  },
  // ...
]

Features Visuais

Lista de iniciativas
Ícone customizável
Contador de items
Hover state

Timeline

Meses como colunas
Grid lines verticais
Barras com gradiente primary
Marcador de progresso (círculo)

Barras de Progresso

Background muted com borda
Fill com gradiente primary
Label com ícone e nome
Posição e largura calculadas automaticamente

Customização de Meses

<MockRoadmap
  initiatives={initiatives}
  items={items}
  months={['Q1', 'Q2', 'Q3', 'Q4']}  // Trimestres
/>

Exemplo Customizado

import { MockRoadmap } from '@/components/linear/mock-roadmap'

const initiatives = [
  {
    id: 'backend',
    name: 'Backend',
    count: 5,
    icon: <ServerIcon className="size-4" />,
  },
  {
    id: 'frontend',
    name: 'Frontend',
    count: 8,
    icon: <LayoutIcon className="size-4" />,
  },
]

const items = [
  {
    id: '1',
    name: 'API v2',
    initiativeId: 'backend',
    startMonth: 0,
    endMonth: 2,
    progress: 75,
  },
  {
    id: '2',
    name: 'Novo dashboard',
    initiativeId: 'frontend',
    startMonth: 1,
    endMonth: 3,
    progress: 40,
  },
]

export function Demo() {
  return (
    <MockRoadmap
      initiatives={initiatives}
      items={items}
      months={['JAN', 'FEV', 'MAR', 'ABR']}
    />
  )
}

Responsividade

Mobile: Sidebar oculta, apenas timeline
Desktop (md+): Sidebar de 224px + timeline

Com BentoCard

<BentoCard
  title="Roadmap de Produto"
  description="Acompanhe o progresso das iniciativas"
  colSpan={3}
>
  <MockRoadmap
    initiatives={demoInitiatives}
    items={demoRoadmapItems}
  />
</BentoCard>