More complex Example app

TL;DR: We need your help to build a React app covering all of the styled-components API to help us make sure the library works as expected!

---

As of #1357 we screenshot integration test our example app in CI for every PR, which is super awesome to make sure styled-components works as expected. Unfortunately, right now the example app isn’t very complex, it’s really only a couple lines of code.

We need a bigger Example app which leverages the entire styled-components public API and many CSS edge cases so we know that most things are working as expected. What specific content that app has doesn’t really matter, that’s all up to you. (massive bonus points if it looks great though!)

The app lives in the example/ folder in the repo. Whatever specific content you come up with for the app, it should use all of the following things at least once:

• styled-components API:
  • injectGlobal
  • css
  • keyframes (note: we screenshot the app in ci, so this has to be something that’s applied immediately somehow and doesn’t change over time?)
  • styled.x
  • styled.x.attrs
  • styled(SomeComp)
  • SomeStyledComp.extend
  • SomeStyledComp.withComponent
    • Theming
    • ThemeProvider
    • withTheme
  • Interpolations
    • css fragments
    • Static interpolations
    • Function interpolations with props
    • Interpolating other components
• CSS features
  • Media queries
  • Pseudo-selectors
  • Nesting
  • Parent selectors
• whatever else you can come up with!

Given the size of this task and its ambiguity it makes sense to have multiple people tackle this together. A great first step would be to come up with a quick plan for the contents of the app and then start coding! Any ideas?

[dreamorosi]

Hi everyone, huge fan of SC, I’d really love to contribute. Can we keep in touch to come up with a plan?

[dreamorosi]

So we were discussing this on Spectrum, as @mxstbr suggested, and we were kinda going toward doing very basic examples, like those found on the documentation pages, and then expand them where needed. As for the format we were thinking about mimicking the one used in the docs with the code blocks on the left and the rendered result on the right so we can keep things organised and know what is what.

I don’t think we need anything too fancy and since it’s gonna be used for screenshots only there’s no point in making it interactive (?).