1. Design and engineer a component library
Meetup 03-11-2022

2. Why build a UI Library
- Unsatisfied with existing UI libraries (e.g. AntDesign)
- does not allow customization beyond colors
- questionable api decisions
- huge bundle sizes
- Easy theming and branding
- one design across applications
- Reusable “Higher Level” components
- Reduce package-bloat
- Control

3. First approach
- Take existing UI and break it up into reusable components
- Implement using Atomic Design
- Library was applied in multiple internally used frontends
- inconsistent styling
- no accessibility considerations
- dropdowns are complicated

4. Version 2
- Use a headless ui library
- Accessibility, keyboard controls out of the box
- completely free styling options
- Work in Progress
- unify the style between components
- use Radix ui for interactive items
- discover requirements for micro-frontend system

5. Atomic Design
- reuse components
easily
- preserve
maintainability for
complex components
- develop in isolation
and with context
https://atomicdesign.bradfrost.com/chapter-2/

6. Storybook
- UI development and documentation tool
- design and interact with components in isolation
- test accessibility concerns, responsiveness, dark-mode
- fast development feedback
- can be deployed to serve as documentation
- testing automations

7. Tailwind
- Css library based on utility classes
- constrain designs via colors, spacing, font sizes
- makes it easy to achieve responsiveness
- lends itself to component-based design
<button className="rounded bg-white px-4 py-2 shadow-md border border- highlight-500">

8. Radix-UI
- unstyled UI library
- groundwork for interactive components
- keyboard support
- accessibility
- focus handling
- eg. Dropdown:
- Submenus
- Checkboxes

9. Demo
Storybook & Tailwind