Merge pull request #56 from ChristianEdwardPadilla/development

user props working

Author: spincycle01

src/components/Props.jsx

@@ -83,14 +83,17 @@ const mapStateToProps = store => ({
 
 const availablePropTypes = {
   string: 'STR',
+  number: 'NUM',
   object: 'OBJ',
   array: 'ARR',
-  number: 'NUM',
   boolean: 'BOOL',
   function: 'FUNC',
-  symbol: 'SYM',
+  // symbol: 'SYM',
   node: 'NODE',
   element: 'ELEM',
+  any: 'ANY',
+  tuple: 'TUP',
+  enum: 'ENUM',
 };
 
 const typeOptions = [

src/utils/componentRender.util.js

@@ -3,6 +3,37 @@ const componentRender = (component, data) => {
     stateful, id, position, childrenArray, title, props,
   } = component;
 
+  function typeSwitcher(type) {
+    switch (type) {
+      case 'string':
+        return 'string';
+      case 'number':
+        return 'number';
+      case 'object':
+        return 'object';
+      case 'array':
+        return 'any[]';
+      case 'bool':
+        return 'boolean';
+      case 'function':
+        return '() => any';
+      // case 'symbol':
+      //   return 'string';
+      case 'node':
+        return 'string';
+      case 'element':
+        return 'string';
+      case 'tuple':
+        return '[any]';
+      case 'enum':
+        return '{}';
+      case 'any':
+        return 'any';
+      default:
+        return 'any';
+    }
+  }
+  // need to filter with reduce the import, copy from below
   if (stateful) {
     return `
       import React, { Component } from 'react';
@@ -51,12 +82,19 @@ const componentRender = (component, data) => {
     .join('\n')}
     
     type Props = {
-      ${props.map(prop => `${prop.key}: ${prop.type}`).join('\n')}
+      ${props.map(prop => `${prop.key}: ${typeSwitcher(prop.type)}`).join('\n')}
     }
 
     const ${title} = (props: Props) => (
       <div>
-        ${childrenArray.map(child => `<${child.componentName}/>`).join('\n')}
+        ${childrenArray
+    .map(
+      child => `<${child.componentName} ${data
+        .find(c => c.id === child.childComponentId)
+        .props.map(prop => `${prop.key}={${prop.value}}`)
+        .join(' ')}/>`,
+    )
+    .join('\n')}
       </div>
     );