ESlint config for "Open in Stackblitz"

[guidari]

Problem: When adding the “Open in StackBlitz” option to stories, we run into issues with how stories need to be written. For example, instead of writing useState, we should write React.useState for @stackblitz/sdk to work correctly.

Solution: We can implement an ESLint rule to validate that stories are written in a way that supports the “Open in StackBlitz” feature.

---

In the codePreview.tsx file, you can check the rules and adjustments we apply to ensure that Storybook code is transformed correctly into a format that StackBlitz can interpret.

A couple rules we could write:

• Make sure we don’t import icons with the same names as components. This docs could help
• Validate if we are using React.HOOK_NAME instead of using the hook it self. E.g. React.useState vs useState
• Validate if the story has a return statement