@teleporthq/teleport-uidl-validator 0.18.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 teleporthq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# teleport-uidl-validator
+
+A module that offers validation and parsing for non-standard UIDL structures.
+
+> This package is part of the [teleport ecosystem](https://github.com/teleporthq/teleport-code-generators). For a complete guide, check out the [official documentation](https://docs.teleporthq.io/).
+
+## Install
+```bash
+npm install @teleporthq/teleport-uidl-validator
+```
+or
+```bash
+yarn add @teleporthq/teleport-uidl-validator
+```

package/__tests__/parser/componennt-with-referenced-styles.json

@@ -0,0 +1,111 @@
+{
+    "name": "ComponentWithPrimitiveProps",
+    "propDefinitions": {
+      "test": {
+        "type": "string",
+        "defaultValue": "123"
+      },
+      "content": {
+        "type": "object",
+        "defaultValue": {
+          "heading": "Hello World"
+        }
+      }
+    },
+    "node": {
+      "type": "element",
+      "content": {
+        "elementType": "container",
+        "referencedStyles": {
+            "5ed0cb9ff4fd989551c4edc0": {
+                "id": "5ed0cb9ff4fd989551c4edc0",
+                "type": "style-map",
+                "content": {
+                    "mapType": "inlined",
+                    "conditions": [
+                        { "conditionType": "screen-size", "maxWidth": 991 }
+                    ],
+                    "styles": {
+                        "flex-wrap": "wrap"
+                    } 
+                }
+            }
+        },
+        "style": {
+          "flexDirection": {
+            "type": "dynamic",
+            "content": {
+              "referenceType":"prop",
+              "id": "test"
+            }
+          },
+          "alignSelf": {"type":"static", "content": "center"}
+        },
+  
+        "attrs": {
+          "data-test": {
+            "type": "dynamic",
+            "content": {
+              "referenceType":"prop",
+              "id": "test"
+            }
+          },
+          "data-static": { "type":"static", "content":"I am just a static string"},
+          "data-inner-value": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType":"prop",
+                    "id": "content.heading"
+                  }
+                }
+        },
+        
+        "children": [
+          {"type":"static", "content": "hello I am a test"},
+          {"type": "dynamic", "content": {"referenceType": "prop", "id": "content.heading"}},
+          {"type": "dynamic", "content": {"referenceType":"prop", "id": "children"}},
+          {
+            "type": "element",
+            "content": {
+              "elementType": "container",
+              
+              "style": {
+                "flexDirection": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType":"prop",
+                    "id": "test"
+                  }
+                },
+                "alignSelf": {"type":"static", "content": "center"}
+              },
+        
+              "attrs": {
+                "data-test": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType":"prop",
+                    "id": "test"
+                  }
+                },
+                "data-static": { "type":"static", "content":"I am just a static string"},
+                "data-inner-value": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType":"prop",
+                    "id": "content.heading"
+                  }
+                }
+              },
+  
+              "children": [
+                {"type":"static", "content": "hello I am a test"},
+                {"type": "dynamic", "content": {"referenceType": "prop", "id": "content.heading"}},
+                {"type": "dynamic", "content": {"referenceType": "prop", "id": "children"}}
+              ]
+            }
+          }
+        ]
+      }
+    }
+  }

package/__tests__/parser/component-parsing.ts

@@ -0,0 +1,116 @@
+// @ts-ignore
+import componentInputJSON from './component-with-primitive-values.json'
+// @ts-ignore
+import componentResultJSON from './component-with-proper-values.json'
+// @ts-ignore
+import componentStyleSetsInputJSON from './component-with-reusalble-styles.json'
+// @ts-ignore
+import componentWithReferencedStylesJSON from './componennt-with-referenced-styles.json'
+
+import { parseComponentJSON, parseProjectJSON } from '../../src/parser'
+import { ComponentUIDL } from '@teleporthq/teleport-types'
+
+describe('parseComponentJSON', () => {
+  it('transforms primitive component values', () => {
+    const componentResult = parseComponentJSON(componentInputJSON)
+    expect(componentResult).toEqual(componentResultJSON)
+  })
+})
+
+describe('parseProjectJSON', () => {
+  it('transforms primitive project values', () => {
+    const componentResult = parseProjectJSON({
+      root: componentInputJSON,
+      components: {
+        test: componentInputJSON,
+      },
+    })
+    expect(componentResult).toEqual({
+      root: componentResultJSON,
+      components: {
+        test: componentResultJSON,
+      },
+    })
+  })
+})
+
+describe('styleSetDefinitions in root of Project UIDL', () => {
+  it('Parses and convertes string styles to static nodes in styleSetDefinitions', () => {
+    const result = parseProjectJSON({
+      root: componentStyleSetsInputJSON,
+      components: {},
+    })
+
+    expect(result.root.styleSetDefinitions).toStrictEqual({
+      primaryButton: {
+        type: 'reusable-project-style-map',
+        content: {
+          background: {
+            type: 'static',
+            content: 'blue',
+          },
+          width: {
+            type: 'static',
+            content: 'auto',
+          },
+          color: {
+            type: 'static',
+            content: '#fff',
+          },
+          border: {
+            type: 'static',
+            content: '1px solid #fff',
+          },
+        },
+      },
+      secondaryButton: {
+        type: 'reusable-project-style-map',
+        content: {
+          background: {
+            type: 'static',
+            content: 'red',
+          },
+          width: {
+            type: 'static',
+            content: 'auto',
+          },
+          color: {
+            type: 'static',
+            content: '#fff',
+          },
+          border: {
+            type: 'static',
+            content: '1px solid #fff',
+          },
+        },
+      },
+    })
+  })
+})
+
+describe('RefernecedStyles for ComponentUIDL', () => {
+  it('Parser referencedStyles and generate static nodes for string based styles', () => {
+    const result = parseComponentJSON(componentWithReferencedStylesJSON)
+
+    expect(
+      result.node.content.referencedStyles['5ed0cb9ff4fd989551c4edc0'].content.styles
+    ).toStrictEqual({ 'flex-wrap': { type: 'static', content: 'wrap' } })
+  })
+
+  it('Parses referencedStyles with project-referenced nodes', () => {
+    const uidl = componentStyleSetsInputJSON as unknown as ComponentUIDL
+    uidl.node.content.referencedStyles = {
+      ...uidl.node.content.referencedStyles,
+      '5ed6146d471fde6d6a47ba16': {
+        type: 'style-map',
+        content: {
+          mapType: 'project-referenced',
+          referenceId: 'secondaryButton',
+        },
+      },
+    }
+
+    const result = parseComponentJSON(uidl as unknown as Record<string, unknown>)
+    expect(result).toEqual(result)
+  })
+})

package/__tests__/parser/component-referenced.ts

@@ -0,0 +1,50 @@
+import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
+import { parseComponentJSON } from '../../src/parser'
+
+describe('Parses referenced Styles and parsers static or number', () => {
+  it('Converts the static values to Static Nodes', () => {
+    const componentUIDL = component(
+      'MyComponent',
+      elementNode('container', {}, [], null, {}, null, {})
+    )
+    componentUIDL.node.content.referencedStyles = {
+      '12345678': {
+        type: 'style-map',
+        content: {
+          mapType: 'component-referenced',
+          content: {
+            type: 'static',
+            content: 'md-8',
+          },
+        },
+      },
+    }
+    const result = parseComponentJSON(componentUIDL as unknown as Record<string, unknown>)
+    // @ts-ignore
+    expect(Object.values(result.node.content.referencedStyles)[0].content.content.type).toBe(
+      'static'
+    )
+  })
+
+  it('Throws error if the mapType is invalid', () => {
+    const componentUIDL = component(
+      'MyComponent',
+      elementNode('container', {}, [], null, {}, null, {})
+    )
+    componentUIDL.node.content.referencedStyles = {
+      '12345678': {
+        type: 'style-map',
+        content: {
+          // @ts-ignore
+          mapType: 'invalid-type',
+          // @ts-ignore
+          content: 'md-8',
+        },
+      },
+    }
+
+    expect(() => parseComponentJSON(componentUIDL as unknown as Record<string, unknown>)).toThrow(
+      'Un-expected mapType passed in referencedStyles - invalid-type'
+    )
+  })
+})

package/__tests__/parser/component-with-primitive-values.json

@@ -0,0 +1,61 @@
+{
+  "name": "ComponentWithPrimitiveProps",
+  "propDefinitions": {
+    "test": {
+      "type": "string",
+      "defaultValue": "123"
+    },
+    "content": {
+      "type": "object",
+      "defaultValue": {
+        "heading": "Hello World"
+      }
+    }
+  },
+  "node": {
+    "type": "element",
+    "content": {
+      "elementType": "container",
+
+      "style": {
+        "flexDirection": "$props.test",
+        "alignSelf": "center"
+      },
+
+      "attrs": {
+        "data-test": "$props.test",
+        "data-static": "I am just a static string",
+        "data-inner-value": "$props.content.heading"
+      },
+      
+      "children": [
+        "hello I am a test",
+        "$props.content.heading",
+        "$props.children",
+        {
+          "type": "element",
+          "content": {
+            "elementType": "container",
+            
+            "style": {
+              "flexDirection": "$props.test",
+              "alignSelf": "center"
+            },
+      
+            "attrs": {
+              "data-test": "$props.test",
+              "data-static": "I am just a static string",
+              "data-inner-value": "$props.content.heading"
+            },
+
+            "children": [
+              "hello I am a test",
+              "$props.content.heading",
+              "$props.children"
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/__tests__/parser/component-with-proper-values.json

@@ -0,0 +1,97 @@
+{
+  "name": "ComponentWithPrimitiveProps",
+  "propDefinitions": {
+    "test": {
+      "type": "string",
+      "defaultValue": "123"
+    },
+    "content": {
+      "type": "object",
+      "defaultValue": {
+        "heading": "Hello World"
+      }
+    }
+  },
+  "node": {
+    "type": "element",
+    "content": {
+      "elementType": "container",
+
+      "style": {
+        "flexDirection": {
+          "type": "dynamic",
+          "content": {
+            "referenceType":"prop",
+            "id": "test"
+          }
+        },
+        "alignSelf": {"type":"static", "content": "center"}
+      },
+
+      "attrs": {
+        "data-test": {
+          "type": "dynamic",
+          "content": {
+            "referenceType":"prop",
+            "id": "test"
+          }
+        },
+        "data-static": { "type":"static", "content":"I am just a static string"},
+        "data-inner-value": {
+                "type": "dynamic",
+                "content": {
+                  "referenceType":"prop",
+                  "id": "content.heading"
+                }
+              }
+      },
+      
+      "children": [
+        {"type":"static", "content": "hello I am a test"},
+        {"type": "dynamic", "content": {"referenceType": "prop", "id": "content.heading"}},
+        {"type": "dynamic", "content": {"referenceType":"prop", "id": "children"}},
+        {
+          "type": "element",
+          "content": {
+            "elementType": "container",
+            
+            "style": {
+              "flexDirection": {
+                "type": "dynamic",
+                "content": {
+                  "referenceType":"prop",
+                  "id": "test"
+                }
+              },
+              "alignSelf": {"type":"static", "content": "center"}
+            },
+      
+            "attrs": {
+              "data-test": {
+                "type": "dynamic",
+                "content": {
+                  "referenceType":"prop",
+                  "id": "test"
+                }
+              },
+              "data-static": { "type":"static", "content":"I am just a static string"},
+              "data-inner-value": {
+                "type": "dynamic",
+                "content": {
+                  "referenceType":"prop",
+                  "id": "content.heading"
+                }
+              }
+            },
+
+            "children": [
+              {"type":"static", "content": "hello I am a test"},
+              {"type": "dynamic", "content": {"referenceType": "prop", "id": "content.heading"}},
+              {"type": "dynamic", "content": {"referenceType": "prop", "id": "children"}}
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/__tests__/parser/component-with-reusalble-styles.json

@@ -0,0 +1,117 @@
+{
+    "name": "ComponentWithPrimitiveProps",
+    "styleSetDefinitions": {
+        "primaryButton": {
+            "type": "reusable-project-style-map",
+            "content": {
+              "background": "blue",
+              "width": "auto",
+              "color": "#fff",
+              "border": "1px solid #fff"
+            }
+        },
+        "secondaryButton": {
+            "type": "reusable-project-style-map",
+            "content": {
+                "background": "red",
+                "width": "auto",
+                "color": "#fff",
+                "border": "1px solid #fff"
+            }
+        }
+    },
+    "propDefinitions": {
+      "test": {
+        "type": "string",
+        "defaultValue": "123"
+      },
+      "content": {
+        "type": "object",
+        "defaultValue": {
+          "heading": "Hello World"
+        }
+      }
+    },
+    "node": {
+      "type": "element",
+      "content": {
+        "elementType": "container",
+        "referencedStyles": {},
+        "style": {
+          "flexDirection": {
+            "type": "dynamic",
+            "content": {
+              "referenceType":"prop",
+              "id": "test"
+            }
+          },
+          "alignSelf": {"type":"static", "content": "center"}
+        },
+  
+        "attrs": {
+          "data-test": {
+            "type": "dynamic",
+            "content": {
+              "referenceType":"prop",
+              "id": "test"
+            }
+          },
+          "data-static": { "type":"static", "content":"I am just a static string"},
+          "data-inner-value": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType":"prop",
+                    "id": "content.heading"
+                  }
+                }
+        },
+        
+        "children": [
+          {"type":"static", "content": "hello I am a test"},
+          {"type": "dynamic", "content": {"referenceType": "prop", "id": "content.heading"}},
+          {"type": "dynamic", "content": {"referenceType":"prop", "id": "children"}},
+          {
+            "type": "element",
+            "content": {
+              "elementType": "container",
+              
+              "style": {
+                "flexDirection": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType":"prop",
+                    "id": "test"
+                  }
+                },
+                "alignSelf": {"type":"static", "content": "center"}
+              },
+        
+              "attrs": {
+                "data-test": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType":"prop",
+                    "id": "test"
+                  }
+                },
+                "data-static": { "type":"static", "content":"I am just a static string"},
+                "data-inner-value": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType":"prop",
+                    "id": "content.heading"
+                  }
+                }
+              },
+  
+              "children": [
+                {"type":"static", "content": "hello I am a test"},
+                {"type": "dynamic", "content": {"referenceType": "prop", "id": "content.heading"}},
+                {"type": "dynamic", "content": {"referenceType": "prop", "id": "children"}}
+              ]
+            }
+          }
+        ]
+      }
+    }
+  }

package/__tests__/validator/component-element-with-empty-name.json

@@ -0,0 +1,36 @@
+{
+  "name": "Simple Component",
+  "propDefinitions": {
+    "heading": {
+      "type": "string",
+      "defaultValue": "Hello"
+    }
+  },
+  "node": {
+    "type": "element",
+    "content": {
+      "elementType": "container",
+      "name": "",
+      "referencedStyles": {},
+      "abilities": {},
+      "children": [
+        {
+          "type": "element",
+          "content": {
+            "elementType": "text",
+            "referencedStyles": {},
+            "abilities": {},
+            "children": [
+              {
+                "type": "static",
+                "content": "Hello"
+              }
+            ],
+            "semanticType": "span"
+          }
+        }
+      ],
+      "semanticType": "div"
+    }
+  }
+}