@preply/ds-visual-coverage-core
Generic utils useful to count the Design System visual coverage.
See @preply/ds-visual-coverage-web and @preply/ds-visual-coverage-rn for platform-specific tools.
tl;dr:
Provide all the utils to count the Design System visual coverage.
As a reminder, the general idea is to
- Collect components coordinates and size
- Convert the coordinates and size into a virtual representation of the UI tree
- Count the pixels and calculate a coverage %
To visualize it: think of a page like the following, where we highlight outline the components (green = DS components, red = non-DS components)
🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥
🟥⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟥
🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥
⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️
🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥
🟥⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟥
🟥⬛️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩⬛️🟥
🟥⬛️🟩⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟩⬛️🟥
🟥⬛️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩⬛️🟥
🟥⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟥
🟥⬛️⬛️⬛️⬛️⬛️⬛️🟩🟩🟩🟩🟩⬛️🟩🟩🟩🟩🟩⬛️🟥
🟥⬛️⬛️⬛️⬛️⬛️⬛️🟩⬛️⬛️⬛️🟩⬛️🟩⬛️⬛️⬛️🟩⬛️🟥
🟥⬛️⬛️⬛️⬛️⬛️⬛️🟩🟩🟩🟩🟩⬛️🟩🟩🟩🟩🟩⬛️🟥
🟥⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟥
🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥🟥
🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩
🟩⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟩
🟩⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟩
🟩⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️⬛️🟩
🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩
the visual coverage utils convert them to an array like
[
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,0,
0,-,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-,0,
0,-,1,-,-,-,-,-,-,-,-,-,-,-,-,-,-,1,-,0,
0,-,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-,0,
0,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,0,
0,-,-,-,-,-,-,1,1,1,1,1,-,1,1,1,1,1,-,0,
0,-,-,-,-,-,-,1,-,-,-,1,-,1,-,-,-,1,-,0,
0,-,-,-,-,-,-,1,1,1,1,1,-,1,1,1,1,1,-,0,
0,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,1,
1,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,1,
1,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
]
and then counts the coverage %.
Development
You probably want to execute yarn dev
in the root, as per instructions in @preply/ds-workspace.
For quicker - and more focused - feedback, you can also directly use the scripts in this package directory, but make sure you have first executed yarn build
in root, or that you have the root yarn dev
script running in the background.
Learning
Install CodeTour and follow the platform-specific "visual coverage walkthrough" CodeTours.