Get Handle on Controls Addon state in Storybook Story component

[charkour]

Hi, thanks for storybook!

I have a component that has internal state that updates and I would like that internal state up update the Args Table on the Controls Addon. Below is a video of what currently happens which is working the wrong way.

Screen.Recording.2021-07-22.at.1.20.48.PM.mov

Here is currently what I have for my component. I pass in the argument value: 3 and when I use the Controls Addon Arg Table to change value, it updates in the component, however, I don't know how to update the state of the Controls Addon Arg Table. I've tried using useAddonState from @storybook/api. But I get an error, "Cannot read property 'getAddonState' of undefined". Thanks for the help.

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Quantity } from '../../components/ui';
import { useState } from 'react';
import { useEffect } from 'react';
import { useArgs } from '@storybook/client-api';
import { useAddonState } from '@storybook/api';

export default {
    title: 'UI Primitives/Quantity',
    component: Quantity,
} as ComponentMeta<typeof Quantity>;

const Template: ComponentStory<typeof Quantity> = (args) => {
    const [_args, updateArgs] = useArgs();
    const [quantity, setQuantity] = useState<number>(_args.value);
    // const state = useAddonState('addon-controls');
    // console.log(state);

    useEffect(() => {
        setQuantity(_args.value);
    }, [_args]);

    const props = {
        value: quantity,
        increase: () => {
            updateArgs({ value: quantity + 1 });
        },
        decrease: () => {
            updateArgs({ value: quantity - 1 });
        },
    };

    return <Quantity {...props} max={args.max} />;
};

export const Standard = Template.bind({});
Standard.args = { value: 3, max: 10 };

[charkour]

From Discord, kylegach suggests

Well, I had issue #11657 at hand because I want to implement something like it myself, but haven't done so yet.

But, have you tried flipping how you're using updateArgs and setQuantity? To me, updating the args is the more "side effect-y" action that should probably be done in the useEffect, and the state setting should be the direct action in your handlers.

Alternatively, you may not need quantity and setQuantity at all. I suspect you could probably use arg.value directly (like the example in that referenced issue).