Add functional component scaffolding

generators/app/index.js

@@ -2,8 +2,12 @@ var Generator = require('yeoman-generator')
 var chalk = require('chalk')
 var yosay = require('yosay')
 
-const COMPONENT = 'Components'
-const SCENE = 'Scenes'
+const CLASS_COMPONENT = 'Component'
+const CLASS_SCENE = 'Scene'
+const FUNCTIONAL_COMPONENT = 'Functional Component'
+const FUNCTIONAL_SCENE = 'Functional Scene'
+const CLASS_COMPONENT_TYPE = 'class'
+const FUNCTIONAL_COMPONENT_TYPE = 'functional'
 
 module.exports = class extends Generator {
   async prompting() {
@@ -14,15 +18,15 @@ module.exports = class extends Generator {
     this.element = await this.prompt([
       {
         type: 'list',
-        choices: [COMPONENT, SCENE],
-        default: COMPONENT,
+        choices: [FUNCTIONAL_COMPONENT, FUNCTIONAL_SCENE, CLASS_COMPONENT, CLASS_SCENE],
+        default: FUNCTIONAL_COMPONENT,
         name: 'type',
         message: 'What type of element would you like to create?',
         required: true,
       },
     ])
 
-    if (COMPONENT === this.element.type) {
+    if ([FUNCTIONAL_COMPONENT, CLASS_COMPONENT].includes(this.element.type) === true) {
       this.answers = await this.prompt([
         {
           type: 'input',
@@ -39,7 +43,7 @@ module.exports = class extends Generator {
       ])
     }
 
-    if (SCENE === this.element.type) {
+    if ([FUNCTIONAL_SCENE, CLASS_SCENE].includes(this.element.type) === true) {
       this.answers = await this.prompt([
         {
           type: 'input',
@@ -60,38 +64,24 @@ module.exports = class extends Generator {
   }
 
   createComponent() {
-    if (COMPONENT === this.element.type) {
+    if ([FUNCTIONAL_COMPONENT, CLASS_COMPONENT].includes(this.element.type) === true) {
       const elements = [
         {
-          templatePath: 'Components/index.js',
+          templatePath: `Components/${getComponentType(this.element.type)}/index.js`,
           destinationPath: `../native/App/Components/${this.answers.componentName}/index.js`,
           data: {
             componentName: this.answers.componentName,
           },
         },
         {
-          templatePath: 'tests/Components/index.js',
+          templatePath: `tests/Components/index.js`,
           destinationPath: `../native/tests/App/Components/${this.answers.componentName}/index.js`,
           data: {
             componentName: this.answers.componentName,
           },
         },
         {
-          templatePath: 'Components/mapStateToProps.js',
-          destinationPath: `../native/App/Components/${this.answers.componentName}/mapStateToProps.js`,
-          data: {
-            componentName: this.answers.componentName,
-          },
-        },
-        {
-          templatePath: 'tests/Components/mapStateToProps.js',
-          destinationPath: `../native/tests/App/Components/${this.answers.componentName}/mapStateToProps.js`,
-          data: {
-            componentName: this.answers.componentName,
-          },
-        },
-        {
-          templatePath: `Components/Element.js`,
+          templatePath: `Components/${getComponentType(this.element.type)}/Element.js`,
           destinationPath: `../native/App/Components/${this.answers.componentName}/${this.answers.componentName}.js`,
           data: {
             componentName: this.answers.componentName,
@@ -105,14 +95,33 @@ module.exports = class extends Generator {
           },
         },
         {
-          templatePath: 'Components/styles.js',
+          templatePath: `Components/${getComponentType(this.element.type)}/styles.js`,
           destinationPath: `../native/App/Components/${this.answers.componentName}/styles.js`,
           data: {
             componentName: this.answers.componentName,
           },
         },
       ]
 
+      if (this.element.type === CLASS_COMPONENT) {
+        elements.append([
+          {
+            templatePath: `Components/${CLASS_COMPONENT_TYPE}/mapStateToProps.js`,
+            destinationPath: `../native/App/Components/${this.answers.componentName}/mapStateToProps.js`,
+            data: {
+              componentName: this.answers.componentName,
+            },
+          },
+          {
+            templatePath: `tests/Components/mapStateToProps.js`,
+            destinationPath: `../native/tests/App/Components/${this.answers.componentName}/mapStateToProps.js`,
+            data: {
+              componentName: this.answers.componentName,
+            },
+          },
+        ])
+      }
+
       elements.forEach((element) => {
         this.fs.copyTpl(
           this.templatePath(element.templatePath),
@@ -125,31 +134,31 @@ module.exports = class extends Generator {
   }
 
   createScene() {
-    if (SCENE === this.element.type) {
+    if ([FUNCTIONAL_SCENE, CLASS_SCENE].includes(this.element.type) === true) {
       const elements = [
         {
-          templatePath: 'Scenes/index.js',
+          templatePath: `Scenes/${getComponentType(this.element.type)}/index.js`,
           destinationPath: `../native/App/Scenes/${this.answers.sceneName}/index.js`,
           data: {
             sceneName: this.answers.sceneName,
           },
         },
         {
-          templatePath: 'tests/Scenes/index.js',
+          templatePath: `tests/Scenes/${getComponentType(this.element.type)}/index.js`,
           destinationPath: `../native/tests/App/Scenes/${this.answers.sceneName}/index.js`,
           data: {
             sceneName: this.answers.sceneName,
           },
         },
         {
-          templatePath: `Scenes/Element.js`,
+          templatePath: `Scenes/${getComponentType(this.element.type)}/Element.js`,
           destinationPath: `../native/App/Scenes/${this.answers.sceneName}/${this.answers.sceneName}.js`,
           data: {
             sceneName: this.answers.sceneName,
           },
         },
         {
-          templatePath: `tests/Scenes/Element.js`,
+          templatePath: `tests/Scenes/${getComponentType(this.element.type)}/Element.js`,
           destinationPath: `../native/tests/App/Scenes/${this.answers.sceneName}/${this.answers.sceneName}.js`,
           data: {
             sceneName: this.answers.sceneName,
@@ -179,4 +188,13 @@ module.exports = class extends Generator {
       )
     }
   }
+
 }
+
+const getComponentType = (type) => {
+  let componentType = FUNCTIONAL_COMPONENT_TYPE
+  if ([CLASS_SCENE, CLASS_COMPONENT].includes(type) === true) {
+    componentType = CLASS_COMPONENT_TYPE
+  }
+  return componentType
+}

generators/app/templates/Components/functional/Element.js

@@ -0,0 +1,12 @@
+// @flow
+import { Container } from 'Olio/App/Components/<%= componentName %>/styles'
+
+type Props = {}
+
+const <%= componentName %> = ({}: Props): React.Node => {
+  return (
+    <Container></Container>
+  )
+}
+
+export default <%= componentName %>

generators/app/templates/Components/functional/index.js

@@ -0,0 +1,15 @@
+// @flow
+import Element from 'Olio/App/Components/<%= componentName %>/<%= componentName %>'
+import useSelector from 'Olio/App/Utils/useSelector'
+
+const <%= componentName %> = ({}: Props): React.Node => {
+  const id: number = useSelector(state => state.account.get('id'))
+
+  return (
+    <Element
+      id={id}
+    />
+  )
+}
+
+export default <%= componentName %>

generators/app/templates/Components/functional/styles.js

@@ -0,0 +1,7 @@
+// @flow
+import styled from 'styled-components/native'
+import variables from 'Olio/App/Styles/Variables'
+
+export const Container = styled.View`
+  color: ${variables.colors.white};
+`

generators/app/templates/Scenes/functional/Element.js

@@ -0,0 +1,12 @@
+// @flow
+import Text from 'Olio/App/Components/Text'
+
+type Props = {}
+
+const <%= sceneName %> = ({}: Props): React.Node => {
+  return (
+    <Text>Test</Text>
+  )
+}
+
+export default <%= sceneName %>

generators/app/templates/Scenes/functional/index.js

@@ -0,0 +1,17 @@
+// @flow
+import Element from 'Olio/App/Scenes/<%= sceneName %>/<%= sceneName %>'
+
+type Props = {
+  id: number,
+}
+
+const <%= sceneName %> = ({ id }: Props): React.Node => {
+  const { id } = this.props
+  return (
+    <Element
+        id={id}
+      />
+  )
+}
+
+export default <%= sceneName %>