How to use the @rmwc/base/utils/story-with-state.storyWithState function in @rmwc/base

import * as React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
import { Radio } from './';
import { storyWithState } from '@rmwc/base/utils/story-with-state';

const RadioStory = storyWithState(
  state => ({
    checked: boolean('checked', state.checked || false),
    disabled: boolean('disabled', state.disabled || false),
    value: text('value', state.value || 'myValue'),
    label: text('label', state.label || 'Hello World')
  }),
  function() {
    return (
       {
          this.setState({ checked: evt.target.checked });
          action(`onChange: ${evt.target.value} ${evt.target.checked}`)();
        }}

import * as React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
import { Checkbox } from './';

import { storyWithState } from '@rmwc/base/utils/story-with-state';

const CheckboxStory = storyWithState(
  state => ({
    checked: boolean('checked', state.checked || false),
    indeterminate: boolean('indeterminate', state.indeterminate || false),
    disabled: boolean('disabled', state.disabled || false),
    value: text('value', state.value || 'myValue'),
    label: text('label', state.label || 'Hello World')
  }),
  function() {
    return (
       {
          this.setState({ checked: evt.target.checked });

import * as React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean, number, text } from '@storybook/addon-knobs';
import { Snackbar } from './';
import { storyWithState } from '@rmwc/base/utils/story-with-state';

const SnackbarStory = storyWithState(
  state => ({
    show: boolean('show', state.show !== undefined ? state.show : true),
    alignStart: boolean('alignStart', state.alignStart || false),
    message: text('message', state.message || 'This is a new message'),
    actionText: text('actionText', state.actionText || 'Action'),
    timeout: number('timeout', state.timeout || 2750),
    multiline: boolean('multiline', state.multiline || false),
    actionOnBottom: boolean('actionOnBottom', state.actionOnBottom || false),
    dismissesOnAction: boolean(
      'dismissesOnAction',
      state.dismissesOnAction !== undefined ? state.dismissesOnAction : true
    )
  }),
  function() {
    return (

import * as React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean, number } from '@storybook/addon-knobs';
import { Slider } from './';

import { storyWithState } from '@rmwc/base/utils/story-with-state';

const SliderStory = storyWithState(
  state => ({
    value: number('value', state.value || 0),
    min: number('min', state.min || 0),
    max: number('max', state.max || 100),
    step: number('step', state.step || 0),
    discrete: boolean('discrete', state.discrete || false),
    displayMarkers: boolean('displayMarkers', state.displayMarkers || false),
    disabled: boolean('disabled', state.disabled || false)
  }),
  function() {
    return (

import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
import {
  Dialog,
  SimpleDialog,
  DialogSurface,
  DialogHeader,
  DialogHeaderTitle,
  DialogBody,
  DialogFooter,
  DialogFooterButton,
  DialogBackdrop
} from './';
import { storyWithState } from '@rmwc/base/utils/story-with-state';

const DialogStory = storyWithState(
  state => ({
    open: boolean('open', state.open !== undefined ? state.open : true)
  }),
  function() {
    return (
      <dialog open="{this.state.open}"> {
          this.setState({ open: false });
          action('onClose')();
        }}
      &gt;
        
          
            Dialog Title
          </dialog>

Dialog Title
          
          This is a custom dialog.
          
            Cancel
            Sweet!
          
        
        
      
    );
  }
);

const SimpleDialogStory = storyWithState(
  state => ({
    open: boolean('open', state.open !== undefined ? state.open : true),
    title: text('title', state.title || 'This is a simple dialog'),
    body: text(
      'body',
      state.body ||
        'You can pass the body prop, or anything you want as children.'
    ),
    scrollable: boolean('scrollable', state.scrollable || false),
    acceptLabel: text('acceptLabel', state.acceptLabel || 'Accept'),
    cancelLabel: text('cancelLabel', state.cancelLabel || 'Cancel')
  }),
  function() {
    return (

import * as React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
import { Switch } from './';
import { storyWithState } from '@rmwc/base/utils/story-with-state';

const SwitchStory = storyWithState(
  state => ({
    checked: boolean('checked', state.checked || false),
    disabled: boolean('disabled', state.disabled || false),
    value: text('value', state.value || 'myValue'),
    label: text('label', state.label || 'Hello World')
  }),
  function() {
    return (