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

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

const uidl = component(
  'Conditional Component',
  elementNode('container', {}, [
    conditionalNode(
      dynamicNode('state', 'isVisible'),
      elementNode('text', {}, [staticNode('Now you see me!')]),
      true
    ),
    conditionalNode(
      dynamicNode('state', 'isShareable'),
      elementNode('text', {}, [staticNode('I am not shareable!')]),
      false
    ),
  ]),
  {},
  { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
)

describe('Component with conditional node type', () => {
  it('renders code with condition if value on state is true', async () => {
    const result = await generator.generateComponent(uidl)
    const jsFile = findFileByType(result.files, JS_FILE)

    expect(jsFile).toBeDefined()
    expect(jsFile.content).toContain('{isVisible &amp;&amp; <span>Now you see me!</span>}')
  })
  it('renders code with !condition if value on state is false', async () =&gt; {

it('adds the mapped children if no original children are found', () => {
    const mappedChildren = [staticNode('from-mapping')]

    const result = resolveChildren(mappedChildren)
    expect(result.length).toBe(1)
    expect(result[0].content).toBe('from-mapping')
  })

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')

{
        type: 'propCall',
        calls: 'onClose',
      },
      {
        type: 'stateChange',
        modifies: 'fakeState',
        newState: false,
      },
    ],
  }
  const uidl: ComponentUIDL = component(
    'PropEventComponent',
    elementNode('container', {}, [
      dynamicNode('prop', 'message'),
      elementNode('button', {}, [staticNode('close')], null, null, events),
    ]),
    propDefinitions
  )

  it('Adds EmitEmitter to the import', async () => {
    const result = await generator.generateComponent(uidl)
    const tsFile = findFileByType(result.files, TS_FILE)
    const htmlFile = findFileByType(result.files, HTML_FILE)

    expect(result.files.length).toBe(2)
    expect(tsFile.content).toContain(`Output, EventEmitter`)
    expect(tsFile.content).toContain(`@Output`)
    expect(tsFile.content).toContain(`onClose: EventEmitter = new EventEmitter()`)
    expect(tsFile.content).toContain(`this.onClose.emit()`)
    expect(htmlFile.content).toContain(`(click)="handleButtonClick()"`)
  })

it('inserts multiple nodes instead of the placeholder', () => {
    const mappedChildren = [
      elementNode('container', {}, [
        dynamicNode('children', 'children'),
        staticNode('remains here'),
      ]),
    ]

    const originalChildren: UIDLNode[] = [
      staticNode('original-text'),
      staticNode('other-original-text'),
    ]

    const result = resolveChildren(mappedChildren, originalChildren)
    expect(result.length).toBe(1)
    const innerChildren = ((result[0].content as unknown) as UIDLElement).children
    expect(innerChildren.length).toBe(3)
    expect(innerChildren[0].content).toBe('original-text')
    expect(innerChildren[1].content).toBe('other-original-text')
    expect(innerChildren[2].content).toBe('remains here')
  })

it('returns the concatenated path and adds a slash', () => {
    expect(prefixAssetsPath('/static', 'playground_assets')).toBe('/static/playground_assets')
  })
})

const nodeToTraverse = elementNode(
  'container',
  {},
  [
    staticNode('static'),
    dynamicNode('prop', 'title'),
    elementNode(
      'container',
      {
        attr: staticNode('dummy-attr'),
      },
      [
        repeatNode(elementNode('container', {}, []), dynamicNode('prop', 'items')),
        conditionalNode(dynamicNode('state', 'visible'), elementNode('text', {}, []), true),
        slotNode(staticNode('fallback'), 'slot-1'),
      ]
    ),
  ],
  null,
  {
    margin: staticNode('10px'),
    height: dynamicNode('prop', 'height'),
  }
)

describe('traverseNodes', () => {

it('replaces the transitionTo attribute content', () => {
    const navlink = elementNode('navlink', {
      transitionTo: staticNode('home-link'),
    })

    const uidlNode = elementNode('container', {}, [elementNode('div', {}, [navlink])])

    resolveNavlinks(uidlNode, routeDef)
    expect(navlink.content.attrs.transitionTo.content).toBe('/home')
  })

import ComponentWithNestedStyle from './component-with-nested-styles.json'

import { createAngularComponentGenerator } from '../../src/index'
import { ComponentUIDL, GeneratedFile } from '@teleporthq/teleport-types'
import { component, elementNode, dynamicNode, staticNode } from '@teleporthq/teleport-uidl-builders'

const ComponentWithValidStyle: ComponentUIDL = component(
  'ComponentWithAttrProp',
  elementNode('container', {}, [], null, {
    flexDirection: dynamicNode('prop', 'direction'),
    height: dynamicNode('prop', 'config.height'),
    alignSelf: staticNode('center'),
  }),
  {
    direction: {
      type: 'string',
      defaultValue: 'row',
    },
    config: {
      type: 'object',
      defaultValue: {
        height: 32,
      },
    },
  },
  {}
)

import {
  ComponentUIDL,
  GeneratedFile,
  UIDLPropDefinition,
  UIDLStyleDefinitions,
  FileType,
  ReactStyleVariation,
} from '@teleporthq/teleport-types'
import { staticNode, dynamicNode, component, elementNode } from '@teleporthq/teleport-uidl-builders'

const ComponentWithValidStyle: ComponentUIDL = component(
  'ComponentWithAttrProp',
  elementNode('container', {}, [], null, {
    flexDirection: dynamicNode('prop', 'direction'),
    height: dynamicNode('prop', 'config.height'),
    alignSelf: staticNode('center'),
  }),
  {
    direction: {
      type: 'string',
      defaultValue: 'row',
    },
    config: {
      type: 'object',
      defaultValue: {
        height: 32,
      },
    },
  },
  {}
)