feat(protocol-designer): add TextAreaField component to protocol-designer

[koji]

Overview

add TextAreaField component to protocol-designer and replace StyledTextarea in AddMetaData component with the new component.
The rest of replacing will be done by a following PR.
not adding to components because of review requests.

close AUTH-985 AUTH-1434

Test Plan and Hands on Testing

• create a new protocol and TextAreaField works as well as InputField in AddMetaData component
• run Storybook Protocol-Designer

Changelog

• add TextAreaField component
• add test for the component
• add stories for the component
• replace StyledTextArea in AddMetaData component with the new component

Review requests

TextAreaField uses a custom hook to track focus and focus-visible correclty.
focus-within is triggered and it shows the outer outline style when clicking TextArea
If you have any idea to trigger focus-visible and focus separately without using a custom hook, let me know.

Risk assessment

low

[codecov]

Codecov Report

Attention: Patch coverage is 87.64045% with 22 lines in your changes missing coverage. Please review.

Project coverage is 20.17%. Comparing base (2ec42e1) to head (b31a059).
Report is 10 commits behind head on edge.

Files with missing lines	Patch %	Lines
...col-designer/src/molecules/TextAreaField/index.tsx	86.90%	22 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             edge   #17487      +/-   ##
==========================================
+ Coverage   20.09%   20.17%   +0.08%     
==========================================
  Files        3191     3192       +1     
  Lines      230123   230396     +273     
  Branches     8204     8276      +72     
==========================================
+ Hits        46246    46491     +245     
- Misses     183877   183905      +28     

Flag	Coverage Δ
protocol-designer	17.50% <87.64%> (+0.09%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
protocol-designer/src/molecules/index.ts	100.00% <100.00%> (ø)
.../src/pages/CreateNewProtocolWizard/AddMetadata.tsx	84.28% <100.00%> (-0.23%)	⬇️
...col-designer/src/molecules/TextAreaField/index.tsx	86.90% <86.90%> (ø)

... and 5 files with indirect coverage changes

[ncdiehl11]

looks good! Is it intentional to have to tab twice to focus into this field? That differs from InputField
https://github.com/user-attachments/assets/e396a299-dc98-4710-b61b-31e12a61ea3c

[koji]

looks good! Is it intentional to have to tab twice to focus into this field? That differs from InputField https://github.com/user-attachments/assets/e396a299-dc98-4710-b61b-31e12a61ea3c

I think that is InpufField issue since there is no information about the behavior.
I guess InputField was create a couple years ago and probably the current implementation doesn't align with the design perfectly.