setup component library

[bigaru]

Insights

• Headless components in React
• Awesome React Headless Components
• Known issue: primary/accent color cannot be referenced across different themes (see wp issue)
• A small set of classes are provided for individual element. These classes will be overwritten on theme switch (more info)
• we cannot use React Hooks inside save function (see wp issue)
• we can only rely on the following css variables because they are consistently used across themes:

 --wp--preset--font-size--small
 --wp--preset--font-size--medium
 --wp--preset--font-size--large
 --wp--preset--font-size--x-large

Components Candidates

• WP Components
  • they're already styled
  • limited extensibility
• Material UI
  • variant MUI is stable, but components are pre-styled
  • variant MUI Base is unstyled as desired. However, it is currently in alpha.
• RadixUI
  • unstyled
• React Aria by Adobe
  • provides only accessibility and behavior
  • requires also @react-stately

Styling Candidates

• stitches:
  • requires react runtime
  • especially hard with SSR, we cannot control SSR from WP
• styled-components:
  • same problems as with stitches
• JSS
  • same problems as with stitches
• tailwindcss
  • requires advanced css background
• Bulma
  • bulma classes has no prefix. therefore, these classes collides with theme classes
  • with a postcss plugin, own classes and bulma classes can be prefixed
  • has modifier classes such as has-text-black
• Adobe Spectrum CSS
  • too much of their corporate design
• Github Primer
  • too much of their corporate design

Conclusion

• bulma will be used for styling because it is modular, flexible and simple to use
• react-aria is chosen over radix ui because react-aria provides atomic tools to build complex components, whereas radix ui only offers limited components