How to use the @storybook/addon-notes.withNotes function in @storybook/addon-notes

import { specs } from 'storybook-addon-specifications'
import { withNotes } from '@storybook/addon-notes'
import Profile, { Props } from './profile'
import profileNotMappedNoDefaults from './profileNotMappedNoDefaults.md'
import profileNotMappedNoDefaultsManualMap from './profileNotMappedNoDefaultsManualMap.md'
import profileNotMappedHasDefaults from './profileNotMappedHasDefaults.md'
import profileMapped from './profileMapped.md'
import profileFaultyMapping from './profileFaultyMapping.md'
import { profileTests } from './profile.test'
import * as constants from '../../constants'

const mockFn = jest.fn()
const mockPromise = jest.fn(() => Promise.reject('Storybook mock function'))

storiesOf('HoloVault/Profile', module)
  .add('Not mapped no defaults', withNotes(profileNotMappedNoDefaults)(() => {
    // specs(() => profileTests)
    let props: Props
    props = {
      personas: constants.personas,
      selectedPersona: constants.personas[0],
      profile: constants.exampleProfileNotMappedNoDefaultsManualMap,
      save: jest.fn(() => Promise.resolve('')),
      getProfiles: mockPromise,
      getPersonas: mockPromise,
      setCurrentPersona: mockFn
    }
    return 
  }))
  .add('Not mapped no defaults manual mapping', withNotes(profileNotMappedNoDefaultsManualMap)(() => {
    // specs(() => profileTests)
    let props: Props

'i18nNameFilterPlaceholder',
            'Filter by Name...'
          )}
          i18nResultsCount={text('i18nResultsCount', '0 Results')}
          /* TD-636: Commented out for TP 
          onImport={action(importText)} */
          children={[]}
          hasListData={false}
        />
      
    ))
  )

  .add(
    '3 virtualizations',
    withNotes(threeVirtualizationsTestNotes)(() => (

i18nEmptyStateTitle={text('i18nEmptyStateTitle', emptyStateTitle)}
          i18nName={text('i18nName', 'Name')}
          i18nNameFilterPlaceholder={text(
            'i18nNameFilterPlaceholder',
            'Filter by Name...'
          )}
          i18nResultsCount={text('i18nResultsCount', '0 Results')}
          children={[]}
        />
      
    ))
  )

  .add(
    'has Source Tables',
    withNotes(hasSourceTablesTestNotes)(() => (

editActionText +
  '" in the ACTION LOGGER' +
  '"\n' +
  '- Verify the kebab menu contains action "' +
  deleteText +
  '"\n' +
  '- Verify the delete action tooltip is "' +
  deleteTip +
  '"\n' +
  '- Verify selecting Delete in the kebab menu prints "' +
  deleteActionText +
  '" in the ACTION LOGGER';

stories.add(
  'sample view item',
  withNotes(sampleViewNotes)(() => (
    
  ))
);

{
    text: 'Dashboard',
    current: true,
  },
  { text: 'Projects', badge: '23' },
  { text: 'Issues', badge: '99+' },
  { text: 'Reports', badge: '6' },
  { text: 'User Center' },
];

storiesOf('Packages | Pagination', module)
  .addDecorator(withKnobs)
  .add(
    'Basic',
    withInfo(`info`)(
      withNotes('This is Pagination')(() => (
        
      )),
    ),
  );

import newStream from './newStream.md'
import { agentListTest } from './agentList.test'

storiesOf('HoloChat/Streams', module)
  .addDecorator(story => (
    {story()}
  ))
  .add('New Public Stream', withNotes(newChat)(() => {
    specs(() => newChatTests)
    return  Promise.resolve('Get Members'))} />
  }))
  .add('New Direct Message', withNotes(newChat)(() => {
    specs(() => newChatTests)
    return  Promise.resolve('Get Members'))} />
  }))
  .add('Filterable/Selectable list of members', withNotes(newStream)(() => {
    specs(() => agentListTest)
    return  Promise.resolve('Get Members'))} />
  }))

)
  .add(
    'Basic Stack with Title',
    withNotes('A basic 3d vertical stack animation and title prop')(() =>
      wrapWithSource(, 'basic-stack-with-title.js')
    )
  )
  .add(
    'Spread',
    withNotes(
      'A spread animation to showcase a bunch of photos that are stacked togther. Using layerStyles'
    )(() => wrapWithSource(, 'spread.js'))
  )
  .add(
    'Side Stack',
    withNotes(
      'Using the transform property of react-isometric-grid to display a bookshelf like grid that opens sideways. Using transform, perspective and animationOptions'
    )(() => wrapWithSource(, 'side-stack.js'))
  );

storiesOf('Advanced', module).add(
  'onGridLoaded Callback',
  withNotes(
    'Using the onGridLoaded callback to wait to display the grid until all images are loaded'
  )(() => wrapWithSource(, 'loaded-callback.js'))
);

.add(
    'Basic',
    withInfo()(
      withNotes('This is checkbox')(() => (
        
      )),
    ),
  )
  .add(
    'Custom Icon',
    withInfo()(
      withNotes('This is checkbox')(() => (
        
      )),
    ),
  )
  .add(
    'CheckboxGroup',
    withInfo()(
      withNotes('Checkgroup')(() => (

const viewName = 'Customers';
const viewDesc = 'Description for Customers';
const selectionChangedActionText = 'Selection changed for view ' + viewName;

const sampleSourceTableNotes =
  '- Verify view icon is showing on the left\n' +
  '- Verify view name is "' +
  viewName +
  '"\n' +
  '- Verify view description is "' +
  viewDesc +
  '"';

stories.add(
  'sample source table item',
  withNotes(sampleSourceTableNotes)(() => (
    
  ))
);

import { CustomizationsApiConnectorDetail } from '../../src';

export const apiConnectorDetailsStory = 'story-tbd';

const stories = storiesOf(
  'Customization/CustomizationsApiConnectorDetail',
  module
);

const storyNotes = '- Verify something here';

stories
  .addDecorator(story => {story()})
  .add(
    apiConnectorDetailsStory,
    withNotes(storyNotes)(() => (
      
    ))
  );