chore(chart bar): convert to typescript

[Mash707]

Towards #11719

The following examples of ChartBar will be converted to TypeScript:

• Basic with right aligned legend
• Purple with bottom aligned legend
• Multi-color (ordered) with bottom-left aligned legend
• Single with right aligned legend
• Alerts timeline

[patternfly-build]

Preview: https://patternfly-react-pr-11727.surge.sh

A11y report: https://patternfly-react-pr-11727-a11y.surge.sh

[thatblindgeye]

I'm pretty sure you had brought this issue up with me on Slack so if we've already discussed this just let me know. But I'm wondering if we should just update the eslint config to try and ignore these token names. @kmcfaul wdyt? Testing out locally if we were to update the camelcase rule to add:

allow: ["^t_[global|chart]"]

it should ignore these sorts of imports without having to add all the ignore comments. We'd just have to update imports of charts_ tokens to the t_charts_ ones, but curious if there's potential for things to sneak in that you can think of.

[Mash707]

Yes, we had a discussion regarding this in slack, I previously used eslint-disable camelcase. You suggested to use eslint-disable-next-line instead.
This issue might occur again with other chart components in the future PRs.
I have also seen the usage of eslint-disable camelcase in various existing examples.

[thatblindgeye]

@Mash707 for now let's try making the above update in the eslint config. Having a bunch of ignore comments in these files will add up and create noise we don't really need.

We could also allow usage of charts_ imports/tokens, since updating those is a bit out of scope here (would be worth a "TODO" comment mentioning we should update the allows array to remove that one after updating usage in charts examples)

[Mash707]

Got it, will update the eslint config.