update argTypes using "useArgTypes" from within a story

[y-nk]

Is your feature request related to a problem? Please describe.
I can't find a way to use the value of one control as an other control options

Describe the solution you'd like
A hook similar to updateArgs but broader, like updateStoryContext or updateArgTypes

Describe alternatives you've considered
Finding a way to use the store from within the story, modify the argTypes from there and force re-render.

Are you able to assist bring the feature to reality?
With vague directions, I could probably achieve a PR myself (especially directions on testing)

Additional context
The Story I'm trying to bring to the world is this one:

export const Tabs = () => {  
  const [{ items, active, onChange }, updateArgs] = useArgs();

  const setActive = val => {
    onChange(val);
    updateArgs({ active: val });
  }

  return <Tabs items={items} activeTab={active} onChange={setActive} />;
};

Tabs.args = {
  items: { tab1: 'tab 1', tab2: 'tab 2', tab3: 'tab 3' },
  active: 'tab1',
};

Tabs.argTypes = {
  items: {
    control: {
      type: 'object',
    },
  },
  active: {
    control: {
      type: 'select',
      options: Object.keys(Tabs.args.items),
    },
  },
  onChange: { action: 'onChange' },
};

The problem here is that Tabs.args.items has a double binding through useArgs, which is pretty cool... but the values of the <select> for Tabs.argTypes.active.options won't update itself accordingly.

It's probably easy to think of other scenarios where a 1st control has a consequence on the set values of a 2nd control.

[shilman]

Currently argTypes are immutable and we don't have any plans to change that.

Addon-knobs supports this kind of dynamism, and it's probably the one area that we won't try to replicate in controls.

@tmeasday care to weigh in here?

[tmeasday]

Yeah, I agree that allowing argTypes to change is probably not a direction we are likely to go in as it complicates things a lot.

I guess this sort of "allowed combinations" of controls use-case is pretty common. It sort of starts feeling a bit like just what you want is a list of stories rather than doing everything in controls but I don't think I fully understand the use-case.

I wonder if there's other ways to solve the problem here that don't involve making the arg type system a step more complex. 🤔

[y-nk]

@tmeasday I understand your point of view. In the current use of storybook, we do provide everything in one story with bunch of controls indeed, for the only purpose of human QA. They do enjoy passing down long strings along with different combinations of configuration for a given component. If it's out of scope for storybook i would understand.

[tmeasday]

@y-nk the direction @shilman and I have been discussing is a bit of a trick but we wonder if it might get you pretty far. Basically it involves two ideas:

1. Having "synthetic" args that you use to maps args to props
2. Allowing certain args to be hidden on the args table in a dynamic way.

I'm not sure I 100% understand what you are trying to do but a simple example would look like this:

export default {
  args: {
    // this is a "synthetic" arg that isn't actually a prop of the underlying component
    advanced: false,
    choice: 'first',
  },
  argTypes: {
    choice: {
      type: 'select',
      options: ['first', 'second'],
      table: { display: ({ args }) => !args.advanced }
    },
    advancedChoice: {
      type: 'select',
      options: [ /* many choices */ ],
      table: { display: ({ args }) => !!args.advanced }
    },
  }
}

// Now we use `args.advanced` to choose which choices to read from
const Template = ({ advanced, choice, advancedChoice }) => (
  <Component {...args} choice={advanced ? advancedChoice : choice} />
);

Does that make sense? Would it work for your use case?

[y-nk]

@tmeasday thank you for the feedback and discussing on how to solve this issue.

I probably want too much out of the controls addons tbh. The usecase i describe is about generating a list of tabs (for a tab component) from an key/value pair for which i have one control (of type array) ; then i want to reuse this array to feed a control select for the active tab.

that would require to update the "options" field of the select control to be the value of the array control. i'm not sure it's in the scope of controls-addon, but i think for select options (only) it'd be nice to have this ability (although it may be difficult to draft)

[tmeasday]

Hmmm, I'm not quite sure what an array control is? Is that different from a select control? Is it like an object control but where the object is an array? (forgive my ignorance).

[shilman]

@tmeasday the array control is like the object control except that its data type is an array. so if the user types a,b,c the options would be ['a', 'b', 'c']

[tmeasday]

Ok, gotcha. So you are hoping to set the allowed values of an arg based on the value of another arg @y-nk?

I think it probably is out of scope, yeah. The design of args is more static than that, there are lots of use cases we are thinking about where you'd want to know ahead of time these kind of details about the args.

I wonder if what you are looking for looks more like a story "snippet" editor, like playroom that lets you play with components with more control than simply changing args.

[y-nk]

@tmeasday yes, that's what i thought i could do. I also understand it's out of scope for this plugin, but maybe you are right and we could think of another plugin which can do that.

The use we have is very basic, i think. I'm heavy lover of storybook and the whole "safe iframe environment for developing components", so i'm pushing towards using it for developers to show how a component changes towards prop updates. Now those same devs are telling me "but when i generate a new tab, the double binding of the active list is broken" which is why I started this ticket.

If a snipper editor thing would happen, i'd actually love it... to an extend. I think a json-ish editor to edit props passed to the story would be incredible for developers, but this won't beat the convenience of those already there in the controls component. If you need me to work on that snippet thing, let me know. I don't have a lot of spare time but I'd be happy to help the project.

[tmeasday]

I think there are a few people interested in the code snippet thing, @shilman would know more. Definitely good to understand people's use cases more in any event so we can try to work out an achievable goal that solves people's problems.

Args is still a pretty young addon so evolution isn't out of the question. But lots of problems to solve with the static version before we think about any such evolution I guess ;)

[shilman]

@y-nk we have a replacement for the JSON editor that's going out in 6.2 and should be better: #12824

As for the in-browser editor, one of our users (a big company) has built a really nice one that's Args-compatible (you edit args and the source updates). It's still in alpha, but I'm hoping they will open source it next year, or at least guide us on how to build it out into Storybook. I'll keep everybody posted on the progress as it gets further along, and would love help integrating/polishing it when the time comes.

[y-nk]

@shilman thanks for the update and those precious informations. shall we close this ticket ?

[blowsie]

Currently argTypes are immutable and we don't have any plans to change that.

@shilman , is this still true today (four years on), I only ask because I too want to switch options when theme switching like this.
#17423

Any other suggestions on how we might do this?