Support for Storybook v7

[JulioC]

Storybook v7 is in beta for a while now, and looks like this addon doesn't support it yet.

---

From my tests, it appears that a change in the default export of @storybook/addons is affecting @storybook/addon-devkit which is used by @react-theming/storybook-addon.

Since addon-devkit has not been updated in a couple of years, it would be nice to follow their recommendation and migrate to @storybook/addon-kit, which already supports v7.

[JulioC]

Since we have no updates on this fix, I've used patch-package to workaround the issue on my projects. The patch file 'patches/@storybook+addon-devkit+1.4.2.patch' shown below.

diff --git a/node_modules/@storybook/addon-devkit/dist/ChannelStore.js b/node_modules/@storybook/addon-devkit/dist/ChannelStore.js
index 5e4ee9d..14dd945 100644
--- a/node_modules/@storybook/addon-devkit/dist/ChannelStore.js
+++ b/node_modules/@storybook/addon-devkit/dist/ChannelStore.js
@@ -31,7 +31,7 @@ class ChannelStore {
 
     _defineProperty(this, "onConnectedFn", () => {});
 
-    _defineProperty(this, "channel", _addons.default.getChannel());
+    _defineProperty(this, "channel", _addons.default.addons.getChannel());
 
     _defineProperty(this, "connect", () => {
       if (this.isPanel) {

[swrobel]

Thanks for the workaround! Unforunately, SB7 compatibility seems a bit more complicated. I'm seeing crashes on docspages for any templates that receive props when using this addon with Storybook 7.0.0-rc.7. It's something this simple that triggers it:

const Template = ({ variant }) => <Button variant={variant}>Default</Button>

With this addon:

Without:

[thisislawatts]

In case this is helpful for anyone else, I ended up ejecting @react-theming/storybook-addon in favour of adding a Theme toggle directly into Storybook v7.

// preview.tsx
import { ThemeProvider } from 'theme-ui'
import type { Preview } from '@storybook/react'

const themes = {
  pp: {...},
  pk: {...},
  ff: {...},
}

const preview: Preview = {
  parameters: {
    ...
  },
  globalTypes: {
    theme: {
      name: 'Theme',
      description: 'Platform Theme',
      defaultValue: 'pp',
      toolbar: {
        icon: 'paintbrush',
        items: [
          { value: 'pp', title: 'Precious Plastic' },
          { value: 'pk', title: 'Project Kamp' },
          { value: 'ff', title: 'Fixing Fashion' },
        ],
      },
    },
  },
  decorators: [
    (Story, context) => (
      <>
        <ThemeProvider theme={themes[context.globals.theme]}>
          <Story />
        </ThemeProvider>
      </>
    ),
  ],
}

export default preview

[morewings]

@JulioC I created Storybook 7 compatible theming addon.

[JulioC]

Thanks for bringing this up @morewings!

Unfortunately, my use case requires real-time editing the theme properties, so I still need help from the maintainers of react-theming to get this issue fixed.

[morewings]

@JulioC I understand this. Can you give me more details on your use case? Maybe I will be able to improve my addon that way.

[JulioC]

@morewings thanks for the offer, but I believe this may be too far from your current scope...

Our design system has color tokens which can be customized for each project, based on client branding, so it's nice to change those theme properties to arbitrary values in Storybook for testing how the color will fit the components. We do it using a JSON editor in the theme selector.

[morewings]

@JulioC got it. Honestly, I use same token based theme architecture at my job. But we are editing tokens at Figma (via custom plugin). That’s why I didn’t think about adding them to Storybook. There's more than one way to skin a cat.

[usulpro]

Guys sorry for interrupting you, but didn't you consider contributing to this repo instead of creating new ones? This is an open-source project and PRs a very welcomed

[morewings]

@usulpro as far as I know apis are not compatible for 6 and 7 versions of Storybook. I haven’t seen any cross version approach yet. Didn’t mean any disrespect for your work.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JulioC]

Still an issue

[mikematos84]

Still an issue

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JulioC]

Still an issue, but the project is abandoned anyways...

Off-topic: stale bot is so annoying! If it closes issues on abandoned projects, anyone who comes and see 0 issues will think the project is good to use. If we don't let it close, we need to keep flooding anyone watching the thread without any news. This is a deservice for everyone involved.

https://nostalebots.xyz/