DataTable proved one fix and exposed another missing public type

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. After #1 through #5, login, this round covered ⁠an admin data table⁠.

The conditions stayed the same: ⁠the package exactly as shipped, including the fixes from issues #52 and #53, plus the docs, with no source access or provider hint.⁠ The assignment was a ⁠user list⁠ of about 16 rows, with name, role, status, join date, and monthly recurring revenue. It needed text search, a Select status filter, column sorting, pagination, and status badges.

Result: 4/5. Issue #52 held again

npm run build passed, the page rendered statically, and the console stayed clear. Search, status filtering, column sorting, and pagination all worked.

The cold agent selected DataTable, which is based on TanStack Table, and found ⁠sorting, pagination, and text filtering built in⁠. It also confirmed the earlier fix:

⁠No provider required.⁠ DataTable uses Radix Tooltip for sortable headers and pagination, but Gunjo's Tooltip provides what it needs internally. There is no <TooltipProvider> wrapper and ⁠no server-side rendering crash⁠.

The defect found in #3 and fixed in issue #52 ⁠did not return⁠ in a tooltip-heavy DataTable. The loop remained closed.

The rough edge: another missing export revealed a pattern

The omission did not stop the build, but it blocked consumers who wanted to use the public type.

import { type ColumnDef } from "@gunjo/ui" // Not exported

The columns prop on DataTable required ColumnDef, but ⁠the shared @gunjo/ui entry point did not export that type⁠. Consumers had to import it directly from @tanstack/react-table. That package was only a transitive dependency, absent from their own package.json, so strict installation setups could break. I logged issue #56, and the export landed in PR#59.

This was ⁠the same class of problem as ChartDataPoint in #4⁠, tracked in issue #53. A public component required a type through its public props, but the main @gunjo/ui entry point did not export it. That made it a pattern, not a lone bug. Issue #56 therefore covered an audit of every public prop type, not only the ColumnDef export. As with the tooltip defect from #3, one example should trigger a fix for the whole class.

Other rough edges:

• ⁠The docs' code examples still did not appear in fetched content⁠, the known issue issue #50. Bundled TypeScript types let consumers reconstruct the composition.
• DataTable filters text in a single column. The agent handled the status Select outside it with useMemo, a clean composition around an intentional constraint.
• The inner <table> uses min-w-[720px], so extremely narrow screens scroll horizontally instead of reflowing. That was minor here.

What I took away

Have the AI use it | Find a rough edge | Fix the whole class, not one instance | Run it again

Round six showed both sides of the loop. ⁠The defect fixed in issue #52 stayed gone in another complex component.⁠ Meanwhile, ⁠issue #56 matched issue #53 and turned a single missing export into an audit.⁠ The series was revealing a more effective way to raise quality: remove whole classes of defects, such as missing types and missing providers, instead of patching one component at a time.

Next up: build log #7

• ⁠A Command-K palette using Command and Dialog⁠, a search interface for power users.

The run

• ⁠gunjo.jp⁠ / npm @gunjo/ui / ⁠GitHub⁠
• Earlier rounds: #1 / #2 / #3 / #4 / #5
• Overview: Gunjo (@gunjo/ui) / Why it exists: Design systems in the age of AI
• ⁠GunjoUI by UIXHERO⁠

Gunjo was still in early alpha at the time; issues are welcome.