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.

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?

From https://tyom.github.io/storybook-addons/react/?path=/story/storybook-react-context--change-context-on-mount&fixtures=.0

RangeError: Maximum call stack size exceeded
    at sortObject (https://tyom.github.io/storybook-addons/react/vendors~main.17a6b5f5.iframe.bundle.js:2:417487)
    at https://tyom.github.io/storybook-addons/react/vendors~main.17a6b5f5.iframe.bundle.js:2:417758
    at Array.reduce (<anonymous>)
    at sortObject (https://tyom.github.io/storybook-addons/react/vendors~main.17a6b5f5.iframe.bundle.js:2:417665)
    at https://tyom.github.io/storybook-addons/react/vendors~main.17a6b5f5.iframe.bundle.js:2:417758
    at Array.reduce (<anonymous>)
    at sortObject (https://tyom.github.io/storybook-addons/react/vendors~main.17a6b5f5.iframe.bundle.js:2:417665)
    at https://tyom.github.io/storybook-addons/react/vendors~main.17a6b5f5.iframe.bundle.js:2:417758
    at Array.reduce (<anonymous>)
    at sortObject (https://tyom.github.io/storybook-addons/react/vendors~main.17a6b5f5.iframe.bundle.js:2:417665)

Hello,

I'm trying to use the context addon for input-based components.
For example:

import { useEffect } from 'react';
import { withReactContext } from 'storybook-react-context';

const InputWrapper = ({ value, children }) => (
  <div>
    <p>{value}</p>
    {children}
  </div>
);

export default {
  component: InputWrapper,
  title: 'InputWrapper',
};

export const Input = (args, { context: [ state, dispatch ] }) => {
  const handleChange = (e) => {
    const { target: { value } } = e;

    dispatch({ value });
  };

  useEffect(() => {
    console.info('mount');

    return () => {
      console.info('unmount');
    }
  }, [])

  return (
    <InputWrapper value={state.value}>
      <input type="text" value={state.value} onChange={handleChange} />
    </InputWrapper>
  );
};
Input.decorators = [withReactContext({
  initialState: {
    value: 'Hello',
  },
})];
Input.args = {};

I'm noticing that on every dispatch (input value change) story is re-mounted.
Is there a way to avoid that, because on each keystroke input is re-mounted and focus is lost?

Thx

Hi!

I can't get both controls and fixtures working at the same time on Vue. The example doesn't include that, so how could tht be done?
I've tried several ideas but none of them worked.

My code is something like:

const Template = (args, { argTypes, fixture }) => {
  return {
    component: Table,
    props: Object.keys(argTypes),
    template: '<Table v-bind="$props" />'
  }
}

export const SomeRows = Template.bind({})
SomeRows.args = {
  rows: [
    { text: 'Value 1' },
    { text: 'Value 2' }
  ]
}
SomeRows.parameters = {
  fixtures: {
    __singleTab: true,
    realExamples: {
      'Some real values': {
        rows: [
          { text: 'Real Value 1' },
          { text: 'Real Value 2' }
        ]
      },
      'Other real values': {
        rows: [
          { text: 'Other value 1' },
          { text: 'Other value 2' }
        ]
      }
    }
  }
}

This code:

Access window.parent from the preview. This works in Storybook proper, but leads to errors in cases where the preview iframe is embedded in other places (such as Chromatic, or other 3rd party integrations).

In general any random URL parameters will be passed through to the preview iframe; additionally you can use the UPDATE_QUERY_PARAMS event to be informed of any changes.

The storybook-react-context addon repacks the initialState value into a new type that doesn't necessarily match the original context provider value. The addon unconditionally changes the provider value to a React.useReducer result. It looks like the implementation may overfit to a particular use case. I'm working with a provider where the value is just a plain object. What I pass as the initialState value should be what the component gets with a React.useContext call. In this particular case, it's a 3rd party context so I don't have the liberty of adjusting it to conform to this addon's expectations.

I'm happy to pull together a PR, but I'd like to get agreement on what, if anything, should change.