How to use the @teleporthq/teleport-shared.StringUtils.camelCaseToDashCase function in @teleporthq/teleport-shared

export const extractPageOptions = (
  routeDefinitions: UIDLStateDefinition,
  routeName: string,
  useFileNameForNavigation = false
): UIDLPageOptions => {
  const isHomePage = routeDefinitions.defaultValue === routeName
  const pageDefinitions = routeDefinitions.values || []
  const pageDefinition = pageDefinitions.find((stateDef) => stateDef.value === routeName)

  // If no meta object is defined, the stateName is used
  const defaultPageName = 'AppPage'
  const friendlyStateName = StringUtils.removeIllegalCharacters(routeName) || defaultPageName // remove space, leading numbers, etc.
  const friendlyComponentName = StringUtils.dashCaseToUpperCamelCase(friendlyStateName) // component name in UpperCamelCase
  const friendlyFileName = StringUtils.camelCaseToDashCase(friendlyStateName) // file name in dash-case

  let pageOptions: UIDLPageOptions = {
    // default values extracted from state name
    fileName: friendlyFileName,
    componentName: friendlyComponentName,
    navLink: '/' + (isHomePage ? '' : friendlyFileName),
  }

  if (pageDefinition && pageDefinition.pageOptions) {
    // The pageDefinition values have precedence, defaults are fallbacks
    pageOptions = {
      ...pageOptions,
      ...pageDefinition.pageOptions,
    }
  }

UIDLUtils.traverseElements(node, (element) => {
      const { style, key } = element

      if (!style) {
        return
      }

      const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)
      const root = templateLookup[key]

      if (Object.keys(staticStyles).length > 0) {
        const elementClassName = StringUtils.camelCaseToDashCase(key)
        const componentFileName = UIDLUtils.getComponentFileName(uidl) // Filename used to enforce dash case naming
        const className = forceScoping // when the framework doesn't provide automating scoping for classNames
          ? `${componentFileName}-${elementClassName}`
          : elementClassName

        jssStylesArray.push(
          StyleBuilders.createCSSClass(className, StyleUtils.getContentOfStyleObject(staticStyles))
        )

        if (templateStyle === 'html') {
          HASTUtils.addClassToNode(root, className)
        } else {
          ASTUtils.addClassStringOnJSXTag(root, className, classAttributeName)
        }
      }

Object.keys(components).forEach((componentKey) => {
    const component = components[componentKey]

    // values coming from the input UIDL
    const { fileName, componentClassName } = component.outputOptions || {
      fileName: '',
      componentClassName: '',
    }

    const defaultComponentName = 'AppComponent'
    const friendlyName = StringUtils.removeIllegalCharacters(component.name) || defaultComponentName
    const friendlyFileName = fileName || StringUtils.camelCaseToDashCase(friendlyName) // ex: primary-button
    const friendlyComponentName =
      componentClassName || StringUtils.dashCaseToUpperCamelCase(friendlyName) // ex: PrimaryButton
    const folderPath = UIDLUtils.getComponentFolderPath(component)

    const {
      customComponentFileName,
      customStyleFileName,
      customTemplateFileName,
    } = componentStrategyOptions

    // If the component has its own folder, name is 'index' or an override from the strategy.
    // In this case, the file name (dash converted) is used as the folder name
    if (componentStrategyOptions.createFolderForEachComponent) {
      component.outputOptions = {
        componentClassName: friendlyComponentName,
        fileName: (customComponentFileName && customComponentFileName(friendlyFileName)) || 'index',

UIDLUtils.traverseElements(node, (element) => {
      const { style, key } = element
      if (style && Object.keys(style).length > 0) {
        const root = jsxNodesLookup[key]
        const className = StringUtils.camelCaseToDashCase(key)
        // Generating the string templates for the dynamic styles
        const styleRules = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
          if (styleValue.content.referenceType === 'prop') {
            return `\$\{${propsPrefix}.${styleValue.content.id}\}`
          }
          throw new Error(
            `Error running transformDynamicStyles in reactStyledJSXChunkPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
          )
        })
        styleJSXString.push(StyleBuilders.createCSSClass(className, styleRules))
        ASTUtils.addClassStringOnJSXTag(root, className)
      }
    })

const resolveDependency = (
  mappedElement: UIDLElement,
  uidlDependency?: UIDLDependency,
  localDependenciesPrefix = './'
) => {
  // If dependency is specified at UIDL level it will have priority over the mapping one
  const nodeDependency = uidlDependency || mappedElement.dependency
  if (nodeDependency && nodeDependency.type === 'local') {
    // When a dependency is specified without a path, we infer it is a local import.

    // ex: PrimaryButton component should be written in a file called primary-button
    // This is just a fallback for when the dependency path is not set by a project generator
    const componentName = mappedElement.elementType
    const componentFileName = StringUtils.camelCaseToDashCase(componentName)

    // concatenate a trailing slash in case it's missing
    if (localDependenciesPrefix[localDependenciesPrefix.length - 1] !== '/') {
      localDependenciesPrefix = localDependenciesPrefix + '/'
    }

    nodeDependency.path = nodeDependency.path || localDependenciesPrefix + componentFileName
  }

  return nodeDependency
}

UIDLUtils.traverseElements(uidl.node, (element) => {
      const { style, key } = element
      if (style) {
        const root = astNodesLookup[key]
        const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)

        if (Object.keys(staticStyles).length > 0) {
          const className = StringUtils.camelCaseToDashCase(key)
          const jsFriendlyClassName = StringUtils.dashCaseToCamelCase(className)

          cssClasses.push(
            StyleBuilders.createCSSClass(
              className,
              StyleUtils.getContentOfStyleObject(staticStyles)
            )
          )

          // When the className is equal to the jsFriendlyClassName, it can be safely addressed with `styles.`
          const classNameIsJSFriendly = className === jsFriendlyClassName
          const classReferenceIdentifier =
            camelCaseClassNames || classNameIsJSFriendly
              ? `styles.${jsFriendlyClassName}`
              : `styles['${className}']`

UIDLUtils.traverseElements(node, (element) => {
      const { style, key } = element
      if (style && Object.keys(style).length > 0) {
        const root = jsxNodesLookup[key]
        const className = StringUtils.camelCaseToDashCase(key)
        jssStyleMap[className] = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
          if (styleValue.content.referenceType === 'prop') {
            return new ParsedASTNode(
              ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
            )
          }
          throw new Error(
            `Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
          )
        })
        ASTUtils.addDynamicAttributeToJSXTag(
          root,
          classAttributeName,
          `classes['${className}']`,
          propsPrefix
        )

importsAST = Object.keys(components).map((component) => {
      return t.importDeclaration(
        [t.importDefaultSpecifier(t.identifier(StringUtils.capitalize(component)))],
        t.stringLiteral(`./${StringUtils.camelCaseToDashCase(component)}`)
      )
    })

Object.keys(styles).forEach((item) => {
    if (typeof styles[item] === 'string') {
      style = `${style}
      ${StringUtils.camelCaseToDashCase(item)}: ${styles[item]};`
    } else {
      style = `${style}
      ${item} {
        ${mapStyles(styles[item])}
      };`
    }
  })
  return style