feat: add visual editor

[selvalt7]

#773

[akloeckner]

Wow! Very impressive. I will need some time to dive into this. And I will most likely need a few iterations until I understand everything.

If you appreciate some early feedback from my browsing around for the first time:

• I found this glitch in the "Display" submenu, which does not happen in the "Alignment" submenu:

• We are having some issues with the package-lock.json file. It loses resolved and integrity fields, whenever a new package is installed. You also ran into this issue. The only fix I could find so far, was to manually select the changes to commit and revert all the others.

• The entities show two buttons to delete them: Maybe we can manage to show and use the default one only?

[selvalt7]

Made some changes based on your feedback

• Glitch was caused because select selector does not like options with boolean value, the fix made selector accept custom value.
• As for the remove entity button, I removed it and made one inside the selector act as the external.

[ildar170975]

Just a small remark: For some STOCK cards a UI does not provide controls for changing some options - i.e. these options may only be changed in yaml. There are some related issues in HA frontend Github - and some of these issues are closed be Devs as "well, it turned to be normal to force users to use yaml to define some options", some issues may be just ignored. Means - may be we should not try to support ALL available options. Besides, one day some options may become per-entity - and then changes in UI will be needed. I am really satisfied that @selvalt7 started developing UI - but I do not insist on a support of ALL available options.

[ildar170975]

Another remark is about selecting entities. Since I have not tested is PR - have to assume & guess about a possible use of "common HA ways" in this PR. The current "common way" of selecting entity - and then displaying a selected entity - is rather confusing & unfriendly:

1. After being selected - an entity is shown by friendly_name which can be very confusing since names are not unique. Check https://github.com/home-assistant/frontend/issues/11870 for Automations UI; similarly it is about editing Entities card (& all similar places in HA).
2. When a drop-down UI control is reopened - the selected entity is not "selected" (https://github.com/home-assistant/frontend/issues/17395) - which makes hard to guess which entity is selected (unless you open a yaml).

Means - using same "common ways" just "contaminate" more cards in HA ))). Not a big deal, using yaml anyway - just a warning.

[selvalt7]

Visual editor does not provide all the options, only the ones I felt are necessary, if user wants to change card size or change update interval to something other than every state change, it can only be done with yaml.

On the subject of selected entity which is represented with friendly_name. I came up with an idea to display entity_id under the selector like this

[ildar170975]

I came up with an idea to display entity_id under the selector like this

Good, very useful & makes a picture clear.

And what about this common issue? I was afraid that you will face same glitch if decide to use a common component.

[selvalt7]

Yeah I have that issue, the only solution I think is to make custom selector or wait until they fix it in entity selector.

[ildar170975]

wait until they fix it in entity selector.

I would choose this way for time-saving.