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

it('should explicitly send prop if style is using one prop variable', async () => {
      const styledComponentsGenerator = createReactComponentGenerator(
        ReactStyleVariation.StyledComponents
      )
      const result = await styledComponentsGenerator.generateComponent(
        ComponentWithValidSingleStlye
      )
      const jsFile = findFileByType(result.files, FileType.JS)

      expect(jsFile).toBeDefined()
      expect(jsFile.content).toContain(' props.height}')
    })

defaultValue: 'red',
        },
      }
      const style: UIDLStyleDefinitions = {
        'background-color': dynamicNode('prop', 'backgroundColor'),
        'border-color': dynamicNode('prop', 'borderColor'),
      }
      const uidl = component(
        'ComponentWithSingleDashCaseStyle',
        elementNode('container', {}, [staticNode('Hello')], null, style),
        propDefnitions,
        {}
      )

      const styledComponentsGenerator = createReactComponentGenerator(
        ReactStyleVariation.StyledComponents
      )
      const result = await styledComponentsGenerator.generateComponent(uidl)

      const jsFile = findFileByType(result.files, FileType.JS)

      expect(jsFile).toBeDefined()
      expect(jsFile.content).toContain(' props.backgroundColor}')
      // tslint:disable-next-line:no-invalid-template-strings
      expect(jsFile.content).toContain('border-color: ${(props) => props.borderColor}')
    })

it('throws error when conifg file is not found with custom framework config', async () => {
    const generatorGatsbyStyledComponents = createGatsbyProjectGenerator({
      variation: ReactStyleVariation.StyledComponents,
    })
    const result = generatorGatsbyStyledComponents.generateProject(invalidUidlSample, template)

    await expect(result).rejects.toThrow(Error)
  })
})

describe('with StyledComponents', () => {
    const generator = createReactComponentGenerator(ReactStyleVariation.StyledComponents)

    it('should return the files containing the code as string', async () => {
      const result = await generator.generateComponent(uidlSample)
      const jsFile = findFileByType(result.files, JS_FILE)

      expect(jsFile).toBeDefined()
      expect(result.files.length).toBe(1)
      expect(jsFile.content).toContain('import React')
      expect(result.dependencies).toBeDefined()
    })
  })

variation = ReactStyleVariation.CSSModules,
  { 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))