How to use the @storybook/addon-knobs.radios function in @storybook/addon-knobs

export const manifoldConnectionDecorator = storyFn => {
  const token = text('manifold_api_token', localStorage.getItem('manifold_api_token') || '');
  const options = { Production: 'prod', Staging: 'stage', Local: 'local' };
  const env = radios('env', options, localStorage.getItem('manifold_auth_env') || 'prod');
  const authType = radios(
    'authType',
    { Manual: 'manual', OAuth: 'oauth' },
    localStorage.getItem('manifold_auth_type') || 'manual'
  );
  localStorage.setItem('manifold_auth_env', env);
  localStorage.setItem('manifold_auth_type', authType);
  localStorage.setItem('manifold_api_token', token); // update localStorage to persist

  return `
  
    
    ${storyFn()}
  
`;
};

.add('Policy features', () => {
    const variants = select(
      'variant',
      STYLE_WHITELIST.concat('thisStyleIsNotInWhitelist', ''),
      '',
      'axa-policy-features'
    );
    const title = text(
      'title',
      'A 5 star car insurance with affordable premium services',
      'axa-policy-features'
    );

    // props of axa-policy-features-item
    const itemTitleRadio = radios(
      'Show title?',
      { yes: 'y', no: 'n' },
      'y',
      'axa-policy-features-item'
    );
    const itemTitle = text(
      'title (of item)',
      'Get Discount',
      'axa-policy-features-item'
    );
    const itemIconUrl = text(
      'icon - load svg icon from this url instead:',
      '',
      'axa-policy-features-item'
    );
    const itemDescription = text(

key="scatter-plot1"
        chartType={SCATTER_PLOT_PLUGIN_TYPE}
        width={400}
        height={400}
        datasource={dummyDatasource}
        queryData={{ data }}
        formData={{
          encoding: {
            x: {
              field: 'sum__SP_RUR_TOTL_ZS',
              type: 'quantitative',
              scale: {
                type: 'linear',
              },
              axis: {
                orient: radios('x.axis.orient', ['top', 'bottom'], 'bottom'),
              },
            },
            y: {
              field: 'sum__SP_DYN_LE00_IN',
              type: 'quantitative',
              scale: {
                type: 'linear',
              },
              axis: {
                orient: radios('y.axis.orient', ['left', 'right'], 'left'),
              },
            },
            fill: {
              field: 'region',
              type: 'nominal',
              legend: true,

.add('WindMillLoading', () => {
    let speed = 1;
    let color = '';
    speed = number('动画速度(s)')
    color = text('颜色')
    let size = radios(
      '动画尺寸',
      {
        'small': 'small',
        'default': 'default',
        'large': 'large'
      },
      'default'
    );
    return (
      
        
      
    );
  });

() => {
      const iconPosition = radios('Icon position', svgPositionOptions, 'left')

      return (
        
          
            
              
                <button disabled="{boolean('Disabled',">
                  {iconPosition === 'left' &amp;&amp; (
                    </button>

stories.add('Set Language', () => {
  const options = {
    ko: 'ko',
    en: 'en'
  };
  const lang = radios('Language', options, 'ko');
  const Story = () => {
    TuiGrid.setLanguage(lang);

    return ;
  };

  return ;
});

.add('WaveTopBottomLoading', () => {
    let speed = 1;
    let color = '';
    speed = number('动画速度(s)')
    color = text('颜色')
    let size = radios(
      '动画尺寸',
      {
        'small': 'small',
        'default': 'default',
        'large': 'large'
      },
      'default'
    );
    return (
      
        
      
    );
  });

orient: radios('x.axis.orient', { top: 'top', bottom: 'bottom' }, 'bottom'),
                title: radios(
                  'x.axis.title',
                  { enable: 'Time', disable: '', '': undefined },
                  'Time',
                ),
              },
            },
            y: {
              field: 'y',
              type: 'quantitative',
              scale: {
                type: 'linear',
              },
              axis: {
                orient: radios(
                  'y.axis.orient',
                  { left: 'left', right: 'right', '': undefined },
                  'left',
                ),
                title: radios(
                  'y.axis.title',
                  { enable: 'Score', disable: '', '': undefined },
                  'Score',
                ),
              },
            },
            stroke: {
              field: 'name',
              type: 'nominal',
              legend: true,
            },

() => {
      let speed = 1;
      let color = '';
      let size = radios(
        '动画尺寸',
        {
          'small': 'small',
          'default': 'default',
          'large': 'large'
        },
        'default'
      );
      speed = number('动画速度(s)');
      color = text('颜色');
      return (
        
          
        
      );
    }

storyButton.add('Button', () => {
  const buttonText = text('text', 'Click me');
  const variants = radios('variant', variantOptions, '');
  const sizes = radios('size', sizeOptions, '');
  const icons = select('icon', iconList, '');
  const motionOff = boolean('motionOff', false);
  const disabled = boolean('disabled', false);
  const types = radios('types', typesOptions, 'button');

  const wrapper = document.createElement('div');
  const template = html`
    <div style="${variants.includes('inverted')
      ? `background-color: ${invertedBgs[variants]}; padding: 10px;`
      : ''}">
      </div>