Handoff · Record tabs → @acrm/ui

Record tabs — balík pro repo

Sdílený modul DS.RecordTabs + record-tabs.css je hotový drop-in: jeden host, jedna knihovna panelů. Tady je API, kanonický registr klíčů a přesný postup, jak každý ze čtyř record detailů překlopit z vlastních .pr-tabs/.mr-tabs na jeden komponent. Reálná propagace „uprav jednou → změní se všude" vzniká tím, že tenhle modul žije v repu a projde /design-sync.

01Co je v balíku

Dva soubory + známé závislosti

record-tabs.jsHost DS.RecordTabs, kanonický registr DS.RecordTabsREG a všechny panely. Bez dat — data dodá obrazovka.
record-tabs.cssStyly komponenty + tokenová vrstva .rt (padding X/Y · výška řádku · gap · výška stripu).

Závislosti (načíst dřív): React, ReactDOM, Icon (icons.js), DS.TaskList, DS.EmptyState (+ Skeleton/ErrorState pro stavy TaskListu) a _ds/pills.css. Přesně to, co detaily už dnes načítají.

02API

Obrazovka řekne které taby a data

// record — co obrazovka dodá { ctx: { name, type }, tabs: [ "prehled", // klíč z REG { k: "emaily", c: 42 }, // + count { k: "setkani", label: "Účastníci" } // alias názvu ], data: { /* jeden řez na klíč tabu */ prehled: {…}, emaily: [...], ukoly: [...] } }
// render — všude stejně <DS.RecordTabs record={record} tokens={{ // vše volitelné padX: 24, padY: 16, rowPy: 12, blockGap: 24, tabH: 46, accent: "#286bef", showCounts: true }} /> // tokens vynech → platí .rt CSS defaulty. // Změna tokenů = reflow VŠECH panelů.
Klíč je zdroj pravdy. Popisek jde přepsat (label: "Účastníci"), ale chování, deep-link i výchozí název drží setkani. Tím padá drift „hovory vs setkani vs schuzky" už u kořene.
03Kanonický registr klíčů

DS.RecordTabsREG — jediná povolená množina

Obrazovka klíč vybírá, nevymýšlí. Nový tab = nová položka tady, ne copy-paste na screenu.

KlíčPanel (kind)VrstvaVýchozí popisek
prehledoverviewuniverzálníPřehled
aktivitaactivityuniverzálníAktivita
emailyemailsuniverzálníE-maily
poznamkynotesuniverzálníPoznámky
ukolytasksuniverzálníÚkoly
souboryfilesuniverzálníSoubory
setkanirelations · rel=meetingvazbaSetkání
liderelations · rel=personvazbaLidé
firmyrelations · rel=companyvazbaFirmy
obchody · projektyrelations · rel=dealvazbaObchody · Projekty
provazanirelations · rel=listvazbaProvázání
produktyproductsspecifickéProdukty
historiehistoryspecifickéHistorie fází
souhrnsummaryspecifickéSouhrn
prepistranscriptspecifickéPřepis
04Migrace obrazovky

Z vlastního stripu na jeden komponent

Dnes — v každém detailu zvlášť
// ~120 řádků .pr-tabs CSS + // vlastní TabsBar + panel funkce: function EmailsTab() {…} function CallsTab() {…} function TasksTab() {…} // … a znovu v Company/Deal/Meeting, // každá kopie se vyvíjí zvlášť → drift
Po migraci — jen konfigurace
// obrazovka = data + výběr tabů const record = { ctx: { name, type: "Osoba" }, tabs: ["prehled", "aktivita", { k: "emaily", c: 42 }, "ukoly"], data: { emaily: emaily, ukoly: ukoly } }; <DS.RecordTabs record={record} /> // panely, strip, overflow, stavy = sdílené
05Postup a governance

Čtyři obrazovky, jeden modul

Osoba
prehledaktivitaemailysetkanifirmyprojektypoznamkyukolysoubory
Firma
prehledaktivitaemailysetkanilideobchodyukolypoznamkysoubory
Obchod
prehledproduktyukolysetkaniemailypoznamkyprovazaniaktivitahistorie
Schůzka
souhrnprepispoznamkyukolysetkani
01
Přenést modul do @acrm/ui
record-tabs.js + record-tabs.css jako komponent RecordTabs; panely zůstanou jako podkomponenty. Reuse TaskList, EmptyState.
1 PR
02
Překlopit obrazovky na konfiguraci
Osoba → firma → obchod → schůzka. Každou redukovat na record = {ctx, tabs, data} + specifické panely. Smazat lokální .pr-tabs/.mr-tabs a duplicitní panel funkce.
4 PR
03
Zamknout proti driftu
Klíče jen z RecordTabsREG; lint proti novým tab namespacům; přidat RecordTabs jako kartu do skupiny Components.
0,5 PR
04
Re-sync do DS
/design-sync promítne komponent zpět do „ACRM Design System" — od té chvíle úprava v repu = změna ve všech detailech i v produkci.
sync
Proč přes repo. „ACRM Design System" je synchronizovaná read-only reference — přepis těchhle HTML by drift jen přesunul. Jediné místo, odkud se změna korektně propíše do všech record detailů i do produktu, je kód v @acrm/ui + /design-sync.
LEGACYafb5f42