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...

... solved

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.

... still open

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