Simplify canvas_stark: remove semi-coupled theme engine + improve React embedding
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3555062. -->
Reported by: [bnjmnm](https://www.drupal.org/user/2369194)
Related to !272
>>>
<h3 id="overview">Overview</h3>
<p>We can remove the semi coupled theme engine entirely and achieve the same functionality in fewer steps by using custom html tags in twig. These particular tags map to React components.</p>
<p>Some of the benefits that come to mind</p>
<ul>
<li>No need to for a custom theme engine</li>
<li>Can easily drop React components into a regular .twig.html file (in fact, we've been doing this for a while now with the simpler <code><canvas-box></code> and <code><canvas-text></code> components, but this would make that approach work for all components )</li>
<li>It's much easier to understand a twig template that looks like this<br>
<pre><drupal-form-element-label<br> required="{{ required }}"<br> title-display="{{ title_display }}"<br> attributes="{{ attributes }}"<br> title="{{ title }}"<br>><br></drupal-form-element-label></pre><p>vs this </p>
<pre>{<br> "props": {<br> "attributes": "object",<br> "title": {<br> "#markup": "string"<br> },<br> "required": "boolean",<br> "titleDisplay": "string"<br> }<br>}</pre></li>
<li>It will facilitate more accurate reporting/diagnosis due to eliminating a part of Canvas understood by few.</li>
</ul>
<p>The end result functionality-wise is essentially the sames. It wouldn't be doing anything new - but it is accomplishing the same result in fewer stages, and in a manner that is more easily understood. Semi coupled already required us to create templates with JSON content to instruct the engine how to process a given array. This approach also requires creating templates, but it's the twig we're accustomed to + some additional capabilities via custom elements.</p>
<h3 id="proposed-resolution">Proposed resolution</h3>
<h3 id="ui-changes">User interface changes</h3>
issue