Sistema de componentes empresariales · Nuevo recurso
Sistema de diseño React Suite.
Un calendario de revisión nativo de React Suite con variables verificadas de CSS v6, marcadores en las celdas de fecha, una agenda para el día seleccionado, validación modal y reglas explícitas para la programación local.
React Suite Referencia de diseño del sistema de diseño
Hoja de estilos compilada de React Suite 6.2.4, contrastada con la documentación actual de variables de CSS v6. Los valores siguientes son las definiciones iniciales o predeterminadas; los alias semánticos pueden resolverse de forma distinta en otros temas del proveedor. Las reglas originales de diseño del calendario se identifican por separado.
Sistema de diseño React Suite: un calendario nativo con una agenda independiente
Un calendario nativo con una agenda independiente
React Suite está dirigido a aplicaciones con muchos componentes y ofrece tanto controles como superficies de trabajo más amplias, como Calendar. Este ejemplo utiliza la versión 6.2.4 con su hoja de estilos compilada. Un CustomProvider envuelve la aplicación, mientras que Calendar, Panel, Modal y otros componentes se importan de rsuite.
El calendario no pretende ser un servicio de programación conectado. Contiene dos sesiones de ejemplo iniciales y permite añadirlas o eliminarlas localmente. El día seleccionado y la lista de registros son estados de React independientes, por lo que navegar hasta un día no modifica la programación. El lector puede consultar cada cambio de estado en el código fuente completo de App.
Sistema de diseño React Suite Referencia de variables de CSS v6
Referencia de variables CSS de la versión 6
La especificación procede de CSS v6 instalado, no de un tutorial antiguo de Less. La tipografía, el espaciado, el radio, la paleta y los roles semánticos están disponibles como variables --rs. El cuerpo predeterminado usa el tamaño de texto pequeño, 0.875rem, mientras que la raíz se mantiene en dieciséis píxeles. Esta distinción explica por qué la superficie predeterminada de un control puede parecer más densa que un artículo de contenido de dieciséis píxeles.
La página usa --rs-bg-well detrás de los paneles --rs-bg-card y --rs-border-primary para los separadores de la agenda. Un marcador usa primary-500; un error de campo usa el rol semántico text-error. La referencia conserva los alias de texto y superficies para que los roles sigan siendo comprensibles aunque un tema del proveedor cambie cómo se resuelven.
Sistema de diseño React Suite: usa la escala de la biblioteca en torno al calendario
Usa la escala de la biblioteca en torno al calendario
La escala real de radios incluye valores de cuatro, seis, ocho y doce píxeles para sm a xl con el tamaño de raíz predeterminado. El incremento de espaciado base es 0.25rem. En lugar de tratarlos como una paleta decorativa, el CSS proporcionado usa variables reales de superficies y texto en la agenda y el contenido de ayuda que lo rodean.
El encabezado de la aplicación tiene un tamaño explícito de 32px y una altura de línea de 1.2, que se reduce a 28px en pantallas estrechas. Los títulos de las sesiones usan diecisiete píxeles para ajustarse a las filas compactas de la agenda. Estas decisiones de la página no sobrescriben las variables tipográficas globales de la biblioteca. Por ello, las etiquetas del calendario y los controles del modal conservan el tamaño nativo de los componentes.
Sistema de diseño React Suite: controla la fecha seleccionada sin desfase UTC
Controla la fecha seleccionada sin desfases de UTC
Calendar recibe un valor Date y onSelect actualiza ese valor seleccionado. isoWeek hace que la semana visible comience el lunes. El valor inicial fijo usa new Date(2026,9,14), donde nueve corresponde a octubre porque los meses de JavaScript empiezan en cero. La página es un ejemplo deliberadamente fijo, no una afirmación sobre el calendario de hoy.
La función de clave usa getFullYear, getMonth y getDate para generar una clave local con el formato YYYY-MM-DD. Evita toISOString().slice(0,10), que convierte la fecha mediante UTC y puede desplazar un día del calendario local en algunas zonas horarias. Estos registros representan fechas sin hora, así que añadir una conversión UTC implícita introduciría un significado que los datos no contienen.
Sistema de diseño React Suite: marcadores de fecha y contenido del día seleccionado
Marcadores de fecha y contenido del día seleccionado
renderCell comprueba si los registros locales contienen una entrada para esa fecha y muestra un pequeño marcador de evento. El marcador es complementario: al seleccionar la fecha, la agenda muestra los títulos reales. Un punto de color por sí solo no indicaría al usuario qué está programado ni le permitiría eliminar el elemento correcto.
El calendario compacto conserva una anchura adecuada para la vista móvil. La agenda es un Panel independiente con un encabezado de fecha, tarjetas de sesiones y una acción para añadir elementos localmente. En el punto de quiebre original de 760px, aparece debajo del calendario. Esta disposición evita comprimir títulos de eventos completos en cada celda del calendario o crear un calendario horizontal difícil de leer.
Selecciona el día de ejemplo que contiene la revisión de navegación.
Consulta el título de la sesión en la agenda en lugar de guiarte por el punto.
Elimina la sesión y confirma que su marcador de fecha desaparezca cuando ya no queden registros.
Sistema de diseño React Suite: las reglas de programación de la aplicación son explícitas
Las reglas de programación de la aplicación son explícitas
La programación de fines de semana está deshabilitada mediante los valores cero y seis de getDay(). El calendario sigue permitiendo seleccionar esas fechas para que la agenda pueda explicar la regla, en lugar de dar la impresión de que el día no funciona. Aparece un mensaje de advertencia y se deshabilita el botón para añadir. Esta es una política local del equipo, no una limitación de React Suite Calendar.
Un día laborable sin sesiones muestra un estado vacío específico y mantiene disponible la acción para añadir. Al eliminar una sesión, se modifican los registros y se muestra un aviso local. No se afirma que se haya notificado a ningún asistente. Los objetos Date, el array de registros y la política sencilla son visibles en el código fuente para que puedan sustituirse deliberadamente en un producto real.
Sistema de diseño React Suite: un cuadro de diálogo enfocado para añadir entradas con validación
Un diálogo de entrada enfocado con validación
Al abrir «Añadir sesión de revisión», se borra el título y cualquier error anterior. El modal usa la composición Header, Title, Body y Footer; React controla su estado abierto y onClose. El campo de entrada tiene una etiqueta asociada, un estado no válido y una descripción del error. Si el título tiene menos de tres caracteres después de quitar los espacios al principio y al final, el modal permanece abierto y muestra una alerta.
Al enviar un título válido, se añade un registro para la fecha seleccionada, se cierra el modal y se muestra un mensaje informativo. El componente Modal se encarga del comportamiento del cuadro de diálogo, incluidas la tecla Escape y la gestión del foco. Cancelar solo cierra el borrador. La aplicación no cierra el modal antes de comprobar si se cumple su regla para el título.
Cancelar descarta el título sin guardar.
Si se rechaza el título, permanece disponible para corregirlo.
Un título válido añade un registro local y actualiza el indicador del calendario.
Sistema de diseño React Suite: carga los estilos de v6 y la aplicación completa
Carga los estilos de v6 y la aplicación completa
Instala [email protected] en un proyecto React e importa rsuite/dist/rsuite.min.css. El ejemplo App incluye esa importación, su style.css original y el contenedor CustomProvider. La configuración de entrada usa React createRoot y no depende de una CDN remota. La vista previa independiente incluye los mismos componentes nativos y CSS localmente.
React Suite también ofrece una distribución de la hoja de estilos sin reset. Este ejemplo usa deliberadamente la hoja de estilos estándar; mezclar ambas distribuciones duplicaría los estilos y dificultaría saber qué reset se aplica a la página. En una aplicación existente, elige la distribución que encaje con la arquitectura de estilos circundante y comprueba en conjunto los formularios y los encabezados.
Sistema de diseño React Suite: un calendario real requiere estado de dominio adicional
Un calendario real necesita estado de dominio adicional
Un planificador conectado necesitaría horas, zonas horarias, participantes, permisos y el resultado de la persistencia. Este ejemplo, que solo usa fechas, no inventa esos campos ni finge que una actualización de estado satisfactoria haya enviado una invitación. El pie de página y los avisos dejan claro el alcance local. La función local de claves de fecha es adecuada para estos registros, pero no constituye una estrategia completa para reuniones que tienen en cuenta las zonas horarias.
Si añades una solicitud remota, mantén abierto el modal del borrador hasta obtener un resultado confirmado o muestra un error que permita recuperarse. Evita los envíos duplicados y conserva la fecha seleccionada y el título si se produce un error. La biblioteca proporciona los elementos básicos de la interfaz; la corrección de la aplicación depende de vincularlos a la operación real.
React Suite Ejemplos de componentes del sistema de diseño
Aplicación completa de calendario y agenda
Calendar controlado con indicadores en las celdas de fecha, claves de fecha locales y un flujo para añadir entradas mediante un 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>}
El encabezado de la página y el punto de ruptura de 760px son decisiones originales.
04
Sistema de diseño React Suite Configuración del agente
Punto de partida para la implementación
Ejemplo nativo creado con React 19 y React Suite 6.2.4. No se usa ningún servicio de calendario externo. La aplicación completa y los estilos se proporcionan arriba.
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
Una instrucción para tu proyecto
Instrucción para el agente
Usa la composición de calendario y agenda de React Suite 6.2.4 con CustomProvider y la hoja de estilos nativa. Mantén la selección de días laborables, el comportamiento de fin de semana deshabilitado y el flujo Modal/Input para añadir una sesión de revisión local. Guarda la fecha seleccionada y las entradas de la agenda en el estado de la aplicación, valida la información de la sesión introducida antes de añadirla y no modifiques la agenda al cancelar. Conserva el diseño adaptable del calendario y la salida de agenda específica para cada fecha. No des a entender que se envía una invitación de calendario ni que se usa un servicio de programación externo.
05
React Suite Fuentes y alcance del sistema de diseño
React Suite 6.2.4. Calendario local con fechas sin hora, política original para fines de semana y registros de ejemplo; sin invitaciones ni programación externa.
