@modernpoacher/gremlins 0.0.1

package/src/gremlins/checkbox/field/index.jsx

@@ -0,0 +1,62 @@
+/**
+ * CheckboxField component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { CheckField } from '@modernpoacher/gremlins/components/field'
+
+export default class CheckboxField extends CheckField {
+  getClassName () {
+    return classnames(super.getClassName(), 'checkbox')
+  }
+
+  render () {
+    const {
+      id,
+      name,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      fieldRef
+    } = this.props
+
+    const className = this.getClassName()
+
+    return (
+      <>
+        <input
+          id={id}
+          name={name}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          required={required}
+          disabled={disabled}
+          readOnly={readOnly}
+          tabIndex={tabIndex}
+          accessKey={accessKey}
+          onClick={this.handleClick}
+          onChange={this.handleChange}
+          className={className}
+          type='checkbox'
+          ref={fieldRef}
+        />
+        <label htmlFor={id}>
+          {String.fromCodePoint(8203)}
+        </label>
+      </>
+    )
+  }
+}
+
+CheckboxField.propTypes = {
+  ...CheckField.propTypes
+}
+
+CheckboxField.defaultProps = {
+  ...CheckField.defaultProps
+}

package/src/gremlins/checkbox/index.cjs

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

package/src/gremlins/checkbox/index.jsx

@@ -0,0 +1,84 @@
+/**
+ * CheckboxGremlin component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { CheckGremlin } from '@modernpoacher/gremlins/gremlins'
+
+import Field from './field/index.jsx'
+
+export default class CheckboxGremlin extends CheckGremlin {
+  getClassName () {
+    return classnames(super.getClassName(), 'checkbox')
+  }
+
+  handleClick = (value) => {
+    const {
+      onClick
+    } = this.props
+
+    onClick(value)
+  }
+
+  handleChange = (value) => {
+    const {
+      onChange
+    } = this.props
+
+    onChange(value)
+  }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      checked,
+      defaultChecked,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    return (
+      <Field
+        id={id}
+        name={name}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onClick={this.handleClick}
+        onChange={this.handleChange}
+        fieldRef={fieldRef}
+      />
+    )
+  }
+
+  render () {
+    const className = this.getClassName()
+
+    return (
+      <div className={className}>
+        {this.renderField()}
+      </div>
+    )
+  }
+}
+
+CheckboxGremlin.propTypes = {
+  ...CheckGremlin.propTypes
+}
+
+CheckboxGremlin.defaultProps = {
+  ...CheckGremlin.defaultProps
+}

package/src/gremlins/email/field/index.cjs

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

package/src/gremlins/email/field/index.jsx

@@ -0,0 +1,58 @@
+/**
+ * EmailField component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { ValueField } from '@modernpoacher/gremlins/components/field'
+
+export default class EmailField extends ValueField {
+  getClassName () {
+    return classnames(super.getClassName(), 'email')
+  }
+
+  render () {
+    const {
+      id,
+      name,
+      value,
+      defaultValue,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    const className = this.getClassName()
+
+    return (
+      <input
+        id={id}
+        name={name}
+        value={value}
+        defaultValue={defaultValue}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={this.handleChange}
+        className={className}
+        type='email'
+        ref={fieldRef}
+      />
+    )
+  }
+}
+
+EmailField.propTypes = {
+  ...ValueField.propTypes
+}
+
+EmailField.defaultProps = {
+  ...ValueField.defaultProps
+}

package/src/gremlins/email/index.cjs

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

package/src/gremlins/email/index.jsx

@@ -0,0 +1,65 @@
+/**
+ * EmailGremlin component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { ValueGremlin } from '@modernpoacher/gremlins/gremlins'
+
+import Field from './field/index.jsx'
+
+export default class EmailGremlin extends ValueGremlin {
+  getClassName () {
+    return classnames(super.getClassName(), 'email')
+  }
+
+  handleChange = (value) => {
+    const {
+      onChange
+    } = this.props
+
+    onChange(value)
+  }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      value,
+      defaultValue,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    return (
+      <Field
+        id={id}
+        name={name}
+        value={value}
+        defaultValue={defaultValue}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={this.handleChange}
+        fieldRef={fieldRef}
+      />
+    )
+  }
+}
+
+EmailGremlin.propTypes = {
+  ...ValueGremlin.propTypes
+}
+
+EmailGremlin.defaultProps = {
+  ...ValueGremlin.defaultProps
+}

package/src/gremlins/fieldset/group/index.cjs

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

package/src/gremlins/fieldset/group/index.jsx

@@ -0,0 +1,20 @@
+/**
+ * FieldsetGroup component
+ */
+
+import classnames from 'classnames'
+import Group from '@modernpoacher/gremlins/components/group'
+
+export default class FieldsetGroup extends Group {
+  getClassName () {
+    return classnames(super.getClassName(), 'fieldset')
+  }
+}
+
+FieldsetGroup.propTypes = {
+  ...Group.propTypes
+}
+
+FieldsetGroup.defaultProps = {
+  ...Group.defaultProps
+}

package/src/gremlins/fieldset/index.cjs

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

package/src/gremlins/fieldset/index.jsx

@@ -0,0 +1,40 @@
+/**
+ * FieldsetGremlin component
+ *
+ * @typedef {import('@modernpoacher/gremlins/gremlins').GroupGremlinProps} GroupGremlinProps
+ */
+
+import React from 'react'
+
+import classnames from 'classnames'
+
+import { GroupGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+import Group from './group/index.jsx'
+
+export default class FieldsetGremlin extends Gremlin {
+  getClassName () {
+    return classnames(super.getClassName(), 'fieldset')
+  }
+
+  renderGroup () {
+    const {
+      onChange,
+      children
+    } = this.props
+
+    return (
+      <Group
+        onChange={onChange}>
+        {children}
+      </Group>
+    )
+  }
+}
+
+FieldsetGremlin.propTypes = {
+  ...Gremlin.propTypes
+}
+
+FieldsetGremlin.defaultProps = {
+  ...Gremlin.defaultProps
+}

package/src/gremlins/index.cjs

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

package/src/gremlins/index.jsx

@@ -0,0 +1,226 @@
+/**
+ * GroupGremlin component
+ *
+ * @typedef {import('@modernpoacher/gremlins/gremlins').GroupGremlinProps} GroupGremlinProps
+ */
+/**
+ * FieldGremlin component
+ *
+ * @typedef {import('@modernpoacher/gremlins/gremlins').FieldGremlinProps} FieldGremlinProps
+ */
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import Field from '@modernpoacher/gremlins/components/field'
+import Group from '@modernpoacher/gremlins/components/group'
+
+function onChange () {
+  /* */
+}
+
+function onClick () {
+  /* */
+}
+
+export class FieldGremlin extends Component {
+  getClassName () {
+    const {
+      required,
+      disabled,
+      readOnly
+    } = this.props
+
+    return classnames('gremlin', { required, disabled, readOnly })
+  }
+
+  getId () {
+    const {
+      id,
+      name
+    } = this.props
+
+    return id || name
+  }
+
+  /**
+   * @param {FieldGremlinProps} props
+   * @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.name !== this.props.name) ||
+      (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)
+    )
+  }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      placeholder,
+      onChange,
+      fieldRef
+    } = this.props
+
+    return (
+      <Field
+        id={id}
+        name={name}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={onChange}
+        fieldRef={fieldRef}
+      />
+    )
+  }
+
+  render () {
+    const className = this.getClassName()
+
+    return (
+      <div className={className}>
+        {this.renderField()}
+      </div>
+    )
+  }
+}
+
+FieldGremlin.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  fieldRef: PropTypes.shape({
+    current: PropTypes.shape().isRequired
+  })
+}
+
+FieldGremlin.defaultProps = {
+  required: false,
+  disabled: false,
+  readOnly: false,
+  onChange
+}
+
+export class ValueGremlin extends FieldGremlin {
+  shouldComponentUpdate (props) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.value !== this.props.value)
+    )
+  }
+}
+
+ValueGremlin.propTypes = {
+  ...FieldGremlin.propTypes,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string
+}
+
+ValueGremlin.defaultProps = {
+  ...FieldGremlin.defaultProps
+}
+
+export class CheckGremlin extends FieldGremlin {
+  shouldComponentUpdate (props) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.checked !== this.props.checked) ||
+      (props.onClick !== this.props.onClick)
+    )
+  }
+}
+
+CheckGremlin.propTypes = {
+  ...FieldGremlin.propTypes,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  onClick: PropTypes.func
+}
+
+CheckGremlin.defaultProps = {
+  ...FieldGremlin.defaultProps,
+  onClick
+}
+
+export class GroupGremlin extends Component {
+  getClassName () {
+    return 'gremlin'
+  }
+
+  /**
+   * @param {GroupGremlinProps} props
+   * @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.children !== this.props.children) ||
+      (props.onChange !== this.props.onChange)
+    )
+  }
+
+  renderGroup () {
+    const {
+      onChange,
+      groupRef,
+      children
+    } = this.props
+
+    return (
+      <Group
+        onChange={onChange}
+        groupRef={groupRef}>
+        {children}
+      </Group>
+    )
+  }
+
+  render () {
+    const className = this.getClassName()
+
+    return (
+      <div className={className}>
+        {this.renderGroup()}
+      </div>
+    )
+  }
+}
+
+GroupGremlin.propTypes = {
+  onChange: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ]),
+  groupRef: PropTypes.shape({
+    current: PropTypes.shape().isRequired
+  })
+}
+
+GroupGremlin.defaultProps = {
+  onChange
+}

package/src/gremlins/number/field/index.cjs

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