How to use the storybook/constants/siteConstants.STORYBOOK_CATEGORY.FORMS_AND_CONTROLS function in storybook

import React from 'react';
import { storiesOf } from '@storybook/react';
import { decorateAction } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info/dist/index';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';

import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Toolbar, ToolbarResults, ToolbarRightContent, ToolbarFind, ToolbarViewSelector } from '../../index';

import { MockToolbarExample, mockToolbarExampleSource } from './__mocks__/mockToolbarExample';
import { name } from '../../../package.json';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Toolbar`, module);

stories.addDecorator(
  defaultTemplate({
    title: 'Toolbar',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}toolbar/`
  })
);

stories.add(
  'Toolbar',
  withInfo({
    source: false,
    propTables: [Toolbar, ToolbarResults, ToolbarRightContent, ToolbarFind, ToolbarViewSelector],
    propTablesExclude: [MockToolbarExample],
    text: (
      <div></div>

DualListBody,
  DualListControlled,
  DualListCounter,
  DualListFilter,
  DualListFooter,
  DualListHeading,
  DualListHiddenSelect,
  DualListItem,
  DualListItems,
  DualListMainCheckbox,
  DualListSelector,
  DualListSort
} from './index';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Dual List Selector`,
  module
);

const storyInfo = {
  source: false,
  propTables: [
    DualList,
    DualListArrows,
    DualListBody,
    DualListCounter,
    DualListFilter,
    DualListFooter,
    DualListHeading,
    DualListItem,
    DualListItems,
    DualListMainCheckbox,

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info/dist/index';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { MockFilterSidePanelExample, MockFilterSidePanelExampleSource } from './_mocks_/mockFilterSidePanelExample';

import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from './index';

import { name } from '../../../package.json';
import { number, withKnobs } from '@storybook/addon-knobs';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/FilterSidePanel`,
  module
);

stories.addDecorator(
  defaultTemplate({
    title: 'Filter Side Panel',
    description: 'Note: the width, border, and top padding styling are not part of the FilterSidePanel.'
  })
);

stories.addDecorator(withKnobs);
stories.add(
  'FilterSidePanel',
  withInfo({
    source: false,
    propTables: [FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem],

<li>
        <a href="http://ericgio.github.io/react-bootstrap-typeahead/">Examples</a>
      </li>
      <li>
        <a href="https://github.com/ericgio/react-bootstrap-typeahead/blob/master/docs/Props.md">Props documentation</a>
      </li>
      <li>
        <a href="https://github.com/ericgio/react-bootstrap-typeahead/blob/master/docs/API.md">API documentation</a>
      </li>
    
  
);

const TypeAheadSelectStories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/TypeAhead Select`,
  module
);

TypeAheadSelectStories.addDecorator(withKnobs);
TypeAheadSelectStories.addDecorator(
  defaultTemplate({
    description: storyDescription
  })
);

TypeAheadSelectStories.addWithInfo('Menu Alignment', () =&gt; {
  const align = select('Alignment', [undefined, 'justify', 'left', 'right']);

  return (
    <div>
      <br></div>

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { Slider } from './index';
import { Form, FormControl, ControlLabel, FormGroup, Col } from '../../index';
import { name } from '../../../package.json';

const SliderStories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Slider`,
  module
);

SliderStories.addDecorator(withKnobs);
SliderStories.addDecorator(
  defaultTemplate({
    title: 'Slider',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}slider`
  })
);

SliderStories.addWithInfo('Slider', () => (
  <div>
    <p>
      The component uses the Bootstrap-slider library, for more reading and available props please visit:
      <a href="https://github.com/seiyria/bootstrap-slider">&nbsp;https://github.com/seiyria/bootstrap-slider</a></p></div>

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { Sort, SortTypeSelector, SortDirectionSelector } from '../../index';
import { name } from '../../../package.json';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { MockSortExample, mockSortExampleSource } from './__mocks__/mockSortExample';

const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Sort`, module);

export const mockSortFields = [
  {
    id: 'name',
    title: 'Name',
    isNumeric: false
  },
  {
    id: 'address',
    title: 'Address',
    isNumeric: false
  },
  {
    id: 'birthMonth',
    title: 'Birth Month',
    isNumeric: true

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { inlineTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { select, withKnobs } from '@storybook/addon-knobs';

import { MockModelessManager, basicExampleSource } from './__mocks__/mockModelessManager';
import { name } from '../../../package.json';

import ModelessOverlay from './ModelessOverlay';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Modeless Overlay`,
  module
);

stories.addDecorator(withKnobs);

stories.add(
  'Modeless Overlay',
  withInfo({
    source: false,
    propTables: [ModelessOverlay],
    propTablesExclude: [MockModelessManager],
    text: (
      <div>
        <h1>Story Source</h1>
        <pre>{basicExampleSource}</pre>
      </div>

import { storiesOf } from '@storybook/react';
import { storybookPackageName, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';

import { name } from '../../../package.json';
import { modalExampleWithInfo, modalPatternExampleAddWithInfo } from './Stories';

/**
 * Modal Component stories
 */
const componentStories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Modal Overlay/Components`,
  module
);
modalExampleWithInfo(componentStories);

/**
 * Modal Pattern stories
 */
const patternStories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Modal Overlay/Patterns`,
  module
);
modalPatternExampleAddWithInfo(patternStories);

import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { Sort, SortTypeSelector, SortDirectionSelector } from '../../index';
import { name } from '../../../package.json';
import {
  storybookPackageName,
  DOCUMENTATION_URL,
  STORYBOOK_CATEGORY
} from 'storybook/constants/siteConstants';
import {
  MockSortExample,
  mockSortExampleSource
} from './__mocks__/mockSortExample';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Sort`,
  module
);

export const mockSortFields = [
  {
    id: 'name',
    title: 'Name',
    isNumeric: false
  },
  {
    id: 'address',
    title: 'Address',
    isNumeric: false
  },
  {
    id: 'birthMonth',

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import { defaultTemplate } from 'storybook/decorators/storyTemplates';
import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
import { FieldLevelHelp } from './index';
import { name } from '../../../package.json';

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Help On Forms`,
  module
);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'FieldLevelHelp',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION}inline-notifications/`
  })
);

stories.add(
  'FieldLevelHelp',
  withInfo()(() => {
    const rootClose = boolean('Root Close', true);
    const content = text(
      'content',