I write a component registry for interfaces that hold a lot of data. It has demos, it has a docs site, it has a test suite. What it did not have was a real application built on it by somebody who could not reach into the source, so I built one.
The rule I set myself was that nothing could shortcut. Everything came from the published CLI against the live registry, no workspace link, no local path. If something was awkward I had to feel it rather than fix it from the inside.
Four things broke.
The table body had a hard height cap, so a table that is the whole page could not fill the viewport. There was no way for a caller to change it.
A column head is drawn in the interface typeface and was being measured with the advance of the data typeface. In my own pairing the data face was the wider of the two, so every head fit by luck. The moment I used a narrower one, heads truncated.
The chart's range selection was inserted underneath every mark. That works for a line and disappears completely under a filled bar on a continuous scale, which no demo of mine had.
And Chrome draws its own focus ring on a focusable SVG element for a plain :focus, where a button only gets one for :focus-visible. A mouse drag on the chart left a blue outline behind that my stylesheet never asked for.
All four are fixed and released. The application is a shortwave listening board, which shows what is on air right now and how much of the path between you and the transmitter is in darkness.
https://grayline-sley-ui.vercel.app
https://sley-ui.dev
Top comments (0)