feat(ZNTA-2070) WIP add SettingsOptions and SettingOption stories to …

…editor

server/zanata-frontend/src/frontend/app/editor/components/SettingOption/SettingOption.story.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { storiesOf, action } from '@kadira/storybook'
+import SettingOption from '.'
+
+storiesOf('SettingOption', module)
+  .add('default', () => (
+    <SettingOption
+      setting={{
+
+      }} />
+  ))

server/zanata-frontend/src/frontend/app/editor/components/SettingOption/index.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Checkbox } from 'react-bootstrap'
+
+const setting =
+
+class SettingOption extends React.Component {
+  setting: PropTypes.shape({
+  id: PropTypes.any.isRequired, // I will update this to whatever I use when I wire it up
+  label: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired
+  }).isRequired
+  /* arguments: (any: settingId, bool: active) */
+  updateSetting: PropTypes.func.isRequired
+  }
+
+  onChange = (event) => {
+    this.props.onChange(this.props.setting, event.target.checked)
+  }
+
+  render () {
+    const { setting, checked } = this.props
+    return (
+        <Checkbox checked={checked}
+           onChange={this.onChange}>
+          {setting}
+        </Checkbox>
+    )
+  }
+}
+
+export default SettingOption

server/zanata-frontend/src/frontend/app/editor/components/SettingsOptions/SettingsOptions.story.js

@@ -1,73 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { storiesOf, action } from '@kadira/storybook'
-import RealSettingsOptions from '.'
+import SettingsOptions from '.'
 
-/* Wrapper class for storybook.
-
- * The checkbox states will be stored and updated in the live
- * app. This wrapper stores the states so that we can see
- * them working in storybook too.
- */
-class SettingsOptions extends React.Component {
-  static propTypes = {
-    states: PropTypes.object.isRequired,
-    updateSettingsOption: PropTypes.func.isRequired
-  }
-  constructor (props) {
-    super(props)
-    this.state = props.states
-  }
-  updateValidationOption = (setting, checked) => {
-    // record the check state in the wrapper
-    this.setState({ [setting]: checked })
-    // call the real one that was passed in
-    this.props.updateSettingsOption(setting, checked)
-  }
-  render () {
-    return (
-      <RealSettingsOptions
-        updateSettingsOption={this.updateSettingsOption}
-        states={this.state} />
-    )
-  }
-}
-
-const updateAction = action('updateSettingsOption')
 /*
  * See .storybook/README.md for info on the component storybook.
  */
 storiesOf('SettingOptions', module)
   .add('default', () => (
     <SettingsOptions
-      updateValidationOption={updateAction}
-      states={{
-        'Enter key saves immediately': false,
-        'Syntax highlighting': false,
-        'Suggestions diff': false,
-        'Panel layout': false,
-      }} />
-  ))
+      settings={{
 
-  .add('half checked', () => (
-      <SettingsOptions
-          updateValidationOption={updateAction}
-          states={{
-            'Enter key saves immediately': true,
-            'Syntax highlighting': false,
-            'Suggestions diff': true,
-            'Panel layout': false,
-          }} />
+      }} />
   ))
 
-  .add('all checked', () => (
-      <SettingsOptions
-          updateValidationOption={updateAction}
-          states={{
-            'Enter key saves immediately': true,
-            'Syntax highlighting': true,
-            'Suggestions diff': true,
-            'Panel layout': true,
-          }} />
-
-  ))

server/zanata-frontend/src/frontend/app/editor/components/SettingsOptions/index.js

@@ -1,10 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Checkbox } from 'react-bootstrap'
+import SettingOption from '../SettingOption'
 
 const settings =
-    ['Enter key saves immediately',
-      'Syntax highlighting']
 
 const SettingsOptions = ({states, updateSettingsOption}) => {
   const checkboxes = settings.map((setting, index) => (
@@ -26,36 +25,13 @@ const SettingsOptions = ({states, updateSettingsOption}) => {
 }
 
 SettingsOptions.propTypes = {
-  states: PropTypes.shape({
-    'Enter key saves immediately': PropTypes.bool.isRequired,
-    'Syntax highlighting': PropTypes.bool.isRequired,
-    'Suggestions diff': PropTypes.bool.isRequired,
-    'Panel layout': PropTypes.bool.isRequired,
-  }).isRequired,
-  updateSettingsOption: PropTypes.func.isRequired
-}
-
-class SettingOption extends React.Component {
-  static propTypes = {
-    setting: PropTypes.string.isRequired,
-    checked: PropTypes.bool.isRequired,
-    /* Will be called with (validation, newValue) */
-    onChange: PropTypes.func.isRequired
-  }
-
-  onChange = (event) => {
-    this.props.onChange(this.props.setting, event.target.checked)
-  }
-
-  render () {
-    const { setting, checked } = this.props
-    return (
-        <Checkbox checked={checked}
-           onChange={this.onChange}>
-          {setting}
-        </Checkbox>
-    )
-  }
+  settings: PropTypes.arrayOf(shape(
+      id: PropTypes.any.isRequired, // I will update this to whatever I use when I wire it up
+      label: PropTypes.string.isRequired,
+      active: PropTypes.bool.isRequired
+  )).isRequired
+  /* arguments: (any: settingId, bool: active) */
+  updateSetting: PropTypes.func.isRequired
 }
 
 export default SettingsOptions

server/zanata-frontend/src/frontend/app/editor/components/components.story.js

@@ -11,5 +11,6 @@ require('./ProgressBar/ProgressBar.story.js')
 require('./GlossarySearchInput/GlossarySearchInput.story.js')
 require('./GlossaryTerm/GlossaryTerm.story.js')
 require('./GlossaryTermModal/GlossaryTermModal.story.js')
+require('./SettingOption/SettingOption.story.js')
 require('./SettingsOptions/SettingsOptions.story.js')
 require('./ValidationOptions/ValidationOptions.story')