How to use the @teleporthq/teleport-shared.StringUtils.removeIllegalCharacters 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,
    }

`Navlink does not support dynamic 'transitionTo' attributes\n ${JSON.stringify(
        transitionAttribute,
        null,
        2
      )}`
    )
  }

  const transitionState = transitionAttribute.content.toString()
  if (transitionState.startsWith('/')) {
    // attribute was explicitly set as a custom navlink
    return
  }

  const friendlyURL = StringUtils.camelCaseToDashCase(
    StringUtils.removeIllegalCharacters(transitionState)
  )

  const transitionRoute = options.projectRouteDefinition
    ? options.projectRouteDefinition.values.find((route) => route.value === transitionState)
    : null

  if (!transitionRoute) {
    transitionAttribute.content = `/${friendlyURL}`
    return
  }

  transitionAttribute.content =
    transitionRoute.pageOptions && transitionRoute.pageOptions.navLink
      ? transitionRoute.pageOptions.navLink
      : `/${friendlyURL}`
}

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,