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

describe('checkForIllegalNames', () => {
  const comp = component(
    'Component',
    elementNode('container'),
    {
      'my-title': definition('string', 'test'),
    },
    {
      isVisible: definition('boolean', false),
    }
  )

  comp.outputOptions = {
    componentClassName: 'Component',
    fileName: 'component',
  }

  it('checks component name', () => {

describe('getStyleFileName', () => {
  const testComponent = component('MyComponent', elementNode('random'))

  it('returns the dashcase filename', () => {
    expect(getStyleFileName(testComponent)).toBe('my-component')
  })

  it('returns the specific style filename', () => {
    testComponent.outputOptions = {
      styleFileName: 'my-custom-name',
    }
    expect(getStyleFileName(testComponent)).toBe('my-custom-name')
  })
})

it('uses the UIDL values', () => {
    const mockStrategy = createStrategyWithCommonGenerator()
    mockStrategy.components.options = {
      createFolderForEachComponent: true,
      customStyleFileName: () => 'styling',
    }
    const testComponent = component('NavBar', elementNode('container'))
    testComponent.outputOptions = {
      fileName: 'custom-filename',
      folderPath: ['custom-folder'],
    }
    const components = {
      testComponent,
    }

    prepareComponentOutputOptions(components, mockStrategy)

    expect(testComponent.outputOptions.fileName).toBe('index')
    expect(testComponent.outputOptions.folderPath[0]).toBe('custom-folder')
    expect(testComponent.outputOptions.folderPath[1]).toBe('custom-filename')
  })

it('Generates the reactnative dependency path and removes unneeded dependencies', async () => {
    const reactNativePlugin = createReactStyledComponentsPlugin({ componentLibrary: 'reactnative' })

    const elementWithStyle = createElementWithStyle()
    const uidlSample = component('StyledComponents', elementWithStyle)
    const structure: ComponentStructure = {
      uidl: uidlSample,
      options: {},
      chunks: [componentChunk],
      dependencies: {
        container: {
          type: 'library',
          path: 'react-native',
        },
      },
    }

    const { dependencies } = await reactNativePlugin(structure)

    expect(dependencies.container).toBeUndefined()

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('CSSPlugin', element)

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

      const { chunks } = await plugin(structure)

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

      const nodeReference = componentChunk.meta.nodesLookup.container
      expect(nodeReference.properties.class).toBe('container')

it('should return resolved UIDL', () => {
    const uidl = component(
      'Conditional Component',
      elementNode('container', {}, [
        conditionalNode(
          dynamicNode('state', 'isVisible'),
          elementNode('div', {}, [staticNode('Now you see me!')]),
          true
        ),
      ]),
      {},
      { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
    )

    const extraMapping = {
      elements: {
        container: {
          elementType: 'div',

const uidl = (dependency) => {
  return component(
    'Component with dependencies',
    elementNode(
      dependency.name,
      {},
      [],
      componentDependency(dependency.type, dependency.path, dependency.version, dependency.option)
    ),
    {},
    { title: definition('boolean', true) }
  )
}

import { createVueComponentGenerator } from '../../src'
import { GeneratedFile } from '@teleporthq/teleport-types'
import {
  component,
  definition,
  repeatNode,
  dynamicNode,
  elementNode,
  staticNode,
} from '@teleporthq/teleport-uidl-builders'

const VUE_FILE = 'vue'
const findFileByType = (files: GeneratedFile[], type: string = VUE_FILE) =>
  files.find((file) => file.fileType === type)

const uidl = component(
  'ComponentWithAttrProp',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [
        elementNode(
          'div',
          {
            test: dynamicNode('local', 'index'),
            for: staticNode('mappedTest'),
            'data-test': dynamicNode('prop', 'test'),
            'data-static': staticNode('test'),
            'data-inner-value': dynamicNode('prop', 'content.heading'),
          },
          [dynamicNode('local', 'item')]
        ),
      ]),

export const setupPluginStructure = (
  elementKey: string = 'container',
  styleDefinition: UIDLStyleDefinitions = null
) => {
  const style = styleDefinition || {
    height: staticNode('100px'),
  }
  const element = elementNode('container', {}, [], null, style)
  element.content.key = elementKey
  const uidlSample = component('CSSModules', element)

  const structure: ComponentStructure = {
    uidl: uidlSample,
    options: {},
    chunks: [createComponentChunk(elementKey)],
    dependencies: {},
  }

  return structure
}

import {
  component,
  definition,
  repeatNode,
  dynamicNode,
  elementNode,
} from '@teleporthq/teleport-uidl-builders'

const TS_FILE = 'ts'
const HTML_FILE = 'html'
const findFileByType = (files: GeneratedFile[], type: string = TS_FILE) =>
  files.find((file) => file.fileType === type)

const generator = createAngularComponentGenerator()

const uidl = component(
  'Repeat Component',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    ),
  ]),
  { items: definition('array', ['hello', 'world']) },
  {}
)

const uidlWithoutIndex = component(
  'Repeat Component',