Improve the DX of Elements & Icons Packages

[sstrubberg]

User story

As a developer:

I need to: reference Carbon guidance when using elements in my project without leaving my native development environment.

so that I can: build products with less context shifting.

Additional information

REF https://marketplace.visualstudio.com/items?itemName=wzs1234566.ibm-carbon-react

Our adoption of TypeScript should cover this use-case:

What if we had an icon preview?

---

REF https://ibm-studios.slack.com/archives/GCQ5R263T/p1714067810614929

We could utilize JSDocs to bring icon previews and color token previews into the developer's IDE.

Acceptance criteria

• {{State acceptance criteria}}
• {{State another}}
• {{And another}}

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

I love this idea! Maintaining an extension seems unnecessary if we can do all this with just jsdoc. It would be good to pin down how exactly this works natively within vscode. Maybe it works because vscode uses the jsdoc markdown plugin? I'm not sure. Finding out can help determine if/where it's documented and what the possibilities or limitations are.

A few thoughts:

• My guess is that this only works if the images are hosted externally somewhere. We can test to see if relative urls to local images and assets (svg?) can be used
• If externally hosted images are required, the icons elements preview has all the svg's inline. So we can't link to them. We might be able to change that though?
• Do the colors require an external link as well, or will a hex code or something work?
• If we put all this effort into jsdoc-ing the elements packages, we could use the jsdoc github action to generate documentation pages that could be linked within the elements previews.