Interactive configuration builder - Setup beautifiers, languages, and options

[stevenzeck]

Poll: Which do you prefer https://clangformat.com/ or http://csscomb.com/config ?

---

Must Haves

• Display checkbox list of all languages that Unibeautify supports, serves as step 1
• Generate unique list of options based on all of the languages the user selects
• Loop through all options, displaying a page for each one
  • Display box for each value for the option, including a code sample, along with a "don't use this option"
  • Allow the user to select the value for that option
  • Show a page for selecting beautifiers? I kind of feel we need to do this, as some beautifiers you don't have the same amount of control over
• Generate yaml and json text based on the languages and options the user selected
  • Ensure options under each language are supported by the language so we don't bloat the file

Nice to Have

• Previous and Next button text should be the name of the page the user is going to next
• Allow users to download the file directly from the browser

I found CSS Comb's build config flow interesting: http://csscomb.com/config.

[stevenzeck]

@Glavin001 How will Setup Beautifiers work exactly? Are we going to have the option to select which beautifiers to install versus putting them all in the editor package.json?

[Glavin001]

I would like to present the user with the supported options for each beautifier. If the user only wants to use a subset of the possible configuration options, then there may be beautifiers which are unnecessary to achieve the desired beautified result and can therefore be removed. Consider the Options table for JavaScript language: https://unibeautify.com/docs/language-javascript.html#options

I think an interactive tool similar to CSSComb's may allow users to choose "I don't care" for "Choose the code sample you like more:" which would allow us to narrow down which beautifiers we actually need to apply.

Thoughts?

[stevenzeck]

OK, so this has nothing to do with the installation of beautifiers themselves?

What would be the difference between Setup Beautifiers and Configuration Beautifiers?

[Glavin001]

I think the original intent of Setup Beautifiers was for resolving error messages like "Could not find XYZ program". The configuration part of the assistant being what we are describing above.

[stevenzeck]

I've started working on this. I'll need some help getting the options pulled in from where ever the source ends up being, and how to best go about "saving" each selected option as they go through the wizard.

Bootswatch has cards that are perfect for putting code samples in, although I need to figure out how to make them all the same width and height since samples will take up different amounts of whitespace.

[stevenzeck]

How I'm approaching it (everything mentioned is under src/pages/setup) @Glavin001 would like your input on this design and where you would make changes since you know React a lot more than I do.

1. index.tsx serves as the welcome/starting page for configuration. Probably will have a drop-down for the language users want to configure, which will be passed to the "Wizard" component.

2. The Wizard component creates the base UI for the wizard (buttons for steps, how many steps there are, etc.). The states I have keeping track here are:

• preStepName: The name of the previous step (in these cases the name of the option), which will be displayed as text in the PREV button
• nexStepName: The name of the next step (in these cases the name of the option), which will be displayed as text in the NEXT button
• stepName: The current step name, to display in the header
• language: The language you are configuring

The first three would change when the user switches which step they are on. The wizard will render the base UI, along with OptionButton components.

3. The OptionButton component is each card. The props that are passed in are "name" for the value of the option in the header and "code" for the sample code in the body. The language from the Index and Wizard is passed for highlightjs to syntax highlight.

https://github.com/szeck87/assistant/tree/options-wizard

[Glavin001]

I was thinking:

• Users selects 1 or more languages from list of language checkboxes
• Custom configuration plan is created
• For each option show example
  • Include "I don't care" option so we know which option we can ignore. This allows use to disable beautifiers which support options the user does not care about
  • Use the previous configuration + this new option to generate the example, so it is as personalized for the user as possible (not simply hardcoded option examples)
• Generate configuration file
  • JSON and YAML formats
  • For all languages
  • Only enable beautifiers which are required based on options selected

[stevenzeck]

Holding off further until data fetching and beautifying is resolved.

[Glavin001]

Holding off further until data fetching and beautifying is resolved.

Sounds like my kind of thing 😄 . Reassigning.

[Glavin001]

@szeck87 Do you have a branch you could create as a PR and I will take it over?