How to use @storybook/addon-knobs - 10 common examples

<button> console.log(123)}
      &gt;
        console.log(123)
      </button>
      <button> console.log({
          some: { strong: [{ language: 123 }] },
        }, 123)}
      &gt;
        console.log(Object)
      </button>
      <button>
        {text('text', 'Button text')}
      </button>
    
  ), {
    // notes: 'A very simple component',

console.log(colorPickerRef.current)
      /* eslint-enable */
    }

    return (
      <div>
        <div width="" style="{{width:">
           {
              alert(`Swatch selected: ${color}`)
            }}
            maintainInputFocus={boolean('maintainInputFocus', false)}
            colors={object('colors', customColors)}
          /&gt;
        </div>
        <div>
          <button>Log Ref</button>
        </div>
      </div>
    )
  },
  {

.add('audio file', () => {
    const fixtureProps = {
      title: text('title', 'Ted Talk'),
      mediaUrl: text(
        'mediaUrl',
        'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'
      ),
      sttJsonType: text('sttJsonType', 'bbckaldi'),
      isEditable: boolean('isEditable', true),
      spellCheck: boolean('spellCheck', false),
      fileName: text('fileName', 'KateDarling_2018S-950k.mp4'),
      // commenting this version of `transcriptData` coz it seems that
      // loading a json this sisde effects storybook performance
      // transcriptData: object('transcriptData', bbcKaldiTranscript),
      transcriptData: bbcKaldiTranscript,
      handleAnalyticsEvents: action('Analytics event'),
      handleAutoSaveChanges: action('handleAutoSaveChange'),
      autoSaveContentType: select(
        'autoSaveContentType',
        [
          'draftjs',
          'digitalpaperedit',
          'txt',
          'txtspeakertimecodes',

['EUR', 'USD', 'EGP'],
                'EUR'
              )}
              onBlur={action('onBlur')}
              onFocus={action('onFocus')}
              hideCurrencyExpansionControls={boolean(
                'hideCurrencyExpansionControls',
                false
              )}
              defaultExpandCurrencies={
                // we need to set undefined instead of false to avoid prop-type
                // warnings in case hideCurrencyExpansionControls is true
                defaultExpandCurrencies || undefined
              }
              isDisabled={boolean('isDisabled', false)}
              isReadOnly={boolean('isReadOnly', false)}
              placeholder={object('placeholder', { EUR: '', USD: '' })}
              horizontalConstraint={select(
                'horizontalConstraint',
                ['m', 'l', 'xl', 'scale'],
                'm'
              )}
              hasError={boolean('hasError', false)}
              hasWarning={boolean('hasWarning', false)}
              errors={
                Object.values(errors).some(error => error.length > 0)
                  ? Object.entries(errors).reduce((acc, [currency, error]) => {
                      if (error.length === 0) return acc;
                      acc[currency] = {error};
                      return acc;
                    }, {})
                  : undefined

// General
    const name = text('Name', 'Storyteller', GROUP_IDS.GENERAL);
    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }, GROUP_IDS.GENERAL);
    const birthday = date('Birthday', defaultBirthday, GROUP_IDS.GENERAL);
    const dollars = number(
      'Account Balance',
      12.5,
      { min: 0, max: 100, step: 0.01 },
      GROUP_IDS.GENERAL
    );
    const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);

    // Favorites
    const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
    const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
    const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);

    // Display
    const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
    const otherStyles = object(
      'Styles',
      {
        border: '2px dashed silver',
        borderRadius: 10,
        padding: '10px',
      },
      GROUP_IDS.DISPLAY
    );

    const style = { backgroundColor, ...otherStyles };

    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';

const name = text('Name', 'Storyteller', GROUP_IDS.GENERAL);
    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }, GROUP_IDS.GENERAL);
    const birthday = date('Birthday', defaultBirthday, GROUP_IDS.GENERAL);
    const dollars = number(
      'Account Balance',
      12.5,
      { min: 0, max: 100, step: 0.01 },
      GROUP_IDS.GENERAL
    );
    const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);

    // Favorites
    const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
    const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
    const otherFruit = radios('Other Fruit', otherFruits, 'watermelon', GROUP_IDS.FAVORITES);
    const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);

    // Display
    const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
    const otherStyles = object(
      'Styles',
      {
        border: '2px dashed silver',
        borderRadius: 10,
        padding: '10px',
      },
      GROUP_IDS.DISPLAY
    );

    const style = { backgroundColor, ...otherStyles };

    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';

Banana: 'banana',
      Cherry: 'cherry',
    };
    const fruit = select('Fruit', fruits, 'apple');

    const otherFruits = {
      Kiwi: 'kiwi',
      Guava: 'guava',
      Watermelon: 'watermelon',
    };
    const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
    const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
    const years = number('Years in NY', 9);

    const backgroundColor = color('background', '#dedede');
    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
    const otherStyles = object('Styles', {
      border: '2px dashed silver',
      borderRadius: 10,
      padding: '10px',
    });
    const nice = boolean('Nice', true);
    const images = files('Happy Picture', 'image/*', [
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',
    ]);

    // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
    const defaultBirthday = new Date('Jan 20 2017 GMT+0');
    const birthday = date('Birthday', defaultBirthday);

    const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
    const style = { backgroundColor, ...otherStyles };

onBlur={action('onBlur')}
              onFocus={action('onFocus')}
              hideLanguageExpansionControls={boolean(
                'hideLanguageExpansionControls',
                false
              )}
              defaultExpandLanguages={
                // we need to set undefined instead of false to avoid prop-type
                // warnings in case hideLanguageExpansionControls is true
                defaultExpandLanguages || undefined
              }
              defaultExpandMultilineText={defaultExpandMultilineText}
              isAutofocussed={boolean('isAutofocussed', false)}
              isDisabled={boolean('isDisabled', false)}
              isReadOnly={boolean('isReadOnly', false)}
              placeholder={object('placeholder', { en: '', de: '' })}
              horizontalConstraint={select(
                'horizontalConstraint',
                ['m', 'l', 'xl', 'scale'],
                'm'
              )}
              hasError={boolean('hasError', false)}
              hasWarning={boolean('hasWarning', false)}
              errors={
                Object.values(errors).some(error => error.length > 0)
                  ? Object.entries(errors).reduce((acc, [language, error]) => {
                      if (error.length === 0) return acc;
                      acc[language] = {error};
                      return acc;
                    }, {})
                  : undefined
              }

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(