flow: fixes

src/client/components/entity.jsx

@@ -9,18 +9,16 @@ const decorate = compose(
   contempo(require('./entity.raw.scss')),
 );
 
-const json = require('~/../fixtures/kitty.entity.json');
+const json = require('~/../fixtures/watering-can.entity.json');
 
 const EntityComponent = (props) => {
-  const {context} = props;
   const entity = new Entity(json);
-  context.add('entity', entity, 'entity');
   const {traits} = json;
   return (
     <div className="entity">
       <div className="document-pane" />
       <div className="settings-pane">
-        <Traits context={context} traits={traits} />
+        <Traits context={entity.context} traits={traits} />
       </div>
     </div>
   );

src/client/components/persea.jsx

@@ -1,13 +1,10 @@
-import {Context} from '@avocado/behavior';
 import {hot} from 'react-hot-loader';
 import React from 'react';
 
 import Entity from './entity';
 
-const context = new Context();
-
 const Persea = () => (
-  <Entity context={context} />
+  <Entity />
 );
 
 export default hot(module)(Persea);

src/client/components/types/routines.type-renderer.jsx

@@ -15,7 +15,7 @@ const Routines = ({
   context,
   value,
 }) => {
-  const entries = Object.entries(value.routines);
+  const entries = value.routines ? Object.entries(value.routines) : [];
   return (
     <div className="routines">
       <ol>

src/client/components/types/steps-lists.js

@@ -20,12 +20,16 @@ export const variableStepsList = (context, previousSteps, key, variable, variabl
       steps.push({type: 'invoke', args: []});
     }
   }
-  if (!variable) {
-    return [steps];
-  }
   const sublists = Object.entries(description)
     .map(([key, description]) => (
-      variableStepsList(context, previousSteps.concat(steps), key, variable[key], description.type, type)
+      variableStepsList(
+        context,
+        previousSteps.concat(steps),
+        key,
+        'undefined' === typeof variable ? undefined : variable[key],
+        description.type,
+        type
+      )
     ))
     .map((childLists) => (
       childLists.map((stepsList) => (
@@ -34,7 +38,7 @@ export const variableStepsList = (context, previousSteps, key, variable, variabl
           : []
       ))
     ))
-  return sublists.length > 0 ? flatten(sublists) : [steps];
+  return sublists.length > 0 ? [steps].concat(flatten(sublists)) : [steps];
 };
 
 export const contextStepsList = (context, type) => (

src/client/components/types/steps.raw.scss

@@ -38,6 +38,8 @@
 }
 
 .invoke {
+  display: flex;
+  flex-direction: column;
   padding-left: 1em;
 }
 

src/client/components/types/typing.js

@@ -31,7 +31,10 @@ export function typeFromSteps(context, steps) {
       const {key} = step;
       if (key) {
         const description = Context.typeDescription(type, v);
-        return [v[key], description[key] ? description[key].type : type];
+        return [
+          'object' === typeof v ? v[key] : undefined,
+          description[key] ? description[key].type : type
+        ];
       }
       else {
         return [v, type];

src/client/components/types/value.type-renderer.jsx

@@ -44,6 +44,7 @@ const renderValue = (context, type, value) => {
                   return <Bool.component value={value.value} />;
                 case 'number':
                   return <Number.component value={value.value} />;
+                case 'any':
                 case 'string':
                   return <String.component value={value.value} />;
                 case 'object':