feat(ts) support for typescript

Author: Yann VR

.gitignore

@@ -1,3 +1,4 @@
 .idea
+.history
 node_modules/
 *~

README.md

@@ -3,9 +3,9 @@
 "Automate every single boring and repetitive tasks" -- DevOps Handbook
 
 Create a styled component with test (Jest ready) including optionals story and style
-component
+component. Supports Typescript.
 
-Create components based on the following structure:
+Create components based on the following structure (example given in js)
 - `src/components/new-component/index.jsx`
 - `src/components/new-component/test.jsx`
 - `src/components/new-component/story.js` (optional)
@@ -43,7 +43,6 @@ will create a function component `<FunctionComponent />` in `src/component/profi
 ![screen recording](http://g.recordit.co/XMuQeSSrgy.gif)
 
 ### TODO
-- Handle typescript
 - Cypress template
 
 Note: the template can generate unstyled component but you'll just have to remove styled component references.

plop-templates/ts/component.function-component.hbs

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { FunctionComponent } from 'react'
 import { Styled{{name}} } from './style'
-import PropTypes from 'prop-types'
 
 export interface {{name}}Props {
 
@@ -10,7 +9,7 @@ export interface {{name}}State {
 
 }
 
-const {{name}}:React.FunctionComponent<Props, State> = () => {
+const {{name}}:FunctionComponent<{{name}}Props, {{name}}State> = () => {
 
     return (
       <Styled{{name}}>

plop-templates/ts/component.pure-component.hbs

@@ -27,12 +27,4 @@ class {{name}} extends PureComponent:React.PureComponent<Props, State> {
   }
 }
 
-{{name}}.defaultProps = {
-
-}
-
-{{name}}.propTypes = {
-
-}
-
 export default {{name}}

plop-templates/ts/test.hbs

@@ -2,7 +2,7 @@ import React from 'react'
 import 'jest-styled-components'
 import renderer from 'react-test-renderer'
 import JssProvider from 'react-jss/lib/JssProvider'
-import {{name}}Props from './{{name}}'
+import { {{name}}Props } from './{{name}}'
 import {{ name }} from './index'
 
 // Avoids inconsistent class names between snapshots

plopfile.js

@@ -61,7 +61,7 @@ module.exports = function(plop) {
       },
 
       {
-        type: 'typescript',
+        type: 'confirm',
         name: 'ts',
         message: 'Typescript?',
         default: false,