[Bug]: V8: useAddonState missing from @storybook/preview-api

[sballesteros]

Describe the bug

In v6/v7 i was able to access the state of a custom addon from preview.js with:

import { useAddonState } from '@storybook/client-api'

Per the readme of @storybook/client-api:

The contents of this package have moved to @storybook/preview-api. Please update your import.
This package will no longer be released as part of the 8.0 release of storybook.

however useAddonState is currently mising from @storybook/preview-api.

What is the migration path here?

Thanks!

To Reproduce

No response

System

No response

Additional context

No response

[vanessayuenn]

useAddonState is now exposed from @storybook/manager-api (docs).

[sballesteros]

@vanessayuenn thanks but importing from @storybook/manager-api leads to an error:

Cannot read properties of undefined (reading 'getAddonState')

As mentioned in my preview comment:

Per the readme of @storybook/client-api:

The contents of this package have moved to @storybook/preview-api. Please update your import.
This package will no longer be released as part of the 8.0 release of storybook.

but maybe that's a documentation bug as well?

Note that here I want to access addon state from preview.js (not the addon manager.js).

In case it is helpful a simple use case is to access the state of the storybook/viewport addon from preview.js. Before we used to be able to:

    const [{ selected } = {}] = useAddonState('storybook/viewport');

but that no longer works.

[sballesteros]

I noticed that the source of @storybook/client-api has a deprecation notice:

@deprecated — This API might get dropped, if you are using this, please file an issue.

Looking at the storybook/viewport source it seems that it now relies on useGlobals to share the defaultViewport state so guessing that this is now the way to replace useAddonState in preview.js.

[sballesteros]

I can confirm that with v8 we can access the storybook/viewport state from preview.js with:

import { useGlobals } from '@storybook/preview-api';

and

const [{viewport}] = useGlobals();

[keithnickas]

While related, this issue appears in v7.6.20. Below is an example of our hydrate function that accesses the addonState. The addon is using the Panel as it's type. At this point, the @storybook/client-api is the only solution that is working as it has since v6 for us. We do intend to upgrade to v8, but, we are pausing until we have a better solution for our addon.

Any support would be greatly appreciated.

import {useAddonState} from "@storybook/manager-api"; 
/** when switching to this method, the addon complains that the `api` is undefined, even exposing 
* the `api` from `register` does not resolve the issue.
*/

import {useAddonState} from "@storybook/client-api"; 


export const hydrateBrand = () => {
  const brand = new URLSearchParams(window.location.search).get("brand");
  const [brandState] = useAddonState("storybook-brand-css", {
    selectedBrand: brand || "brandA",
  });

  let child = window.parent;
  let {parent} = child;
  while (child !== parent) {
    child = parent;
    parent = child.parent;
  }
  try {
    const url = new URL(child.location.href);
    if (brand !== brandState.selectedBrand) {
      url.searchParams.set("brand", brandState.selectedBrand);
      child.history.replaceState(null, "", url);
    }
  } catch (e) {
    console.log("failed to check window url:", e);
  }

  return brandState;
};