Doğrulanmış v6 CSS değişkenleri, tarih hücresi işaretçileri, seçili günün gündemi, iletişim kutusu doğrulaması ve açık yerel planlama kuralları içeren yerel bir React Suite inceleme takvimi.
Yerel React Suite 6.2.4 Calendar, Panel, Modal, Input, Message, Button ve Tag. · Uygulama başvurusu
02
React Suite Tasarım Sistemi Tasarım Referansı
React Suite 6.2.4 derlenmiş stil sayfası, güncel v6 CSS değişken belgeleriyle karşılaştırılarak denetlenmiştir. Aşağıdaki değerler ilk/varsayılan tanımlardır; anlamsal takma adlar diğer sağlayıcı temalarında farklı değerlere çözümlenebilir. Özgün takvim düzeni kuralları ayrıca belirtilmiştir.
React Suite Tasarım Sistemi: Ayrı Bir Ajandaya Sahip Yerel Takvim
Ayrı Bir Ajandaya Sahip Yerel Takvim
React Suite, bileşen bakımından zengin uygulamalara yöneliktir; hem kontroller hem de Calendar gibi daha geniş çalışma yüzeyleri sunar. Bu örnek, derlenmiş stil sayfasıyla birlikte 6.2.4 sürümünü kullanır. Uygulamayı bir CustomProvider sarar; Calendar, Panel, Modal ve diğer bileşenler ise rsuite paketinden içe aktarılır.
Takvim, bağlı bir zamanlama hizmetiymiş gibi davranmaz. İki örnek oturumla başlar ve yerel ekleme/kaldırma işlemlerine izin verir. Seçili gün ve kayıt listesi birbirinden ayrı React durumlarıdır; bu nedenle başka bir güne gitmek zamanlamayı değiştirmez. Okuyucu, tüm durum geçişlerini App kaynak kodunda inceleyebilir.
React Suite Tasarım Sistemi: v6 CSS Değişkenleri Referansı
v6 CSS Değişkenleri Referansı
Bu belirtim, eski bir Less öğreticisinden değil, yüklü v6 CSS sürümünden alınmıştır. Tipografi, aralık, köşe yarıçapı, palet ve anlamsal rollerin tümü --rs değişkenleri olarak kullanılabilir. Varsayılan gövde metni, 0.875rem olan küçük yazı boyutunu kullanırken kök boyut on altı piksel olarak kalır. Bu fark, varsayılan bir bileşen yüzeyinin on altı piksellik bir içerik makalesine kıyasla neden daha sıkışık görünebileceğini açıklar.
Sayfa, --rs-bg-card panellerinin arkasında --rs-bg-well; ajanda ayırıcılarında ise --rs-border-primary kullanır. İşaretçi primary-500 rengini, alan hatası ise text-error anlamsal rolünü kullanır. Referans, sağlayıcı teması değerleri değiştirdiğinde rollerin anlaşılır kalması için metin ve yüzey takma adlarını korur.
React Suite Tasarım Sistemi: Takvim Çevresinde Kitaplığın Ölçeğini Kullanın
Takvim Çevresinde Kitaplığın Ölçeğini Kullanın
Gerçek köşe yarıçapı skalasında varsayılan kök boyutta sm ile xl arasında dört, altı, sekiz ve on iki piksellik değerler bulunur. Temel aralık artışı 0.25rem'dir. Sağlanan CSS, bunları dekoratif bir palet gibi ele almak yerine çevresindeki ajanda ve yardımcı içerikte gerçek yüzey ve metin değişkenlerini kullanır.
Uygulamanın başlığı, satır yüksekliği 1.2 olan ve açıkça 32px seçilmiş bir değerdir; dar ekranlarda 28px'e düşürülür. Oturum başlıkları, kompakt ajanda satırlarına sığması için on yedi piksel kullanır. Bu sayfa tercihleri kitaplığın genel tipografi değişkenlerini geçersiz kılmaz. Böylece Calendar etiketleri ve iletişim kutusu kontrolleri yerel bileşen boyutlarını korur.
React Suite Tasarım Sistemi: Seçili Tarihi UTC Kayması Olmadan Denetleyin
Seçili Tarihi UTC Kayması Olmadan Denetleyin
Calendar bir Date değeri alır; onSelect ise bu seçili değeri günceller. isoWeek, görünür haftayı pazartesi günü başlatır. Sabit başlangıç değeri new Date(2026,9,14) kullanır; dokuz, JavaScript ayları sıfır tabanlı olduğundan Ekim ayına karşılık gelir. Sayfa, bugünün takvimine ilişkin bir iddia değil, bilerek sabit tutulmuş bir örnektir.
Anahtar işlevi, yerel YYYY-MM-DD anahtarı oluşturmak için getFullYear, getMonth ve getDate kullanır. Bazı saat dilimlerinde yerel takvim gününü kaydırabilen UTC dönüşümünden kaçınmak için toISOString().slice(0,10) kullanmaz. Bu kayıtlar günün belirli bir saati olmaksızın tarihleri temsil eder; dolayısıyla örtük bir UTC dönüşümü eklemek, veride bulunmayan bir anlam yaratır.
React Suite Tasarım Sistemi: Tarih İşaretçileri ve Seçili Gün İçeriği
Tarih İşaretçileri ve Seçili Gün İçeriği
renderCell, yerel kayıtlarda o tarihe ait bir kayıt olup olmadığını denetler ve küçük bir etkinlik işaretçisi döndürür. Bu işaretçi yardımcı niteliktedir: Tarihi seçmek, gerçek başlıkları ajandada gösterir. Tek başına renkli bir nokta, kullanıcıya ne planlandığını söylemez veya doğru öğeyi kaldırmasına olanak tanımaz.
Kompakt takvim, mobil görünümde de dar kalır. Ajanda; tarih başlığı, oturum kartları ve yerel bir ekleme eylemi içeren ayrı bir Panel'dir. Özgün 760px kırılma noktasında takvimin altına geçer. Bu düzen, tam bir etkinlik başlığının her takvim hücresine sıkıştırılmasını veya okunaksız bir yatay takvim oluşturulmasını önler.
Navigation review oturumunun bulunduğu örnek günü seçin.
Noktaya güvenmek yerine oturum başlığını ajandada inceleyin.
Oturumu kaldırın ve kayıt kalmadığında tarih işaretinin kaybolduğunu doğrulayın.
React Suite Tasarım Sistemi Uygulamasında Zamanlama Kuralları Açıkça Belirtilmiştir
Uygulamanın Zamanlama Kuralları Açıkça Tanımlanmıştır
getDay() değerleri sıfır ve altı kullanılarak hafta sonu zamanlaması devre dışı bırakılır. Ajanda, gün çalışmıyor izlenimi vermek yerine kuralı açıklayabilsin diye bu tarihlerin seçilmesine yine de izin verir. Bir uyarı mesajı gösterilir ve ekleme düğmesi devre dışı bırakılır. Bu, React Suite Calendar'ın bir kısıtlaması değil, yerel bir ekip politikasıdır.
Oturum bulunmayan bir hafta içi gün için özel bir boş durum gösterilir ve ekleme işlemi kullanılabilir kalır. Bir oturumu kaldırmak kayıtları günceller ve yerel bir bildirim gösterir. Katılımcıya bildirim gönderildiği iddia edilmez. Date nesneleri, kayıt dizisi ve basit politika kaynakta görünür; böylece gerçek bir ürün için bilinçli olarak değiştirilebilir.
React Suite Tasarım Sistemi: Doğrulamalı, Odaklanmış Bir Giriş Penceresi
Doğrulama İçeren Odaklanmış Bir Kayıt İletişim Kutusu
İnceleme oturumu ekle penceresi açıldığında başlık ve önceki hata temizlenir. Modal; Header, Title, Body ve Footer bileşenlerinden oluşur, açılma ve onClose davranışı React durumu tarafından kontrol edilir. Girdinin ilişkili bir etiketi, geçersiz durum işareti ve hata açıklaması vardır. Kırpılmış hâliyle üç karakterden kısa olan bir başlık, pencerenin açık kalmasına ve bir uyarı gösterilmesine neden olur.
Geçerli bir gönderim, seçili tarih için bir kayıt ekler, pencereyi kapatır ve bilgilendirme mesajı gösterir. Modal bileşeni, Escape ve odak yönetimi de dâhil olmak üzere iletişim kutusunun davranışını yönetir. İptal yalnızca taslağı kapatır. Uygulama, kendi başlık kuralının karşılanıp karşılanmadığını öğrenmeden pencereyi kapatmaz.
İptal, kaydedilmemiş başlığı siler.
Reddedilen başlık, düzeltilmek üzere korunur.
Geçerli bir başlık yerel kayıtlara eklenir ve takvim işareti güncellenir.
React Suite Tasarım Sistemi: v6 Stillerini ve Uygulamanın Tamamını Yükleyin
v6 Stillerini ve Uygulamanın Tamamını Yükleyin
Bir React projesine [email protected] yükleyin ve rsuite/dist/rsuite.min.css dosyasını içe aktarın. App örneğinde bu içe aktarma, özgün style.css dosyası ve CustomProvider sarmalayıcısı bulunur. Kurulum girişinde React createRoot kullanılır ve uzak bir CDN'e bağlı değildir. Bağımsız önizleme, aynı yerel bileşenleri ve CSS öğesini yerel olarak paketler.
React Suite ayrıca sıfırlama içermeyen bir stil sayfası dağıtımı da sunar. Bu örnekte standart stil sayfası bilerek kullanılmıştır; her iki dağıtımı birlikte kullanmak stilleri yineler ve sayfayı hangi sıfırlamanın yönettiğini belirsizleştirir. Mevcut bir uygulamada, çevresindeki stil mimarisine uygun dağıtımı seçin ve formlarla başlıkları birlikte doğrulayın.
React Suite Tasarım Sistemi: Gerçek Bir Takvim İçin Ek Alan Durumu Gerekir
Gerçek Bir Takvim İçin Ek Alan Durumu Gerekir
Bağlı bir zamanlayıcıda saatler, saat dilimleri, katılımcılar, izinler ve kalıcılık sonucu bulunmalıdır. Yalnızca tarih içeren bu örnek, bu alanları uydurmaz ve başarılı bir durum güncellemesinin davetiye gönderdiğini öne sürmez. Alt bilgi ve bildirimler, işlemin yerel kapsamını açıkça belirtir. Yerel tarih anahtarı işlevi bu kayıtlar için uygundur ancak saat dilimini dikkate alan toplantılar için eksiksiz bir strateji değildir.
Uzak istek ekliyorsanız, doğrulanmış bir sonuç alınana kadar taslak penceresini açık tutun veya kurtarılabilir bir hata gösterin. Yinelenen gönderimleri önleyin ve hata sonrasında seçili tarihi ve başlığı koruyun. Kitaplık arayüz ilkellerini sağlar; uygulamanın doğruluğu, bu ilkellerin gerçek işlemle ilişkilendirilmesine bağlıdır.
Tarih hücresi işaretleyicileri, yerel tarih anahtarları ve modal giriş akışı içeren kontrollü Calendar.
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>}
Sayfa başlığı ve 760px kesme noktası özgün tercihlerdir.
04
React Suite Tasarım Sistemi AI Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
React 19 ve React Suite 6.2.4 ile oluşturulmuş yerel örnek. Harici takvim hizmeti kullanılmaz. Uygulamanın tamamı ve stilleri yukarıda verilmiştir.
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
Projeniz İçin Bir İstem
Ajan İstemi
CustomProvider ve yerel stil sayfasıyla React Suite 6.2.4 Calendar ve ajanda bileşimini kullanın. Yerel bir inceleme kaydı için hafta içi günlerin seçilebilmesini, hafta sonlarının devre dışı olmasını ve Modal/Input akışını koruyun. Seçili tarihi ve ajanda kayıtlarını uygulama durumunda tutun, eklemeden önce girilen inceleme bilgilerini doğrulayın ve iptal edildiğinde ajandayı değiştirmeyin. Duyarlı takvim düzenini ve tarihe özgü ajanda çıktısını koruyun. Takvim davetiyesi veya harici zamanlama hizmeti olduğunu öne sürmeyin.
05
React Suite Tasarım Sistemi Kaynakları ve Kapsamı
React Suite 6.2.4. Özgün hafta sonu politikası ve örnek kayıtlar içeren, yalnızca yerel tarihleri kapsayan takvim; davetiye veya harici zamanlama yoktur.
