feat(store-ui): Add Skeleton Atom

[lariciamota]

What's the purpose of this pull request?

Add the Skeleton Atom to store-ui with its story and test

How it works?

How to test it?

https://github.com/vtex-sites/storecomponents.store/pull/1197

References

[netlify]

✔️ Deploy Preview for storeui ready!

🔨 Explore the source changes: 1eea48d

🔍 Inspect the deploy log: https://app.netlify.com/sites/storeui/deploys/613f4ce8a3c8ba000712624c

😎 Browse the preview: https://deploy-preview-911--storeui.netlify.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1eea48d:

Sandbox	Source
Store UI Typescript	Configuration

[Gmantiqueira]

Awesome! Just one thing, I'm not sure about the styling. We're trying to decouple everything from @emotion and putting every CSS rule inside our themes. For example, the theme-b2c-tailwind.

What about putting only the essential styles inside the style={} prop (Pure CSS), then everything else inside our theme? In this case, the problem are the keyframes solution with pure inline CSS.

Maybe something like this works:

let styleSheet = document.styleSheets[0];

let keyframes =
`@keyframes store-skeleton {
   0% {
    /* Animating absolute units, such as vw, has
    better performance than relative units, such as %,
    because it needs to be recalculated every frame */
    
    transform: translate3d(-150vw, 0, 0);
   }
   100% {
    transform: translate3d(0, 0, 0);
   }
 }`;

styleSheet.insertRule(keyframes, styleSheet.cssRules.length);

Then it'll push the keyframes rule with pure JS. But well, I'm not sure.

[lariciamota]

Awesome! Just one thing, I'm not sure about the styling. We're trying to decouple everything from @emotion and putting every CSS rule inside our themes. For example, the theme-b2c-tailwind.

What about putting only the essential styles inside the style={} prop (Pure CSS), then everything else inside our theme? In this case, the problem are the keyframes solution with pure inline CSS.

Maybe something like this works:

let styleSheet = document.styleSheets[0];

let keyframes =
`@keyframes store-skeleton {
   0% {
    /* Animating absolute units, such as vw, has
    better performance than relative units, such as %,
    because it needs to be recalculated every frame */
    
    transform: translate3d(-150vw, 0, 0);
   }
   100% {
    transform: translate3d(0, 0, 0);
   }
 }`;

styleSheet.insertRule(keyframes, styleSheet.cssRules.length);

Then it'll push the keyframes rule with pure JS. But well, I'm not sure.

Good to know! Thank you, I'll look into it

[emersonlaurentino]

maybe you just leave the classes inside the component and the style is added by the theme. For example, if you are using Tailwind, you can use one of these animations: https://tailwindcss.com/docs/animation

[igorbrasileiro]

Nice job @lariciamota 👏 ! Left some comments

[emersonlaurentino]

Hey, @lariciamota . I think this PR is a little confused, I say not in relation to what you did, but in relation to the Issue.

We want our components to be style agnostic, just logic. However, it is impossible to make Skeleton without being biased by some lib (in your case @emotion/core).

I believe we should review what exactly we want with this Component. One suggestion would be to have just one div that receives the data-store-skeleton and all the logic is in the @vtex/theme-b2c-tailwind theme. What do you think?

[Gmantiqueira]

I believe we should review what exactly we want with this Component. One suggestion would be to have just one div that receives the data-store-skeleton and all the logic is in the @vtex/theme-b2c-tailwind theme. What do you think?

@emersonlaurentino I don't think so, this way our Skeleton component will be "useless" and the component functionality itself will be inside the theme. I prefer doing all the logic inside the component with native CSS, since the Skeleton doesn't need to have so many customizations. I believe that people will not change those styles very often.

The problem here is the CSS Specificity. If we put the logic inside the style attribute (inline), people will struggle to overwrite it with the data-store-attribute.

[igorbrasileiro]

Nice job!

[Gmantiqueira]

Nice!!