tin-react-components/templates.js

All components used for Omadi apps

const _ = require('lodash/fp')

const index = (name, author = 'GENERATED') => {
  return `import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import './style.css'
/**
 * Component to allow for basic click actions
 * @author: ${author}
 */
class ${name} extends Component {
  constructor (props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.style = style
  }
  handleClick (e) {
    const { onClick, log, allowLogging } = this.props
    if (onClick) {
      onClick(e)
    }
    if (allowLogging && log) {
      log('Button', 'handleClick', e, 'info')
    }
  }
  render () {
    const { label = 'Label for ${name} component', value = 'TEMPLATE COMPONENT', children } = this.props
    const classes = classnames('component-wrapper', '${_.snakeCase(name)}')
    return (
      <div className={classes} onClick={this.handleClick}>
        <label>{label}</label>: <span className='value'>{value}</span>
        {children}
      </div>
    )
  }
}

${name}.propTypes = {
  /**
   * Function whose only argument the event
   * as an object with the following argument structure:
   * @structure:
   * {
   *      target: 'ELEMENT
   * }
   */
  onClick: PropTypes.func.isRequired,
  /**
   * Any node or nodes
   */
  children: PropTypes.array,
  /**
   * Label text.
   */
  label: PropTypes.string,
  /**
   * Function that allows for advanced logging.
   * @arguments:
   * [
   *      {
   *          type: 'string',
   *          name: 'componentName',
   *          description: 'Name of component',
   *
   *      },
   *      {
   *          type: 'string',
   *          name: 'methodName',
   *          description: 'Name of method fired',
   *
   *      },
   *      {
   *          type: 'object',
   *          name: 'event',
   *          description: 'The data to be logged',
   *
   *      },
   *      {
   *          type: 'string',
   *          name: 'type',
   *          description: 'Type of log',
   *          options: ['error', 'warning', 'info', 'debug']
   *      }
   * ]
   */
  log: PropTypes.func,
  /**
   * Flag to indicate whether to log events or not
   */
  allowLogging: PropTypes.bool

}

export default ${name}

`
}

const test = (name, author) => {
  return `import React from 'react'
import { mount } from 'enzyme'
import { expect } from 'chai'
import sinon from 'sinon'
import ${name} from '../index'
/**
 * @author: ${author}
 */
describe('<${name} />', () => {
  const onClick = sinon.spy()
  const ${name.toLowerCase()}Labels = ['Label 1', 'Label 2', 'Label 3']
  const ${name.toLowerCase()}Values = ['Value 1', 'Value 2', 'Value 3']
  it('should show a label', () => {
    const wrapper = mount(<${name} onClick={onClick} />)
    expect(wrapper.find('label')).to.have.length(1)
  })
  ${name.toLowerCase()}Labels.forEach((label, i) => {
    it(\`should show an element with \${label} as the label, given the property 'label' === \${label}\`, () => {
      const wrapper = mount(<${name} onClick={onClick} label={label} />)
      expect(wrapper.find('label').text()).to.equal(label)
      expect(wrapper.props().label).to.equal(label)
      wrapper.find('div.component-wrapper').simulate('click')
      expect(onClick).to.have.property('callCount', i + 1)
    })
  })
  ${name.toLowerCase()}Values.forEach((value, i) => {
    it(\`should show an element with \${value} as the text, given the property 'value' === \${value}\`, () => {
      const wrapper = mount(<${name} onClick={onClick} value={value} />)
      expect(wrapper.find('.value').text()).to.equal(value)
    })
  })
})
`
}

const css = (name, author) => {
  return `.${_.snakeCase(name)} {
    
}`
}

module.exports = {
  index,
  test,
  css
}