How to use the @teleporthq/teleport-types.ReactStyleVariation.StyledJSX function in @teleporthq/teleport-types

import componentUIDLJSON from '../../../../examples/test-samples/component-sample.json'
import bigUIDL from './big-sample.json'

import { createReactComponentGenerator } from '../../src'

import { performance } from 'perf_hooks'
import { ComponentUIDL, UIDLElement, ReactStyleVariation } from '@teleporthq/teleport-types'

const componentUIDL = componentUIDLJSON as ComponentUIDL

const generator = createReactComponentGenerator(ReactStyleVariation.StyledJSX)

describe('React Generator Performance Run', () => {
  describe('with realistic component sample', () => {
    it('takes under 150ms', async () => {
      const t0 = performance.now()
      await generator.generateComponent(componentUIDL, { assetsPrefix: '/assets' })
      const t1 = performance.now()
      console.info(`Generation time took: ${(t1 - t0).toFixed(2)}`)
      expect(t1 - t0).toBeLessThan(1500)
    })
  })

  describe('with generated component sample', () => {
    it('takes under 2500ms', async () => {
      const uidl = createUIDL({ firstLvl: 100, secondLvl: 5, thirdLvl: 2 })
      const t0 = performance.now()

it('should throw error when a state is being refered in generated StyledJSX ', async () => {
      const styledJSXGenerator = createReactComponentGenerator(ReactStyleVariation.StyledJSX)
      try {
        await styledJSXGenerator.generateComponent(ComponentWithInvalidStateStyles)
        expect(true).toBe(false)
      } catch (e) {
        expect(e.message).toContain(
          'Error running transformDynamicStyles in reactStyledJSXChunkPlugin'
        )
      }
    })

it('should support object props in styledjsx', async () => {
      const styledJSXGenerator = createReactComponentGenerator(ReactStyleVariation.StyledJSX)
      const result = await styledJSXGenerator.generateComponent(ComponentWithValidStyle)
      const jsFile = findFileByType(result.files, FileType.JS)

      expect(jsFile).toBeDefined()
      expect(jsFile.content).toContain(`align-self: center`)
    })

const createNextProjectGenerator = () => {
  const reactComponentGenerator = createReactComponentGenerator(ReactStyleVariation.StyledJSX)
  reactComponentGenerator.addMapping(NextMapping as Mapping)

  const headConfigPlugin = createJSXHeadConfigPlugin({
    configTagIdentifier: 'Head',
    configTagDependencyPath: 'next/head',
  })

  const reactPageGenerator = createReactComponentGenerator(ReactStyleVariation.StyledJSX, {
    plugins: [headConfigPlugin],
    mappings: [NextMapping as Mapping],
  })

  const documentFileGenerator = createComponentGenerator()
  documentFileGenerator.addPostProcessor(prettierHTML)

  const generator = createProjectGenerator({

const createNextProjectGenerator = () => {
  const reactComponentGenerator = createReactComponentGenerator(ReactStyleVariation.StyledJSX)
  reactComponentGenerator.addMapping(NextMapping as Mapping)

  const headConfigPlugin = createJSXHeadConfigPlugin({
    configTagIdentifier: 'Head',
    configTagDependencyPath: 'next/head',
  })

  const reactPageGenerator = createReactComponentGenerator(ReactStyleVariation.StyledJSX, {
    plugins: [headConfigPlugin],
    mappings: [NextMapping as Mapping],
  })

  const documentFileGenerator = createComponentGenerator()
  documentFileGenerator.addPostProcessor(prettierHTML)

  const generator = createProjectGenerator({
    components: {
      generator: reactComponentGenerator,
      path: ['components'],
    },
    pages: {
      generator: reactPageGenerator,
      path: ['pages'],
      options: {

{ mappings = [], plugins = [], postprocessors = [] }: GeneratorFactoryParams = {}
): ComponentGenerator => {
  const cssPlugin = createCSSPlugin({
    templateChunkName: 'jsx-component',
    templateStyle: 'jsx',
    declareDependency: 'import',
    classAttributeName: 'className',
    forceScoping: true,
  })

  const cssModulesPlugin = createCSSModulesPlugin({ moduleExtension: true })

  const stylePlugins = {
    [ReactStyleVariation.InlineStyles]: inlineStylesPlugin,
    [ReactStyleVariation.StyledComponents]: reactStyledComponentsPlugin,
    [ReactStyleVariation.StyledJSX]: reactStyledJSXPlugin,
    [ReactStyleVariation.CSSModules]: cssModulesPlugin,
    [ReactStyleVariation.CSS]: cssPlugin,
    [ReactStyleVariation.ReactJSS]: reactJSSPlugin,
  }

  const stylePlugin = stylePlugins[variation]

  if (!stylePlugin) {
    throw new Error(`Invalid style variation '${variation}'`)
  }

  const generator = createComponentGenerator()

  generator.addMapping(ReactMapping as Mapping)
  mappings.forEach((mapping) => generator.addMapping(mapping))