# Sistema di progettazione React Suite

## Anteprima dell’interfaccia del sistema di progettazione sistema di design React Suite

Seleziona un giorno, consulta le sessioni locali, aggiungine una tramite una finestra modale oppure rimuovila. Non è possibile aggiungere sessioni nei fine settimana.

## Riferimento di progettazione del sistema di progettazione sistema di design React Suite

Foglio di stile compilato di React Suite 6.2.4, verificato rispetto alla documentazione aggiornata delle variabili di CSS v6. I valori riportati di seguito sono le definizioni iniziali/predefinite; gli alias semantici possono risolversi in modo diverso con altri temi del provider. Le regole originali di layout del calendario sono indicate separatamente.

### Tipografia

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --rs-font-family-base | -apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif | Stack di font di sistema con fallback CJK. |
| --rs-html-font-size | 16px | Dimensione della radice. |
| --rs-font-size-sm | 0.875rem | 14px con radice da 16px; scala predefinita del testo del corpo. |
| --rs-font-size-md | 1rem | 16px con la radice predefinita. |
| --rs-font-size-lg | 1.125rem | 18px con la radice predefinita. |
| --rs-font-size-xl | 1.25rem | 20px con la radice predefinita. |
| --rs-font-size-2xl | 1.5rem | 24px con la radice predefinita. |
| --rs-line-height-md | calc(20 / 14) | Rapporto predefinito del testo del corpo. |
### Spaziatura e raggio

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --rs-spacing | 0.25rem | Incremento di base della spaziatura. |
| --rs-padding-inline-md | 12px | Padding orizzontale medio dei componenti. |
| --rs-padding-block-md | 8px | Padding verticale medio dei componenti. |
| --rs-radius-sm | 0.25rem | 4px con la radice predefinita. |
| --rs-radius-md | 0.375rem | 6px con la radice predefinita. |
| --rs-radius-lg | 0.5rem | 8px con la radice predefinita. |
| --rs-radius-xl | 0.75rem | 12px con la radice predefinita. |
### Scala dei colori primari

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --rs-primary-50 | #F2FAFF | Livello 50 della palette primaria predefinita. |
| --rs-primary-100 | #CCE9FF | Livello 100 della palette primaria predefinita. |
| --rs-primary-200 | #A6D7FF | Livello 200 della palette primaria predefinita. |
| --rs-primary-300 | #80C3FF | Livello 300 della palette primaria predefinita. |
| --rs-primary-400 | #59AFFF | Livello 400 della palette primaria predefinita. |
| --rs-primary-500 | #3498ff | Livello 500 della palette primaria predefinita. |
| --rs-primary-600 | #2589F5 | Livello 600 della palette primaria predefinita. |
| --rs-primary-700 | #1675E0 | Livello 700 della palette primaria predefinita. |
| --rs-primary-800 | #0A5DC2 | Livello 800 della palette primaria predefinita. |
| --rs-primary-900 | #004299 | Livello 900 della palette primaria predefinita. |
### Superfici e stati semantici

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --rs-bg-card | var(--rs-gray-0) | Superficie del calendario e dell’agenda. |
| --rs-bg-well | var(--rs-gray-50) | Sfondo della pagina esterna. |
| --rs-bg-overlay | var(--rs-gray-0) | Superficie della finestra modale. |
| --rs-text-primary | var(--rs-gray-800) | Testo principale per la lettura. |
| --rs-text-secondary | var(--rs-gray-600) | Metadati e suggerimenti. |
| --rs-text-error | var(--rs-color-red) | Messaggio di convalida. |
| --rs-border-primary | var(--rs-gray-200) | Separatori dell’agenda e bordi dei pannelli. |
| --rs-btn-primary-bg | var(--rs-primary-500) | Riempimento del pulsante primario. |
| --rs-btn-primary-text | var(--rs-gray-0) | Testo del pulsante primario. |
| --rs-state-focus-shadow | 0 0 0 2px rgb(from var(--rs-primary-500) r g b / 25%) | Enfasi dello stato attivo. |
### Scelte di composizione del calendario

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| isoWeek | true | Le settimane del calendario iniziano di lunedì. |
| Initial date | new Date(2026, 9, 14) | Esempio fisso di ottobre; il mese di JavaScript parte da zero. |
| Layout switch | 760px | Breakpoint originale a una colonna. |
| Weekend rule | getDay() is 0 or 6 | Regola di pianificazione locale originale, non una limitazione di Calendar. |
## Guida completa al sistema di progettazione sistema di design React Suite

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## Sistema di progettazione sistema di design React Suite: un calendario nativo con un’agenda separata

### Un calendario nativo con un’agenda separata

> React Suite è pensato per applicazioni ricche di componenti e fornisce sia controlli sia superfici operative più ampie, come Calendar. Questo esempio usa la versione 6.2.4 con il relativo foglio di stile compilato. Un CustomProvider avvolge l’applicazione, mentre Calendar, Panel, Modal e gli altri componenti vengono importati da rsuite.

Il calendario non si presenta come un servizio di pianificazione connesso. Contiene due sessioni di esempio iniziali e consente aggiunte e rimozioni locali. Il giorno selezionato e l’elenco dei record sono stati React distinti, quindi spostarsi a un altro giorno non modifica la pianificazione. Nel codice completo di App è possibile esaminare ogni transizione di stato.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design React Suite: riferimento alle variabili di CSS v6

### Un riferimento alle variabili di CSS v6

La specifica è ricavata dal pacchetto CSS v6 installato, non da un vecchio tutorial Less. Tipografia, spaziatura, raggio, palette e ruoli semantici sono tutti disponibili come variabili --rs. Il testo del corpo predefinito usa la dimensione tipografica piccola, 0.875rem, mentre la radice resta di sedici pixel. Questa distinzione spiega perché una superficie di controllo predefinita possa apparire più densa di un articolo impostato a sedici pixel.

La pagina usa --rs-bg-well dietro i pannelli --rs-bg-card e --rs-border-primary per i separatori dell’agenda. Un indicatore usa primary-500; un errore di campo usa il ruolo semantico text-error. Il riferimento mantiene gli alias per testo e superfici, così i ruoli restano comprensibili anche quando un tema del provider ne modifica la risoluzione.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design React Suite: usa la scala della libreria attorno al calendario

### Usa la scala della libreria attorno al calendario

La scala dei raggi effettiva include valori di quattro, sei, otto e dodici pixel per sm-xl con la radice predefinita. L’incremento di base della spaziatura è 0.25rem. Invece di trattarli come una palette decorativa, il sistema di progettazione CSS fornito usa variabili effettive per superfici e testo nell’agenda circostante e nei contenuti di supporto.

L’intestazione dell’applicazione usa una dimensione esplicita di 32px con altezza della riga di 1.2, ridotta a 28px sugli schermi stretti. I titoli delle sessioni usano 17px per adattarsi alle righe compatte dell’agenda. Queste scelte della pagina non sovrascrivono le variabili tipografiche globali della libreria. Le etichette di Calendar e i controlli della finestra modale mantengono quindi le dimensioni native dei componenti.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design React Suite: controllare la data selezionata senza slittamenti UTC

### Controllare la data selezionata senza slittamenti UTC

Calendar riceve un valore Date e onSelect aggiorna il valore selezionato. isoWeek fa iniziare la settimana visualizzata di lunedì. Il valore iniziale fisso usa new Date(2026,9,14), dove nove corrisponde a ottobre perché i mesi di JavaScript partono da zero. La pagina è un esempio volutamente fisso, non un’affermazione sulla data del calendario odierno.

La funzione della chiave usa getFullYear, getMonth e getDate per generare una chiave locale nel formato YYYY-MM-DD. Evita toISOString().slice(0,10), che converte tramite UTC e in alcuni fusi orari può spostare il giorno del calendario locale. Questi record rappresentano date senza orario, quindi aggiungere una conversione UTC implicita introdurrebbe un significato assente nei dati.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design React Suite: indicatori delle date e contenuti del giorno selezionato

### Indicatori delle date e contenuti del giorno selezionato

renderCell verifica se i record locali contengono una voce per quella data e mostra un piccolo indicatore di evento. L’indicatore è un’informazione aggiuntiva: selezionando la data, l’agenda mostra i titoli effettivi. Un semplice punto colorato non indicherebbe all’utente cosa è in programma né permetterebbe di rimuovere la voce corretta.

Il calendario compatto resta abbastanza stretto da adattarsi alla visualizzazione mobile. L’agenda è un Panel separato, con intestazione della data, schede delle sessioni e un’azione per aggiungere voci locali. Al breakpoint originale di 760px si sposta sotto il calendario. Questa disposizione evita di comprimere titoli di eventi completi in ogni cella o di creare un calendario orizzontale difficile da leggere.

1. Seleziona il giorno di esempio con la revisione della navigazione.

2. Controlla il titolo della sessione nell’agenda invece di affidarti al punto.

3. Rimuovi la sessione e verifica che il relativo indicatore della data scompaia quando non restano record.

Leggi la specifica di supporto

## Sistema di design React Suite — le regole di pianificazione del sistema di progettazione sono esplicite

### Le regole di pianificazione dell’applicazione sono esplicite

La pianificazione nei fine settimana è disabilitata usando i valori zero e sei di getDay(). È comunque possibile selezionare quelle date nel calendario, così l’agenda può spiegare la regola invece di far sembrare che il giorno non funzioni. Viene visualizzato un avviso e il pulsante per aggiungere è disabilitato. Si tratta di una regola locale del team, non di un limite di React Suite Calendar.

Per i giorni feriali senza sessioni viene mostrato uno stato vuoto specifico e l’azione per aggiungere resta disponibile. Rimuovendo una sessione, i record vengono aggiornati e viene pubblicato un avviso locale. Non si dichiara che un partecipante sia stato avvisato. Gli oggetti Date, l’array dei record e la semplice regola sono tutti visibili nel codice sorgente, così è possibile sostituirli consapevolmente in un prodotto reale.

Leggi la specifica di supporto

## Sistema di design React Suite — una finestra di dialogo di inserimento convalidata per il sistema di progettazione

### Una finestra di inserimento mirata con convalida

Aprendo Aggiungi sessione di revisione, il titolo e gli eventuali errori precedenti vengono cancellati. La finestra modale usa la composizione Header, Title, Body e Footer, mentre open e onClose sono controllati dallo stato di React. Il campo di input ha un’etichetta associata, uno stato di errore e una descrizione dell’errore. Se il titolo contiene meno di tre caratteri dopo aver rimosso gli spazi iniziali e finali, la finestra modale resta aperta e mostra un avviso.

L’invio di un titolo valido aggiunge un record per la data selezionata, chiude la finestra modale e mostra un messaggio informativo. Il componente Modal gestisce il comportamento della finestra di dialogo, inclusi Escape e la gestione dello stato attivo. Annulla chiude soltanto la bozza. L’applicazione non chiude la finestra modale prima di aver verificato che il titolo rispetti la propria regola.

- Annulla scarta il titolo non salvato.

- Il titolo rifiutato resta disponibile per essere corretto.

- Un titolo valido aggiunge un record locale e aggiorna l’indicatore nel calendario.

Leggi la specifica di supporto

## Sistema di design React Suite — carica gli stili v6 e l’applicazione completa del sistema di progettazione

### Carica gli stili v6 e l’applicazione completa

Installa rsuite@6.2.4 in un progetto React e importa rsuite/dist/rsuite.min.css. L’esempio App include questa importazione, il file style.css originale e il wrapper CustomProvider. Il punto di ingresso di configurazione usa React createRoot e non dipende da una CDN remota. L’anteprima autonoma include gli stessi componenti nativi e CSS localmente.

React Suite offre anche una distribuzione del foglio di stile senza reset. Questo esempio usa intenzionalmente il foglio di stile standard: combinare entrambe le distribuzioni duplicherebbe gli stili e renderebbe poco chiaro quale reset si applica alla pagina. In un’applicazione esistente, scegli la distribuzione più adatta all’architettura degli stili circostante e verifica insieme moduli e titoli.

Leggi la specifica di supporto

## Sistema di design React Suite — un calendario reale richiede ulteriore stato di dominio nel sistema di progettazione

### Un vero calendario richiede ulteriore stato di dominio

Un sistema di pianificazione collegato a servizi esterni dovrebbe gestire orari, fusi orari, partecipanti, autorizzazioni e l’esito della persistenza. Questo esempio, basato solo sulle date, non inventa questi campi né finge che un aggiornamento dello stato sia riuscito a inviare un invito. Il piè di pagina e gli avvisi rendono chiaro l’ambito locale. La funzione per creare chiavi di data locali è adatta a questi record, ma non è una strategia completa per riunioni che tengono conto dei fusi orari.

Se aggiungi una richiesta remota, mantieni aperta la finestra modale della bozza fino alla conferma dell’esito oppure mostra un errore recuperabile. Impedisci invii duplicati e, in caso di errore, conserva la data selezionata e il titolo. La libreria fornisce i componenti di interfaccia; la correttezza dell’applicazione dipende dal collegamento di questi componenti all’operazione effettiva.

Leggi la specifica di supporto

## Sistema di design React Suite — esempi di componenti del sistema di progettazione

### Applicazione completa di calendario e agenda

Calendar controllato con indicatori nelle celle delle date, chiavi di data locali e flusso di inserimento tramite finestra modale.

```
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>}
```

Riferimento del codice

- I valori del mese in new Date partono da zero.

- Le chiavi di data usano i campi del calendario locale anziché la conversione UTC.

- Le restrizioni per il fine settimana dipendono dal comportamento dell’applicazione.

### Layout del calendario adattabile

Usa variabili semantiche reali di React Suite attorno ai componenti nativi.

```
body{background:var(--rs-bg-well)}.schedule{max-width:1120px;margin:auto;padding:32px;color:var(--rs-text-primary)}header{display:flex;gap:24px;justify-content:space-between;align-items:start;margin-bottom:24px}h1{font-size:32px;line-height:1.2;letter-spacing:-.03em;max-width:650px;margin:8px 0 16px}h2{font-size:24px;line-height:1.3;margin:8px 0 24px}.eyebrow{font-size:11px;letter-spacing:.11em;font-weight:700;color:var(--rs-text-secondary)}.schedule-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:20px}.calendar-panel,.agenda-panel{background:var(--rs-bg-card)}.calendar-panel .rs-panel-body{padding:20px}.event-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rs-primary-500)}.calendar-legend{font-size:12px;color:var(--rs-text-secondary);margin-top:16px}.calendar-legend .event-dot{margin-right:6px}.agenda{margin-bottom:24px}.agenda article{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rs-border-primary);padding:20px 0}.agenda h3{font-size:17px;line-height:1.3;margin:6px 0}.event-kind{color:var(--rs-text-secondary);font-size:12px}.empty{padding:24px 0;color:var(--rs-text-secondary)}footer{margin-top:24px;font-size:12px;color:var(--rs-text-secondary)}.field-error{color:var(--rs-text-error);font-size:13px;margin-top:8px}label{display:block;margin-bottom:8px;font-weight:600}@media(max-width:760px){.schedule{padding:20px 16px}.schedule-grid{grid-template-columns:1fr}header{flex-direction:column}h1{font-size:28px}.calendar-panel .rs-panel-body{padding:12px}}
```

Riferimento del codice

- Il titolo della pagina e il breakpoint di 760px sono scelte originali.

## Sistema di design React Suite — configurazione dell’agente per il sistema di progettazione

### Punto di partenza per l’implementazione

Esempio nativo realizzato con React 19 e React Suite 6.2.4. Non viene usato alcun servizio di calendario esterno. L’applicazione completa e gli stili sono forniti sopra.

```
// 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 rsuite@6.2.4
// 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
```

### Un prompt per il tuo progetto

```
Usa la composizione di calendario e agenda di React Suite 6.2.4 con CustomProvider e il foglio di stile nativo. Mantieni la selezione dei giorni feriali, il comportamento di disabilitazione dei fine settimana e il flusso Modal/Input per inserire una sessione di revisione locale. Conserva la data selezionata e le voci dell’agenda nello stato dell’applicazione, convalida le informazioni inserite prima di aggiungerle e non modificare l’agenda in caso di annullamento. Mantieni il layout adattabile del calendario e la visualizzazione dell’agenda per la data selezionata. Non suggerire che venga inviato un invito di calendario o che sia usato un servizio di pianificazione esterno.
```

## Sistema di design React Suite — fonti e ambito del sistema di progettazione

React Suite 6.2.4. Calendario locale basato solo sulle date, con regola originale per i fine settimana e record di esempio; nessun invito o servizio di pianificazione esterno.

- Avvio rapido Configurazione del pacchetto e del foglio di stile.

- Variabili CSS Tipografia, colori, spaziatura e raggi v6.

- Calendario Data controllata e rendering delle celle API.

- Modal Composizione della finestra modale e gestione dello stato attivo.

- Input Componente per l’inserimento di testo.

- CustomProvider Configurazione dei componenti a livello di provider.

## Sistema di design React Suite — risorse correlate al sistema di progettazione

### Skeleton

Confronta i temi Cerberus, Mint e Rose reali di Skeleton 5.0.1 attraverso una postazione di lettura completa, con ispezione dei token in tempo reale, combinazioni di superfici scure e stato locale reversibile.

### Tabler

Un diario di progetto Tabler nativo con variabili del tema 1.6 effettive, schede cronologiche, contesto di datagrid, convalida nelle finestre modali e una composizione chiara/scura che consente di aggiungere checkpoint locali.

### Tamagui

Esplora le categorie effettive dei token v5 di Tamagui e i temi blu chiaro/scuro attraverso una bacheca completa delle abitudini con componenti nativi, convalida, progressi e recupero dallo stato vuoto.


- [Riferimento per l’implementazione](https://www.rsuitejs.com/components/calendar/)
- [Fonte](https://www.rsuitejs.com/guide/css-variables/)
- [Fonte](https://www.rsuitejs.com/components/calendar/)
- [Leggi la specifica di supporto](https://www.rsuitejs.com/guide/usage/)
- [Leggi la specifica di supporto](https://www.rsuitejs.com/guide/css-variables/)
- [Leggi la specifica di supporto](https://www.rsuitejs.com/components/calendar/)
- [Leggi la specifica di supporto](https://www.rsuitejs.com/components/modal/)
- [Riferimento del codice](https://www.rsuitejs.com/components/calendar/)
- [Riferimento del codice](https://www.rsuitejs.com/guide/css-variables/)
- [Avvio rapido Configurazione del pacchetto e del foglio di stile.](https://www.rsuitejs.com/guide/usage/)
- [Variabili CSS Tipografia, colori, spaziatura e raggi v6.](https://www.rsuitejs.com/guide/css-variables/)
- [Calendario Data controllata e rendering delle celle API.](https://www.rsuitejs.com/components/calendar/)
- [Modal Composizione della finestra modale e gestione dello stato attivo.](https://www.rsuitejs.com/components/modal/)
- [Input Componente per l’inserimento di testo.](https://www.rsuitejs.com/components/input/)
- [CustomProvider Configurazione dei componenti a livello di provider.](https://www.rsuitejs.com/components/custom-provider/)