@integec/common-react-screens/stories/role-selection.stories.js

import React from 'react'
import { storiesOf } from '@storybook/react'
import { action, decorateAction } from '@storybook/addon-actions'
//import ReactJson from 'react-json-view'
import roles from './app-roles.json'
import { RoleSelection } from '../src'
import R from 'ramda'

const toggleSelection = role => selected =>
  selected.includes(role)
    ? R.filter(r => r !== role, selected)
    : [...selected, role]

class RoleSelectionDemo extends React.Component {
  state = { selection: [] }

  toggleRoleSelection = role =>
    this.setState(({ selection }) => ({
      selection: toggleSelection(role)(selection),
    }))

  render() {
    const { selection } = this.state
    return (
      <RoleSelection
        roles={roles}
        selection={selection}
        toggleSelection={this.toggleRoleSelection}
      />
    )
  }
}

storiesOf('Access Role Selection', module).add(
  'Controlled Role Selection',
  () => <RoleSelectionDemo />
)