Add styled-components with typescript example #1341
Conversation
There was a problem hiding this comment.
Thanks!
Could you add ThemeProvider as well to make this example more realistic?
https://github.com/component-driven/component-driven-development/blob/master/src/StyleGuideWrapper.js
https://github.com/component-driven/component-driven-development/blob/c18663855a780e27734c9aec2a0253d36aee4c22/styleguide.config.js#L13-L15
| import styled from 'styled-components' | ||
|
|
||
| interface ButtonProps extends HTMLButtonElement { | ||
| btnType: 'primary' | 'secondary', |
There was a problem hiding this comment.
Let's simplify this a bit: rename a prop to variant and pass it to a styled component, so we don't duplicate the whole component markup twice.
Or just copy code here:
https://github.com/component-driven/component-driven-development/blob/master/src/components/core/Button/Button.js
| path.resolve(__dirname, 'src'), | ||
| path.join(__dirname, 'node_modules') | ||
| ], | ||
| extensions: ['.js', '.ts', '.tsx'] |
There was a problem hiding this comment.
Make sense to update the default extensions list:
| noParse: /\.(css|scss)/ | ||
| }, | ||
| resolve: { | ||
| modules: [ |
examples/styled-components/Readme.md
Outdated
| @@ -0,0 +1,14 @@ | |||
| # React Styleguidist styled-components typescript example style guide | |||
examples/styled-components/Readme.md
Outdated
| @@ -0,0 +1,14 @@ | |||
| # React Styleguidist styled-components typescript example style guide | |||
|
|
|||
| See [deployed version](https://react-styleguidist.js.org/examples/styled-components/). | |||
There was a problem hiding this comment.
This won't work, we only deploy basic example. But maybe we should deploy other examples too…
|
@sapegin Thanks for your feedback. All changes updated. |
|
Thanks! |
|
🎉 This PR is included in version 9.0.9 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Adding a simple example with styled-components and TypeScript