[Major refactor] Upgrade to Storbook 10 and align with Storybook Addon Kit

[perkola]

This pull requests is a suggestion of a major refactoring of the storybook-addon-html addon to solve #145, #147 and #148.

Description

Following the Storybook migration guide and the Storybook Addon migration guide this PR suggest the following major changes:

• Match the repository structure to the official Storybook Addon Kit.
  A huge benefit of this change is that the project structure is supported by Storybook. It will make future upgrades easier and the whole addon setup familiar. Changes to align include:
  • Updating package.json structure and "scripts".
  • Updating the TypeScript configuration.
  • Aligning ESLint and Prettier configurations.
  • Updating the default plugin scripts/.
• Upgrade to Storybook 10.x.
  This is the latest major version of Storybook. This change requires Storybook files to be ESM only.
  Note: projects using this addon can still build component libraries for CJS, but Storybook itself runs and builds as ESM only.

Bonus bug fix

As a bonus this PR also fixes the formatting of the code in the HTML tab by using Prettier (which is already an included dependency):

Testing

Since this PR contains many significant changes, it should be thoroughly tested. Verify that it builds using

npm run build

Lint using

npm run lint

And format the code using

npm run format

Start storybook and verify that the HTML tab is correctly displayed and formatted on http://localhost:6006/ using

npm run storybook

Thank you @jeanfredrik for maintaining this plugin. I hope this PR finds you well.

[khawkins98]

I believe this should be the below -- as it currently stands it's adding a ; to the output of each HTML snippet:

      const prettierPluginHtml = await import('prettier/plugins/html');

...

    parser: "html",
    plugins: [prettierPluginHtml]

[khawkins98]

I've made a PR to this PR that resolves this and updates the major version.

perkola#1

I've also made a build branch on my fork for easy local testing:

    "@whitespace/storybook-addon-html": "github:khawkins98/storybook-addon-html#build",

[npoggenburg]

When i use "@whitespace/storybook-addon-html": "github:khawkins98/storybook-addon-html#build", with Storybook 10.1.6. i get this message when starting the project:

▲ Could not resolve addon "@whitespace/storybook-addon-html", skipping. Is it │ installed?

Its correctly located in the node_modules folder.

[khawkins98]

@jeanfredrik grateful if you could have a look at this PR as it's holding us back from storybook 10.

[carolpettirossi]

How can we get this pushed? I'm using Storybook 10 and I'd love to have this addon