Generate valid variable names from theme names and fix comma in output formatting

[GarthDB]

trafficstars

Description

Just cleaning up #223 on a new branch/pr.

Motivation

thierryc made a great pr but we've made some big structural changes since then.

To-do list

• [x] I have read the CONTRIBUTING document.

• [ ] This pull request is ready to merge.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 7b14f3a7e8f23dcc9bc6d6f8470239dfa1876104

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[GarthDB]

Run report for 7b14f3a7

Total time: 19s | Comparison time: 17.6s | Estimated loss: 1.3s (7.1% slower)

	Action	Time	Status	Info
🟩	SyncWorkspace	0ms	Passed
⬛️	SetupNodeTool(~20.11)	1.2s	Skipped
🟩	InstallNodeDeps(~20.11)	8.4s	Passed
🟩	SyncNodeProject(contrast-colors)	0.1ms	Passed
🟩	SyncNodeProject(ui)	0.3ms	Passed
🟩	RunTask(ui:makeDistDir)	32.9ms	Passed
🟩	RunTask(ui:copyCNAME)	11.6ms	Passed
🟩	RunTask(ui:copyUIIcons)	58.3ms	Passed
🟩	RunTask(ui:copyWorkflowIcons)	58.3ms	Passed
🟩	RunTask(ui:buildSite)	9.3s	Passed

Touched files

docs/ui/src/js/createOutputParameters.js

[GarthDB]

@thierryc I'm trying to test this locally, but I'm not sure it's working.

Running locally, I created a new theme and changed the name to something with spaces. Looking at the URL with the string of data, it converted it the spaces to + symbols:

http://localhost:1234/theme.html?name=title+for+new+theme&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A100%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D

Do you have an example of some data that should be escaped and what it should look like after going through your regex?