tyom / storybook-addons

Useful add-ons for Storybook
https://tyom.github.io/storybook-addons/
MIT License
23 stars 2 forks source link

Support storybook 7 #38

Open IanVS opened 2 years ago

IanVS commented 2 years ago

Hi, I see that these addons are relying on storybook packages with ^6.3.6. Maybe you could release a pre-release (alpha or beta) version that uses storybook 7?

tyom commented 2 years ago

Thanks for the suggestion, @IanVS. I'll find some time to do that.

batazor commented 1 year ago

@tyom Hi! Storybook released v7.0

tyom commented 1 year ago

Cheers for the heads-up, @batazor. I had some issues last time I looked into it and parked it. I'll take a look again soon.

IanVS commented 1 year ago

There's a bit of a guide here if that helps: https://chromatic-ui.notion.site/Addon-migration-for-Storybook-7-002f2f627c1d470298ca94894ab8a040

thathurtabit commented 1 year ago

FWIW, I've noticed that with Storybook ^7:

withReactContext decorator HOC will fail ❌ with: Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

I thought the below might work...

Setting the context via parameters, i.e.

someComponent.parameters = {
  reactContext: {
    initialState: {
      defaultValue: true,
    },
    reducer: (state, action) => ({ ...state, action })
  }
};

But this seems to get ignored.

I got around the current Storybook 7 compatibility issue by wrapping my own Story in a decorator in storybook's preview.js

// preview.js
export const decorators = [
  mswDecorator, // you might not need this bit
  (Story) => (
    <AppProvider>
      <Story />
    </AppProvider>
  ),
];

Then made a wrapper around my component to just update the state context for Storybook preview purposes:

// MyComponent.story.tsx
export const MyComponentStoryWrapper: FC = () => {
  const dispatch = useContext(AppDispatchContext);

  const handleToggleModal = () => {
    dispatch(setModal(myModalData));
  };

  return (
    <>
      <button onClick={handleToggleModal}>Toggle modal</button>
      <ModalHub /> /** <-- My actual component to test/view in Storybook */
    </>
  );
};

Obviously not as tidy as the solution this Storybook Addon would provide, but seems to work in the interim.

billsaysthis commented 1 year ago

Any progress on this front?

tyom commented 1 year ago

I'm sorry for not getting back to you sooner. I've started the process but came across many issues. I need to set aside some time to look into it properly. I hope I can make some progress soon.

RodrigoTomeES commented 6 months ago

hi, any update about this?

tyom commented 6 months ago

I have neglected this. But I see there is interest by people. I'm going to try to get it done sooner, even though I don't really use it at the moment.

The changes involved going up two versions of Storybook and other dependencies are substantial and I think I'm going to rewrite it.

Thanks for your interest.

tyom commented 3 months ago

Hello. I have updated this package. I rewrote it to be compatible with Storybook 8 and added more features, like support for args, multiple contexts etc. See more details in this comment.