chore(uptodate): generators

Author: mydearxym

utils/scripts/generators/component/class.js.hbs

@@ -1,44 +1,47 @@
 /*
-*
-* {{ properCase name }}
-*
+ *
+ * {{ properCase name }}
+ *
 */
 
 import  React from 'react'
 import PropTypes from 'prop-types'
 
-// import { inject, observer } from 'mobx-react'
-// import Link from 'next/link'
-// import styled from 'styled-components'
-
+{{#if wantStyle}}
+import { Wrapper } from './styles'
+{{/if}}
 {{#if wantMessages}}
 import { FormattedMessage } from 'react-intl'
 import messages from './messages'
 {{/if}}
 
-// @inject('')
-// @observer
-class {{ properCase name }} extends React.Component {
+import { makeDebugger } from '../../utils'
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:{{ properCase name }}:index')
+/* eslint-enable no-unused-vars */
+
+class {{ properCase name }} extends React.PureComponent {
   componentDidMount() {}
 
   componentWillUnmount() {}
 
   render() {
     return (
       <div>
-      {{ properCase name }} component
-      {{#if wantMessages}}
-        <FormattedMessage {...messages.header} />
-      {{/if}}
+        {{ properCase name }} component
+        {{#if wantMessages}}
+          <FormattedMessage {...messages.header} />
+        {{/if}}
       </div>
     )
   }
 }
 
-export default {{ properCase name }}
-
-Index.propTypes = {
+{{ properCase name }}.propTypes = {
   // https://www.npmjs.com/package/prop-types
 }
 
-Index.defaultProps = {}
+{{ properCase name }}.defaultProps = {}
+
+export default {{ properCase name }}

utils/scripts/generators/component/index.js

@@ -36,9 +36,15 @@ module.exports = {
     {
       type: 'confirm',
       name: 'wantI18n',
-      default: true,
+      default: false,
       message: 'Do you want i18n messages (i.e. will this component use text)?',
     },
+    {
+      type: 'confirm',
+      name: 'wantStyle',
+      default: true,
+      message: 'Does it have styles?',
+    },
   ],
   actions: data => {
     // Generate index.js and index.test.js
@@ -79,6 +85,15 @@ module.exports = {
       })
     }
 
+    if (data.wantStyle) {
+      actions.push({
+        type: 'add',
+        path: '../../../components/{{properCase name}}/styles/index.js',
+        templateFile: './component/styles.js.hbs',
+        abortOnFail: true,
+      })
+    }
+
     return actions
   },
 }

utils/scripts/generators/component/stateless.js.hbs

@@ -1,18 +1,22 @@
- /*
+/*
  *
  * {{ properCase name }}
  *
- */
+*/
 
 import React from 'react'
 import PropTypes from 'prop-types'
 
+{{#if wantStyle}}
+import { Wrapper } from './styles'
+{{/if}}
 {{#if wantI18n}}
 import { FormattedMessage as I18n } from 'react-intl'
 import lang from './lang'
 {{/if}}
 
 import { makeDebugger } from '../../utils'
+
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('c:{{ properCase name }}:index')
 /* eslint-enable no-unused-vars */
@@ -34,4 +38,4 @@ const {{ properCase name }} = (props) => {
 
 {{ properCase name }}.defaultProps = {}
 
-export default {{ properCase name }}
+export default React.memo({{ properCase name }})

utils/scripts/generators/component/styles.js.hbs

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+// import Img from '../../Img'
+// import { theme } from '../../../utils'
+
+export const Wrapper = styled.div``
+export const Title = styled.div``

utils/scripts/generators/container/class.js.hbs

@@ -22,7 +22,7 @@ const debug = makeDebugger('C:{{ properCase name }}')
 
 // NOTE: add me to ../containers/index
 class {{ properCase name }}Container extends React.Component {
-  componentWillMount() {
+  componentDidMount() {
     const {{preCurly ""}} {{ camelCase name}} {{afterCurly ""}} = this.props
     logic.init({{ camelCase name }})
   }

utils/scripts/generators/container/index.js

@@ -35,7 +35,7 @@ module.exports = {
     {
       type: 'confirm',
       name: 'wantI18n',
-      default: true,
+      default: false,
       message: 'Do you want i18n messages (i.e. will this container use text)?',
     },
   ],

utils/scripts/generators/container/styles.js.hbs

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
-// import Img from '../../Img'
+
+// import Img from '../../../components/Img'
 // import { theme } from '../../../utils'
 
 export const Wrapper = styled.div``

utils/scripts/generators/index.js

@@ -2,7 +2,7 @@ const componentGenerator = require('./component/index.js')
 const containerGenerator = require('./container/index.js')
 const storeGenerator = require('./store/index.js')
 
-module.exports = function(plop) {
+module.exports = function generators(plop) {
   // see: https://github.com/amwmedia/plop/issues/116
   plop.setHelper('preCurly', t => `{${t}`)
   plop.setHelper('afterCurly', t => `${t}}`)