feat(StudioToggleableTextfield): Create components to handle toggleable textfields and validation

[JamalAlabdullah]

Description

This PR developed an input component that can toggle between viewing and editing modes. This component exists in two variants: one that accepts custom validation rules and one that validates against JSON schema. The variants are called StudioToggleableTextfield and StudioToggleableTextfieldSchema, respectively. StudioToggleableTextfieldSchema builds upon StudioToggleableTextfield to separate logic and isolate the components as much as possible. Both variants are extensions of the StudioIconTexfield component, which supports an icon to the left of the input field and extends the basic StudioTextfield component.

This PR includes AJV as a dependency in studio-components. Additionally, some types necessary for implementing JSON schema validation have been moved into the studio-components package.

Note: We should consider to make a folder named form that includes all the form components we have in Studio components.

Related Issue(s)

• Update EditComponentId component to match new design #12181

Verification

• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

[nkylstad]

I have so far only looked at the EditComponentId implementation, I have a comment there for consideration.

Also, I noticed that there are some spacing issues when I tested the branch locally - there is too much space on either side of the component. The button itself seems to be correctly aligned, but I would expect the content to be left-aligned with the other content in the column.
Seems like overriding the button's style to remove padding-left might help 🤔

[codecov]

Codecov Report

Attention: Patch coverage is 94.40000% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 87.21%. Comparing base (dd15565) to head (0fb82d9).
Report is 1 commits behind head on main.

Files	Patch %	Lines
...ioToggleableTextfieldSchema/JsonSchemaValidator.ts	92.00%	1 Missing and 1 partial ⚠️
...esHeader/EditComponentIdRow/EditComponentIdRow.tsx	90.47%	1 Missing and 1 partial ⚠️
frontend/app-development/router/routes.tsx	66.66%	1 Missing ⚠️
.../src/components/StudioToggleableTextfield/index.ts	75.00%	1 Missing ⚠️
...omponents/StudioToggleableTextfieldSchema/index.ts	66.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12214      +/-   ##
==========================================
+ Coverage   87.15%   87.21%   +0.06%     
==========================================
  Files        1200     1209       +9     
  Lines       18049    18154     +105     
  Branches     2300     2315      +15     
==========================================
+ Hits        15730    15833     +103     
- Misses       2040     2041       +1     
- Partials      279      280       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[framitdavid]

Nice! Last few things we need to do! 🚀

[framitdavid]

@JamalAlabdullah can you cross check my commits and approve if you agree or give me some feedback if you disagree. 😊

[JamalAlabdullah]

@framitdavid Everything looks nice😊 thanks for your contribution ❤️