Cheesebit UI


Welcome

Hi there, thank you very much for being here.

This is my canvas, my very own library of components I'm building for my own
delight and/or to be some day used in one of my projects.

I've been putting my heart here and I do hope someone can make good use of it
(for learning purposes, at least for now) as much as I do.

You will see that the components are organized in a quite interesting structure,
inspired in the book _Atomic Design_, by
Brad Frost.

Helpful feedbacks are totally appreciated.

This is (and it might keep on being) an ongoing work, since I will keep adding,
changing, upgrading, improving and fixing components as I please.

You can find the docs/demo here.

Technical references

- A modern CSS reset
- CSS naming/architectures
- ITCSS
- RSCSS
- SMACSS
- Atomic Design
- Testing Library
- Preventing Content Reflow From Lazy-Loaded Images

Head-scratching that are/were...

$3

1. Functions provided as reducer for useReducer is called twice due to
development behavior of Strict mode. Since it can’t automatically detect side
effects, it tries to help you to spot them by intentionally double-invoking
functions like useState, useMemo, or useReduce (among others)
as per React docs
. You can check the discussion
here.

2. Storybook not recognizing imported SVG files. Solved using solution available
here.

$3

1. Testing Library is indeed a very helpful tool
when it comes to unit testing React components, but it's still unclear for me
how to test things such as screen resize, dimension related tests. HoCs like
ResizeWatcher
and
OverflowWatcherare
still pending to be properly unit-tested.

Who am I?

I'm Welington, Frontend Engineer
at heart.

I started my journey as a Software Engineer 9+ years ago; in the last 5+ years I
have been focusing on UI/Frontend development.

\*Icon made by
Smashicons
from
www.flaticon.com