Change ArgTypes depending on select args

Question

Is there a way to dynamically change the ArgTypes when args of a components changes in Storybook?

For instance, suppose a strory with a component that has 2 controls: id and value. id can either be 1 or 2. If id == '1' then argTypes.value.control.min = 0, else argTypes.value.control.min = -100.

Example code:

export default {
  argTypes: {
    id: { control: { type: 'select', options: ['1', '2']}},
    value: { control: {type: 'range', min:0, max: 100, step:10}},
  }
};

const Template = (args) => <MyComponent {...args} />;

export const Example = Template.bind({});
Template.args = {
  id: '1',
  value: 0,
};

Tester

Answer 1

You could do that using two different args and an if property.

...
argTypes: {
    id: { control: { type: 'select', options: ['1', '2']}},
    valueNatural: {
      control: {type: 'range', min:0, max: 100, step:10},
      if: {arg: 'id', eq: '1'}
    },
    valueInteger: {
      control: {type: 'range', min:-100, max: 100, step:10},
      if: {arg: 'id', eq: '2'}
    }
  }

Hickerson