Fix for the "Storybook preview hooks can only be called inside decorators and story functions." error

adam-golab commented 2 months ago

Context for a bug:

I'm using a custom decorator to set the data-theme attribute in the html element:

// .storybook/preview.tsx

export const decorators = [
  (Story: ComponentType) => {
    const isDarkMode = useDarkMode();
    useEffect(() => {
      document.documentElement.dataset.theme = isDarkMode ? 'dark' : 'light';
    }, [isDarkMode]);
    return <Story />;
  },
];

When I add an interactivity to one of my components using hooks from @storybook/preview-api, for example the useArgs:

export const Checkbox: Story = {
  args: {
    selected: false,
    onClick: fn(),
  },
  render: (args) => {
    const [{ selected }, updateArgs] = useArgs();
    const onClick = (id: string) => {
      updateArgs({ selected: !selected });
      args.onClick();
    };
    return <Checkbox {...args} selected={selected} onClick={onClick} />;
  },
};

The bug:

Everything works properly until I switch the theme. When I switch it I'm getting an error Storybook preview hooks can only be called inside decorators and story functions.. I need to refresh the page to see the component with styles applied from the other theme. Looks like Storybook doesn't allow to use hooks from @storybook/preview-api when the story is nested into another component that use hooks imported directly from react

I've tested the fix on my project. Seems to fix the issue, as now I can switch themes and the components works without throwing any errors.