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

'<strong>Holy guacamole!</strong> Check this info.'
          )
        }}
      /&gt;
    );
    const popover = (
      
        {content}
      
    );
    const placement = select(
      'Placement',
      ['top', 'bottom', 'left', 'right'],
      'right'
    );
    const trigger = select(
      'Trigger',
      ['hover', 'focus', 'hover focus', 'click'],
      'click'
    );
    const rootClose = boolean('Root Close', true);

    return (
      <div style="{{">
        
          <button>Holy guacamole!</button>
        </div>

() => {
      const element = select("Element", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.H2);
      const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.DISPLAY);
      const dataTest = text("dataTest", "test");
      const id = text("ID", "ID-OF-A-ELEMENT");
      const customTitle = text("Title", "Orbit design system");
      const dataA11ySection = text("dataA11ySection", "ID-OF-SECTION");
      const spaceAfter = select("spaceAfter", [null, ...Object.values(SPACINGS_AFTER)]);
      return (
        
          {customTitle}
        
      );
    },
    {

.add("directions", () => {
    const directions = {
      column: "column",
      row: "row",
      columnReverse: "column-reverse",
      rowReverse: "row-reverse"
    };
    const direction = select("directions", directions, "column");

    return (
      <div>
        <p>
          Use the Knobs panel to change the direction the flex items get layed
          out
        </p>
        
          
            
              1
            
            
              2
            
            </div>

.add('Example', () => {
    return `
      
        
          

storiesOf('UI5 Web Components | Input', module).add('Generated default story', () => (
  <input value="{'generatedString'}" type="{select('type'," readonly="{boolean('readonly'," placeholder="{'generatedString'}" disabled="{boolean('disabled',">
    null
  
));

.add('wide / horizontal /  3', () => {
    const size = select('size', Object.keys(CARD_SIZES), CARD_SIZES.WIDE);
    return (
      <div style="{{">
        </div>

.add('自定义', () => (
    <div>
      <input value="{text('value'," size="{select('size'," width="{number('width'," disabled="{boolean('disabled',"> null}
        placeholder={text('placeholder', '待输入...')}
      /&gt;
    </div>
  ))

color={text('CustomIconColor', '#ff5831')}
              size={number('CustomIconSize', 32)}
              component={}
            />
          }
          size={number('CustomIconSize', 32)}
          shape={select('shape', shapes, 'circle')}
          style={{
            background: '#fcc600',
          }}
        />
        
        
      
    
  );
});

onSelect={option => {
          alert(option)
        }}
        buttonStatus={
          ComponentStatus[
            select('buttonStatus', mapEnumKeys(ComponentStatus), 'Default')
          ]
        }
        buttonColor={
          ComponentColor[
            select('buttonColor', mapEnumKeys(ComponentColor), 'Primary')
          ]
        }
        buttonSize={
          ComponentSize[
            select('buttonSize', mapEnumKeys(ComponentSize), 'Small')
          ]
        }
        buttonIcon={
          IconFont[
            select(
              'buttonIcon',
              {None: 'none', ...mapEnumKeys(IconFont)},
              'BarChart'
            )
          ]
        }
        emptyText={text('emptyText', 'None selected')}
        selectedOptions={array(
          'selectedOptions',
          defaultMultiSelectSelectedOptions
        )}

withInfo('This is the ExpandCollapse component.')(() => (
    <div style="{{">
      
        <p>Well done! The component takes 100% width by default and aligns the link to the left or center.</p>
        <p>And other text comes here.</p>
      
    </div>
  ))
);