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

import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, select, object } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

import PressFilters from './index';
import PressFiltersDocs from './PressFilters.md';
// import knob options for child patterns
import buttonOptions from '../../atoms/buttons/Button/Button.knobs.options';
import headingOptions from '../../atoms/headings/Headings.knobs.options';
import coloredHeadingOptions from '../../atoms/headings/ColoredHeading/ColoredHeading.knobs.options';
import selectBoxOptions from '../../atoms/forms/SelectBox/SelectBox.knobs.options';
import inputOptions from '../../atoms/forms/InputTextTypeAhead/InputTextTypeAhead.knobs.options';
import orgSelectorOptions from '../../molecules/OrgSelector/OrgSelector.knobs.options';

storiesOf('organisms/PressFilters', module)
  .addDecorator(withKnobs({ escapeHTML: false }))
  .add(
    'SelectBox Only', (() => {
      const defaultHeadingLevel = '2';
      const pressFiltersStartDate = {
        labelText: 'Select a start date', required: false, id: 'start-date', name: 'start-date', placeholder: 'm/dd/yyyy', restrict: 'max'
      };
      const pressFiltersEndDate = {
        labelText: 'Select an end date', required: false, id: 'end-date', name: 'end-date', placeholder: 'today', restrict: 'max'
      };
      const hideTopic = select('PressFilters hideTopic', { hide: 'Hide', show: 'Show' }, 'show');
      const props = {
        action: text('PressFilters action', '#'),
        coloredHeading: {
          text: text('PressFilters coloredHeading: text', 'Filter Results', 'ColoredHeading'),
          color: select('PressFilters coloredHeading: color', coloredHeadingOptions.color, 'blue', 'ColoredHeading'),
          level: select('PressFilters coloredHeading: level', headingOptions.levels, defaultHeadingLevel, 'ColoredHeading')

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, object, boolean } from '@storybook/addon-knobs';

import stateSeal from 'SharedAssets/images/stateseal.png';
import Footer from './index';
import FooterDocs from './Footer.md';
import FooterLinksData from '../../molecules/FooterLinks/FooterLinks.json';
import SocialLinksData from '../../molecules/SocialLinks/SocialLinks.json';
import FooterLinksLiveData from '../../molecules/FooterLinks/FooterLinksLive.json';
import SocialLinksLiveData from '../../molecules/SocialLinks/SocialLinksLive.json';

storiesOf('organisms/Footer', module)
  .addDecorator(withKnobs({ escapeHTML: false }))
  .add(
    'Footer', () => {
      const props = {
        footerLinks: object('footerLinks', FooterLinksData),
        showNavHeading: boolean('showNavHeading', true),
        socialLinks: object('socialLinksData', SocialLinksData),
        footerLogo: object('footerLogo', {
          src: stateSeal,
          altText: 'Massachusetts State Seal'
        }),
        footerText: object('footerText', {
          copyright: '2018 Commonwealth of Massachusetts.',
          description: 'Mass.gov® is a registered service mark of the Commonwealth of Massachusetts.',
          privacyPolicy: {
            text: 'Mass.gov Privacy Policy',
            url: 'https://www.mass.gov/privacypolicy'

examples.forEach(example => {
      const {
        storyPath = 'Missing story path',
        storyName = 'Missing name',
        renderStory = () => 'Missing `renderStory`',
        options = {},
      } = example;

      storiesOf(storyPath, module)
        .addParameters({ options })
        .addDecorator(withKnobs({ escapeHTML: false }))
        .addWithJSX(storyName, renderStory);
    });
  }

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text, boolean, object } from '@storybook/addon-knobs';

import Pagination from './index';
import PaginationDocs from './Pagination.md';
import paginationOptions from './Pagination.knobs.options';

storiesOf('molecules', module)
  .addDecorator(withKnobs({ escapeHTML: false }))
  .add(
    'Pagination', (() => {
      const props = {
        next: {
          disabled: boolean('Pagination next: disabled', false, 'Next'),
          text: text('Pagination next: text', 'Next', 'Next'),
          hide: boolean('Pagination next: hide', false, 'Next'),
          onClick: action('Next Clicked.'),
          ariaLabel: text('Pagination next: ariaLabel', 'Go to Next Search Results Page', 'Next')
        },
        prev: {
          disabled: boolean('Pagination prev: disabled', false, 'Previous'),
          text: text('Pagination prev: text', 'Previous', 'Previous'),
          hide: boolean('Pagination prev: hide', false, 'Previous'),
          onClick: action('Previous Clicked.'),
          ariaLabel: text('Pagination prev: ariaLabel', 'Go to Previous Search Results Page', 'Previous')

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

import { ArrowNav, DecorativeLink } from '../../../index';
import PageFlipper from './index';
import PageFlipperDocs from './PageFlipper.md';

storiesOf('organisms', module)
  .addDecorator(withKnobs({ escapeHTML: false }))
  .add(
    'PageFlipper', (() => {
      const decorativeLinkProps = {
        href: text('PageFlipper intro, introDecorativeLink: href', '#', 'DecorativeLink'),
        info: text('PageFlipper intro, introDecorativeLink: info', 'info', 'DecorativeLink'),
        text: text('PageFlipper intro, introDecorativeLink: text', 'Some Section', 'DecorativeLink'),
        showFileIcon: boolean('PageFlipper intro, introDecorativeLink: showFileIcon', false, 'DecorativeLink')
      };
      const nextProps = {
        href: text('PageFlipper nextLink: href', '', 'Next'),
        info: text('PageFlipper nextLink: info', 'This is the next page', 'Next'),
        text: text('PageFlipper nextLink: text', 'Next Site', 'Next'),
        title: text('PageFlipper nextLink: title', 'See the Next Site', 'Next'),
        onClick: action('Next Clicked'),
        direction: 'right',
        label: text('PageFlipper nextLink: label', 'Next Site', 'Next')

import React from 'react';

import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

import InputText from './index';
import InputTextDocs from './InputText.md';
import InputTextOptions from './InputText.knobs.options';

storiesOf('atoms/forms', module)
  .addDecorator(withKnobs({ escapeHTML: false }))
  .add(
    'InputText', (() => {
      const inputTextOptionsWithKnobs = Object.assign(...Object.entries(InputTextOptions).map(([k, v]) => (
        { [k]: v(InputText.defaultProps[k]) })));
      inputTextOptionsWithKnobs.onChange = action('Text input modified');

      return();
    }),
    { info: InputTextDocs }
  );

import PlusIcon from '../../icons/plus.svg';
import SendIcon from '../../icons/send.svg';
import { Composer, ComposerActions, ComposerAction } from '.';


const centeredWithWidth = (storyFn, ...args) => centered(() => (
	<div style="{{">
		{storyFn()}
	</div>
), ...args);

const defaultPlaceholder = 'Insert your text here';

storiesOf('Components|Composer', module)
	.addDecorator(centeredWithWidth)
	.addDecorator(withKnobs({ escapeHTML: false }))
	.add('default', () =&gt; (
		
	))
	.add('connecting', () =&gt; (
		
	))
	.add('with large placeholder', () =&gt; (

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
import ButtonAlert from './index';
import ButtonAlertDocs from './ButtonAlert.md';
import buttonWithIconOptions from '../ButtonWithIcon/ButtonWithIcon.knobs.options';

storiesOf('atoms/buttons', module)
  .addDecorator(withKnobs({ escapeHTML: false }))
  .add(
    'ButtonAlert', (() => {
      const props = {
        onClick: action('ButtonAlert clicked'),
        text: text('text', ' Updates'),
        showText: text('showText', 'Show'),
        hideText: text('hideText', 'Hide'),
        classes: text('classes', ''),
        isOpen: boolean('isOpen', false),
        theme: select('theme', buttonWithIconOptions.theme)
      };
      return(
        
      );

import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, select } from '@storybook/addon-knobs';
import notes from './chevron.md';

storiesOf('Chevron', module)
  .addParameters({ options: { showPanel: true } })
  .addDecorator(withKnobs())
  .add(
    `Chevron`,
    () => ({
      template: hbs`
        <h5 class="title is-5">Chevron</h5>
        
    `,
      context: {
        direction: select('Direction', ['right', 'down', 'left', 'up'], 'right'),
      },
    }),
    { notes }
  );

Cert: 'cert',
  GCP: 'gcp',
  Github: 'github',
  JWT: 'jwt',
  Kubernetes: 'kubernetes',
  LDAP: 'ldap',
  OKTA: 'okta',
  Radius: 'radius',
  Userpass: 'userpass',
};

const DEFAULT_VALUE = 'aws/client';

storiesOf('AuthConfigForm/Options', module)
  .addParameters({ options: { showPanel: true } })
  .addDecorator(withKnobs())
  .add(
    `Options`,
    () => ({
      template: hbs`
        <h5 class="title is-5">Options</h5>
        {{auth-config-form/options (compute (action 'getModel' model))}}
    `,
      context: {
        actions: {
          getModel(modelType) {
            return Ember.getOwner(this)
              .lookup('service:store')
              .createRecord(`auth-config/${modelType}`);
          },
        },
        model: select('model', MODELS, DEFAULT_VALUE),