@modernpoacher/gremlins 0.0.311 → 1.0.1

package/src/{components → js/components}/common/required/index.cjs

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

package/src/js/components/common/required/index.d.cts

@@ -0,0 +1 @@
+export { default } from '#gremlins/components/common/required'

package/src/js/components/common/required/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const REQUIRED = String.fromCharCode(42)
+
+export default function Required () {
+  return (
+    <span className='is-required'>
+      {REQUIRED}
+    </span>
+  )
+}

package/src/{components → js/components}/common/text-content/index.cjs

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

package/src/js/components/common/text-content/index.d.cts

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

package/src/{components → js/components}/common/text-content/index.d.mts

@@ -1,9 +1,7 @@
 declare module '#gremlins/components/common/text-content' {
   import type React from 'react'
 
-  export interface TextContentProps {
-    textContent: string
-  }
+  export type TextContentProps = GremlinsTypes.Components.Common.TextContent.TextContentProps
 
   export default function TextContent (props: TextContentProps): React.JSX.Element | null
 }

package/src/{components → js/components}/common/text-content/index.jsx

@@ -1,15 +1,16 @@
 /**
- * TextContent component
- *
- * @typedef {import('@modernpoacher/gremlins/components/common/text-content').TextContentProps} TextContentProps
+ *  @typedef {GremlinsTypes.Components.Common.TextContent.TextContentProps} TextContentProps
  */
 
+/**
+ *  TextContent component
+ */
 import React from 'react'
 import PropTypes from 'prop-types'
 
 /**
- * @param {TextContentProps}
- * @returns {React.JSX.Element | null}
+ *  @param {TextContentProps} props
+ *  @returns {React.JSX.Element | null}
  */
 export default function TextContent ({ textContent }) {
   if (textContent) {

package/src/{components → js/components}/field/index.cjs

@@ -10,7 +10,15 @@ const log = debug('@modernpoacher/gremlins/components/field')
 
 log('`gremlins` is awake')
 
+const {
+  ValueField,
+  CheckField,
+  toInputValue
+} = require('./index.jsx')
+
 /**
- *  Exports default, etc
+ *  Exports ValueField and CheckField
  */
-module.exports = require('./index.jsx')
+module.exports.ValueField = ValueField
+module.exports.CheckField = CheckField
+module.exports.toInputValue = toInputValue

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

@@ -0,0 +1 @@
+export * from '#gremlins/components/field'

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

@@ -0,0 +1,24 @@
+declare module '#gremlins/components/field' {
+  import type { MouseEvent } from 'react'
+
+  import Field from '#gremlins/super/components/field'
+
+  export function toInputValue (value: unknown): string
+
+  export type ValueProps = GremlinsTypes.Components.Field.ValueProps
+  export type CheckProps = GremlinsTypes.Components.Field.CheckProps
+
+  export class ValueField<P extends ValueProps> extends Field<P> {
+    shouldComponentUpdate (props: ValueProps): boolean
+  }
+
+  export class CheckField<P extends CheckProps> extends Field<P> {
+    shouldComponentUpdate (props: CheckProps): boolean
+
+    handleClick (event: MouseEvent<HTMLInputElement>): void
+  }
+}
+
+declare module '@modernpoacher/gremlins/components/field' {
+  export * from '#gremlins/components/field'
+}

package/src/js/components/field/index.jsx

@@ -0,0 +1,98 @@
+/**
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Super.Components.Field.FieldProps} FieldProps
+ *  @typedef {GremlinsTypes.Components.Field.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Components.Field.CheckProps} CheckProps
+ */
+
+/**
+ *  Field component
+ */
+import PropTypes from 'prop-types'
+
+import Field from '#gremlins/super/components/field'
+
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
+
+/**
+ *  @param {unknown} value
+ *  @returns {string}
+ */
+export function toInputValue (value) {
+  return (value === undefined) ? '' : String(value)
+}
+
+/**
+ *  ValueField component
+ *
+ *  @extends {Field<FieldProps & ValueProps>}
+ */
+export class ValueField extends Field {}
+
+ValueField.propTypes = {
+  ...Field.propTypes,
+  defaultValue: PropTypes.string
+}
+
+/**
+ *  CheckField component
+ *
+ *  @extends {Field<FieldProps & CheckProps>}
+ */
+export class CheckField extends Field {
+  /**
+   *  @param {CheckProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    const {
+      checked,
+      defaultChecked,
+      onClick,
+      ...superProps
+    } = props
+
+    return (
+      (checked !== this.props.checked) ||
+      (defaultChecked !== this.props.defaultChecked) ||
+      super.shouldComponentUpdate(superProps) ||
+      (onClick !== this.props.onClick)
+    )
+  }
+
+  /**
+   *  @param {{ target: { value?: string, checked?: boolean } }} event
+   *  @returns {void}
+   */
+  handleChange = ({ target: { value, checked } }) => {
+    const {
+      onChange = DEFAULT_HANDLE_EVENT
+    } = this.props
+
+    onChange(value, checked)
+  }
+
+  /**
+   *  @param {{ target: { value?: string, checked?: boolean } }} event
+   *  @returns {void}
+   */
+  handleClick = ({ target: { value, checked } }) => {
+    const {
+      onClick = DEFAULT_HANDLE_EVENT
+    } = this.props
+
+    onClick(value, checked)
+  }
+}
+
+CheckField.propTypes = {
+  ...Field.propTypes,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  onClick: PropTypes.func
+}

package/src/{components → js/components}/group/index.cjs

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

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

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

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

@@ -0,0 +1,9 @@
+declare module '#gremlins/components/group' {
+  export { default } from '#gremlins/super/components/group'
+  export * from '#gremlins/super/components/group'
+}
+
+declare module '@modernpoacher/gremlins/components/group' {
+  export { default } from '#gremlins/components/group'
+  export * from '#gremlins/components/group'
+}

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

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

package/src/js/components/index.cjs

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

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

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

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

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

package/src/js/components/index.mjs

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

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

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/checkbox/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/checkbox/field/index.d.cts

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

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

@@ -0,0 +1,14 @@
+declare module '#gremlins/gremlins/checkbox/field' {
+  import {
+    CheckField
+  } from '#gremlins/components/field'
+
+  export type CheckboxProps = GremlinsTypes.Components.Field.Checkbox.CheckboxProps
+
+  export default class CheckboxField<P extends CheckboxProps> extends CheckField<P> {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/checkbox/field' {
+  export { default } from '#gremlins/gremlins/checkbox/field'
+  export * from '#gremlins/gremlins/checkbox/field'
+}

package/src/{gremlins → js/gremlins}/checkbox/field/index.jsx

@@ -1,12 +1,23 @@
 /**
- * CheckboxField component
+ *  @typedef {GremlinsTypes.Components.Field.CheckProps} CheckProps
+ *  @typedef {GremlinsTypes.Components.Field.Checkbox.CheckboxProps} CheckboxProps
+ */
+
+/**
+ *  CheckboxField component
  */
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import { CheckField } from '#gremlins/components/field'
+import {
+  CheckField,
+  toInputValue
+} from '#gremlins/components/field'
 
+/**
+ *  @extends {CheckField<CheckProps & CheckboxProps>}
+ */
 export default class CheckboxField extends CheckField {
   getClassName () {
     return classnames(super.getClassName(), 'checkbox')
@@ -14,10 +25,10 @@ export default class CheckboxField extends CheckField {
 
   render () {
     const {
-      checked,
-      id,
       name,
+      id,
       value,
+      checked,
       required = false,
       disabled = false,
       readOnly = false,
@@ -32,10 +43,10 @@ export default class CheckboxField extends CheckField {
       return (
         <>
           <input
-            checked={checked}
-            id={id}
             name={name}
-            value={value}
+            id={id}
+            value={toInputValue(value)}
+            checked={checked}
             required={required}
             disabled={disabled}
             readOnly={readOnly}
@@ -61,10 +72,10 @@ export default class CheckboxField extends CheckField {
     return (
       <>
         <input
-          defaultChecked={defaultChecked}
-          id={id}
           name={name}
-          value={value}
+          id={id}
+          value={toInputValue(value)}
+          defaultChecked={defaultChecked}
           required={required}
           disabled={disabled}
           readOnly={readOnly}

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

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

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

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

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

@@ -0,0 +1,24 @@
+declare module '#gremlins/gremlins/checkbox' {
+  import {
+    CheckGremlin
+  } from '#gremlins/gremlins'
+
+  export type CheckboxProps = GremlinsTypes.Gremlins.Checkbox.CheckboxProps
+
+  export default class CheckboxGremlin<P extends CheckboxProps> extends CheckGremlin<P> {
+    handleChange (
+      value?: string | string[],
+      checked?: boolean
+    ): void
+
+    handleClick (
+      value?: string | string[],
+      checked?: boolean
+    ): void
+  }
+}
+
+declare module '@modernpoacher/gremlins/gremlins/checkbox' {
+  export { default } from '#gremlins/gremlins/checkbox'
+  export * from '#gremlins/gremlins/checkbox'
+}

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

@@ -1,47 +1,60 @@
 /**
- * CheckboxGremlin component
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Gremlins.CheckProps} CheckProps
+ *  @typedef {GremlinsTypes.Gremlins.Checkbox.CheckboxProps} CheckboxProps
+ */
+
+/**
+ *  CheckboxGremlin component
  */
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import { CheckGremlin } from '#gremlins/gremlins'
-
 import {
-  DEFAULT_HANDLE_CHANGE,
-  DEFAULT_HANDLE_CLICK
-} from '#gremlins/common'
+  CheckGremlin
+} from '#gremlins/gremlins'
 
-import Field from './field/index.jsx'
+import Field from '#gremlins/gremlins/checkbox/field'
 
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
+
+/**
+ *  @extends {CheckGremlin<CheckProps & CheckboxProps>}
+ */
 export default class CheckboxGremlin extends CheckGremlin {
   getClassName () {
     return classnames(super.getClassName(), 'checkbox')
   }
 
+  /**
+   *  @param {string | string[]} [value]
+   *  @param {boolean} [checked]
+   */
   handleChange = (value, checked) => {
     const {
-      onChange = DEFAULT_HANDLE_CHANGE
+      onChange = DEFAULT_HANDLE_EVENT
     } = this.props
 
     onChange(value, checked)
   }
 
+  /**
+   *  @param {string | string[]} [value]
+   *  @param {boolean} [checked]
+   */
   handleClick = (value, checked) => {
     const {
-      onClick = DEFAULT_HANDLE_CLICK
+      onClick = DEFAULT_HANDLE_EVENT
     } = this.props
 
     onClick(value, checked)
   }
 
-  shouldComponentUpdate (props, state) {
-    return (
-      super.shouldComponentUpdate(props) ||
-      (props.value !== this.props.value)
-    )
-  }
-
   renderField () {
     const id = this.getId()
 
@@ -61,8 +74,8 @@ export default class CheckboxGremlin extends CheckGremlin {
 
     return (
       <Field
-        id={id}
         name={name}
+        id={id}
         value={value}
         checked={checked}
         defaultChecked={defaultChecked}
@@ -89,8 +102,3 @@ export default class CheckboxGremlin extends CheckGremlin {
     )
   }
 }
-
-CheckboxGremlin.propTypes = {
-  ...CheckGremlin.propTypes,
-  value: PropTypes.string.isRequired
-}

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

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/email/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/email/field/index.d.cts

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

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

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

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

@@ -0,0 +1,83 @@
+/**
+ *  @typedef {GremlinsTypes.Components.Field.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Components.Field.Email.EmailProps} EmailProps
+ */
+
+/**
+ *  EmailField component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  ValueField,
+  toInputValue
+} from '#gremlins/components/field'
+
+/**
+ *  @extends {ValueField<ValueProps & EmailProps>}
+ */
+export default class EmailField extends ValueField {
+  getClassName () {
+    return classnames(super.getClassName(), 'email')
+  }
+
+  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='email'
+          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='email'
+        ref={fieldRef}
+      />
+    )
+  }
+}