Système de composants d’entreprise · Nouvelle ressource
React Suite — système de design.
Un calendrier de révision natif React Suite avec les variables CSS v6 vérifiées, des marqueurs sur les cellules de date, un ordre du jour pour la journée sélectionnée, la validation modale et des règles de planification locale explicites.
Guide OpenDesign9 chapitres39 entrées de référenceGuide de l’application d’origine
01
Aperçu de l’interface du système de design React Suite
Sélectionnez un jour, consultez les séances locales, ajoutez-en une dans une fenêtre modale ou supprimez-la. L’ajout de séances le week-end est désactivé.
Calendar, Panel, Modal, Input, Message, Button et Tag natifs de React Suite 6.2.4. · Référence de mise en œuvre
02
Référence de conception du système de design React Suite
Feuille de style compilée de React Suite 6.2.4, vérifiée par rapport à la documentation actuelle des variables de CSS v6. Les valeurs ci-dessous sont les définitions initiales/par défaut ; les alias sémantiques peuvent se résoudre différemment selon les thèmes du fournisseur. Les règles de mise en page originales du calendrier sont indiquées séparément.
Calendrier natif avec un agenda distinct — système de design React Suite
Un calendrier natif avec un agenda distinct
React Suite s’adresse aux applications riches en composants et fournit à la fois des contrôles et des surfaces de travail plus vastes, comme Calendar. Cet exemple utilise la version 6.2.4 et sa feuille de style compilée. Un CustomProvider englobe l’application, tandis que Calendar, Panel, Modal et les autres composants sont importés depuis rsuite.
Le calendrier ne prétend pas être un service de planification connecté. Il contient deux séances initiales d’exemple et permet d’en ajouter ou d’en supprimer localement. Le jour sélectionné et la liste des entrées sont des états React distincts : naviguer jusqu’à un jour ne modifie donc pas le calendrier. Le lecteur peut examiner chaque transition d’état dans le code source complet de App.
Référence des variables de CSS v6 — système de design React Suite
Référence des variables de CSS v6
La spécification est tirée de la version v6 de CSS installée, et non d’un ancien tutoriel Less. Les variables --rs de typographie, d’espacement, de rayon, de palette et de rôles sémantiques sont toutes disponibles. Le corps par défaut utilise la petite taille de police, 0.875rem, tandis que la racine reste à seize pixels. Cette distinction explique pourquoi la surface d’un contrôle par défaut peut sembler plus dense qu’un article de contenu en seize pixels.
La page utilise --rs-bg-well en arrière-plan des panneaux --rs-bg-card et --rs-border-primary pour les séparateurs de l’agenda. Un marqueur utilise primary-500 ; une erreur de champ utilise le rôle sémantique text-error. La référence conserve les alias de texte et de surface afin que les rôles restent compréhensibles lorsque le thème d’un fournisseur change leur résolution.
Utiliser l’échelle de la bibliothèque autour du calendrier — système de design React Suite
Utiliser l’échelle de la bibliothèque autour du calendrier
L’échelle réelle des rayons comprend des valeurs de quatre, six, huit et douze pixels pour sm à xl avec la taille de racine par défaut. L’incrément d’espacement de base est de 0.25rem. Plutôt que d’en faire une palette décorative, le CSS fourni utilise les véritables variables de surface et de texte dans l’agenda et les textes d’aide qui l’entourent.
Le titre de la page utilise explicitement une taille de 32 px avec une hauteur de ligne de 1.2, ramenée à 28 px sur les petits écrans. Les titres des séances font 17 px pour tenir dans les lignes compactes de l’agenda. Ces choix de page ne remplacent pas les variables typographiques globales de la bibliothèque. Les libellés du calendrier et les contrôles de la fenêtre modale conservent donc les dimensions natives des composants.
Maîtriser la date sélectionnée sans décalage UTC — système de design React Suite
Maîtriser la date sélectionnée sans décalage UTC
Calendar reçoit une valeur Date et onSelect met à jour la valeur sélectionnée. isoWeek fait commencer la semaine affichée le lundi. La valeur initiale fixe utilise new Date(2026,9,14), où neuf correspond à octobre, car les mois de JavaScript sont indexés à partir de zéro. La page est un exemple volontairement fixe et ne prétend pas représenter le calendrier du jour.
La fonction de clé utilise getFullYear, getMonth et getDate pour produire une clé locale au format YYYY-MM-DD. Elle évite toISOString().slice(0,10), qui convertit la date en UTC et peut décaler un jour du calendrier local dans certains fuseaux horaires. Ces enregistrements représentent des dates sans heure ; une conversion implicite en UTC ajouterait donc une information absente des données.
Marqueurs de date et contenu du jour sélectionné du système de design React Suite
Marqueurs de date et contenu du jour sélectionné
renderCell vérifie si les enregistrements locaux contiennent une entrée pour cette date et affiche un petit marqueur d’événement. Ce marqueur est un complément : la sélection de la date affiche les titres correspondants dans l’agenda. Un simple point coloré ne permettrait pas de savoir ce qui est prévu ni de supprimer le bon élément.
Le calendrier compact reste assez étroit pour un affichage mobile. L’agenda est un Panel distinct, avec un en-tête de date, des cartes de séance et une action locale d’ajout. Au point de rupture initial de 760px, il passe sous le calendrier. Cette disposition évite de comprimer le titre complet de chaque événement dans une cellule du calendrier ou d’obtenir un calendrier horizontal illisible.
Sélectionnez l’exemple de journée contenant la revue de navigation.
Consultez le titre de la séance dans l’agenda au lieu de vous fier au point.
Supprimez la séance et vérifiez que son marqueur de date disparaît lorsqu’il ne reste aucun enregistrement.
Les règles de planification du système de design React Suite sont explicites
Les règles de planification de l’application sont explicites
La planification le week-end est désactivée à l’aide des valeurs zéro et six de getDay(). Le calendrier permet néanmoins de sélectionner ces dates afin que l’agenda puisse expliquer la règle, plutôt que de donner l’impression que la journée ne fonctionne pas. Un avertissement s’affiche et le bouton d’ajout est désactivé. Il s’agit d’une règle locale de l’équipe, et non d’une limitation de Calendar dans React Suite.
Un jour de semaine sans séance affiche un état vide explicite et laisse l’action d’ajout disponible. La suppression d’une séance modifie les enregistrements et affiche une notification locale. Elle ne prétend pas qu’un participant a été averti. Les objets Date, le tableau d’enregistrements et la règle simple sont tous visibles dans le code source afin de pouvoir être remplacés de façon réfléchie dans un véritable produit.
Une boîte de dialogue de saisie ciblée avec validation dans le système de design React Suite
Une boîte de dialogue de saisie avec validation
À l’ouverture de « Ajouter une séance de revue », le titre et toute erreur précédente sont effacés. Modal utilise sa composition Header, Title, Body et Footer, tandis que open et onClose sont contrôlés par l’état de React. Le champ de saisie possède un véritable libellé associé, un état invalide et une description de l’erreur. Si le titre comporte moins de trois caractères après suppression des espaces en début et en fin, la boîte de dialogue reste ouverte et affiche une alerte.
Une soumission valide ajoute un enregistrement pour la date sélectionnée, ferme la boîte de dialogue et affiche un message informatif. Le composant Modal gère le comportement de la boîte de dialogue, notamment Échap et la gestion du focus. Annuler ferme uniquement le brouillon. L’application ne ferme pas la boîte de dialogue avant d’avoir vérifié que le titre respecte ses propres règles.
Annuler abandonne le titre non enregistré.
Un titre rejeté reste disponible pour être corrigé.
Un titre valide ajoute un enregistrement local et met à jour le marqueur du calendrier.
Charger les styles v6 et l’application complète du système de design React Suite
Charger les styles v6 et l’application complète
Installez [email protected] dans un projet React et importez rsuite/dist/rsuite.min.css. L’exemple App inclut cet import, son fichier style.css d’origine et le wrapper CustomProvider. Le point d’entrée de configuration utilise React createRoot et ne dépend pas d’un CDN distant. L’aperçu autonome regroupe localement les mêmes composants natifs et CSS.
React Suite fournit également une distribution de feuille de style sans réinitialisation. Cet exemple utilise délibérément la feuille de style standard ; combiner les deux distributions dupliquerait les styles et rendrait moins évident le rôle de la réinitialisation appliquée à la page. Dans une application existante, choisissez la distribution adaptée à l’architecture de styles environnante et vérifiez ensemble les formulaires et les titres.
Un véritable calendrier nécessite un état métier supplémentaire dans le système de design React Suite
Un véritable calendrier nécessite un état métier supplémentaire
Un outil de planification connecté nécessiterait des heures, des fuseaux horaires, des participants, des autorisations et un résultat de persistance. Cet exemple limité aux dates n’invente pas ces champs et ne prétend pas qu’une mise à jour réussie de l’état a envoyé une invitation. Son pied de page et ses notifications indiquent clairement qu’il s’agit d’un exemple local. La fonction de clé de date locale convient à ces enregistrements, mais ne constitue pas une stratégie complète pour des réunions tenant compte des fuseaux horaires.
En cas d’ajout d’une requête distante, laissez le brouillon ouvert tant que le résultat n’est pas confirmé, ou affichez une erreur permettant de réessayer. Évitez les soumissions en double et préservez la date sélectionnée et le titre en cas d’échec. La bibliothèque fournit les éléments d’interface ; la fiabilité de l’application dépend de leur liaison avec l’opération réelle.
Exemples de composants du système de design React Suite
Application complète de calendrier et d’agenda
Calendar contrôlé avec marqueurs dans les cellules de date, clés de date locale et flux de saisie dans une boîte de dialogue.
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>}
Le titre de la page et le point de rupture de 760px sont des choix propres à cet exemple.
04
Configuration de l’agent IA du système de design React Suite
Point de départ de l’implémentation
Exemple natif réalisé avec React 19 et React Suite 6.2.4. Aucun service de calendrier externe n’est utilisé. L’application complète et ses styles sont fournis ci-dessus.
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
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez la composition Calendar et agenda de React Suite 6.2.4 avec CustomProvider et la feuille de style native. Conservez la sélection des jours de la semaine, le comportement de désactivation du week-end et le flux Modal/Input pour saisir localement une revue. Gardez la date sélectionnée et les entrées de l’agenda dans l’état de l’application, validez les informations saisies avant de les ajouter et laissez l’agenda inchangé en cas d’annulation. Conservez la mise en page adaptative du calendrier et l’affichage de l’agenda correspondant à la date. Ne laissez pas entendre qu’une invitation de calendrier ou un service de planification externe est utilisé.
05
Sources et périmètre du système de design React Suite
React Suite 6.2.4. Calendrier local avec dates uniquement, politique de week-end d’origine et exemples d’enregistrements ; sans invitations ni planification externe.
