Sistema de componentes empresariais · Novo recurso
Sistema de design React Suite.
Um calendário de revisão nativo do React Suite, com variáveis CSS verificadas da versão 6, marcadores nas células de data, agenda do dia selecionado, validação em modal e regras explícitas para agendamentos locais.
Calendar, Panel, Modal, Input, Message, Button e Tag nativos do React Suite 6.2.4. · Referência de implementação
02
Referência de design do sistema sistema de design React Suite
Folha de estilos compilada do React Suite 6.2.4, conferida com a documentação atual das variáveis de CSS v6. Os valores abaixo são as primeiras definições/padrões; os aliases semânticos podem ser resolvidos de outra forma em outros temas de provider. As regras originais de layout do calendário são identificadas separadamente.
Sistema de design React Suite: um calendário nativo com uma agenda separada
Um calendário nativo com uma agenda separada
React Suite é voltado a aplicativos com muitos componentes e fornece tanto controles quanto superfícies de trabalho maiores, como Calendar. Este exemplo usa a versão 6.2.4 com sua folha de estilos compilada. Um CustomProvider envolve o aplicativo, enquanto Calendar, Panel, Modal e outros componentes são importados de rsuite.
O calendário não finge ser um serviço de agendamento conectado. Ele contém duas sessões de exemplo iniciais e permite adições e remoções locais. O dia selecionado e a lista de registros são estados separados de React, então navegar até um dia não altera a programação. É possível conferir todas as transições de estado no código completo de App.
Sistema de design React Suite: referência das variáveis de CSS v6
Referência das variáveis de CSS v6
A especificação é baseada na versão v6 instalada de CSS, não em um tutorial antigo de Less. Tipografia, espaçamento, raio, paleta e funções semânticas estão disponíveis como variáveis --rs. O corpo do texto padrão usa o tamanho pequeno, 0.875rem, enquanto a raiz permanece em dezesseis pixels. Essa diferença explica por que uma superfície de controle padrão pode parecer mais densa que um artigo com texto de dezesseis pixels.
A página usa --rs-bg-well como plano de fundo dos painéis --rs-bg-card e --rs-border-primary para os separadores da agenda. Um marcador usa primary-500; um erro de campo usa a função semântica text-error. A referência mantém aliases para texto e superfícies, para que essas funções continuem compreensíveis quando um tema de provider alterar sua resolução.
Sistema de design React Suite: use a escala da biblioteca ao redor do calendário
Use a escala da biblioteca ao redor do calendário
A escala real de raios inclui valores de quatro, seis, oito e doze pixels para sm a xl na raiz padrão. O incremento básico de espaçamento é 0.25rem. Em vez de tratá-los como uma paleta decorativa, o CSS fornecido usa variáveis reais de superfície e texto na agenda e nos conteúdos auxiliares ao redor.
O título da página usa explicitamente 32px, com altura de linha de 1.2, reduzidos para 28px em telas estreitas. Os títulos das sessões usam dezessete pixels para caber em linhas compactas da agenda. Essas escolhas da página não substituem as variáveis tipográficas globais da biblioteca. Assim, os rótulos do Calendar e os controles do modal mantêm o dimensionamento nativo dos componentes.
Sistema de design React Suite: controle a data selecionada sem desvios de UTC
Controle a data selecionada sem desvios de UTC
Calendar recebe um valor Date, e onSelect atualiza esse valor selecionado. isoWeek faz a semana visível começar na segunda-feira. O valor inicial fixo usa new Date(2026,9,14), em que nove corresponde a outubro porque os meses de JavaScript começam em zero. A página é um exemplo intencionalmente fixo, não uma afirmação sobre a data de hoje no calendário.
A função de chave usa getFullYear, getMonth e getDate para gerar uma chave local no formato YYYY-MM-DD. Ela evita toISOString().slice(0,10), que converte a data para UTC e pode deslocar o dia do calendário local em alguns fusos horários. Esses registros representam datas sem horário, portanto uma conversão UTC implícita introduziria um significado que os dados não têm.
Sistema de design React Suite: marcadores de data e conteúdo do dia selecionado
Marcadores de data e conteúdo do dia selecionado
renderCell verifica se os registros locais contêm uma entrada para a data e retorna um pequeno marcador de evento. O marcador é complementar: ao selecionar a data, os títulos reais aparecem na agenda. Um ponto colorido, por si só, não informaria ao usuário o que está programado nem permitiria remover o item correto.
O calendário compacto continua estreito o bastante para a visualização em dispositivos móveis. A agenda é um Panel separado, com cabeçalho de data, cartões de sessão e uma ação local para adicionar itens. No ponto de quebra original de 760px, ela passa para baixo do calendário. Essa disposição evita comprimir títulos completos de eventos em cada célula ou criar um calendário horizontal difícil de ler.
Selecione o dia de exemplo que contém a revisão de navegação.
Confira o título da sessão na agenda, em vez de depender do ponto.
Remova a sessão e confirme que o marcador de data desaparece quando não restam registros.
Sistema de design React Suite: as regras de agendamento do aplicativo são explícitas
As regras de agendamento do aplicativo são explícitas
O agendamento nos fins de semana é desativado usando os valores zero e seis de getDay(). Ainda é possível selecionar essas datas no calendário, para que a agenda explique a regra em vez de dar a impressão de que o dia está com defeito. Uma mensagem de aviso aparece e o botão de adicionar é desativado. Essa é uma política local da equipe, não uma limitação do Calendar de React Suite.
Em dias úteis sem sessões, uma mensagem específica informa que não há itens, e a ação para adicionar continua disponível. A remoção de uma sessão altera os registros e exibe uma notificação local. Não há a alegação de que algum participante foi notificado. Os objetos Date, o array de registros e a política simples estão visíveis no código-fonte, para que possam ser substituídos deliberadamente em um produto real.
Sistema de design React Suite: um diálogo objetivo para adicionar itens, com validação
Um diálogo objetivo para adicionar itens, com validação
Ao abrir Adicionar sessão de revisão, o título e qualquer erro anterior são apagados. O Modal usa a composição Header, Title, Body e Footer, com open e onClose controlados pelo estado de React. O campo de entrada tem um rótulo associado, estado inválido e descrição do erro. Se o título tiver menos de três caracteres após remover os espaços das extremidades, o modal permanece aberto e exibe um alerta.
O envio de um título válido adiciona um registro para a data selecionada, fecha o modal e exibe uma mensagem informativa. O componente Modal gerencia o comportamento do diálogo, incluindo Escape e o gerenciamento de foco. Cancelar apenas fecha o rascunho. O aplicativo não fecha o modal antes de confirmar que o título atende à própria regra.
Cancelar descarta o título não salvo.
O título rejeitado permanece disponível para correção.
Um título válido adiciona um registro local e atualiza o marcador do calendário.
Sistema de design React Suite: carregue os estilos v6 e o aplicativo completo
Carregue os estilos v6 e o aplicativo completo
Instale [email protected] em um projeto React e importe rsuite/dist/rsuite.min.css. O exemplo de App inclui essa importação, seu style.css original e o wrapper CustomProvider. A entrada de configuração usa React createRoot e não depende de uma CDN remota. A prévia independente inclui os mesmos componentes nativos e CSS localmente.
React Suite também oferece uma distribuição de folha de estilos sem reset. Este exemplo usa deliberadamente a folha de estilos padrão; combinar as duas distribuições duplicaria estilos e dificultaria identificar qual reset se aplica à página. Em uma aplicação existente, escolha a distribuição adequada à arquitetura de estilos ao redor e verifique formulários e títulos em conjunto.
Sistema de design React Suite: um calendário real precisa de estado adicional do domínio
Um calendário real precisa de estado de domínio adicional
Um agendador conectado precisaria de horários, fusos horários, participantes, permissões e um resultado de persistência. Este exemplo de calendário apenas com datas não inventa esses campos nem finge que uma atualização de estado bem-sucedida enviou um convite. O rodapé e os avisos deixam claro o escopo local. A função local de chave de data é adequada para estes registros, mas não é uma estratégia completa para reuniões que consideram fusos horários.
Se adicionar uma solicitação remota, mantenha o modal de rascunho aberto até receber um resultado confirmado ou exiba um erro recuperável. Evite envios duplicados e preserve a data e o título selecionados após uma falha. A biblioteca fornece os elementos básicos da interface; a correção da aplicação depende de vinculá-los à operação real.
Exemplos de componentes do sistema de design React Suite
Aplicação completa de calendário e agenda
Calendário controlado com marcadores nas células de data, chaves de data locais e fluxo de criação por modal.
jsx
import React,{useState} from 'react';
import {CustomProvider,Calendar,Panel,Button,Modal,Input,Message,Tag} from 'rsuite';
import 'rsuite/dist/rsuite.min.css';
import './style.css';
const key=d=>`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
export default function App(){const[date,setDate]=useState(new Date(2026,9,14)),[open,setOpen]=useState(false),[title,setTitle]=useState(''),[error,setError]=useState(''),[notice,setNotice]=useState(''),[events,setEvents]=useState([{id:1,date:'2026-10-14',title:'Navigation review'},{id:2,date:'2026-10-16',title:'Prototype handoff'}]);const selected=events.filter(e=>e.date===key(date));const weekend=[0,6].includes(date.getDay());function save(){if(title.trim().length<3){setError('Use at least three characters for the session title.');return;}setEvents([...events,{id:Date.now(),date:key(date),title:title.trim()}]);setOpen(false);setNotice('Added to the local calendar only. No invitation was sent.');}
return <CustomProvider><main className='schedule'><header><div><p className='eyebrow'>REACT SUITE / TEAM CADENCE</p><h1>Give the work a place in the week.</h1><p>Select a day to inspect its sessions. Weekend scheduling is disabled in this example.</p></div><Tag color='blue'>Local calendar</Tag></header>{notice&&<Message type='info' closable onClose={()=>setNotice('')}>{notice}</Message>}<div className='schedule-grid'><Panel bordered className='calendar-panel'><Calendar compact bordered isoWeek value={date} onSelect={setDate} renderCell={d=>events.some(e=>e.date===key(d))?<span className='event-dot' aria-label='Has a session'/>:null}/><p className='calendar-legend'><span className='event-dot'/> A date with one or more local sessions</p></Panel><Panel bordered className='agenda-panel'><p className='eyebrow'>{date.toLocaleDateString('en',{weekday:'long'})}</p><h2>{date.toLocaleDateString('en',{month:'long',day:'numeric',year:'numeric'})}</h2>{weekend&&<Message type='warning'>The sample team does not schedule weekend reviews.</Message>}<div className='agenda'>{selected.length?selected.map(e=><article key={e.id}><div><span className='event-kind'>Review session</span><h3>{e.title}</h3></div><Button appearance='subtle' size='sm' aria-label={'Remove '+e.title} onClick={()=>{setEvents(events.filter(x=>x.id!==e.id));setNotice('Removed from the local calendar. No attendee was notified.')}}>Remove</Button></article>):<div className='empty'><h3>No sessions for this day.</h3><p>Choose another date or add a local review session.</p></div>}</div><Button appearance='primary' disabled={weekend} onClick={()=>{setTitle('');setError('');setOpen(true)}}>Add review session</Button></Panel></div><footer>Native React Suite Calendar, Panel, Modal, Input, Message and Button. All dates are local calendar dates; no remote calendar connection.</footer><Modal open={open} onClose={()=>setOpen(false)} size='sm'><Modal.Header><Modal.Title>Add review session</Modal.Title></Modal.Header><Modal.Body><p>For {key(date)}. This adds a record only in the preview.</p><label htmlFor='session-title'>Session title</label><Input id='session-title' value={title} onChange={v=>{setTitle(v);setError('')}} aria-invalid={!!error} aria-describedby='title-error' autoFocus/>{error&&<p id='title-error' role='alert' className='field-error'>{error}</p>}</Modal.Body><Modal.Footer><Button onClick={()=>setOpen(false)} appearance='subtle'>Cancel</Button><Button onClick={save} appearance='primary'>Add locally</Button></Modal.Footer></Modal></main></CustomProvider>}
O título da página e o breakpoint de 760px são escolhas originais.
04
Configuração do agente do sistema de design React Suite
Ponto de partida para implementação
Exemplo nativo criado com React 19 e React Suite 6.2.4. Não usa serviços externos de calendário. A aplicação completa e os estilos são apresentados acima.
jsx
// Create the project first:
// npm create vite@latest react-suite-specimen -- --template react
// cd react-suite-specimen && npm install
// In a React project:
// npm install [email protected]
// Save the complete App example as App.jsx and the CSS example as style.css.
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App/>);
// index.html needs <div id="root"></div> and the Vite module entry.
// App.jsx imports rsuite/dist/rsuite.min.css and wraps CustomProvider.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Use a composição de calendário e agenda de React Suite 6.2.4 com CustomProvider e a folha de estilos nativa. Preserve a seleção de dias da semana, o comportamento que desativa os fins de semana e o fluxo Modal/Input para um registro de revisão local. Mantenha a data selecionada e os itens da agenda no estado da aplicação, valide as informações da revisão antes de adicioná-la e não altere a agenda em caso de cancelamento. Mantenha o layout responsivo do calendário e a exibição da agenda específica para cada data. Não sugira que há um convite de calendário ou serviço externo de agendamento.
05
Fontes e escopo do sistema de design React Suite
React Suite 6.2.4. Calendário local apenas com datas, política original para fins de semana e registros de exemplo; sem convites ou agendamento externo.
