@modernpoacher/gremlins 0.0.311 → 1.0.0

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

@@ -1,34 +1,71 @@
 /**
- * SelectGremlin component
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Gremlins.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Gremlins.Select.SelectProps} SelectProps
+ */
+
+/**
+ *  SelectGremlin component
  */
 import React from 'react'
 import PropTypes from 'prop-types'
 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/select/field'
 
-export default class SelectGremlin extends ValueGremlin {
-  shouldComponentUpdate (props, state) {
-    return (
-      super.shouldComponentUpdate(props) ||
-      (props.multiple !== this.props.multiple) ||
-      (props.children !== this.props.children)
-    )
-  }
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
 
+/**
+ *  @extends {ValueGremlin<ValueProps & SelectProps>}
+ */
+export default class SelectGremlin extends ValueGremlin {
   getClassName () {
     return classnames(super.getClassName(), 'select')
   }
 
+  /**
+   *  @param {SelectProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    const {
+      value,
+      defaultValue,
+      multiple,
+      children,
+      ...superProps
+    } = props
+
+    return (
+      /**
+       *  `value` may be `string` or `string[]`
+       */
+      (value !== this.props.value) ||
+      /**
+       *  `defaultValue` may be `string` or `string[]`
+       */
+      (defaultValue !== this.props.defaultValue) ||
+      super.shouldComponentUpdate(superProps) ||
+      (multiple !== this.props.multiple) ||
+      (children !== this.props.children)
+    )
+  }
+
+  /**
+   *  @param {string | string[]} [value]
+   */
   handleChange = (value) => {
     const {
-      onChange = DEFAULT_HANDLE_CHANGE
+      onChange = DEFAULT_HANDLE_EVENT
     } = this.props
 
     onChange(value)
@@ -54,8 +91,8 @@ export default class SelectGremlin extends ValueGremlin {
 
     return (
       <Field
-        id={id}
         name={name}
+        id={id}
         value={value}
         defaultValue={defaultValue}
         required={required}

package/src/{gremlins → js/gremlins}/text/field/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/text/field')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Field
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Field

package/src/js/gremlins/text/field/index.d.cts

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

package/src/js/gremlins/text/field/index.d.mts

@@ -0,0 +1,14 @@
+declare module '#gremlins/gremlins/text/field' {
+  import {
+    ValueField
+  } from '#gremlins/components/field'
+
+  export type TextProps = GremlinsTypes.Components.Field.Text.TextProps
+
+  export default class TextField<P extends TextProps> extends ValueField<P> {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/text/field' {
+  export { default } from '#gremlins/gremlins/text/field'
+  export * from '#gremlins/gremlins/text/field'
+}

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

@@ -0,0 +1,83 @@
+/**
+ *  @typedef {GremlinsTypes.Components.Field.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Components.Field.Text.TextProps} TextProps
+ */
+
+/**
+ *  TextField component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  ValueField,
+  toInputValue
+} from '#gremlins/components/field'
+
+/**
+ *  @extends {ValueField<ValueProps & TextProps>}
+ */
+export default class TextField extends ValueField {
+  getClassName () {
+    return classnames(super.getClassName(), 'text')
+  }
+
+  render () {
+    const {
+      name,
+      id,
+      defaultValue,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    const className = this.getClassName()
+
+    if (defaultValue === undefined) {
+      const {
+        value
+      } = this.props
+
+      return (
+        <input
+          name={name}
+          id={id}
+          value={toInputValue(value)}
+          required={required}
+          disabled={disabled}
+          readOnly={readOnly}
+          tabIndex={tabIndex}
+          accessKey={accessKey}
+          placeholder={placeholder}
+          onChange={this.handleChange}
+          className={className}
+          type='text'
+          ref={fieldRef}
+        />
+      )
+    }
+
+    return (
+      <input
+        name={name}
+        id={id}
+        defaultValue={String(defaultValue)}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={this.handleChange}
+        className={className}
+        type='text'
+        ref={fieldRef}
+      />
+    )
+  }
+}

package/src/{gremlins → js/gremlins}/text/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/text')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Text
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Text

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

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

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

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

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

@@ -1,25 +1,42 @@
 /**
- * TextGremlin component
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Gremlins.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Gremlins.Password.PasswordProps} PasswordProps
+ */
+
+/**
+ *  TextGremlin 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/text/field'
+
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
 
+/**
+ *  @extends {ValueGremlin<ValueProps & PasswordProps>}
+ */
 export default class TextGremlin extends ValueGremlin {
   getClassName () {
     return classnames(super.getClassName(), 'text')
   }
 
+  /**
+   *  @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 TextGremlin extends ValueGremlin {
 
     return (
       <Field
-        id={id}
         name={name}
+        id={id}
         value={value}
         defaultValue={defaultValue}
         required={required}
@@ -59,7 +76,3 @@ export default class TextGremlin extends ValueGremlin {
     )
   }
 }
-
-TextGremlin.propTypes = {
-  ...ValueGremlin.propTypes
-}

package/src/{gremlins → js/gremlins}/textarea/field/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/textarea/field')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Field
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Field

package/src/js/gremlins/textarea/field/index.d.cts

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

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

@@ -0,0 +1,18 @@
+declare module '#gremlins/gremlins/textarea/field' {
+  import type { ChangeEvent } from 'react'
+
+  import {
+    ValueField
+  } from '#gremlins/components/field'
+
+  export type TextareaProps = GremlinsTypes.Components.Field.Textarea.TextareaProps
+
+  export default class TextareaField<P extends TextareaProps> extends ValueField<P> {
+    handleChange (event: ChangeEvent<HTMLTextAreaElement>): void
+  }
+}
+
+declare module '@modernpoacher/gremlins/gremlins/textarea/field' {
+  export { default } from '#gremlins/gremlins/textarea/field'
+  export * from '#gremlins/gremlins/textarea/field'
+}

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

@@ -0,0 +1,81 @@
+/**
+ *  @typedef {GremlinsTypes.Components.Field.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Components.Field.Textarea.TextareaProps} TextareaProps
+ */
+
+/**
+ *  TextareaField component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  ValueField,
+  toInputValue
+} from '#gremlins/components/field'
+
+/**
+ *  @extends {ValueField<ValueProps & TextareaProps>}
+ */
+export default class TextareaField extends ValueField {
+  getClassName () {
+    return classnames(super.getClassName(), 'textarea')
+  }
+
+  render () {
+    const {
+      name,
+      id,
+      defaultValue,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    const className = this.getClassName()
+
+    if (defaultValue === undefined) {
+      const {
+        value
+      } = this.props
+
+      return (
+        <textarea
+          name={name}
+          id={id}
+          value={toInputValue(value)}
+          required={required}
+          disabled={disabled}
+          readOnly={readOnly}
+          tabIndex={tabIndex}
+          accessKey={accessKey}
+          placeholder={placeholder}
+          onChange={this.handleChange}
+          className={className}
+          ref={fieldRef}
+        />
+      )
+    }
+
+    return (
+      <textarea
+        name={name}
+        id={id}
+        defaultValue={String(defaultValue)}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={this.handleChange}
+        className={className}
+        ref={fieldRef}
+      />
+    )
+  }
+}

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

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/textarea')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Textarea
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Textarea

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

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

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'
+}