docs(storybook): Theming support for stories

[mcslayer]

Done

• Hide default background select
• Add global theme select Light/Dark/Paper for strorybook
• Add HOC decorator for all stories
• Add special hack for docs background

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Steps for QA.

Percy steps

• List any expected visual change in Percy, or write something like "No visual changes expected" if none is expected.

Fixes

Fixes: # .

[webteam-app]

mcslayer is not a collaborator of the repo

[bartaz]

Demo: https://react-components-1151.demos.haus/

[bartaz]

This is awesome addition @mcslayer!

We have a requirement for all PRs to be up to date with main branch, so please rebase now that your Vanilla update is merged, thx!

[bartaz]

Is there some kind of storybook documentation or recommendation that you followed when adding the theme switcher?

[mcslayer]

There is no ready-made special documentation for this. The code is based on personal experience of using storybook in projects.

[mcslayer]

Also, instead of "Theme" we can write the name of the active theme and It looks even better. So I can add it if you approve.

[bartaz]

Also, instead of "Theme" we can write the name of the active theme and It looks even better. So I can add it if you approve.

Nice! If possible, I think it would be better for it to say both Theme: Paper Just to make sure people understand what they are changing (As "paper" itself may be not self explanatory).

(sorry, I updated you comment by mistake instead of replying 🤦 )

[mcslayer]

I made the order in the commits and made 1 commit with a force push.

Regarding the title: everything is primitive there. You can use the abstract "Theme", or take the title from the options. So I changed the titles everywhere in the list to Theme: Light, Theme: Dark, Theme: Paper

[mcslayer]

If you apply this global control, I'm preparing something else :)

[bartaz]

Great addition, thank you!

[github-actions]

🎉 This PR is included in version 1.7.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀