~/talk

Design systems adventures with React and TypeScript

on YouTube 45m
Talkat reactjsday 2024 · on Friday, 2024-10-25· [react, typescript]

speaker

name:Gabriele Petronella
bluesky:gabro27.bsky.social

resources

video:https://youtu.be/KtSahYzaRsI
slides:none on file

summary

Case study of a real productized design system: a React + TypeScript library (Bento) that uses vanilla-extract and sprinkles for CSS, Storybook with Chromatic + Storybook visual testing to catch layout regressions (one refactor reveals 15 visual diffs caught), and a practical fix replacing absolute positioning with flexbox to eliminate SSR glitches. Also shows a concrete TypeScript pattern—branded localized-string types via module augmentation—that enforces translated strings at compile time while remaining runtime strings.

AI-written summary · about

chapters (6)

  1. 0:00Design systems intro
  2. 7:49Test components
  3. 12:27Testing strategies
  4. 28:43Visual testing with Chromatic
  5. 33:37Type-safe localization
  6. 40:03Q&A

related talks

~/search
type to search 6,249 conferences, 138,987 speakers and 185,172 talks
~/help
cmdctrl k
search every conference, speaker and series
/
focus the filter search
h
home
c
conferences
s
speakers
e
series
t
light / dark — the status bar button does the same
?
this help
esc
close this, then clear every filter — or just the search, while you are typing in it

Ignored while you are typing. Pages without a filter rail have no search to focus.