@modernpoacher/gremlins 0.0.310 → 1.0.0

package/src/js/gremlins/textarea/index.d.mts

@@ -0,0 +1,18 @@
+declare module '#gremlins/gremlins/textarea' {
+  import {
+    ValueGremlin
+  } from '#gremlins/gremlins'
+
+  export type TextareaProps = GremlinsTypes.Gremlins.Textarea.TextareaProps
+
+  export default class TextareaGremlin<P extends TextareaProps> extends ValueGremlin<P> {
+    handleChange (
+      value?: string | string[]
+    ): void
+  }
+}
+
+declare module '@modernpoacher/gremlins/gremlins/textarea' {
+  export { default } from '#gremlins/gremlins/textarea'
+  export * from '#gremlins/gremlins/textarea'
+}

package/src/{gremlins → js/gremlins}/textarea/index.jsx

@@ -1,25 +1,42 @@
 /**
- * TextareaGremlin component
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Gremlins.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Gremlins.Textarea.TextareaProps} TextareaProps
+ */
+
+/**
+ *  TextareaGremlin component
  */
 import React from 'react'
 import classnames from 'classnames'
 
-import { ValueGremlin } from '#gremlins/gremlins'
-
 import {
-  DEFAULT_HANDLE_CHANGE
-} from '#gremlins/common'
+  ValueGremlin
+} from '#gremlins/gremlins'
 
-import Field from './field/index.jsx'
+import Field from '#gremlins/gremlins/textarea/field'
+
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
 
+/**
+ *  @extends {ValueGremlin<ValueProps & TextareaProps>}
+ */
 export default class TextareaGremlin extends ValueGremlin {
   getClassName () {
     return classnames(super.getClassName(), 'textarea')
   }
 
+  /**
+   *  @param {string | string[]} [value]
+   */
   handleChange = (value) => {
     const {
-      onChange = DEFAULT_HANDLE_CHANGE
+      onChange = DEFAULT_HANDLE_EVENT
     } = this.props
 
     onChange(value)
@@ -43,8 +60,8 @@ export default class TextareaGremlin extends ValueGremlin {
 
     return (
       <Field
-        id={id}
         name={name}
+        id={id}
         value={value}
         defaultValue={defaultValue}
         required={required}
@@ -59,7 +76,3 @@ export default class TextareaGremlin extends ValueGremlin {
     )
   }
 }
-
-TextareaGremlin.propTypes = {
-  ...ValueGremlin.propTypes
-}

package/src/js/super/components/field/index.cjs

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

package/src/js/super/components/field/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#gremlins/super/components/field'
+export * from '#gremlins/super/components/field'

package/src/js/super/components/field/index.d.mts

@@ -0,0 +1,23 @@
+declare module '#gremlins/super/components/field' {
+  import React from 'react'
+  import type {
+    ChangeEvent
+  } from 'react'
+
+  export type FieldProps = GremlinsTypes.Super.Components.Field.FieldProps
+
+  export default class Field<P extends FieldProps> extends React.Component<P> {
+    static propTypes: object
+
+    getClassName (): string
+
+    shouldComponentUpdate (props: FieldProps): boolean
+
+    handleChange (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement> | ChangeEvent<HTMLSelectElement>): void
+  }
+}
+
+declare module '@modernpoacher/gremlins/super/components/field' {
+  export { default } from '#gremlins/super/components/field'
+  export * from '#gremlins/super/components/field'
+}

package/src/{components → js/super/components}/field/index.jsx

@@ -1,22 +1,50 @@
 /**
- * Field component
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Super.Components.Field.FieldProps} FieldProps
+ */
+
+/**
+ *  Field component
  */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import {
-  DEFAULT_HANDLE_CHANGE,
-  DEFAULT_HANDLE_CLICK
-} from '#gremlins/common'
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
 
+/**
+ *  @extends {Component<FieldProps>}
+ */
 export default class Field extends Component {
   getClassName () {
     return 'input'
   }
 
-  shouldComponentUpdate (props, state) {
+  /**
+   *  @param {{ target: { value?: string } }} event
+   *  @returns {void}
+   */
+  handleChange = ({ target: { value } }) => {
+    const {
+      onChange = DEFAULT_HANDLE_EVENT
+    } = this.props
+
+    onChange(value)
+  }
+
+  /**
+   *  @param {FieldProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
     return (
+      (props.name !== this.props.name) ||
       (props.id !== this.props.id) ||
+      (props.value !== this.props.value) ||
       (props.required !== this.props.required) ||
       (props.disabled !== this.props.disabled) ||
       (props.readOnly !== this.props.readOnly) ||
@@ -29,7 +57,9 @@ export default class Field extends Component {
 
   render () {
     const {
+      name,
       id,
+      value,
       required = false,
       disabled = false,
       readOnly = false,
@@ -41,13 +71,16 @@ export default class Field extends Component {
 
     return (
       <input
+        name={name}
         id={id}
+        value={value}
         required={required}
         disabled={disabled}
         readOnly={readOnly}
         tabIndex={tabIndex}
         accessKey={accessKey}
         placeholder={placeholder}
+        onChange={this.handleChange}
         className={this.getClassName()}
         ref={fieldRef}
       />
@@ -56,8 +89,9 @@ export default class Field extends Component {
 }
 
 Field.propTypes = {
-  id: PropTypes.string,
   name: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  value: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   readOnly: PropTypes.bool,
@@ -66,85 +100,8 @@ Field.propTypes = {
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
   fieldRef: PropTypes.shape({
-    current: PropTypes.shape().isRequired
+    current: PropTypes.shape({
+      value: PropTypes.string
+    })
   })
 }
-
-Field.defaultProps = {
-  required: false,
-  disabled: false,
-  readOnly: false,
-  onChange: DEFAULT_HANDLE_CHANGE
-}
-
-/**
- * ValueField component
- */
-export class ValueField extends Field {
-  shouldComponentUpdate (props, state) {
-    return (
-      super.shouldComponentUpdate(props, state) ||
-      (props.value !== this.props.value)
-    )
-  }
-
-  handleChange = ({ target: { value } }) => {
-    const {
-      onChange = DEFAULT_HANDLE_CHANGE
-    } = 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, state) {
-    return (
-      super.shouldComponentUpdate(props, state) ||
-      (props.value !== this.props.value) ||
-      (props.checked !== this.props.checked) ||
-      (props.onClick !== this.props.onClick)
-    )
-  }
-
-  handleClick = ({ target: { value, checked } }) => {
-    const {
-      onClick = DEFAULT_HANDLE_CLICK
-    } = this.props
-
-    onClick(value, checked)
-  }
-
-  handleChange = ({ target: { value, checked } }) => {
-    const {
-      onChange = DEFAULT_HANDLE_CHANGE
-    } = this.props
-
-    onChange(value, checked)
-  }
-}
-
-CheckField.propTypes = {
-  ...Field.propTypes,
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  onClick: PropTypes.func
-}
-
-CheckField.defaultProps = {
-  ...Field.defaultProps,
-  onClick: DEFAULT_HANDLE_CLICK
-}

package/src/js/super/components/group/index.cjs

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

package/src/js/super/components/group/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#gremlins/super/components/group'
+export * from '#gremlins/super/components/group'

package/src/js/super/components/group/index.d.mts

@@ -0,0 +1,18 @@
+declare module '#gremlins/super/components/group' {
+  import React from 'react'
+
+  export type GroupProps = GremlinsTypes.Super.Components.Group.GroupProps
+
+  export default class Group<P extends GroupProps> extends React.Component<P> {
+    static propTypes: object
+
+    getClassName (): string
+
+    shouldComponentUpdate (props: GroupProps): boolean
+  }
+}
+
+declare module '@modernpoacher/gremlins/super/components/group' {
+  export { default } from '#gremlins/super/components/group'
+  export * from '#gremlins/super/components/group'
+}

package/src/js/super/components/group/index.jsx

@@ -0,0 +1,59 @@
+/**
+ *  @typedef {GremlinsTypes.Super.Components.Group.GroupProps} GroupProps
+ */
+
+/**
+ *  Group component
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class Group extends Component {
+  getClassName () {
+    return 'group'
+  }
+
+  /**
+   *  @param {GroupProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.children !== this.props.children)
+    )
+  }
+
+  render () {
+    const {
+      children
+    } = this.props
+
+    if (children) {
+      const {
+        groupRef
+      } = this.props
+
+      return (
+        <fieldset
+          className={this.getClassName()}
+          ref={groupRef}>
+          {children}
+        </fieldset>
+      )
+    }
+
+    return null
+  }
+}
+
+Group.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ]),
+  groupRef: PropTypes.shape({
+    current: PropTypes.shape({})
+  })
+}

package/src/js/super/components/index.cjs

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

package/src/js/super/components/index.d.cts

@@ -0,0 +1,2 @@
+export { default as Field } from '#gremlins/super/components/field'
+export { default as Group } from '#gremlins/super/components/group'

package/src/js/super/components/index.d.mts

@@ -0,0 +1,2 @@
+export { default as Field } from '#gremlins/super/components/field'
+export { default as Group } from '#gremlins/super/components/group'

package/src/js/super/components/index.mjs

@@ -0,0 +1,8 @@
+import debug from 'debug'
+
+const log = debug('@modernpoacher/gremlins/super/components')
+
+log('`gremlins` is awake')
+
+export { default as Field } from './field/index.cjs'
+export { default as Group } from './group/index.cjs'

package/src/js/super/gremlins/index.cjs

@@ -0,0 +1,22 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets|@modernpoacher\/gremlins)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/gremlins/super/gremlins')
+
+log('`gremlins` is awake')
+
+const {
+  FieldGremlin,
+  GroupGremlin
+} = require('./index.jsx')
+
+/**
+ *  Exports `FieldGremlin` and `GroupGremlin`
+ */
+module.exports.FieldGremlin = FieldGremlin
+module.exports.GroupGremlin = GroupGremlin

package/src/js/super/gremlins/index.d.cts

@@ -0,0 +1,4 @@
+export {
+  FieldGremlin,
+  GroupGremlin
+} from '#gremlins/super/gremlins'

package/src/js/super/gremlins/index.d.mts

@@ -0,0 +1,36 @@
+declare module '#gremlins/super/gremlins' {
+  import React from 'react'
+
+  export type FieldGremlinProps = GremlinsTypes.Super.Gremlins.FieldGremlinProps
+
+  export class FieldGremlin<P extends FieldGremlinProps> extends React.Component<P> {
+    static propTypes: Record<PropertyKey, unknown>
+
+    getClassName (): string
+
+    getId (): string
+
+    shouldComponentUpdate (props: FieldGremlinProps): boolean
+
+    renderField (): React.JSX.Element | null
+  }
+
+  export type GroupGremlinProps = GremlinsTypes.Super.Gremlins.GroupGremlinProps
+
+  export class GroupGremlin<P extends GroupGremlinProps> extends React.Component<P> {
+    static propTypes: object
+
+    getClassName (): string
+
+    shouldComponentUpdate (props: GroupGremlinProps): boolean
+
+    renderGroup (): React.JSX.Element | null
+  }
+}
+
+declare module '@modernpoacher/gremlins/super/gremlins' {
+  export {
+    FieldGremlin,
+    GroupGremlin
+  } from '#gremlins/super/gremlins'
+}