Merge branch 'triptease-dl/add-styles'

Author: CVarisco

package-lock.json

@@ -42,4 +42,4 @@
     "jest": "^20.0.4",
     "npm-watch": "^0.1.7"
   }
-}
+}

package.json

@@ -123,7 +123,11 @@ function generateFiles(params) {
   }
 
   // Create js file
-  fs.outputFile(`${destination}/${name}.${jsExtension}`, generateComponentTemplate(type, name))
+  fs.outputFile(
+    `${destination}/${name}.${jsExtension}`,
+    generateComponentTemplate(type, name, { cssExtension })
+  )
+
   // Create css file
   if (cssExtension) {
     fs.outputFile(`${destination}/${name}.${cssExtension}`, generateStyleFile(name))

src/files.js

@@ -31,17 +31,17 @@ describe('Template index', () => {
 
   it('should call class.template when class is passed into generateComponentTemplate', () => {
     generateComponentTemplate('class', 'test')
-    expect(mockClassTemplate).toHaveBeenCalledWith('test')
+    expect(mockClassTemplate).toHaveBeenCalledWith('test', {})
   })
 
   it('should call pure.template when pure is passed into generateComponentTemplate', () => {
     generateComponentTemplate('pure', 'test')
-    expect(mockPureTemplate).toHaveBeenCalledWith('test')
+    expect(mockPureTemplate).toHaveBeenCalledWith('test', {})
   })
 
   it('should call functional.template when stateless is passed into generateComponentTemplate', () => {
     generateComponentTemplate('stateless', 'test')
-    expect(mockFunctionalTemplate).toHaveBeenCalledWith('test')
+    expect(mockFunctionalTemplate).toHaveBeenCalledWith('test', {})
   })
 
   it('should export generateIndexFile with correct module', () => {

src/templates/__tests__/index.test.js

@@ -12,12 +12,13 @@ const types = {
   pure: generatePureComponent,
 }
 
-function generateComponentTemplate(type, name) {
-  return types[type](name)
+function generateComponentTemplate(type, name, options = {}) {
+  return types[type](name, options)
 }
 
 export {
   generateComponentTemplate,
+  generateClassComponent,
   generateStyleFile,
   generateIndexFile,
   generateTestTemplate,

src/templates/index.js

@@ -0,0 +1,21 @@
+import template from '../common.template'
+
+describe('Common Template', () => {
+  it('should a string', () => {
+    expect(typeof template()).toBe('string')
+  })
+
+  it('should create imports with react and proptypes', () => {
+    expect(template('Foo')).toContain(
+      `import React from 'react'
+import PropTypes from 'prop-types'`
+    )
+  })
+
+  it('should add styles import when cssExtension is passed', () => {
+    const cssExtension = 'css'
+    expect(template('Foo', { cssExtension })).toContain(
+      `import styles from './Foo.${cssExtension}`
+    )
+  })
+})

src/templates/js/__tests__/common.template.test.js

@@ -1,6 +1,8 @@
-function generateClassComponent(COMPONENT_NAME) {
-  return `import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import generateImports from './common.template'
+import defaultOptions from './config.json'
+
+function generateClassComponent(COMPONENT_NAME, { cssExtension } = defaultOptions) {
+  return `${generateImports(COMPONENT_NAME, { cssExtension })}
 
 class ${COMPONENT_NAME} extends Component {
     constructor(props) {

src/templates/js/class.template.js

@@ -0,0 +1,9 @@
+import defaultOptions from './config.json'
+
+function generateImports(COMPONENT_NAME, { cssExtension } = defaultOptions) {
+  return `import React from 'react'
+import PropTypes from 'prop-types'
+${cssExtension ? `import styles from './${COMPONENT_NAME}.${cssExtension}'` : ''}`
+}
+
+export default generateImports

src/templates/js/common.template.js

@@ -0,0 +1,3 @@
+{
+    "cssExtension": null
+}

src/templates/js/config.json

@@ -1,6 +1,8 @@
-function generateFunctionalComponent(COMPONENT_NAME) {
-  return `import React from 'react'
-import PropTypes from 'prop-types'
+import generateImports from './common.template'
+import defaultOptions from './config.json'
+
+function generateFunctionalComponent(COMPONENT_NAME, { cssExtension } = defaultOptions) {
+  return `${generateImports(COMPONENT_NAME, { cssExtension })}
 
 const ${COMPONENT_NAME} = ({}) => (
   <div className="${COMPONENT_NAME}"></div>

src/templates/js/functional.template.js

@@ -1,6 +1,8 @@
-function generatePureComponent(COMPONENT_NAME) {
-  return `import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
+import generateImports from './common.template'
+import defaultOptions from './config.json'
+
+function generatePureComponent(COMPONENT_NAME, { cssExtension } = defaultOptions) {
+  return `${generateImports(COMPONENT_NAME, { cssExtension })}
 
 class ${COMPONENT_NAME} extends PureComponent {
     constructor(props) {