How to use the @teleporthq/teleport-shared/dist/cjs/builders/uidl-builders.component function in @teleporthq/teleport-shared

it('should support conditional array as root node', async () => {
    const uidl = component(
      'ComponentWithConditionalRootArrayNode',
      conditionalNode(
        dynamicNode('state', 'isVisible'),
        elementNode('text', {}, [staticNode('Now you see me!')]),
        true
      ),
      {},
      { isVisible: definition('boolean', true) }
    )

    const result = await generator.generateComponent(uidl)
    const file = findFileByType(result.files, VUE_FILE)
    const { content } = file

    expect(VUE_FILE).toBeDefined()
    expect(result.files).toBeDefined()

it('generates a string chunk out of the styles and adds the className', async () => {
    const style = {
      height: staticNode('100px'),
    }
    const element = elementNode('container', {}, [], null, style)
    element.content.key = 'container'
    const uidlSample = component('test', element)

    const structure: ComponentStructure = {
      uidl: uidlSample,
      options: {},
      chunks: [componentChunk, decoratorChunk],
      dependencies: {},
    }

    const { chunks } = await plugin(structure)

    expect(chunks.length).toBe(3)
    expect(chunks[2].type).toBe('string')
    expect(chunks[2].content).toContain('height: 100px;')
  })
})

it('should support dynamic as root node', async () => {
    const prop = {
      name: {
        type: 'string',
        defaultValue: 'Teleport',
      },
    }
    const uidl = component('DynamicRootComponent', dynamicNode('prop', 'name'), prop)
    const result = await generator.generateComponent(uidl)
    const file = findFileByType(result.files, VUE_FILE)
    const { content } = file

    expect(VUE_FILE).toBeDefined()
    expect(result.files).toBeDefined()
    expect(content).toContain('<span>{{ name }}</span>')
    expect(content).toContain("default: 'Teleport'")
    expect(result.files.length).toBeTruthy()
  })

it('should support dynamic as root node', async () => {
    const prop = {
      name: {
        type: 'string',
        defaultValue: 'Teleport',
      },
    }
    const uidl = component('DynamicRootComponent', dynamicNode('prop', 'name'), prop)
    const result = await generator.generateComponent(uidl)
    const jsFile = findFileByType(result.files, JS_FILE)

    expect(jsFile).toBeDefined()
    expect(result.files).toBeDefined()
    expect(jsFile.content).toContain('import React')
    expect(result.dependencies).toBeDefined()
    expect(jsFile.content).toContain('(props) => props.name')
    expect(jsFile.content).toContain('PropTypes.string')
    expect(result.files.length).toBeTruthy()
  })

it('generates no chunk if no styles exist', async () => {
    const uidlSample = component('test', elementNode('container'))
    const structure: ComponentStructure = {
      uidl: uidlSample,
      options: {},
      chunks: [componentChunk, decoratorChunk],
      dependencies: {},
    }

    const { chunks } = await plugin(structure)

    expect(chunks.length).toBe(2)
  })

it('should support conditional and string as root node', async () => {
    const uidl = component(
      'ComponentWithConditionalRootStringNode',
      conditionalNode(dynamicNode('state', 'isVisible'), staticNode('Now you can see me!'), true),
      {},
      { isVisible: definition('boolean', true) }
    )

    const result = await generator.generateComponent(uidl)
    const file = findFileByType(result.files, VUE_FILE)
    const { content } = file

    expect(result.files.length).toBeTruthy()
    expect(VUE_FILE).toBeDefined()
    expect(result.files).toBeDefined()
    expect(content).toContain('<span>Now you can see me!</span>')
  })