typescripting

lib/src/commands/LayoutExamples.js

@@ -1,125 +0,0 @@
-const passProps = {
-  strProp: 'string prop',
-  numProp: 12345,
-  objProp: { inner: { foo: 'bar' } },
-  fnProp: () => 'Hello from a function'
-};
-
-const options = {
-  topBar: {
-    title: 'Hello1'
-  }
-};
-
-const singleComponent = {
-  component: {
-    name: 'MyReactComponent',
-    options,
-    passProps
-  }
-};
-
-const stackWithTopBar = {
-  stack: {
-    children: [
-      {
-        component: {
-          name: 'MyReactComponent1'
-        }
-      },
-      {
-        component: {
-          name: 'MyReactComponent2',
-          options
-        }
-      }
-    ],
-    options
-  }
-};
-
-const bottomTabs = {
-  bottomTabs: {
-    children: [
-      stackWithTopBar,
-      stackWithTopBar,
-      {
-        component: {
-          name: 'MyReactComponent1'
-        }
-      }
-    ]
-  }
-};
-
-const sideMenu = {
-  sideMenu: {
-    left: singleComponent,
-    center: stackWithTopBar,
-    right: singleComponent
-  }
-};
-
-const topTabs = {
-  topTabs: {
-    children: [
-      singleComponent,
-      singleComponent,
-      singleComponent,
-      singleComponent,
-      stackWithTopBar
-    ],
-    options
-  }
-};
-
-const complexLayout = {
-  sideMenu: {
-    left: singleComponent,
-    center: {
-      bottomTabs: {
-        children: [
-          stackWithTopBar,
-          stackWithTopBar,
-          {
-            stack: {
-              children: [
-                {
-                  topTabs: {
-                    children: [
-                      stackWithTopBar,
-                      stackWithTopBar,
-                      {
-                        topTabs: {
-                          options,
-                          children: [
-                            singleComponent,
-                            singleComponent,
-                            singleComponent,
-                            singleComponent,
-                            stackWithTopBar
-                          ]
-                        }
-                      }
-                    ]
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      }
-    }
-  }
-};
-
-module.exports = {
-  passProps,
-  options,
-  singleComponent,
-  stackWithTopBar,
-  bottomTabs,
-  sideMenu,
-  topTabs,
-  complexLayout
-};

lib/src/commands/LayoutTreeParser.test.ts

@@ -1,7 +1,6 @@
 import * as  _ from 'lodash';
 import { LayoutTreeParser } from './LayoutTreeParser';
-import { LayoutTypes } from './LayoutTypes';
-import { Examples } from './LayoutExamples';
+import { LayoutType } from './values/LayoutType';
 
 describe('LayoutTreeParser', () => {
   let uut;
@@ -16,9 +15,9 @@ describe('LayoutTreeParser', () => {
     });
 
     it('single component', () => {
-      expect(uut.parse(Examples.singleComponent)).toEqual({
-        type: LayoutTypes.Component,
-        data: { name: 'MyReactComponent', options: Examples.options, passProps: Examples.passProps },
+      expect(uut.parse(LayoutExamples.singleComponent)).toEqual({
+        type: LayoutType.Component,
+        data: { name: 'MyReactComponent', options: LayoutExamples.options, passProps: LayoutExamples.passProps },
         children: []
       });
     });
@@ -27,33 +26,33 @@ describe('LayoutTreeParser', () => {
       const result = uut.parse({
         component: {
           name: 'MyScreen',
-          passProps: Examples.passProps
+          passProps: LayoutExamples.passProps
         }
       });
       expect(result).toEqual({
-        type: LayoutTypes.Component,
-        data: { name: 'MyScreen', passProps: Examples.passProps },
+        type: LayoutType.Component,
+        data: { name: 'MyScreen', passProps: LayoutExamples.passProps },
         children: []
       });
-      expect(result.data.passProps).toBe(Examples.passProps);
+      expect(result.data.passProps).toBe(LayoutExamples.passProps);
       expect(result.data.passProps.fnProp()).toEqual('Hello from a function');
     });
 
     it('stack of components with top bar', () => {
-      expect(uut.parse(Examples.stackWithTopBar)).toEqual({
-        type: LayoutTypes.Stack,
+      expect(uut.parse(LayoutExamples.stackWithTopBar)).toEqual({
+        type: LayoutType.Stack,
         data: {
-          options: Examples.options
+          options: LayoutExamples.options
         },
         children: [
           {
-            type: LayoutTypes.Component,
+            type: LayoutType.Component,
             data: { name: 'MyReactComponent1' },
             children: []
           },
           {
-            type: LayoutTypes.Component,
-            data: { name: 'MyReactComponent2', options: Examples.options },
+            type: LayoutType.Component,
+            data: { name: 'MyReactComponent2', options: LayoutExamples.options },
             children: []
           }
         ]
@@ -61,31 +60,31 @@ describe('LayoutTreeParser', () => {
     });
 
     it('bottom tabs', () => {
-      const result = uut.parse(Examples.bottomTabs);
+      const result = uut.parse(LayoutExamples.bottomTabs);
       expect(_.keys(result)).toEqual(['type', 'data', 'children']);
-      expect(result.type).toEqual(LayoutTypes.BottomTabs);
+      expect(result.type).toEqual(LayoutType.BottomTabs);
       expect(result.data).toEqual({});
       expect(result.children.length).toEqual(3);
-      expect(result.children[0].type).toEqual(LayoutTypes.Stack);
-      expect(result.children[1].type).toEqual(LayoutTypes.Stack);
-      expect(result.children[2].type).toEqual(LayoutTypes.Component);
+      expect(result.children[0].type).toEqual(LayoutType.Stack);
+      expect(result.children[1].type).toEqual(LayoutType.Stack);
+      expect(result.children[2].type).toEqual(LayoutType.Component);
     });
 
     it('side menus', () => {
-      const result = uut.parse(Examples.sideMenu);
+      const result = uut.parse(LayoutExamples.sideMenu);
       expect(_.keys(result)).toEqual(['type', 'data', 'children']);
-      expect(result.type).toEqual(LayoutTypes.SideMenuRoot);
+      expect(result.type).toEqual(LayoutType.SideMenuRoot);
       expect(result.data).toEqual({});
       expect(result.children.length).toEqual(3);
-      expect(result.children[0].type).toEqual(LayoutTypes.SideMenuLeft);
-      expect(result.children[1].type).toEqual(LayoutTypes.SideMenuCenter);
-      expect(result.children[2].type).toEqual(LayoutTypes.SideMenuRight);
+      expect(result.children[0].type).toEqual(LayoutType.SideMenuLeft);
+      expect(result.children[1].type).toEqual(LayoutType.SideMenuCenter);
+      expect(result.children[2].type).toEqual(LayoutType.SideMenuRight);
       expect(result.children[0].children.length).toEqual(1);
-      expect(result.children[0].children[0].type).toEqual(LayoutTypes.Component);
+      expect(result.children[0].children[0].type).toEqual(LayoutType.Component);
       expect(result.children[1].children.length).toEqual(1);
-      expect(result.children[1].children[0].type).toEqual(LayoutTypes.Stack);
+      expect(result.children[1].children[0].type).toEqual(LayoutType.Stack);
       expect(result.children[2].children.length).toEqual(1);
-      expect(result.children[2].children[0].type).toEqual(LayoutTypes.Component);
+      expect(result.children[2].children[0].type).toEqual(LayoutType.Component);
     });
 
     it('side menu center is require', () => {
@@ -93,20 +92,20 @@ describe('LayoutTreeParser', () => {
     });
 
     it('top tabs', () => {
-      const result = uut.parse(Examples.topTabs);
+      const result = uut.parse(LayoutExamples.topTabs);
       expect(_.keys(result)).toEqual(['type', 'data', 'children']);
-      expect(result.type).toEqual(LayoutTypes.TopTabs);
-      expect(result.data).toEqual({ options: Examples.options });
+      expect(result.type).toEqual(LayoutType.TopTabs);
+      expect(result.data).toEqual({ options: LayoutExamples.options });
       expect(result.children.length).toEqual(5);
-      expect(result.children[0].type).toEqual(LayoutTypes.Component);
-      expect(result.children[1].type).toEqual(LayoutTypes.Component);
-      expect(result.children[2].type).toEqual(LayoutTypes.Component);
-      expect(result.children[3].type).toEqual(LayoutTypes.Component);
-      expect(result.children[4].type).toEqual(LayoutTypes.Stack);
+      expect(result.children[0].type).toEqual(LayoutType.Component);
+      expect(result.children[1].type).toEqual(LayoutType.Component);
+      expect(result.children[2].type).toEqual(LayoutType.Component);
+      expect(result.children[3].type).toEqual(LayoutType.Component);
+      expect(result.children[4].type).toEqual(LayoutType.Stack);
     });
 
     it('complex layout example', () => {
-      const result = uut.parse(Examples.complexLayout);
+      const result = uut.parse(LayoutExamples.complexLayout);
       expect(result.type).toEqual('SideMenuRoot');
       expect(result.children[1].type).toEqual('SideMenuCenter');
       expect(result.children[1].children[0].type).toEqual('BottomTabs');
@@ -127,3 +126,121 @@ describe('LayoutTreeParser', () => {
     expect(uut.parse({ sideMenu: { options, center: { component: {} } } }).data.options).toBe(options);
   });
 });
+
+const LayoutExamples = {
+  passProps: {
+    strProp: 'string prop',
+    numProp: 12345,
+    objProp: { inner: { foo: 'bar' } },
+    fnProp: () => 'Hello from a function'
+  },
+
+  options: {
+    topBar: {
+      title: 'Hello1'
+    }
+  },
+
+  singleComponent: {
+    component: {
+      name: 'MyReactComponent',
+      options: this.options,
+      passProps: this.passProps
+    }
+  },
+
+  stackWithTopBar: {
+    stack: {
+      children: [
+        {
+          component: {
+            name: 'MyReactComponent1'
+          }
+        },
+        {
+          component: {
+            name: 'MyReactComponent2',
+            options: this.options
+          }
+        }
+      ],
+      options: this.options
+    }
+  },
+
+  bottomTabs: {
+    bottomTabs: {
+      children: [
+        { ...this.stackWithTopBar },
+        { ...this.stackWithTopBar },
+        {
+          component: {
+            name: 'MyReactComponent1'
+          }
+        }
+      ]
+    }
+  },
+
+  sideMenu: {
+    sideMenu: {
+      left: { ...this.singleComponent },
+      center: { ...this.stackWithTopBar },
+      right: { ...this.singleComponent }
+    }
+  },
+
+  topTabs: {
+    topTabs: {
+      children: [
+        { ...this.singleComponent },
+        { ...this.singleComponent },
+        { ...this.singleComponent },
+        { ...this.singleComponent },
+        { ...this.stackWithTopBar }
+      ],
+      options: this.options
+    }
+  },
+
+  complexLayout: {
+    sideMenu: {
+      left: { ...this.singleComponent },
+      center: {
+        bottomTabs: {
+          children: [
+            { ...this.stackWithTopBar },
+            { ...this.stackWithTopBar },
+            {
+              stack: {
+                children: [
+                  {
+                    topTabs: {
+                      children: [
+                        { ...this.stackWithTopBar },
+                        { ...this.stackWithTopBar },
+                        {
+                          topTabs: {
+                            options: this.options,
+                            children: [
+                              { ...this.singleComponent },
+                              { ...this.singleComponent },
+                              { ...this.singleComponent },
+                              { ...this.singleComponent },
+                              { ...this.stackWithTopBar }
+                            ]
+                          }
+                        }
+                      ]
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}
+

lib/src/commands/LayoutTreeParser.ts

@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import { LayoutTypes } from './values/LayoutTypes';
+import { LayoutType } from './values/LayoutType';
 
 export class LayoutTreeParser {
   constructor() {
@@ -26,7 +26,7 @@ export class LayoutTreeParser {
 
   _topTabs(api) {
     return {
-      type: LayoutTypes.TopTabs,
+      type: LayoutType.TopTabs,
       data: { options: api.options },
       children: _.map(api.children, this.parse)
     };
@@ -34,7 +34,7 @@ export class LayoutTreeParser {
 
   _sideMenu(api) {
     return {
-      type: LayoutTypes.SideMenuRoot,
+      type: LayoutType.SideMenuRoot,
       data: { options: api.options },
       children: this._sideMenuChildren(api)
     };
@@ -47,19 +47,19 @@ export class LayoutTreeParser {
     const children = [];
     if (api.left) {
       children.push({
-        type: LayoutTypes.SideMenuLeft,
+        type: LayoutType.SideMenuLeft,
         data: {},
         children: [this.parse(api.left)]
       });
     }
     children.push({
-      type: LayoutTypes.SideMenuCenter,
+      type: LayoutType.SideMenuCenter,
       data: {},
       children: [this.parse(api.center)]
     });
     if (api.right) {
       children.push({
-        type: LayoutTypes.SideMenuRight,
+        type: LayoutType.SideMenuRight,
         data: {},
         children: [this.parse(api.right)]
       });
@@ -69,7 +69,7 @@ export class LayoutTreeParser {
 
   _bottomTabs(api) {
     return {
-      type: LayoutTypes.BottomTabs,
+      type: LayoutType.BottomTabs,
       data: { options: api.options },
       children: _.map(api.children, this.parse)
     };
@@ -77,7 +77,7 @@ export class LayoutTreeParser {
 
   _stack(api) {
     return {
-      type: LayoutTypes.Stack,
+      type: LayoutType.Stack,
       data: { name: api.name, options: api.options },
       children: _.map(api.children, this.parse)
     };
@@ -85,7 +85,7 @@ export class LayoutTreeParser {
 
   _component(api) {
     return {
-      type: LayoutTypes.Component,
+      type: LayoutType.Component,
       data: { name: api.name, options: api.options, passProps: api.passProps },
       children: []
     };

lib/src/commands/values/LayoutNode.test.ts

@@ -1,7 +1,21 @@
 import { LayoutNode } from './LayoutNode';
+import { LayoutType } from './LayoutType';
 
 describe('LayoutNode', () => {
-  it('value type', () => {
-    
+  it('convertable from same data structure', () => {
+    const x = {
+      id: 'theId',
+      type: LayoutType.Component,
+      data: {},
+      children: []
+    };
+
+    let got;
+    function expectingLayoutNode(param: LayoutNode) {
+      got = param;
+    }
+    expectingLayoutNode(x);
+
+    expect(got).toBe(x);
   });
 });

lib/src/commands/values/LayoutNode.ts

@@ -1,5 +1,9 @@
-import { LayoutTypes } from "./LayoutTypes";
+import { LayoutType } from "./LayoutType";
 
 export interface LayoutNode {
-  type: LayoutTypes
+  id: string;
+  type: LayoutType;
+  data: object;
+  children: Array<LayoutNode>;
 }
+

lib/src/commands/values/LayoutType.test.ts

@@ -1,26 +1,21 @@
-import { LayoutType } from './LayoutType';
+import { LayoutType, isLayoutType } from './LayoutType';
 
-describe('LayoutType', () => {
+describe.only('LayoutType', () => {
   it('is an enum', () => {
     expect(LayoutType.Component).toEqual('Component');
     expect(LayoutType.Stack).toEqual('Stack');
-  });
 
-  it('valueOf dynamic string value', () => {
     const name = 'Stack';
     expect(LayoutType[name]).toEqual(LayoutType.Stack);
     expect(LayoutType['asdasd']).toEqual(undefined);
-    expect(LayoutType.isValid('asdasd')).toBe(false);
-    expect(LayoutType.isValid('TopTabs')).toBe(true);
-    expect(LayoutType.isValid('isValid')).toBe(false);
   });
-});
 
-// Component: 'Component',
-// Stack: 'Stack',
-// BottomTabs: 'BottomTabs',
-// SideMenuRoot: 'SideMenuRoot',
-// SideMenuCenter: 'SideMenuCenter',
-// SideMenuLeft: 'SideMenuLeft',
-// SideMenuRight: 'SideMenuRight',
-// TopTabs: 'TopTabs',
+  it('isLayoutType', () => {
+    expect(isLayoutType(null)).toBe(false);
+    expect(isLayoutType(undefined)).toBe(false);
+    expect(isLayoutType('')).toBe(false);
+    expect(isLayoutType('asdasd')).toBe(false);
+    expect(isLayoutType('TopTabs')).toBe(true);
+    expect(isLayoutType('isLayoutType')).toBe(false);
+  });
+});

lib/src/commands/values/LayoutType.ts

@@ -1,6 +1,4 @@
-import * as _ from 'lodash';
-
-export const enum LayoutType {
+export enum LayoutType {
   Component = 'Component',
   Stack = 'Stack',
   BottomTabs = 'BottomTabs',
@@ -11,6 +9,6 @@ export const enum LayoutType {
   TopTabs = 'TopTabs'
 };
 
-export function isValid(name: string) {
-  return _.keys(LayoutType);
+export function isLayoutType(name: string): boolean {
+  return !!LayoutType[name];
 }

lib/src/commands/values/LayoutTypes.test.ts

@@ -1,11 +0,0 @@
-import { LayoutTypes } from './LayoutTypes';
-
-describe('LayoutTypes', () => {
-  it('enum isValid', () => {
-    expect(LayoutTypes.isValid('')).toBe(false);
-    expect(LayoutTypes.isValid('unknown type')).toBe(false);
-    expect(LayoutTypes.isValid('Component')).toBe(true);
-    expect(LayoutTypes.isValid('Stack')).toBe(true);
-    expect(LayoutTypes.isValid('Stack ')).toBe(false);
-  });
-});

lib/src/commands/values/LayoutTypes.ts

@@ -1,15 +0,0 @@
-export class LayoutTypes {
-  private static validTypes = [
-    'Component',
-    'Stack',
-    'BottomTabs',
-    'SideMenuRoot',
-    'SideMenuCenter',
-    'SideMenuLeft',
-    'SideMenuRight',
-    'TopTabs'];
-
-  public static isValid(type: string) {
-    return this.validTypes.includes(type);
-  }
-}