feat(store-ui): Basic CSS theme and theme-addon for Storybook

[Gmantiqueira]

How it works?

This PR creates a package with a simple TailwindCSS for our Storybook.

Also adds a feature to switch between themes inside our Storybook.

How to test it?

Storybook preview.

References

Storybook Addon Themes

[netlify]

✔️ Deploy Preview for storeui ready!

🔨 Explore the source changes: 16f5feb

🔍 Inspect the deploy log: https://app.netlify.com/sites/storeui/deploys/6116aa2d9075e80007cf5ad4

😎 Browse the preview: https://deploy-preview-828--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 16f5feb:

Sandbox	Source
Store UI Typescript	Configuration

[tlgimenes]

I'm not sure if this was intended, but when switching themes they eventually stop working

[Gmantiqueira]

I'm not sure if this was intended, but when switching themes they eventually stop working

Thanks @tlgimenes, I think it's working now.

[tlgimenes]

I think it's ok. I'm just not sure about the theme name itself. My two cents is that we should prefix all themes with theme and then the name. I'd name something like:
theme-default theme-default-dark.

[tlgimenes]

Also, don't forget to add something to the README.md

[Gmantiqueira]

I think it's ok. I'm just not sure about the theme name itself. My two cents is that we should prefix all themes with theme and then the name. I'd name something like:
theme-default theme-default-dark.

I was thinking about putting the "theme" as a suffix instead of prefix, but as a prefix makes it more clear. Nice, I'll change.

[tlgimenes]

I think it's ok. I'm just not sure about the theme name itself. My two cents is that we should prefix all themes with theme and then the name. I'd name something like:
theme-default theme-default-dark.

I was thinking about putting the "theme" as a suffix instead of prefix, but as a prefix makes it more clear. Nice, I'll change.

prefixing is better because they stay together when listing the folders

[icazevedo]

The deploys failed so I can't see the changes visually 😢

Also, have you thought of naming the theme differently? Personally, I don't like naming things like "default" or "base" because it doesn't convey the real meaning/purpose of the thing, or what the thing is (a little bit philosophical).

I'd really love if we could give personality to our themes' names, like: theme-boring (what I imagine a really clean theme would be hahahah), theme-night-sky, theme-good-morning, theme-rainbow and etc.

[Gmantiqueira]

The deploys failed so I can't see the changes visually 😢

Also, have you thought of naming the theme differently? Personally, I don't like naming things like "default" or "base" because it doesn't convey the real meaning/purpose of the thing, or what the thing is (a little bit philosophical).

I'd really love if we could give personality to our themes' names, like: theme-boring (what I imagine a really clean theme would be hahahah), theme-night-sky, theme-good-morning, theme-rainbow and etc.

@icazevedo Well, I didn't think of something specific about this theme-default because I'm just copying common elements from storecomponents. Any thoughts about another name? theme-store? 🤣 just kidding

About those themes you mentioned, I'm not sure, I don't think if this is what we want for these themes. Like, yes, we need something more clear about our themes, but I think we need to name them from the "business point of view". For example, theme-b2c, theme-fashion, theme-b2b. I like the idea of doing those themes with the "visual point of view", but we need a focused designer on this, a structured design system about and blablabla 🤔 But we can take this idea forward.

[icazevedo]

The deploys failed so I can't see the changes visually 😢
Also, have you thought of naming the theme differently? Personally, I don't like naming things like "default" or "base" because it doesn't convey the real meaning/purpose of the thing, or what the thing is (a little bit philosophical).
I'd really love if we could give personality to our themes' names, like: theme-boring (what I imagine a really clean theme would be hahahah), theme-night-sky, theme-good-morning, theme-rainbow and etc.

@icazevedo Well, I didn't think of something specific about this theme-default because I'm just copying common elements from storecomponents. Any thoughts about another name? theme-store? 🤣 just kidding

About those themes you mentioned, I'm not sure, I don't think if this is what we want for these themes. Like, yes, we need something more clear about our themes, but I think we need to name them from the "business point of view". For example, theme-b2c, theme-fashion, theme-b2b. I like the idea of doing those themes with the "visual point of view", but we need a focused designer on this, a structured design system about and blablabla 🤔 But we can take this idea forward.

I totally agree with your points. The "business point of view" is very understandable but is not fun hahahaha. Just something to think about.

Maybe we could call it theme-b2c-basic for now, but that's just a suggestion :).