@modernpoacher/cogs 0.0.4

package/src/components/error-message/index.jsx

@@ -0,0 +1,41 @@
+/**
+ * ErrorMessage component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import TextContent from '@modernpoacher/cogs/components/common/text-content'
+
+export default class ErrorMessage extends Component {
+  getClassName () {
+    return 'error-message'
+  }
+
+  /**
+   *  Compare current and latest `props` for changes to `errorMessage`
+   *
+   *  @param {{errorMessage?: string}} props   Latest props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (props.errorMessage !== this.props.errorMessage)
+  }
+
+  render () {
+    const { errorMessage } = this.props
+
+    if (errorMessage) {
+      return (
+        <span className={this.getClassName()}>
+          <TextContent textContent={errorMessage} />
+        </span>
+      )
+    }
+
+    return null
+  }
+}
+
+ErrorMessage.propTypes = {
+  errorMessage: PropTypes.string
+}

package/src/components/field/index.cjs

@@ -0,0 +1,16 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/cogs/components/field')
+
+log('`cogs` is awake')
+
+/**
+ *  Exports default, etc
+ */
+module.exports = require('./index.jsx')

package/src/components/field/index.jsx

@@ -0,0 +1,146 @@
+/**
+ * Field component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+function onChange () {
+  /* */
+}
+
+function onClick () {
+  /* */
+}
+
+export default class Field extends Component {
+  getClassName () {
+    return 'input'
+  }
+
+  shouldComponentUpdate (props) {
+    return (
+      (props.id !== this.props.id) ||
+      (props.required !== this.props.required) ||
+      (props.disabled !== this.props.disabled) ||
+      (props.readOnly !== this.props.readOnly) ||
+      (props.tabIndex !== this.props.tabIndex) ||
+      (props.accessKey !== this.props.accessKey) ||
+      (props.placeholder !== this.props.placeholder) ||
+      (props.onChange !== this.props.onChange)
+    )
+  }
+
+  render () {
+    const {
+      id,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    return (
+      <input
+        id={id}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        className={this.getClassName()}
+        ref={fieldRef}
+      />
+    )
+  }
+}
+
+Field.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  accessKey: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  fieldRef: PropTypes.shape({
+    current: PropTypes.shape().isRequired
+  })
+}
+
+Field.defaultProps = {
+  required: false,
+  disabled: false,
+  readOnly: false,
+  onChange
+}
+
+/**
+ * ValueField component
+ */
+export class ValueField extends Field {
+  shouldComponentUpdate (props) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.value !== this.props.value)
+    )
+  }
+
+  handleChange = ({ target: { value } }) => {
+    const { onChange } = this.props
+
+    onChange(value)
+  }
+}
+
+ValueField.propTypes = {
+  ...Field.propTypes,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string
+}
+
+ValueField.defaultProps = {
+  ...Field.defaultProps
+}
+
+/**
+ * CheckField component
+ */
+export class CheckField extends Field {
+  shouldComponentUpdate (props) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.checked !== this.props.checked) ||
+      (props.onClick !== this.props.onClick)
+    )
+  }
+
+  handleClick = ({ target: { checked } }) => {
+    const { onClick } = this.props
+
+    onClick(checked)
+  }
+
+  handleChange = ({ target: { checked } }) => {
+    const { onChange } = this.props
+
+    onChange(checked)
+  }
+}
+
+CheckField.propTypes = {
+  ...Field.propTypes,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  onClick: PropTypes.func
+}
+
+CheckField.defaultProps = {
+  ...Field.defaultProps,
+  onClick
+}

package/src/components/title/index.cjs

@@ -0,0 +1,20 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/cogs/components/title')
+
+log('`cogs` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+/**
+ *  Exports only default
+ */
+module.exports = component

package/src/components/title/index.jsx

@@ -0,0 +1,110 @@
+/**
+ * Title component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import TextContent from '@modernpoacher/cogs/components/common/text-content'
+import Required from '@modernpoacher/cogs/components/common/required'
+import Disabled from '@modernpoacher/cogs/components/common/disabled'
+import ReadOnly from '@modernpoacher/cogs/components/common/readonly'
+
+export default class Title extends Component {
+  isRequired () {
+    const { required } = this.props
+
+    return required
+  }
+
+  isDisabled () {
+    const { disabled } = this.props
+
+    return disabled
+  }
+
+  isReadOnly () {
+    const { readOnly } = this.props
+
+    return readOnly
+  }
+
+  getClassName () {
+    return 'title'
+  }
+
+  shouldComponentUpdate (props) {
+    return (
+      (props.id !== this.props.id) ||
+      (props.title !== this.props.title) ||
+      (props.required !== this.props.required) ||
+      (props.disabled !== this.props.disabled) ||
+      (props.readOnly !== this.props.readOnly)
+    )
+  }
+
+  renderIsRequired () {
+    if (this.isRequired()) {
+      return (
+        <Required />
+      )
+    }
+
+    return null
+  }
+
+  renderIsDisabled () {
+    if (this.isDisabled()) {
+      return (
+        <Disabled />
+      )
+    }
+
+    return null
+  }
+
+  renderIsReadOnly () {
+    if (this.isReadOnly()) {
+      return (
+        <ReadOnly />
+      )
+    }
+
+    return null
+  }
+
+  render () {
+    const { title } = this.props
+
+    if (title) {
+      const { id } = this.props
+
+      return (
+        <label htmlFor={id} className={this.getClassName()}>
+          <TextContent textContent={title} />
+        </label>
+      )
+    }
+
+    return null
+  }
+}
+
+Title.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ])
+}
+
+Title.defaultProps = {
+  required: false,
+  disabled: false,
+  readOnly: false
+}

package/src/index.cjs

@@ -0,0 +1,29 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/cogs')
+
+log('`cogs` is awake')
+
+const CheckboxCog = require('./cogs/checkbox/index.cjs')
+const EmailCog = require('./cogs/email/index.cjs')
+const NumberCog = require('./cogs/number/index.cjs')
+const PasswordCog = require('./cogs/password/index.cjs')
+const RadioCog = require('./cogs/radio/index.cjs')
+const SelectCog = require('./cogs/select/index.cjs')
+const TextCog = require('./cogs/text/index.cjs')
+const TextareaCog = require('./cogs/textarea/index.cjs')
+
+module.exports.CheckboxCog = CheckboxCog
+module.exports.EmailCog = EmailCog
+module.exports.NumberCog = NumberCog
+module.exports.PasswordCog = PasswordCog
+module.exports.RadioCog = RadioCog
+module.exports.SelectCog = SelectCog
+module.exports.TextCog = TextCog
+module.exports.TextareaCog = TextareaCog