Primitivedata-display

Roadmap Calendar

Stable

Grade mensal de features — um roadmap, um calendário de lançamentos —, cada uma desenhada no dia em que termina, com seletores de mês e ano e setas de navegação. É para ler, não para escolher data. Preserva a API do Kibo. Traduz como o React DayPicker 10: `locale` nomeia meses, dias da semana e cada dia via Intl, e `labels` traz as strings fixas, só as que mudam.

Instalação

npx up-web-ds add roadmap-calendar

Gera check, chevron-left, chevron-right, chevrons-up-down para a biblioteca de ícones do projeto (components.json → iconLibrary).

Preview

Basic

Tokens de cor

Tree acessível

Calendário em pt-BR

CLI de consumo

Documentação derivada

Busy Day

Tokens de cor

Tree acessível

Deck no teclado

Status com tokens

+2 outros

Documentação derivada

Monday First

Tokens de cor

Tree acessível

Calendário em pt-BR

CLI de consumo

Documentação derivada

English

Tokens de cor

Tree acessível

Calendário em pt-BR

CLI de consumo

Documentação derivada

All states

Basic

Tokens de cor

Tree acessível

Calendário em pt-BR

CLI de consumo

Documentação derivada

Busy Day

Tokens de cor

Tree acessível

Deck no teclado

Status com tokens

+2 outros

Documentação derivada

Monday First

Tokens de cor

Tree acessível

Calendário em pt-BR

CLI de consumo

Documentação derivada

English

Tokens de cor

Tree acessível

Calendário em pt-BR

CLI de consumo

Documentação derivada

Usage

@/components/ui/roadmap-calendar

import {
  RoadmapCalendarBody,
  RoadmapCalendarDate,
  RoadmapCalendarDatePagination,
  RoadmapCalendarDatePicker,
  RoadmapCalendarHeader,
  RoadmapCalendarMonthPicker,
  RoadmapCalendarProvider,
  RoadmapCalendarYearPicker,
} from '@/components/ui/roadmap-calendar'

Roadmap Calendar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<RoadmapCalendarProvider
  className="w-full max-w-3xl rounded-lg border"
  labels={{
    labelPrevious: 'Ir para o mês anterior',
    labelNext: 'Ir para o próximo mês',
    labelMonthDropdown: 'Escolha o mês',
    labelYearDropdown: 'Escolha o ano',
    searchMonth: 'Buscar mês',
    emptyMonth: 'Nenhum mês encontrado',
    searchYear: 'Buscar ano',
    emptyYear: 'Nenhum ano encontrado',
  }}
  locale="pt-BR"
>
  <RoadmapCalendarDate>
    <RoadmapCalendarDatePicker>
      <RoadmapCalendarMonthPicker />
      <RoadmapCalendarYearPicker end={year + 2} start={year - 2} />
    </RoadmapCalendarDatePicker>
    <RoadmapCalendarDatePagination />
  </RoadmapCalendarDate>
  <RoadmapCalendarHeader />
  <RoadmapCalendarBody features={features} />
</RoadmapCalendarProvider>

Props

RoadmapCalendarBody

Props de RoadmapCalendarBody
Prop	Type	Default	Description
features, obrigatória	`Feature[]`	sem valor padrão
children	`((props: { feature: Feature; }) => ReactNode)`	`({ feature }) => <RoadmapCalendarItem feature={feature} />`	Renders one feature. Up to three are drawn per day.

RoadmapCalendarDatePicker

Props de RoadmapCalendarDatePicker
Prop	Type	Default	Description
children, obrigatória	`ReactNode`	sem valor padrão
className	`string`	sem valor padrão

RoadmapCalendarMonthPicker

Props de RoadmapCalendarMonthPicker
Prop	Type	Default	Description
className	`string`	sem valor padrão

RoadmapCalendarYearPicker

Props de RoadmapCalendarYearPicker
Prop	Type	Default	Description
end, obrigatória	`number`	sem valor padrão	Last year offered.
start, obrigatória	`number`	sem valor padrão	First year offered.
className	`string`	sem valor padrão

RoadmapCalendarDatePagination

Props de RoadmapCalendarDatePagination
Prop	Type	Default	Description
className	`string`	sem valor padrão

RoadmapCalendarDate

Props de RoadmapCalendarDate
Prop	Type	Default	Description
children, obrigatória	`ReactNode`	sem valor padrão

RoadmapCalendarHeader

Props de RoadmapCalendarHeader
Prop	Type	Default	Description
className	`string`	sem valor padrão

RoadmapCalendarItem

Props de RoadmapCalendarItem
Prop	Type	Default	Description
feature, obrigatória	`Feature`	sem valor padrão
className	`string`	sem valor padrão

Estende P.

RoadmapCalendarProvider

Props de RoadmapCalendarProvider
Prop	Type	Default	Description
children, obrigatória	`ReactNode`	sem valor padrão
className	`string`	sem valor padrão
labels	`Partial<RoadmapCalendarLabels>`	sem valor padrão	Translations of the fixed strings; missing ones stay in English.
locale	`Intl.LocalesArgument`	`'en-US'`	Locale of the month and weekday names, and of each day's spoken name.
startDay	`number`	`0`	First day of the week, 0 for Sunday.

prop obrigatória.

Composition

O RoadmapCalendarProvider guarda mês, ano, locale e labels. No topo, o RoadmapCalendarDate reúne os seletores (no RoadmapCalendarDatePicker) e as setas; embaixo, o cabeçalho dos dias e a grade.

Composição de RoadmapCalendarProvider

RoadmapCalendarProvider

RoadmapCalendarDate
- RoadmapCalendarDatePicker
  - RoadmapCalendarMonthPicker
  - RoadmapCalendarYearPicker
- RoadmapCalendarDatePagination
RoadmapCalendarHeader
RoadmapCalendarBody
- RoadmapCalendarItem

Metadata

Notas de acessibilidade

Verificado em tests/e2e/roadmap-calendar.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: as setas de mês e os seletores de mês e ano são botões alcançados por Tab com foco visível; o seletor abre com Enter, põe o foco na busca, filtra pelo que se digita, escolhe com Enter e devolve o foco ao botão; Escape fecha sem escolher. A grade não tem controles — é lida. Leitor de tela: as setas e os seletores têm nome (o seletor diz o nome e o valor mostrado, WCAG 2.5.3); cada dia do mês é um group nomeado pela data completa no locale do calendário, e o de hoje tem aria-current="date"; a linha dos dias da semana e os dias acinzentados dos meses vizinhos ficam fora da árvore; o status de cada feature, que o ponto mostra só pela cor, é dito em texto sr-only. Estado por calendário: o upstream guardava mês e ano em átomos jotai de módulo, e todos os calendários da página andavam juntos; agora o estado é do RoadmapCalendarProvider — jotai e date-fns saíram. Escolher de novo o mês atual o mantém (o upstream o zerava para NaN). Toque verificado em 375px com emulação de toque: os controles atingem 24x24, o toque na seta troca o mês e a grade cabe sem rolagem horizontal. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — o calendário não tem movimento próprio; o do seletor é o do Popover, que entra sem deslocamento.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: data-display
Status: Stable

Origem e distribuição

Fonte: kibo registry / calendar
Licença: MIT
URL: https://www.kibo-ui.com/r/calendar.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: Nenhuma
Ícones: check, chevron-left, chevron-right, chevrons-up-down
Construído sobre: Button Command Popover
Usado por: Nenhum ainda