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

components.add('Radio button', () => {
    return (
        
    );
});

components.add('Button', () => {
    const types: any[] = ['primary', 'secondary', 'warn', 'text'];
    const sizes: any[] = ['small', 'medium', 'large'];

    return (
        <button loading="{boolean('Loading'," disabled="{boolean('Disabled'," size="{select('Size'," type="{select('Type',">
            {text('Label', 'En knapp')}
        </button>
    );
});

.add('4 axes', () => {
    return (
      
        
         Number(d).toFixed(2)}
          hide={boolean('hide left axis', false)}
        />
        
         Number(d).toFixed(2)}
          hide={boolean('hide right axis', false)}
        />

stories.add('Playground', () => {
  const props = {
    children: text('children', 'Button'),
    disabled: boolean('disabled', false),
    disableOnLoading: boolean('disableOnLoading', true),
    isActive: boolean('isActive', false),
    isBlock: boolean('isBlock', false),
    isLoading: boolean('isLoading', false),
    kind: select(
      'kind',
      {
        primary: 'primary',
        primaryAlt: 'primaryAlt',
        secondary: 'secondary',
        secondaryAlt: 'secondaryAlt',
        default: 'default',
        link: 'link',
      },
      'secondary'
    ),
    size: select(

tickFormat={(d) => Number(d).toFixed(2)}
          showGridLines={boolean('show left axis grid lines', false)}
        />
        
         Number(d).toFixed(2)}
          showGridLines={boolean('show right axis grid lines', false)}
        />
        
      
    );
  })
  .add('axis', () => {

'postText',
			'Here Ionut testing wall post card component in a Storybook\nMonday morning with 18 deg.',
		);
		const location = text('location', 'Timisoara');
		const timestamp = date('timestamp', new Date('October 17, 2017 04:55:00'));
		const ownerName = text('owner.name', 'Michael Foucault');
		const ownerAvatarURL = text('owner.avatarURL', 'https://avatars2.githubusercontent.com/u/2531');
		const currentUserAvatarURL = text(
			'currentUserAvatarURL',
			'https://avatars2.githubusercontent.com/u/239',
		);
		const governanceVersion = boolean('governanceVersion', false);
		const numberOfComments = number('numberOfComments', 2);
		const numberOfSuperLikes = number('numberOfSuperLikes', 2);
		const numberOfWalletCoins = number('numberOfWalletCoins', 2);
		const likedByMe = boolean('likedByMe', false);
		const canDelete = boolean('canDelete', false);
		const listLoading = boolean('listLoading', false);
		const contentOffensive = boolean('listLoading', true);

		return (

export default () => {
  const includeText = boolean('Show text', false)

  return (
    
      
        
          
            <h1>Header</h1>
          
        
      
      
        
          
            
              
                <h2>Nav</h2>

.add('Header', () => {
		const title = text('title', '');
		const logo = boolean('logo', true);

		return <header title="{title}">;
	});
</header>

const levelOptions = [1, 2, 3, 4, 5, 6];
      const props = {
        compHeading: {
          title: text('LinkList compHeading: title', 'Link List', 'CompHeading'),
          titleContext: text('LinkList compHeading: titleContext', 'link list', 'CompHeading'),
          level: select('LinkList compHeading: level', levelOptions, levelOptions[2], 'CompHeading'),
          color: select('LinkList compHeading: color', { 'green (default)': '', yellow: 'yellow' }, '', 'CompHeading'),
          id: text('LinkList compHeading: titleContext', 'link list', 'CompHeading'),
          centered: boolean('LinkList compHeading: centered', false, 'CompHeading'),
          sidebar: boolean('LinkList compHeading: sidebar', false, 'CompHeading')
        },
        description: {
          text: text('LinkList description', '')
        },
        stacked: boolean('LinkList stacked', false),
        hideBullets: boolean('LinkList hideBullets', false),
        links: object('LinkList links', [{
          href: '#',
          text: 'Lorem ipsum dolor sit amet.',
          info: ''
        }, {
          href: '#',
          text: 'Lorem ipsum dolor sit amet.',
          info: ''
        }, {
          href: '#',
          text: 'Lorem ipsum dolor sit amet.',
          info: ''
        }, {
          href: '#',
          text: 'Lorem ipsum dolor sit amet.',
          info: ''

.add('Custom Source', () => (