Create `FormElement` and `FormElementDescription` presentational components

I have reviewed the merge request after switching to the issue branch.
- The code now correctly separates FormElement and FormElementDescription from DrupalFormElement.tsx, making it cleaner and easier to reuse.
- The new components follow the existing structure and naming rules.
- Everything working as expected—labels, descriptions, errors, and attributes are handled properly.
Looks good to me!

  cy:command ✘  get	[data-xb-component-id="experience_builder:my-hero"]
      cy:command ✘  assert	expected **undefined** to have a length of **1** but got **0**

looks like a legitimate e2e test failure though 😭

I have rebased with the latest changes. All tests are passing except for one, which remains unaffected by the code changes.img[src*="/experience_builder/components/image/600x400.png"]' was found in iframe '[data-xb-preview="lg"][data-test-xb-content-initialized="true"][data-xb-swap-active="true"]': expected **false** to equal **true**

Hmmm …

      cy:command ✘  assert	'img[src*="/experience_builder/components/image/600x400.png"]' was found in iframe '[data-xb-preview="lg"][data-test-xb-content-initialized="true"][data-xb-swap-active="true"]': expected **false** to equal **true**

… I bet this is because you ran the CI pipeline, that it's resulting in /experience_builder-3491293/components/image/600x400.png — we saw that elsewhere too 😬 Re-running the entire pipeline, to see if my hunch is right.

Because in the screenshot the failed test, you can actually see the image loading just fine:

diff --git a/ui/tests/e2e/component-operations.cy.js b/ui/tests/e2e/component-operations.cy.js
index 40f5138f2..f460f84be 100644
--- a/ui/tests/e2e/component-operations.cy.js
+++ b/ui/tests/e2e/component-operations.cy.js
@@ -406,7 +406,7 @@ describe('Perform CRUD operations on components', () => {
     cy.get('.primaryPanelContent').findByText('Image').click();
     // Check the default image src is set.
     cy.waitForElementInIframe(
-      'img[src*="/experience_builder/components/image/600x400.png"]',
+      'img[src*="/components/image/600x400.png"]',
     );
   });
 });

would bypass the CI problem I described in #8, but it'd slightly reduce test coverage.

This should AFAICT also work and keep the same level of test coverage:

diff --git a/ui/tests/e2e/component-operations.cy.js b/ui/tests/e2e/component-operations.cy.js
index 40f5138f2..080ce3a8b 100644
--- a/ui/tests/e2e/component-operations.cy.js
+++ b/ui/tests/e2e/component-operations.cy.js
@@ -406,7 +406,7 @@ describe('Perform CRUD operations on components', () => {
     cy.get('.primaryPanelContent').findByText('Image').click();
     // Check the default image src is set.
     cy.waitForElementInIframe(
-      'img[src*="/experience_builder/components/image/600x400.png"]',
+      'img[src*="/components/image/600x400.png"][src*="/experience-builder"]',
     );
   });
 });

🙃

Asking @balintbrews to sign off on this given he created this issue 😊