Migrates avatar base to TypeScript

[spiritanand]

Explanation

Currently, the AvatarBase component is built in JavaScript. This PR deprecates the JS component and creates a new TypeScript version.

Migrated all .js to .tsx or .ts files

• Converted objects to enum
• Updated storybook documentation as well as how to add a new icon
• Resolves Migrate components to TS: AvatarBase #18063

Screenshots/Screencaps

Before

Before.AvatarBase.mp4

After

No changes to the functionality of the component, stories, and controls all work. Updated docs.

screen-recording-2023-04-07-at-123922-pm_0cUhUGas.mp4

Manual Testing Steps

• Go to the storybook build on this PR
• Search AvatarBase in IDE and story in storybook.
• Check docs align with enums

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • How reviewers can test my changes
• Sufficient automated test coverage has been added

Pre-merge reviewer checklist

• Manual testing (e.g. pull and build branch, run in browser, test code being changed)
• PR is linked to the appropriate GitHub issue
• IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be required.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[georgewrmarshall]

Not sure if Text being in TS is a dependency of this PR?

[spiritanand]

@georgewrmarshall I am getting the error
AvatarBase not found via ../avatar-base/index.ts -> ../avatar-base/avatar-base.js import/named

[spiritanand]

@georgewrmarshall what is the update on my questions?

[georgewrmarshall]

Hi @spiritanand, I'm not sure what your issue is from a quick glance. I'll try do some digging this week. It also looks like you have a failing unit test.

[legobeat]

@spiritanand

Are you referring to this?

https://github.com/MetaMask/metamask-extension/pull/18494/files#diff-1103d67f2a503247c134fd6eeed618f1ff2a8fc1571e03e33e020dfaed96c793L22

https://github.com/MetaMask/metamask-extension/pull/18494/files#diff-82f8c95261bd014b4f0296705e97d1353929cc42c2bc9952d103d076aca17d3eR38-R39

https://react.dev/reference/react/forwardRef

[spiritanand]

Thanks for the catch @legobeat, that was something I missed as well. The linting errors that I am getting are,

I have fixed the issue you have pointed out above, though. Added forwardRef in AvatarBase

[spiritanand]

It is working perfectly. Thank you, @legobeat and @georgewrmarshall

You guys have been tremendously patient and helpful :)

[georgewrmarshall]

Looking great! Left 2 small suggestions

[spiritanand]

Done :)

[georgewrmarshall]

LGTM! 💯 Thank you for you contribution @spiritanand

[legobeat]

LGTM