How to use @storybook/addon-viewport - 5 common examples

addDecorator(withInfo());

setOptions({
  name: "👟 rbx - Bulma UI",
  showAddonPanel: true,
  url: "https://github.com/dfee/rbx",
});

addDecorator(withKnobs);

configureViewport({
  defaultViewport: "responsive",
  viewports: {
    // tslint:disable:object-literal-sort-keys
    responsive: INITIAL_VIEWPORTS.responsive,
    mobileSmall: {
      name: "Mobile @ 480px",
      styles: {
        width: "480px",
      },
    },
    mobileMax: {
      name: "Mobile @ 768px (max)",
      styles: {
        width: "768px",
      },
    },
    tabletMin: {
      name: "Tablet @ 769px (min)",
      styles: {
        width: "769px",

handleSubmit={action("editComment")}
			submitTitle={"Сохранить"}
			handleCancel={action("cancelComment")}
			commentId={1}
			author={nameOnlyUser}
			sending={false}
		/>
		<h3>Форма в состоянии отправки</h3>
		
		<h3>Успешная отправка комментария очищает поле ввода</h3>
		
		<h3>Ошибка при отправке комментария НЕ очищает поле ввода</h3>
		
	
), {viewport: "desktop"})
.addDecorator(withViewport())
.add("tablet", () =&gt; (
	
), {viewport: "tablet"})
.addDecorator(withViewport())
.add("mobile", () =&gt; (
	
), {viewport: "mobile"});

import Multiple from '../examples/multiple';
import Optgroup from '../examples/optgroup';
import OptionFilterProp from '../examples/optionFilterProp';
import OptionLabelProp from '../examples/optionLabelProp';
import SingleAnimation from '../examples/single-animation';
import Single from '../examples/single';
import Suggest from '../examples/suggest';
import Tags from '../examples/tags';
import UpdateOption from '../examples/update-option';
import READMECode from '../README.md';

storiesOf('rc-select', module)
  .addDecorator(checkA11y)
  .addDecorator(withInfo)
  .addDecorator((storyFn, context) => withConsole()(storyFn)(context))
  .addDecorator(withViewport())
  .add(
    'README',
    () => (
      <div style="{{">
        
      </div>
    ),
    {
      source: {
        code: READMECode,
      },