Support Storybook 8

[C0ZEN]

Hi,

I know that the proper support for Storybook 7 is not even done yet, but now Storybook 8 is out, and I cannot migrate due to an issue.

[tyom]

Hi @C0ZEN. Thanks for reporting this. I'm sorry, the library has been neglected lately. I last used it a while ago, but I should keep it up to date with dependencies and issues.

My last attempt to get both of the packages to use SB7 was not very successful. It took me down the path of rewriting quite a lot of it, which I ultimately abandoned. The context library should be more straightforward to upgrade. I'll take a look into it as soon as I can.

[gurobokum]

I've faced with the same issue and as a workaround created decorator manually based on the logic from packages/storybook-react-context/src/decorator.tsx

import { WebAppContext } from "../src/contexts";
import mockWebApp from "../src/utils/mockWebApp";
import React from "react";

import type { Decorator } from "@storybook/react";

const withContext: Decorator = (Story): React.ReactElement => {
  const webApp = mockWebApp();
  return (
    <WebAppContext.Provider value={webApp}>
      <Story />
    </WebAppContext.Provider>
  );
};

export default withContext;

...
.storybook/preview.ts

import withContext from "./withContext";

const preview: Preview = {
  ...
  decorators: [
    withContext,
  ]
};

For my needs it works, maybe it helps

[barkbarkuk]

Stuck with the same problem following an upgrade to Storybook 8, I copied packages/storybook-react-context/src/decorator.tsx into my project and updated a couple of imports, which seems to have got me back up and running for now, in case it's any use.

import { makeDecorator, useArgs } from '@storybook/preview-api';
import type { Addon_StoryContext, Addon_WrapperSettings } from '@storybook/types';

[studiosi]

@barkbarkuk solution workaround works also for me, but you need to add these two constants to the file (or have access to them otherwise) as they are imported from "."

const ADDON_ID = "storybook-react-context";
const PARAM_KEY = "reactContext";

[woile]

Any idea how to make it work with Args?

[tyom]

Apologies for the radio silence. I haven't used this package in a while and left it neglected. I further complicated things by coupling this package in a monorepo with another add-on.

I've now split this add-on into a separate repo and rewrote it to support Storybook 8. The API has also changed and is more flexible, as the context value can be a function that could be used with the useState or useReducer hook as well as Storybook args. Overall, I believe it's a much simpler API that supports multiple contexts.

I invite you to try it out npm i -D storybook-react-context@beta. Check out the new docs and new example stories, as the older version is incompatible with it.

I am looking forward to your feedback.