/atoms

Base atomic design atoms

Primary LanguageJavaScriptMIT LicenseMIT

Note: This is a WIP project. It is not advised to use it in production.

atoms

Welcome to the atoms component library in React!

I'm writing it because I think most component libraries are bloated with useless code. Lots of code impacts bundle size and makes developers life harder. Most UI libraries require developers to send weird parameters via component attributes (ex: styling), which is not intuitive at all. This impacts the team productivity in the end, as every new component in the screen requires devs to read the documentation.

To make developers life easier, I decided to solve this problems once and for all!

What are the main pillars for the atoms project?

  1. To have dark mode embedded into it
  2. To decouple CSS, Themes, Skins and Colors from the components
  3. To make it easily customizable via CSS
  4. To avoid sending weird parameters such as styling. This will make coding with this library easy and won't require reading documentation every time you add a component on the screen
  5. To allow companies to customize components easily, making it awesome for white-label and components creation from scratch
  6. To make it extremely lightweight

What is the current status of the atoms UI component library?

Don't use it in production yet. It is in early development mode! There are still lots of work that needs to be done.

What needs to be done?

You can check the Issues section, and maybe you can help me with something :)

The roadmap I have include:

  • Revive the code I started writing back in 2020
  • Migrate it to Typescript
  • Migrate away from Typescript (because of babel + webpack mess)
  • [] Add all base components with almost no attributes
  • [] Add Flow Type Validations for all components
  • [] Create unit tests for all of them using Jest
  • [] Create one base style for all components
  • [] Add attributes to all components
  • [] Define standard parameters to make components intuitive
  • [] Create a few common themes (ex: Material Design) to bring interest
  • [] Talk about it openly in the developer community