Upgrade to storybook 7

[mathis obadia]

Hello,

I have created a atorybook addon using this addon kit as a starter. I now want to upgrade my addon to make it compatible with storybook 7 beta. Would it be possible to make this starter template compatible with storybook 7 so that I can look at the changes necessary to upgrade my own addon?

I understand storybook 7 is still in beta but it would be nice if we had a way to upgrade our addons before the official release. maybe a separate branch so that people creating addons now still have something compatible with the current version of storybook.

thanks

[Varun Vachhar]

@mathisobadia yes, I'm planning to release that soon. Next week at the latest.

[mathis obadia]

@winkerVSbecks glad to hear this thank you !

[Varun Vachhar]

@mathisobadia I've got a beta branch up. Do you want to give it a go? #45

[mathis obadia]

@winkerVSbecks Trying it right now ! Some notes:

1. I used to have my manager setup like this:

// Register the addon
addons.register(ADDON_ID, () => {
  // Register the tool
  addons.add(THEME_ID, {
    type: types.TOOL,
    title: "Themes",
    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
    render: () => (
      <Fragment>
        <ThemeSelector />
      </Fragment>
    ),
  });
});

So to migrate it to typescript I changed the extension to manager.tsx, this result in tsup not building it. I ended up modifying the file to

    render: ThemeSelector

so that it's no longer a tsx file but a simple ts file and it worked. I don't know if that could become an issue for some other addons

2. There is still the file typings.d.ts, it seems to be unused in the example code. If you want to use it then you need to pass an extra argument to tsup config : external: ["global"] not sure if that file should stay as it's not used by the example anymore?

3. some leftover .js files in the readme have been changed to ts but remain as js in the readme e.g.

The addon code lives in src. It demonstrates all core addon related concepts. The three [UI paradigms](https://storybook.js.org/docs/react/addons/addon-types#ui-based-addons)

src/Tool.js
src/Panel.js
src/Tab.js

Otherwise it worked great with some minor tweaks to the add on code so it looks good to me !

[Varun Vachhar]

Thanks, that's helpful feedback. I'll make the necessary adjustments.

[Varun Vachhar]

@mathisobadia made a few updates:

1. You can use tsx however it requires that you update the entry prop in tsup.config.ts to use "src/preview.tsx" or "src/manager.tsx". I added a note to both files.
2. Removed typings.d.ts
3. Updated README to use .ts