Remove styled-components (closes #56)

[Gustl22]

Fix issues

• [feat] Remove styled-components #56

Description

• Remove styled-components
  • Also adapted docs accordingly
  • Additionally kept classnames, just in case someone uses these in an extra stylesheet.
• Update storybook
  • new addon for themes needed
  • Some rewrites due to: Localization react-theming/storybook-addon-material-ui#126 (comment)
• Fix and document tests
  • Some tests for ColorButton cannot performed completely, most likely due to: Cascading of inline styles jsdom/jsdom#1696 and Internal/embedded <style> tags don't cascade correctly jestjs/jest#8464
  • See also explanation in code, I really spent days to find a solution, also tried Enzyme, like described in MUI Testing. But this only refers to the properties react components themselves, and don't consider the styles of classes in the rendered result I handed over one step before. And I think it doesn't make any sense to test properties of a component, although the actual css style, which is displayed is the critical part to check. This may comes down to visual testing (?), if it's worth the effort.
  • I also went through the "solution" / code of styled-components and they actually save their style-rules for each class and look them up if needed, e.g. when testing. As far as I understood they actually not loading the style rules from the DOM.

I actually only went through the storybook and checked if anything jumped into my eye. Not sure if I covered all cases a 100%.

Check List

• respect code conventions and usages
• tests and 100% coverage, (yes, but depends, more a wontfix issue)
• well documented
• self review

Review targets:

• tests / storybook / styles

[mikbry]

Thanks @Gustl22 for your hard work! I review your PR ASAP

[mikbry]

From my tests, I see one change: button stay focused and highlighted which was not the case previously. See the blue highlight

Instead of

Compare using:
https://mikbry.github.io/material-ui-color/?path=/story/components-colorpalette--basic

[mikbry]

Some linting/prettier errors i got using VSCode

[Gustl22]

Sorry I'll make the changes the upcoming week. Thx for reviewing :)

[Gustl22]

From my tests, I see one change: button stay focused and highlighted which was not the case previously. See the blue highlight
https://mikbry.github.io/material-ui-color/?path=/story/components-colorpalette--basic

Sorry can you explain more detailed? On your mentioned deployed storybook colorpalette, I also get a highlight after clicking on it (tested on Chrome and Firefox).
Feel free to alter my code, if don't want to wait that long :)

[mikbry]

I just tested again and all is fine ;-)

[mikbry]

There is one conflict in yarn.lock, do you fix it or i do ? after that i will merge

[Gustl22]

Sure, I can do it quickly :)

[mikbry]

Ok, do it ;-)

[Gustl22]

Sorry, I found one more issue with the transparent palette. I'll let you know, when ready :)

[Gustl22]

Ready now 😅
Apparently styled-components behave differently from makestyles, when using undefined value (remove attribute vs. leave old value), so I set a default value for background-color and background-image.

I also completely refreshed the yarn.lock, if thats ok, in order to not mess up the previous conflicts.

[mikbry]

Well done, thanks @Gustl22 !

[mikbry]

Ouch I found a bug in this PR, displaying erroneous color:
in ColorPicker

• change hex textfield to 'xxx'
• the red error is mispositionned