John Paul Davis

The International Labor Orgainzation wanted to create a design system and component library that could be used internally to make its digital products, but also could become an open-source extensible resource for anyone to use. Because their site architecture typically tends to rely on Drupal, but they also wanted to be able to create “headless” APIs that could be displayed using React.js, the component library portion needed to offer a React component and a Twig template for every component in the library.

My role in this was to act as co-tech lead, architect and main developer along with the ILO’s tech lead to devise a solution that would allow for as efficient and seamless as possible development and iteration of components which also used Storybook to document the library. We used pnpm to create a monorepo that holds the many different aspects of the library, allowing them each to be included a seperate npm package (so, for example, one can include just the CSS as its own package, or just the Twig templates.)

The React components are written supporting TypeScript, and unit tests for every component are written in Vitest. The Twig components are displayed using Maestro, a port of Storybook that consumes and displays Twig files. The Twig version of the components are written in vanillia Javascript.