MilestoneDesign SystemsadoptionReact

Menyantap sistem desain kami sendiri

Entri 021·Hari 24·Ditulis oleh Harry Osmar Sitohang·Jul 5, 2026

Minggu lalu kami memindahkan seluruh UI ke rumahnya sendiri: satu sistem desain, tiga puluh tujuh paket ber-versi, dengan katalog live di ui.pangaea.id. Itu ruang pamernya. Tapi sistem desain yang dibangun tapi tak dipakai cuma jadi museum. Minggu ini kami kerjakan bagian yang tak bertepuk tangan: membuat situs live — pangaea.id — benar-benar memakainya. Kini tiap primitif dan komponen rv-* di situs berasal dari @labspangaea/ds-*. Dan intinya justru ini: Anda, pengunjung, tak akan bisa membedakannya.

Godaan yang kami lewati

Katalognya jalan di Astro. Situs live jalan di React (vite-react-ssg). Langkah "bersih" yang menggoda: pindahkan juga situsnya ke Astro, satukan stack-nya. Kami tidak. Paketnya ESM peer-React — situs memakainya sebagai dependency biasa, tanpa ganti framework. Pindah ke Astro berarti tulis ulang berminggu-minggu dan berisiko tinggi — routing, getStaticPaths, model komponen MDX, dan memancarkan ulang semua SEO/JSON-LD/hreflang — sebuah ladang ranjau de-indexing — demi nol manfaat yang dilihat pengguna.

Aturannya: situs live yang menang

Saat sebuah paket dan situs live berbeda soal detail, kami pegang satu aturan: situs live yang menang — port tampilan/perilakunya balik ke paket. Dengan satu pengecualian: kalau versi paket itu peningkatan aksesibilitas sungguhan (focus ring yang aman-WCAG, target sentuh 44px), kami pertahankan di paket — dan situs yang mengikutinya.

Beda karena situs lebih benar

Pager pil → teks polos: situs menang
Warna, jarak, breakpoint: cocokkan ke situs

Beda karena paket lebih baik (WCAG)

focus ring AA, target sentuh 44px, hover yang di-gate ke pointer
Pertahankan di paket; situs mengadopsinya

Fase 1: buktikan tak ada yang berubah

Fondasinya — font, token, primitif card/section/layout — murni CSS. Jadi kami adopsi di bawah satu aturan keras: buktikan situs yang ter-render identik byte-demi-byte. Caranya: build main, build branch-nya, buang sidik-jari hash aset + nonce build, lalu diff HTML yang di-prerender. Identik → artinya SEO, structured data, konten, dan i18n terbukti tak tersentuh.

Fase 2: komponen yang melawan

Komponen interaktif tak identik byte — mereka punya perilaku. Tiap satu memaksa kami memutuskan sesuatu.

Pager /article: paket menatanya sebagai tombol pil; punya situs itu tautan teks polos. Kami kembalikan paket ke teks polos — kesetiaan tampilan menang.
Pengalih EN|ID dan pager: keduanya kontrol tautan yang kritis untuk SEO (tautan hreflang yang bisa di-crawl, URL /article/page/2 sungguhan) — tapi paket merender tombol biasa. Kami ajari paketnya merender tautan (lewat hook renderLink) supaya tetap SPA sekaligus bisa di-crawl.
Status ter-lokalisasi: pager menulis mati "Page X of Y"; kami tambah prop status supaya /id berbunyi "Halaman X dari Y".
Navbar — ada di tiap halaman, yang paling berisiko — kami adopsi hanya CSS-nya: pertahankan komponen Nav milik situs (tautan SPA, state aktif, tutup menu mobile, analytics), pindahkan hanya stylingnya ke paket. Nol perubahan yang terlihat, dan sebagai bonus ia membereskan CSS nav situs yang tadinya duplikat.

Kalau sebuah kontrol itu penting untuk SEO, ia butuh tautan sungguhan — bukan tombol. Ajari paketnya merender tautan; jangan turunkan situsnya jadi tombol.

— yang kami pelajari minggu ini

Yang akan kami bilang ke diri sendiri

Lakukan

Buktikan identik byte-demi-byte sebelum percaya sebuah swap CSS
Biarkan situs live menang soal kesetiaan tampilan
Ajari paketnya (bukan situsnya) saat ada celah nyata — tautan SEO, status i18n
Adopsi navbar yang berisiko cukup lewat CSS saja

Jangan

Tulis ulang framework cuma demi memakai sebuah library
Rilis perubahan tampilan "kira-kira sama" ke situs live
Taruh kontrol kritis-SEO di komponen yang tak bisa merender tautan

Intinya

Sistem desain yang Anda bangun tapi tak Anda pakai cuma museum. Bukti ia nyata: produk terpenting Anda sendiri bergantung padanya. Seluruh lapisan desain pangaea.id kini ikut bergerak saat @labspangaea/ds-* bergerak — dan hari kami melakukannya, tak ada yang sadar. Itu kemenangannya.

Cara katalog + paketnya dibangun ada di artikel: Merilis sistem desain di ui.pangaea.id. Dan kenapa kami memilih paket ber-versi ketimbang federation runtime ada di catatan: Federasi yang tak kami bangun.

Sources