HDS-2717: Toast - Convert to TypeScript

[WenInCode]

📌 Summary

Converts Hds::Toast to Typescript

🛠️ Detailed description

• Converts Hds::Toast to Typescript
  • I initially tried the recommended approach of using templateOnlyComponent to type the Toast component as it had no backing class. However, I was getting Typescript errors when trying to pass it the type signature stating that templateOnlyComponent does not take type arguments. It seems like that only became available in later version of Ember. I thought it would be fine given this is an embroider addon but idk, typescript was not happy! Willing to revisit this if anyone has any ideas.
• Updates the Hds::Alert onDismiss argument type to take the MouseEvent and then any number of args with any value. I originally had this set to () => void, which works great if you never want to handle arguments on the action handler, but it falls on it's face if you do. I thought it would be better to switch to always handle an event, and then any number of arguments of any value, as you can pass in whatever you would like with a (fn) helper. I used any here because you can't type the handler functions additional args if you set it to unknown

📸 Screenshots

🔗 External links

Jira ticket: HDS-2717

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Apr 4, 2024 5:02pm
hds-website	✅ Ready (Inspect)	Visit Preview	Apr 4, 2024 5:02pm

[Dhaulagiri]

It seems like that only became available in later version of Ember

Like if the components package was on a later version of Ember you would not have this problem? Or something else?

[aklkv]

@WenInCode I am curious ti dig into this issue, did this fail?

[aklkv]

Also side note, I found this codemod very useful in adding signatures it takes care of these conversions. you can supply the exact component path to be converted in order to avoid converting other components

[alex-ju]

This is a good example of how TypeScript could help us spot issues. While this interface is accurate (the Toast component doesn't expose a @type argument) we didn't document it as such in the component API. I will raise a follow-up PR to correct that.

[WenInCode]

Yes, I initially had it implementing the Alert interface and realized afterwards that inline is hardcoded in Toast. 👍

[alex-ju]

Having a backing class is a good fallback, but considering we expect to have many other components as templates only, I'd try to get it right now so we can replicate this in the future.

You probably tried something like this and it complained with something along the lines of 'Expected 0 type arguments, but got 1.'. This, as you mentioned in the PR description, means it picks up @types/ember__component with a 3.x version (which seems to be required by a 3rd degree dependency in website, so unrelated to this package).

Suggested change

	import Component from '@glimmer/component';
	import type { HdsToastSignature } from './types.ts';
	export default class HdsToastComponent extends Component<HdsToastSignature> {}
	import TemplateOnlyComponent from '@ember/component/template-only';
	import type { HdsToastSignature } from './types.ts';
	const HdsToastComponent = TemplateOnlyComponent<HdsToastSignature>();
	export default HdsToastComponent;

Instead of @types/ember__component/template-only.d.ts, it should be using ember-source/types/stable/@ember/component/template-only.d.ts (available in our ember version), however that's not happening and it's puzzling 🤔

[alex-ju]

the only way around it is to be more explicit about which path to use to resolve TemplateOnlyComponent – I pushed a commit to illustrate that

[WenInCode]

Ah that's exactly what it was. Appreciate the commit. I tried it out and it LGTM

[WenInCode]

@alex-ju thanks for helping with the resolution issue. The changes LGTM I think this is ready for another set of 👀.