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

// will save as chart.png
        const fileName = 'chart.png';
        switch (snapshot.browser) {
          case 'IE11':
            return navigator.msSaveBlob(snapshot.blobOrDataUrl, fileName);
          default:
            const link = document.createElement('a');
            link.download = fileName;
            link.href = snapshot.blobOrDataUrl;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
      };
      const groupId = '';
      button(label, handler, groupId);
      return (

const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
    const otherStyles = object('Styles', {
      border: '3px solid #ff00ff',
      padding: '10px',
    });
    const nice = boolean('Nice', true);

    // NOTE: put this last because it currently breaks everything after it :D
    const birthday = date('Birthday', new Date('Jan 20 2017'));

    const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
    const style = { backgroundColor, ...otherStyles };
    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };

    button('Arbitrary action', action('You clicked it!'));

    return (
      <div style="{style}">
        <p>{intro}</p>
        <p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
        <p>My wallet contains: ${dollars.toFixed(2)}</p>
        <p>In my backpack, I have:</p>
        <ul>{items.map(item =&gt; <li>{item}</li>)}</ul>
        <p>{salutation}</p>
      </div>
    );
  })
  .addWithInfo(

function createButtons(grid) {
  button('enable', () => grid.enable());
  button('disable', () => grid.disable());
  button('enableRow(1)', () => grid.enableRow(1));
  button('disableRow(1)', () => grid.disableRow(1));
  button('enableRow(3, true)', () => grid.enableRow(3, true));
  button('disableRow(3, true)', () => grid.disableRow(3, true));
  button('enableRow(4, false)', () => grid.enableRow(4, false));
  button('disableRow(4, false)', () => grid.disableRow(4, false));
}

function createButtons(grid) {
  button('enable', () => grid.enable());
  button('disable', () => grid.disable());
  button('enableRow(1)', () => grid.enableRow(1));
  button('disableRow(1)', () => grid.disableRow(1));
  button('enableRow(3, true)', () => grid.enableRow(3, true));
  button('disableRow(3, true)', () => grid.disableRow(3, true));
  button('enableRow(4, false)', () => grid.enableRow(4, false));
  button('disableRow(4, false)', () => grid.disableRow(4, false));
}

() => {
      const options = createDefaultOptions();
      const { el, grid } = createGrid(options);

      button('setSummaryColumnContent -> price(static)', () =>
        grid.setSummaryColumnContent('price', 'this is static')
      );
      button('setSummaryColumnContent -> price(auto calculate)', () =>
        grid.setSummaryColumnContent('price', {
          template(valueMap: OptSummaryValueMap) {
            return `auto calculate: ${valueMap.sum}`;
          }
        })
      );
      button('setSummaryColumnContent -> price(no auto calculate)', () =>
        grid.setSummaryColumnContent('price', {
          template(valueMap: OptSummaryValueMap) {
            return `auto calculate: ${valueMap.sum}`;
          },
          useAutoSummary: false
        })
      );
      button('setSummaryColumnContent -> name(static)', () =>
        grid.setSummaryColumnContent('name', 'this is new static')

}
    .column-test-b {
      color: green;
    }
    .tui-grid-cell-test {
      color: blue;
      background-color: #ff6666;
    }
    .tui-grid-row-test {
      color: red;
      background-color: #666666;
    }
    `;
    rootEl.appendChild(styleElement);

    button("addCellClassName(2, 'name', 'tui-grid-cell-test')", () =>
      grid.addCellClassName(2, 'artist', 'tui-grid-cell-test')
    );
    button("removeCellClassName(2, 'name', 'tui-grid-cell-test')", () =>
      grid.removeCellClassName(2, 'artist', 'tui-grid-cell-test')
    );
    button("addRowClassName(1, 'tui-grid-row-test')", () =>
      grid.addRowClassName(3, 'tui-grid-row-test')
    );
    button("removeRowClassName(1, 'tui-grid-row-test')", () =>
      grid.removeRowClassName(3, 'tui-grid-row-test')
    );

    (window as Window & { grid: Grid }).grid = grid;

    return rootEl;
  },

}
    .tui-grid-cell-test {
      color: blue;
      background-color: #ff6666;
    }
    .tui-grid-row-test {
      color: red;
      background-color: #666666;
    }
    `;
    rootEl.appendChild(styleElement);

    button("addCellClassName(2, 'name', 'tui-grid-cell-test')", () =>
      grid.addCellClassName(2, 'artist', 'tui-grid-cell-test')
    );
    button("removeCellClassName(2, 'name', 'tui-grid-cell-test')", () =>
      grid.removeCellClassName(2, 'artist', 'tui-grid-cell-test')
    );
    button("addRowClassName(1, 'tui-grid-row-test')", () =>
      grid.addRowClassName(3, 'tui-grid-row-test')
    );
    button("removeRowClassName(1, 'tui-grid-row-test')", () =>
      grid.removeRowClassName(3, 'tui-grid-row-test')
    );

    (window as Window & { grid: Grid }).grid = grid;

    return rootEl;
  },
  { html: { preventForcedRender: true } }

minWidth: 150
      }
    });
    const rootEl = document.createElement('div');
    rootEl.appendChild(el);
    rootEl.style.height = '400px';

    button('getFocusedCell()', () => {
      alert(`
        ${grid.getFocusedCell().columnName}, 
        ${grid.getFocusedCell().rowKey},
        ${grid.getFocusedCell().value}
        `);
    });
    button('activateFocus()', () => grid.activateFocus());
    button('blur()', () => grid.blur());
    button(`focus(1, 'type')`, () => grid.focus(1, 'type'));
    button(`focus(2, 'release')`, () => grid.focus(2, 'release'));
    button(`focusAt(0, 0)`, () => grid.focusAt(0, 0));
    button(`focusAt(1, 1)`, () => grid.focusAt(1, 1));

    return rootEl;
  },
  { html: { preventForcedRender: true } }