@modernpoacher/gremlins 0.0.1

package/src/gremlins/select/index.jsx

@@ -0,0 +1,81 @@
+/**
+ * SelectGremlin component
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import { ValueGremlin } from '@modernpoacher/gremlins/gremlins'
+
+import Field from './field/index.jsx'
+
+export default class SelectGremlin extends ValueGremlin {
+  shouldComponentUpdate (props) {
+    return (
+      super.shouldComponentUpdate(props) ||
+      (props.children !== this.props.children)
+    )
+  }
+
+  getClassName () {
+    return classnames(super.getClassName(), 'select')
+  }
+
+  handleChange = (value) => {
+    const {
+      onChange
+    } = this.props
+
+    onChange(value)
+  }
+
+  renderField () {
+    const id = this.getId()
+
+    const {
+      name,
+      value,
+      defaultValue,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef,
+      children
+    } = 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}>
+        {children}
+      </Field>
+    )
+  }
+}
+
+SelectGremlin.propTypes = {
+  ...ValueGremlin.propTypes,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ])
+}
+
+SelectGremlin.defaultProps = {
+  ...ValueGremlin.defaultProps
+}

package/src/gremlins/text/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/text/field')
+
+log('`gremlins` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

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

@@ -0,0 +1,58 @@
+/**
+ * TextField component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { ValueField } from '@modernpoacher/gremlins/components/field'
+
+export default class TextField extends ValueField {
+  getClassName () {
+    return classnames(super.getClassName(), 'text')
+  }
+
+  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='text'
+        ref={fieldRef}
+      />
+    )
+  }
+}
+
+TextField.propTypes = {
+  ...ValueField.propTypes
+}
+
+TextField.defaultProps = {
+  ...ValueField.defaultProps
+}

package/src/gremlins/text/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/text')
+
+log('`gremlins` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

package/src/gremlins/text/index.jsx

@@ -0,0 +1,65 @@
+/**
+ * TextGremlin component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { ValueGremlin } from '@modernpoacher/gremlins/gremlins'
+
+import Field from './field/index.jsx'
+
+export default class TextGremlin extends ValueGremlin {
+  getClassName () {
+    return classnames(super.getClassName(), 'text')
+  }
+
+  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}
+      />
+    )
+  }
+}
+
+TextGremlin.propTypes = {
+  ...ValueGremlin.propTypes
+}
+
+TextGremlin.defaultProps = {
+  ...ValueGremlin.defaultProps
+}

package/src/gremlins/textarea/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/textarea/field')
+
+log('`gremlins` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

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

@@ -0,0 +1,57 @@
+/**
+ * TextareaField component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { ValueField } from '@modernpoacher/gremlins/components/field'
+
+export default class TextareaField extends ValueField {
+  getClassName () {
+    return classnames(super.getClassName(), 'textarea')
+  }
+
+  render () {
+    const {
+      id,
+      name,
+      value,
+      defaultValue,
+      required,
+      disabled,
+      readOnly,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    const className = this.getClassName()
+
+    return (
+      <textarea
+        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}
+        ref={fieldRef}
+      />
+    )
+  }
+}
+
+TextareaField.propTypes = {
+  ...ValueField.propTypes
+}
+
+TextareaField.defaultProps = {
+  ...ValueField.defaultProps
+}

package/src/gremlins/textarea/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/textarea')
+
+log('`gremlins` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

package/src/gremlins/textarea/index.jsx

@@ -0,0 +1,65 @@
+/**
+ * TextareaGremlin component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import { ValueGremlin } from '@modernpoacher/gremlins/gremlins'
+
+import Field from './field/index.jsx'
+
+export default class TextareaGremlin extends ValueGremlin {
+  getClassName () {
+    return classnames(super.getClassName(), 'textarea')
+  }
+
+  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}
+      />
+    )
+  }
+}
+
+TextareaGremlin.propTypes = {
+  ...ValueGremlin.propTypes
+}
+
+TextareaGremlin.defaultProps = {
+  ...ValueGremlin.defaultProps
+}

package/src/index.cjs

@@ -0,0 +1,29 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/gremlins|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/gremlins')
+
+log('`gremlins` is awake')
+
+const CheckboxGremlin = require('./gremlins/checkbox/index.cjs')
+const EmailGremlin = require('./gremlins/email/index.cjs')
+const NumberGremlin = require('./gremlins/number/index.cjs')
+const PasswordGremlin = require('./gremlins/password/index.cjs')
+const RadioGremlin = require('./gremlins/radio/index.cjs')
+const SelectGremlin = require('./gremlins/select/index.cjs')
+const TextGremlin = require('./gremlins/text/index.cjs')
+const TextareaGremlin = require('./gremlins/textarea/index.cjs')
+
+module.exports.CheckboxGremlin = CheckboxGremlin
+module.exports.EmailGremlin = EmailGremlin
+module.exports.NumberGremlin = NumberGremlin
+module.exports.PasswordGremlin = PasswordGremlin
+module.exports.RadioGremlin = RadioGremlin
+module.exports.SelectGremlin = SelectGremlin
+module.exports.TextGremlin = TextGremlin
+module.exports.TextareaGremlin = TextareaGremlin

package/src/index.d.cts

@@ -0,0 +1,249 @@
+declare namespace FieldGremlinsTypes {
+  export type OnChangeType = () => void
+
+  export type AnswerDefinitionType = {
+    answer: {
+      value: string | string[]
+    }
+    changeAnswer: {
+      text: string
+      href: string
+      visuallyHiddenText?: string
+    }
+  }
+
+  export type ErrorDefinitionType = {
+    type: string,
+    uri: string,
+    params: {
+      expectedType: string
+    }
+  }
+
+  export type ComponentsType = {}
+
+  export type FieldChangeType = {
+    text: string,
+    href: string
+  }
+
+  export type FieldErrorType = {
+    text: string,
+    href: string
+  }
+}
+
+declare module '@modernpoacher/gremlins/gremlins' {
+  import React from 'react'
+
+  export type FieldGremlinProps = {
+    id: string,
+    name: string,
+    required: boolean,
+    disabled: boolean,
+    readOnly: boolean,
+    placeholder: string,
+    onChange: FieldGremlinsTypes.OnChangeType,
+    fieldRef: object
+  }
+
+  export class FieldGremlin extends React.Component<FieldGremlinProps> {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/checkbox' {
+  import { FieldGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+  export default class CheckboxGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/email' {
+  import { FieldGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+  export default class EmailGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/number' {
+  import { FieldGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+  export default class NumberGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/password' {
+  import { FieldGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+  export default class PasswordGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/radio' {
+  import { FieldGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+  export default class RadioGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/select' {
+  import { FieldGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+  export default class SelectGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/text' {
+  import { FieldGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+  export default class TextGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/textarea' {
+  import { FieldGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+  export default class TextareaGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/components/common/disabled' {
+  import React from 'react'
+
+  export default function Disabled(): React.JSX.Element
+}
+
+declare module '@modernpoacher/gremlins/components/common/readonly' {
+  import React from 'react'
+
+  export default function ReadOnly(): React.JSX.Element
+}
+
+declare module '@modernpoacher/gremlins/components/common/required' {
+  import React from 'react'
+
+  export default function Required(): React.JSX.Element
+}
+
+declare module '@modernpoacher/gremlins/components/common/text-content' {
+  import React from 'react'
+
+  export type TextContentProps = {
+    textContent: string
+  }
+
+  export default function TextContent(props: TextContentProps): React.JSX.Element
+}
+
+declare module '@modernpoacher/gremlins/components/field' {
+  import React from 'react'
+
+  export type FieldProps = {
+    id: string,
+    name: string,
+    required: boolean,
+    disabled: boolean,
+    readOnly: boolean,
+    tabIndex: number,
+    accessKey: string,
+    placeholder: string,
+    onChange: FieldGremlinsTypes.OnChangeType,
+    fieldRef: object
+  }
+
+  export default class Field extends React.Component<FieldProps> {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/checkbox/field' {
+  import Field from '@modernpoacher/gremlins/components/field'
+
+  export default class CheckboxField extends Field {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/email/field' {
+  import Field from '@modernpoacher/gremlins/components/field'
+
+  export default class EmailField extends Field {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/number/field' {
+  import Field from '@modernpoacher/gremlins/components/field'
+
+  export default class NumberField extends Field {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/password/field' {
+  import Field from '@modernpoacher/gremlins/components/field'
+
+  export default class PasswordField extends Field {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/radio/field' {
+  import Field from '@modernpoacher/gremlins/components/field'
+
+  export default class RadioField extends Field {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/select/field' {
+  import Field from '@modernpoacher/gremlins/components/field'
+
+  export default class SelectField extends Field {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/text/field' {
+  import Field from '@modernpoacher/gremlins/components/field'
+
+  export default class TextField extends Field {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/textarea/field' {
+  import Field from '@modernpoacher/gremlins/components/field'
+
+  export default class TextareaField extends Field {}
+}
+
+declare namespace GroupGremlinsTypes {
+  export type OnChangeType = () => void
+
+  export type ComponentsType = {}
+}
+
+declare module '@modernpoacher/gremlins/components/group' {
+  import React from 'react'
+
+  export type GroupProps = {
+    onChange: GroupGremlinsTypes.OnChangeType,
+    groupRef: object,
+    children: React.JSX.Element | React.JSX.Element[]
+  }
+
+  export default class Group extends React.Component<GroupProps> {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/fieldset/group' {
+  import Group from '@modernpoacher/gremlins/components/group'
+
+  export default class FieldsetGroup extends Group {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/fieldset' {
+  import { GroupGremlin as Gremlin } from '@modernpoacher/gremlins/gremlins'
+
+  export default class FieldsetGremlin extends Gremlin {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins' {
+  import React from 'react'
+
+  export type GroupGremlinProps = {
+    title: string,
+    onChange: GroupGremlinsTypes.OnChangeType,
+    groupRef: object,
+    children: React.JSX.Element | React.JSX.Element[]
+  }
+
+  export class GroupGremlin extends React.Component<GroupGremlinProps> {}
+}
+
+declare module '@modernpoacher/gremlins' {
+  export { default as CheckboxGremlin } from '@modernpoacher/gremlins/gremlins/checkbox'
+  export { default as EmailGremlin } from '@modernpoacher/gremlins/gremlins/email'
+  export { default as NumberGremlin } from '@modernpoacher/gremlins/gremlins/number'
+  export { default as PasswordGremlin } from '@modernpoacher/gremlins/gremlins/password'
+  export { default as RadioGremlin } from '@modernpoacher/gremlins/gremlins/radio'
+  export { default as SelectGremlin } from '@modernpoacher/gremlins/gremlins/select'
+  export { default as TextGremlin } from '@modernpoacher/gremlins/gremlins/text'
+  export { default as TextareaGremlin } from '@modernpoacher/gremlins/gremlins/textarea'
+  export { default as FieldsetGremlin } from '@modernpoacher/gremlins/gremlins/fieldset'
+}