Crea una bacheca per la pianificazione delle issue con i token semantici Atlassian, una scala di spaziatura a intervalli di otto pixel, le API reali di Button, Lozenge e Toggle e la configurazione di stile Compiled richiesta. Esamina un’issue, filtra la bacheca e sposta un elemento di lavoro locale senza confondere la selezione con lo stato.
Interpretazione di HTML/CSS con valori verificati di spaziatura e forma, palette cromatica illustrativa e fallback ai font di sistema; non è un runtime di Jira o Atlaskit nativo. · Riferimento per l’implementazione
02
Riferimento di design sistema di design Atlassian
Nel codice usa esattamente i nomi dei token semantici. Il riferimento ufficiale espone alias della palette cromatica diversi a seconda del tema chiaro o scuro; queste righe riportano quindi gli alias invece di inventare un valore esadecimale stabile. I valori numerici di spaziatura e raggio provengono dalle scale documentate. I colori esadecimali dell'anteprima sono illustrativi, non un'esportazione dei token.
Pacchetti ADS pubblici di sistema di design Atlassian e requisiti effettivi di stile
Importare un componente non basta per completare l'integrazione
I componenti Atlassian Design System sono pubblicati sotto @atlaskit, ma il catalogo Atlaskit più ampio include anche pacchetti specifici per le app. Questo esempio sceglie tre primitive documentate: Button, Lozenge e Toggle, oltre ai token e al reset di CSS. Il modello di dati è intenzionalmente locale. Queste importazioni non forniscono permessi per le issue di Jira, logica degli sprint né un backend.
La guida di configurazione corrente richiede l'integrazione con Compiled per le applicazioni che usano pacchetti della piattaforma, anche se l'applicazione non crea stili Compiled. Per questo la configurazione Parcel fornita fa parte dell'esempio. Copiare un'importazione di Button senza configurare il bundler può produrre stili incompleti o nell'ordine errato: è un problema di integrazione funzionale, non una nota cosmetica trascurabile.
Sistema di design Atlassian Usa token semantici invece di ipotizzare i colori della palette
Un token descrive una funzione
token("color.text") indica il testo in primo piano primario, mentre token("color.text.subtle") è destinato alle informazioni secondarie. Il testo selezionato usa un ruolo distinto dal testo di pericolo. La bacheca usa elevation.surface per l'area principale ed elevation.surface.sunken per un'area di raggruppamento. Queste scelte restano comprensibili quando cambia il tema, perché i loro nomi ne esprimono la funzione.
Il catalogo ufficiale fornisce alias della palette chiara e scura per questi ruoli. La tabella di riferimento conserva queste informazioni invece di garantire un unico valore esadecimale permanente. L'esempio incorporato usa una palette illustrativa, indicata come tale. I suoi colori rendono leggibile l'esempio locale, ma non sono una fonte di riferimento alternativa per un tema Atlaskit di produzione.
Sistema di design Atlassian Un'unità di base di otto pixel con incrementi frazionari intenzionali
Interpreta il suffisso come una percentuale
space.100 corrisponde a 8px; space.200 a 16px; space.025 a 2px. La scala prevede incrementi frazionari perché le distanze ridotte e l'allineamento ottico richiedono più precisione delle unità intere di otto pixel. La bacheca usa space.300 intorno ai contenuti principali e space.150 tra gli elementi correlati. Una chiamata a un token restituisce un valore CSS dipendente dal tema, non un numero su cui eseguire operazioni aritmetiche JavaScript arbitrarie.
Usa la stessa spaziatura per relazioni dello stesso tipo. La distanza tra la chiave di un ticket e il titolo dovrebbe essere minore di quella che separa l’elenco dei ticket dall’ispettore. Esistono token di spaziatura negativa, ma il layout standard della board non ne ha bisogno. Una superficie di lavoro densa dovrebbe guadagnare spazio tramite la composizione, non sovrapponendo elementi non correlati.
Sistema di design Atlassian I token tipografici sono dichiarazioni complete dei font
Non usare font.body in font-size
Il catalogo definisce esplicitamente token compositi per la proprietà font CSS. L’esempio assegna font.heading.large al titolo della pagina e font.heading.medium al titolo dei dettagli. Usare uno di questi token come fontSize ne comprometterebbe il contratto previsto. Il ruolo body è adatto ai riepiloghi brevi dei ticket, mentre per le descrizioni lunghe si può usare font.body.large, se il layout circostante favorisce la lettura.
I caratteri tipografici attualmente usati dall’applicazione sono Atlassian Sans e Atlassian Mono. Sans deriva da Inter Variable; Mono deriva da JetBrains Mono. Questa identità è importante quando si descrive il sistema, ma questa anteprima autonoma non ridistribuisce quei font. Usa un fallback di sistema e lo dichiara. In un’implementazione di produzione, usa il metodo supportato per distribuire i font e la relativa licenza, anziché rinominare un carattere tipografico qualsiasi.
Sistema di design Atlassian Usa forma ed elevazione per spiegare la superficie di lavoro
Una scheda è rialzata perché è un oggetto
La documentazione distingue una superficie di raggruppamento incassata, le schede rialzate e le superfici sovrapposte. Concettualmente, un elemento di lavoro spostabile appartiene al livello rialzato, mentre una colonna della board raggruppa quegli elementi. Un ispettore che fa parte della pagina standard non ha automaticamente bisogno dell’ombra di una superficie sovrapposta. Abbina i ruoli di superficie e ombra quando l’elevazione è davvero rilevante.
I nomi delle forme attualmente disponibili includono radius.xsmall a 2px, radius.small a 4px e radius.medium a 6px. Non sono la vecchia denominazione border.radius che uno sviluppatore potrebbe ricordare da un altro sistema. La tabella mantiene i nomi esatti. I controlli nativi dovrebbero usare lo stile fornito; i contenitori esterni personalizzati possono adottare il ruolo pertinente senza sovrascrivere le classi generate private.
Sistema di design Atlassian La selezione di un pulsante è diversa da una transizione del ticket
Scegli con cura aspetto e stato
L’import verificato di Button è @atlaskit/button/default/button. appearance="primary" mette in risalto un’azione principale; isSelected indica il ticket attualmente selezionato in questo esempio nativo compatto. Facendo clic, cambia solo il ticket esaminato. Un controllo separato modifica lo stato del flusso di lavoro. Questa separazione evita che la selezione di una riga avvii o completi il lavoro senza che l’utente lo sappia.
API include anche isLoading, isDisabled, spacing="compact" e shouldFitContainer. Il caricamento indica un’operazione in corso, non uno stato permanente del ticket. Un’azione disabilitata dovrebbe avere una motivazione comprensibile, poiché i controlli disabilitati potrebbero essere ignorati nella navigazione da tastiera. Per questo la board autonoma mantiene disponibili i controlli di ispezione e permette all’utente di verificare direttamente lo stato locale corrente.
Sistema di design Atlassian Lozenge e Toggle comunicano tipi di stato diversi
Lo stato non è una modalità di interazione
Gli aspetti di Lozenge includono information, danger e success, che l’esempio associa rispettivamente a In progress, Blocked e Done. Il significato è espresso dalle parole; il colore è ridondante. Un elemento bloccato resta tale anche quando viene selezionato. Il filtro per assegnatario usa Toggle con isChecked e onChange, perché quel valore booleano modifica gli elementi mostrati dalla board, non lo stato di un ticket.
Il selettore dello stato locale è volutamente semplice e non implica l’esistenza di un vero modello di autorizzazioni. In produzione, la transizione di un ticket potrebbe richiedere una motivazione, un ruolo o una risposta del servizio. Mantieni la logica di autorizzazione al di fuori di Lozenge e mostra il risultato confermato solo dopo che il servizio lo ha stabilito.
La selezione identifica il ticket attualmente esaminato.
Lo stato del flusso di lavoro descrive l’elemento di lavoro stesso.
Il filtro per assegnatario modifica l’insieme degli elementi visibili senza cambiare l’assegnatario.
Sistema di design Atlassian Inizializza il tema prima di visualizzare superfici con token personalizzati
Il caricamento del tema globale è asincrono
setGlobalTheme aggiorna gli attributi del tema del documento e carica il tema selezionato CSS. L’entry attende il completamento dell’operazione prima di visualizzare la board. Seleziona esplicitamente i temi chiaro e scuro, con la modalità chiara attiva inizialmente. Un vero controllo delle preferenze può aggiornare colorMode usando lo stesso API, anziché sostituire i colori in linea con valori casuali.
Le attuali opzioni per il brand personalizzato sono contrassegnate come alpha e usano un API UNSAFE. Questa guida non adotta questo percorso instabile solo per ricolorare l’esempio. Mantieni prima il contratto stabile del tema semantico, poi valuta la personalizzazione sperimentale come scelta di dipendenza separata.
Sistema di design Atlassian Verifica un’interazione reale di consultazione dei ticket
Usa insieme i file forniti
L’esempio nativo richiede l’entry JSX, l’import di reset CSS e i due file di configurazione di Parcel. Include la raccolta di ticket, la selezione, il filtro per assegnatario, la mappatura degli stati e un messaggio aggiornato in tempo reale con il risultato. L’anteprima autonoma amplia la composizione con colonne e un ispettore, ma resta un’interpretazione HTML esplicitamente etichettata. Nessuno dei due esempi dichiara di connettersi a Jira.
Quando un filtro esclude il ticket selezionato, l’esempio nativo ne mantiene volutamente i dettagli. L’utente può continuare a esaminare l’elemento, senza essere spostato silenziosamente su un altro. Un progetto di produzione può adottare un’altra politica, ma dovrebbe spiegarla e mantenere un focus significativo. Verifica il comportamento sia su uno schermo stretto sia con tutte le colonne visibili.
Esamina WEB-18, poi seleziona un altro ticket senza modificarne lo stato del flusso di lavoro.
Attiva il filtro per assegnatario e controlla quali ticket restano visibili.
Modifica lo stato locale del ticket selezionato e verifica che il testo dello stato e la colonna corrispondano.
Torna alla board senza filtri e verifica che l’identità del ticket sia la stessa e che lo stato sia aggiornato.
Sistema di design Atlassian Esempi di componenti del sistema di design
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione HTML/CSS basata su valori verificati di spaziatura e forma, con una palette di colori esemplificativa e un fallback ai font di sistema; non è un runtime di Jira né di Atlaskit nativo.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Issue board — Atlassian interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#172b4d;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{font:inherit}button{cursor:pointer}header{padding:16px 24px;border-bottom:1px solid #dfe1e6;display:flex;align-items:center;justify-content:space-between;gap:16px}header strong{font-size:18px}.logo{color:#0c66e4;margin-right:12px}button{border:0;border-radius:4px;background:#f1f2f4;color:#172b4d;padding:8px 12px}button:hover{background:#dcdfe4}button:focus-visible,select:focus-visible{outline:3px solid #0c66e4;outline-offset:2px}.primary{background:#0c66e4;color:white}.primary:hover{background:#0055cc}main{padding:24px}.crumb{color:#626f86;font-size:12px}h1{font-size:24px;line-height:32px;margin:8px 0 16px}.tools{display:flex;align-items:center;gap:12px;margin-bottom:24px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}.column{background:#f7f8f9;min-height:280px;padding:8px;border-radius:6px}.column h2{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#626f86;margin:8px 4px 16px}.issue{text-align:left;background:white;box-shadow:0 1px 2px #091e4240;width:100%;margin-bottom:8px;padding:12px;display:block;border:2px solid transparent}.issue[aria-pressed=true]{border-color:#0c66e4}.issue:hover{background:#fff;border-color:#85b8ff}.issue strong{display:block;font-weight:500;min-height:46px}.meta{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:11px;color:#626f86}.avatar{display:inline-grid;place-items:center;width:24px;height:24px;background:#dfe1e6;border-radius:50%;font-weight:600}.tag{font-size:11px;line-height:18px;padding:1px 5px;font-weight:700;border-radius:3px;display:inline-block;background:#dfe1e6}.tag[data-status="In progress"]{background:#e9f2ff;color:#0055cc}.tag[data-status=Blocked]{background:#ffedeb;color:#ae2a19}.tag[data-status=Done]{background:#dcfff1;color:#216e4e}aside{border-left:1px solid #dfe1e6;padding-left:24px}aside h2{font-size:18px;line-height:26px;margin:12px 0 24px}dl{margin:0}dt{font-weight:600;margin:20px 0 8px}dd{margin:0}select{padding:8px;border:1px solid #8590a2;border-radius:4px;background:white;color:#172b4d;max-width:100%}.empty{padding:12px;color:#626f86;font-size:12px}footer{border-top:1px solid #dfe1e6;padding:16px 24px;color:#626f86;font-size:11px}#announcement{min-height:20px;color:#44546f;margin-top:16px}@media(max-width:720px){main{padding:16px}.layout{grid-template-columns:1fr}.board{grid-template-columns:1fr}.column{min-height:100px}aside{border-left:0;border-top:1px solid #dfe1e6;padding:16px 0 0}.issue strong{min-height:0}header{padding:16px}.tools{flex-wrap:wrap}}
</style><header><strong><span class="logo">▲</span>Product delivery</strong><span class="tag">LOCAL DEMO</span></header><main><div class="crumb">Projects / Website / Board</div><h1>Website release</h1><div class="tools"><label><input type="checkbox" id="mine"> Only Maya’s issues</label><button id="reset">Reset board</button></div><div class="layout"><section class="board" aria-label="Issues by status" id="board"></section><aside aria-label="Selected issue"><span id="key" class="crumb"></span><h2 id="title"></h2><span id="badge" class="tag"></span><dl><dt>Assignee</dt><dd id="owner"></dd><dt>Description</dt><dd id="description"></dd><dt><label for="status">Move issue to</label></dt><dd><select id="status"><option>To do</option><option>In progress</option><option>Blocked</option><option>Done</option></select></dd></dl><p id="announcement" role="status"></p></aside></div></main><footer>Independent HTML/CSS interpretation of Atlassian spacing, semantic status and persistent issue selection. System font and sample colors; no Jira connection.</footer><script>
const initial=[{id:'WEB-18',title:'Audit navigation labels',owner:'Maya Chen',status:'To do',description:'Review the wording of top-level links and check that each label describes its destination.'},{id:'WEB-21',title:'Connect locale switcher',owner:'Theo Park',status:'In progress',description:'Keep the current resource selected when a reader switches between supported languages.'},{id:'WEB-24',title:'Resolve missing image credits',owner:'Maya Chen',status:'Blocked',description:'The launch requires confirmation of the source and permitted use of two editorial images.'}];let issues=structuredClone(initial),selected='WEB-21';const board=document.querySelector('#board'),status=document.querySelector('#status');
function render(){board.replaceChildren();for(const state of ['To do','In progress','Blocked / Done']){const col=document.createElement('section');col.className='column';const entries=issues.filter(x=>(state==='Blocked / Done'?['Blocked','Done'].includes(x.status):x.status===state)&&(!document.querySelector('#mine').checked||x.owner==='Maya Chen'));const h=document.createElement('h2');h.textContent=state+' · '+entries.length;col.append(h);for(const issue of entries){const b=document.createElement('button');b.className='issue';b.setAttribute('aria-pressed',String(selected===issue.id));const t=document.createElement('strong');t.textContent=issue.title;const meta=document.createElement('span');meta.className='meta';meta.textContent=issue.id;const av=document.createElement('span');av.className='avatar';av.textContent=issue.owner.split(' ').map(x=>x[0]).join('');av.title=issue.owner;meta.append(av);b.append(t,meta);b.onclick=()=>{selected=issue.id;render();document.querySelector('#announcement').textContent='Selected '+issue.id};col.append(b)}if(!entries.length){const p=document.createElement('p');p.className='empty';p.textContent='No matching issues';col.append(p)}board.append(col)}const item=issues.find(x=>x.id===selected);document.querySelector('#key').textContent=item.id;document.querySelector('#title').textContent=item.title;document.querySelector('#owner').textContent=item.owner;document.querySelector('#description').textContent=item.description;const badge=document.querySelector('#badge');badge.textContent=item.status;badge.dataset.status=item.status;status.value=item.status}
status.onchange=()=>{const i=issues.find(x=>x.id===selected);i.status=status.value;render();document.querySelector('#announcement').textContent=i.id+' moved to '+i.status+' in this local board.'};document.querySelector('#mine').onchange=render;document.querySelector('#reset').onclick=()=>{issues=structuredClone(initial);selected='WEB-21';document.querySelector('#mine').checked=false;render();document.querySelector('#announcement').textContent='Board reset.'};render();
</script></html>
Le transizioni dei ticket influiscono solo sulla board di esempio. Questa entry HTML non verifica la configurazione di compilazione Compiled richiesta dall’implementazione Atlaskit separata.
Implementazione nativa completa
L’implementazione completa descritta nella configurazione, raccolta qui insieme alle spiegazioni specifiche di API. Segui i prerequisiti documentati per pacchetti e build nella configurazione.
jsx
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains <div id="root"></div> and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return <main style={{padding:token('space.300'),color:token('color.text'),background:token('elevation.surface')}}>
<h1 style={{font:token('font.heading.large')}}>Onboarding improvements</h1>
<label htmlFor="mine">Assigned to Maya</label>
<Toggle id="mine" isChecked={mine} onChange={e=>setMine(e.currentTarget.checked)}/>
<div style={{display:'flex',flexWrap:'wrap',gap:token('space.300'),marginTop:token('space.200')}}>
<ul style={{flex:'1 1 280px',listStyle:'none',padding:0}}>
{issues.filter(i=>!mine||i.owner==='Maya').map(i=><li key={i.id} style={{marginBottom:token('space.150')}}>
<Button isSelected={i.id===selected} onClick={()=>setSelected(i.id)}>{i.id}: {i.title}</Button>
{' '}<Lozenge appearance={appearance[i.status]}>{i.status}</Lozenge>
</li>)}
</ul>
<section aria-label="Issue details" style={{flex:'1 1 280px',padding:token('space.200'),background:token('elevation.surface.sunken')}}>
<h2 style={{font:token('font.heading.medium')}}>{issue.id}: {issue.title}</h2>
<p>Owner: {issue.owner}</p>
<label htmlFor="status">Workflow state</label>{' '}
<select id="status" value={issue.status} onChange={event=>{
const status=event.target.value;
setIssues(items=>items.map(i=>i.id===issue.id?{...i,status}:i));
setNotice(`${issue.id} moved to ${status} in this local example.`);
}}>{Object.keys(appearance).map(s=><option key={s}>{s}</option>)}</select>
<p>This local demonstration has no Jira connection or permission rules.</p>
</section>
</div><p role="status">{notice}</p>
</main>;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render(<Board/>);
}
start();
La logica completa della board React più i frammenti di configurazione richiesti riportati di seguito. Usa Parcel con l’integrazione Compiled: per i pacchetti attuali non basta importare solo CSS reset. Questo prototipo locale non dichiara di aver compilato i pacchetti nativi.
Parcel deve elaborare gli stili Compiled distribuiti
Crea .parcelrc nella directory radice del progetto. Avvia Parcel usando la sua entry HTML dopo aver installato le dipendenze elencate nella configurazione.
In questo modo si sceglie l’integrazione Parcel documentata, anziché presentare implicitamente il percorso sperimentale Vite come configurazione consigliata.
Configurazione Compiled per la trasformazione dei token
Crea .compiledcssrc accanto a .parcelrc. Fa parte della configurazione dell’applicazione che usa il pacchetto, non di uno script per la pubblicazione del pacchetto.
openIssueDetail è il gestore dell’applicazione; la configurazione completa mostra lo stato della selezione.
Non fare sembrare l’etichetta di stato un menu, a meno che non offra davvero un’interazione per cambiare stato.
04
Sistema di design Atlassian Configurazione dell’agent
Punto di partenza per l’implementazione
La logica completa della board React più i frammenti di configurazione richiesti riportati di seguito. Usa Parcel con l’integrazione Compiled: per i pacchetti attuali non basta importare solo CSS reset. Questo prototipo locale non dichiara di aver compilato i pacchetti nativi.
jsx
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains <div id="root"></div> and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return <main style={{padding:token('space.300'),color:token('color.text'),background:token('elevation.surface')}}>
<h1 style={{font:token('font.heading.large')}}>Onboarding improvements</h1>
<label htmlFor="mine">Assigned to Maya</label>
<Toggle id="mine" isChecked={mine} onChange={e=>setMine(e.currentTarget.checked)}/>
<div style={{display:'flex',flexWrap:'wrap',gap:token('space.300'),marginTop:token('space.200')}}>
<ul style={{flex:'1 1 280px',listStyle:'none',padding:0}}>
{issues.filter(i=>!mine||i.owner==='Maya').map(i=><li key={i.id} style={{marginBottom:token('space.150')}}>
<Button isSelected={i.id===selected} onClick={()=>setSelected(i.id)}>{i.id}: {i.title}</Button>
{' '}<Lozenge appearance={appearance[i.status]}>{i.status}</Lozenge>
</li>)}
</ul>
<section aria-label="Issue details" style={{flex:'1 1 280px',padding:token('space.200'),background:token('elevation.surface.sunken')}}>
<h2 style={{font:token('font.heading.medium')}}>{issue.id}: {issue.title}</h2>
<p>Owner: {issue.owner}</p>
<label htmlFor="status">Workflow state</label>{' '}
<select id="status" value={issue.status} onChange={event=>{
const status=event.target.value;
setIssues(items=>items.map(i=>i.id===issue.id?{...i,status}:i));
setNotice(`${issue.id} moved to ${status} in this local example.`);
}}>{Object.keys(appearance).map(s=><option key={s}>{s}</option>)}</select>
<p>This local demonstration has no Jira connection or permission rules.</p>
</section>
</div><p role="status">{notice}</p>
</main>;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render(<Board/>);
}
start();
Un prompt per il tuo progetto
Prompt per l’agente
Crea l’esempio Atlassian di 18 ticket fornito con React usando i token @atlaskit, il reset CSS e l’integrazione Parcel Compiled documentata. Usa le chiamate ai token semantici, i ruoli abbreviati dei font e gli import Button/Lozenge/Toggle verificati. Mantieni indipendenti la selezione, il filtro per assegnatario e lo stato del flusso di lavoro. Conserva il contesto del ticket selezionato, comunica le modifiche locali e non dichiarare una connessione a Jira o autorizzazioni reali.
05
Sistema di design Atlassian Fonti e ambito
Analisi di OpenDesign dei pacchetti pubblici Atlassian Design System React, verificata rispetto alla documentazione collegata nell’ottobre 2026. La board incorporata è un’interpretazione HTML/CSS con valori di palette esemplificativi e ticket fittizi, non un runtime di Jira né di Atlaskit nativo. L’accesso ai pacchetti pubblici non implica diritti illimitati sul brand Atlassian né lo stesso livello di assistenza disponibile internamente.
